Icon Design: Basic principles explained.

I know that each graphic designer at least once in his life is faced with an icon design assignment. Of course you can start designing icons based on your own experience or intuition, but the result could be surprising, and this surprise is not always pleasant.

It is recommended that you learn some basic principles before approaching icon design. All the pitfalls of icon design are briefly described in this article. I hope this article helps you.

Metaphors:

Recognize that there is a specific idea and function behind every icon. This requires that you find the right metaphor that best shows the meaning of icon and interface function behind it.

You could use your imagination and attempt to make up a metaphor, but often a good imagination is not enough. In a case where you are not familiar with a particular metaphor we recommend to use the best inspirational tool—Google Images

For example, we were awarded a project based around manufacturing. The icons were to be used in auto industry software.

The metaphors were described with some weird words like “rivet tong”, “robot manipulator”, “welding spot”, and so on. We searched Google Images for all of these words and found a lot of inspirational images for the icons. Customer was very happy with results.

Icon design metaphors

Our colleagues from Turbomilk have a nice article posted in their blog about Google Images.

In addition to Google Images, you can use one of the popular icon search engines. These sites allow you to easily search for icons and metaphors using search index and tags. Many icons have multiple examples under different metaphors and styles. These sources are also very inspirational.

Here is a list of the most popular icon search engines:

If you want more information about some of these search engines please read The Best Icon Search Engines and Features for Designers.

Style

In most cases the client wants the designer to create icons in one of the existing styles to fit OS requirements. That’s why we split our portfolio into several categories: Windows Vista, Windows XP, iPhone, MacOS and Custom style icons. Sometimes a client wants us to create icons in custom and unique styles as well.

To create custom style icons you must recognize four simple rules:

Design icons that will ideally fit the interface environment where they will be used. This means you should not create cartoonish icons for enterprise application and vice versa.
Choose appropriate colors and create basic swatches and gradients, this will save time over the course of the project.
Use consistent lighting, shadows, and perspective
Sketch down the shape of basic elements to define the unique style.

Let's illustrate these rules now. Our client ordered icons for a funny IM which allows users to send personal drawings to each other. Their mascot for this software was the only inspiration.

Custom icon style

At first, we decided to create all icons in a style of mascot. It was cartoonish, funny, and smooth. Then we picked up the basic color and defined the lighting and shapes from the provided mascot. As a result we were able to create uniquely styled icons that fit the interface ideally.

But when you need to create icons in existing style like Windows Vista or iPhone icons I recommend to strictly follow the platform guidelines.

In the guidelines you can find the detailed information about icons style, preferred colors, lighting, shadows and much more. Here’s the list of icon guidelines for different platforms (some of them are extremely rare):

Tools

To design effective and professional looking icons you must have some tools at hand. Here are my recommendations:

Use pencil and paper for sketching out the icons. This is a really great tool! Look at what comes out as a final product from these sketches:

Icon design sketches

Use vector editor to design icons. We recommend you to use vector editor that allows previewing the icon in pixels. It can be Adobe Illustrator (our favorite) or Xara Xtreme (used by many Russian icon designers).

We use Adobe Illustrator with Pixel Preview mode on and it’s fantastic to create pixel-precise icons. Check the difference.

Pixel preview tool

Here’s another great article from Mezzoblue—Icon Design: Anti-Aliasing where the anti-aliasing problem is described in details.

Adobe Photoshop can also be used as an effective icon design tool. It is extremely handy when you need to create 16x16 pixels small icons. You simply take the pixels and put them in the right places.

In Photoshop you can operate with both the pixels and vector shapes. There are a lot of examples and tutorials on the web about creating photorealistic big icons in Photoshop.

And finally, you need to use a specific tool to create .ico files. There are a lot of such programs but I will recommend you only the TOP 3:

Axialis IconWorkshop—Powerful icon editor for Windows and MacOS.
Icon Builder—Filter for use with Adobe Photoshop or Fireworks that makes creating icons for either the Macintosh or Windows operating systems a snap.
GifMovieGear—Easily create vibrant and professional quality Windows icons.

Start drawing

Now you have learned all basic principles of icon design, and you are ready to start drawing icons. Let’s illustrate the icon design process on the graphic example.

Task: We need to create application icon for MacOS called Planner.

Process:

We find out what icon sizes we need. As it is MacOS application icon we need to create all sizes from large 512x512 to small 16x16 icons.
Then go to Apple Human Interface Guidelines to know more about style and start sketching.
Try to illustrate as many metaphors and icon concepts as possible. Here are the sketches:

In the first version we tried a lot of metaphors: “plane” theme, “site layout plan” and “war plan”. The client accepted the “war plan” idea with a little remark. He wanted to put a tin soldier on the plan.
Then we re-created this sketch in Illustrator in large size. This size (512x512) will be the departure point for reducing the icon to smaller sizes.

Here’s 256x256 version because 512x512 is too large for this article.
The next step is creating smaller sizes of a large icon. Some large sizes like 128x128 and 96x96 pixels can be created from 512x512 icon without complex adjustments and redrawing. But smaller sizes must be re-created from the scratch.

We made our War Plan icon plain; reduce the details and removed the tin soldier. 32x32 and 16x16 versions were done in Photoshop with shapes and small pixel adjustments from scratch.
The icon is done! You want you can save it to any MacOS icon format using Axialis IconWorkshop or IconBuilder.