Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Design

Let's discuss strictly technical aspects of icon design

1. Lines, angles

One of the most important elements of the image is the outline of the object, i.e. solid line, which separates the object from the rest of the image. When creating normal-sized graphics, the artist rarely thinks about highlighting of objects with additional outlines. This is unnecessary because of the scale: even low contrast objects do not blend into a single whole. Pixel graphics is different. Two solutions are possible: either object and background colors have to be from opposite sides of the color wheel, or the foreground should be separated from the background by contrast outlines and shadows. I will dwell on lines in more detail.

If we return more to the big-size images, we see that in order to highlight edges, we can use any (including the most complicated) angles, Bezier splines and borders. Anyway, the line will appear perfect due to anti-aliasing. When decreasing the graphic dimensions to the size of an icon, situation changes dramatically. When each particular pixel is vitally valuable and can change the whole look of the composition, anti-aliasing is just unreasonable. It comes that you have to consider the possible line slopes.

The angle you select for the line, specifies the step for this line. Because every line consists of primary elements, the union of which determines its accuracy and visual appeal.

For instance, a 18-degree angle contains 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 creates lines that look look attractive and not annoying.

For example, here are 25 and 20-degree slopes:

It can be easily seen which line is more attractive. The 25-degree angle produses a line containing equal 2-pixel basic elements. The 20-degree angle has a basic element containing of three parts: 3-pixel, 3-pixel and 2-pixel. The slope is more complex, thus, if not combined by additional visual effects, it creates a feeling of untidiness: the basic elements have contrast which is too strong to hide from the human sight.

Here we can come to the first rule. The most "correct" angles have to make as plain basic elements as possible. Thus, the perfect slopes are 0 and 90 degrees. In them, 1-pixel basic elements are joined without any shift and form even lines. Less ideal are slopes which form primary elements of 1, 2, 3 pixel with 1-pixel downshift. Of course, the lines can not be even, but the human brain will process the image and present to the user what you meant to show to him. Also, the following slopes can be considered acceptable (but at a stretch): angles with primary elements consisting of different lines shifted by more than 1 pixel.

For example:

It is the time to touch another issue. In the previous paragraph, I intentionally defined angles with primary elements of 1, 2 and 3 pixels as acceptable. Such small lines, especially when a great amount of them is joined, look like solid. But what do we see if we increase the basic elements to 10 or 20 pixels?

Here is an example:
Low quality line

It can be obviously noticed that the line doesn't have solidness. It is not a single line now; it is a set of different lines, situated near each other. Hardly any artist wants its composition to look inconsistent. So, we have the second conclusion: if you use minimal slopes, which make long basic elements, it must be reasoned and used with great attention.

And, finally, the last aspect I wanted to mention about lines. I did write that the primary element has to be as plain as possible.

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

In the first case the primary element is a 2-pixel line. In the second picture, it consists of three lines: 3-pixel, 2-pixel and 1-pixel. The same angle but the image is different. The complicated basic element made the line untidy.

This examples can be made for about any slope, so in your works, try to simplify as much as possible.

2. Color

It can be said without an overstatement that the color is the main aspect of your work; not suiting or badly balanced colors can kill even the most creative idea. What can we write about the color in icon graphics?

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

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

Third, try to enlarge the portion of "plain" color. The more evenly colored parts without blurring and jumps your project has, the more clear it looks. Icons are too small and the over usage of special filters makes the picture look messy.

Fourth, gradients. This is a wonderful instrument which can change the appearance of any picture. Besides visuals, gradients are a perfect solution to get rid of the "broken line" effect (lines with too long primary elements). But be attentive when applying them since too much gradients can ruin the plain color, and be unable to fit into the gif palette.

Fifth, shadows and highlights. All aspects of applying shades and flares in icon design are completely the same to the aspects of the general graphic design. The only thing I would like to note: draw everything yourself. Don't apply effects, make all shades and highlights in a different layer and after that edit its transparency. When applying filters, you rarely can predict what the result will be. It is unfavorable when you can't control the process of creating of a project. It is worse if you can't control it when creating icons.

And, lastly, sixth. Tinting is the main detail of icon design, which largely results the visual look of the image. When the green human eye in the image is sized 1 pixel, increase the color saturation. 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 example it will appear like a gray dot, but in the second one it will definitely be a green eye.

completely control the picture, do not allow the optical illusions to ruin your work. It is OK if objects is not perfect technically, but the entire composition must be flawless.

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

3. Text

If I wrote about something bigger than icon design, this chapter wouldn't fit into a whole book, but the size of compositions restricts fonts too.

The resolution of letters is the leading aspect as opposed to their fineness. Almost in any case, unless the letters are the primary part of the project, the font size has to be decreased to the greatest extent possible.

In principle, virtually any graphic company has its exclusive font with small characters. This font can be crafted in several hours. You can browse the web and make your own library of very interesting fonts. Primarily, I would recommend you to download the DS Pixel and Seventen 7Vedi website and the whole series of fonts from the Lakmus Lab website.

If you don't need a new font, tiny typesizes of Arial and Verdana will work. As a last option, you can create the necessary characters yourself.

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



Second, letters should not use anti-aliasing. It turns the text into an incomprehensible mixture of pixels.

Though, there are no rules without exceptions and the 5-point Arial appears rather understandable.

Popular Icon editors
Icon Perfect Toolbar Icons is a set of stock icons for use in commercial and private applications and web-pages. The icons have a balanced color scheme, sleek and well-rounded edges. A variety of formats and sizes is available.

Icon Beautify your accounting or business-oriented software with instantly accessible professional Business Toolbar Icons. Over two hundred of professionally designed and neatly crafted icons representing various financial objects and symbols are provided.

Icon IconLover is our choice. It allows you to design and alter all kinds of images needed in the software development cycle, including icons, simple and moving cursors and interface parts - all these types of images can now be designed in a single program.

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

Icon ICL-Icon Extractor will search your images, archives, directories and all local drives for icons. It can get icons from the Internet and edit Windows icons.

Icon Perfect Icon creates icon from any image file (PNG, JPEG, BMP, TIFF, WMF and more) in few seconds. Create great icons for Windows XP. Easily replace, colorize and save icons that Windows uses to show typical objects, folders, files.