Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Design

Let's discuss purely technical aspects of icon design

1. Lines, angles

One of the vital elements of the composition is the outline of the object, i.e. rough border, which separates the object from the rest of the image. When working with normal-sized graphics, the artist occasionally thinks about defining objects with additional lines. This is not needed because of the size: even low contrast objects do not mix into a one. Icon graphics is other story. Two variants are possible: either foreground and background colors have to be from different sides of the color wheel, or the foreground should be separated from the background by visible lines and shadows. I would like to discuss lines deeper.

If we think again to the big-size images, we can note that in order to define contours, we can use all (even the most complex) angles, Bezier curves and borders. In any case, the line will appear ideal due to anti-aliasing. When decreasing the image scale to the small icon size, situation changes greatly. When every particular pixel is equally valuable and can change the overall appearance of the composition, anti-aliasing is just unreasonable. It comes that you have to think about the possible line slopes.

The slope you select for the line, determines the step of this line. This means that each line consists of basic elements, the union of which defines its neatness and esthetics.

For example, a 18-degree angle consists of many tiny 3-pixel lines connected using a 1-pixel downshift:
Lines and pixels

This is how nearly each line looks like. Primary element followed by joining followed by another basic element. However, not every slope makes the line look attractive and not annoying.

For example, look at 25 and 20-degree slopes:

It can be easily seen which line is more attractive. The 25-degree angle produses a line consisting of even 2-pixel basic elements. The 20-degree slope has a basic element consisting of three parts: 3-pixel, 3-pixel and 2-pixel. The angle is more complicated, therefore, when not combined by other visual effects, it brings a feeling of messiness: the primary elements have contrast which is too strong to hide from the human sight.

Now we can see the first conclusion. The most "correct" angles must make as simple primary elements as they can. therefore, the ideal angles are 0 and 90 degrees. In them, 1-pixel primary elements are joined without any shift and produce smooth lines. Less perfect are slopes which form basic elements of 1, 2, 3 pixel with 1-pixel downshift. Surely, the lines will not be smooth, but the human brain will process the image and present to the user what you intended to show to him. Also, the following slopes can be considered correct (but at a stretch): slopes with basic elements consisting of different lines shifted by more than 1 pixel.

For example:

Now we can touch another issue. In the previous paragraph, I intentionally defined slopes with primary elements of 1, 2 and 3 pixels as acceptable. Such tiny lines, especially when a great number of them is joined, appear as a single whole. But what do we see if we change the primary elements to 10 or 20 pixels?

Here is an example:
Low quality line

It can be clearly seen that the line loses its integrity. It is not a single line now; it is a combination of different lines, situated near one another. Hardly any designer wants its composition to look that way. Thus, we have the second rule: if you use small slopes, which make long primary elements, it has to be justified and employed with maximum attention.

And, finally, the last thing I have to mention about lines. I did write that the basic element has to be as plain as it can.

For instance, a 25-degree slope can be drawn in the two (sure more of them are possible) following ways:
25-degree angles

In the first case the basic element is a 2-pixel line. In the other case, it consists of three elements: 3-pixel, 2-pixel and 1-pixel. The same slope but the look is different. The complicated basic element made the line messy.

This examples can be produced for almost any angle, so in your works, make sure to simplify as much as possible.

2. Color

It can be stated without an exaggeration that the color is the main element of your work; not suiting or badly balanced colors can ruin even the most creative idea. What can we say about the color in miniature graphics?

First, there is a clear rule: if the image looks poor when reduced to grayscale, then the colors that were selected are wrong. This rule is valid not exclusively for icons but for the entire graphic design.

Second, you will be unable to use common RGB. Sure, you can select GIF colors only, but this ties you hand and foot. Gradients, shadows, blending and many other tricks will not be available to you.

Third, try to enlarge the areas of "plain" color. The more evenly colored areas without blurring and jumps your project has, the more clear it appears. Icons are too tiny and the excess usage of special filters makes the image look messy.

Fourth, gradients. This is a great instrument which can change the appearance of any project. Other than esthetics, gradients are a perfect way to abolish the "broken line" look (lines with too long basic elements). But be careful when applying them since too many gradients can ruin the plain color, and be unable to fit into the gif palette.

Fifth, shadows and highlights. All rules for applying shades and flares in icon creation are totally identical to the rules of the overall graphic design. The only thing I would like to note: create everything by hand. Don't apply filters, make all shades and flares in a separate layer and after that edit the opacity. If applying filters, you rarely know what will it look like. It is bad when you don't control the process of creating of a composition. It is awful if you don't control it when creating miniatures.

And, finally, sixth. Tinting is the main detail of icon design, which largely affects the esthetic appearance of the project. If the blue human eye in the image is sized 1 pixel, increase the color intensiveness. For example, instead of 0, 131, 159 choose 71, 195, 242. It doesn't matter that the human eye never has this color; in the first case it will look like a gray dot, but in the second case it will really be a green eye.

completely control the picture, do not let the optical tricks to ruin your design. It is OK if something is not perfect from the technical point of view, but the whole composition must be perfect.

As an example, I pictured the packet of juice located in front of me. The image has plain color, gradients with broken lines, shades and flares and nuances.

3. Font

If I wrote about something bigger than pictogram design, this part wouldn't fit into a whole book, but the resolution of images ;limits fonts too.

The size of symbols becomes the leading issue as opposed to their beauty. Almost in any case, unless the letters are the main part of the composition, the text size has to be reduced to the greatest extent possible.

In general, virtually any design studio has its exclusive font with little characters. This font can be made in a couple of hours. You can search the internet and make your own library of very nice fonts. First of all, I would recommend you to download the DS Pixel and Seventen 7Vedi website as well as the entire set of fonts from the Lakmus Lab website.

If you don't need a new font, small typesizes of Arial and Verdana may do. As a last option, you can create the needed characters by hand.

There are not many rules there. First, characters cannot be less than 5 pixels high or less than 3 pixels wide.



Second, letters cannot use anti-aliasing. It transforms the text into an unrecognizable mixture of pixels.

However, there are no rules without exceptions and the 5-point Arial looks perfectly readable.

Popular Icon editors
Icon Perfect Toolbar Icons is a set of pre-made icons for use in commercial and personal programs and websites. All icons have a bright color palette, sleek and well-rounded edges. A variety of formats and resolutions is available.

Icon Enhance your financial or business-oriented software with readily available professional Business Toolbar Icons. More than two hundred of professionally designed and carefully created icons picturing different financial objects and currencies are provided.

Icon IconLover is our choice. It enables you to design and alter all kinds of graphics needed in the software development cycle, including icons, static and animated cursors and interface parts - all these kinds of graphics can now be designed in a single application.

Icon Icon Processor is an icon converter. It makes icons from your pictures. It's possible to turn 256-color images into True Color icons and XP icons.

Icon ICL-Icon Extractor will search your files, archives, directories and all local disks for icons. It can get icons from the Internet and customize Windows icons.

Icon Perfect Icon creates icon from any graphic file (PNG, JPEG, BMP, TIFF, WMF and more) in few seconds. Create stylish icons for Windows Vista. Easily replace, alter and save icons that Windows uses to show standard objects, directories, files.