Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Design

Let's consider purely technical aspects of icon creation

1. Lines, slopes

One of the vital elements of the image is the outline of the object, i.e. solid linear marking, which separates the object from the background. When designing normal-sized images, the designer rarely cares about highlighting of objects with additional outlines. This is not needed because of the scale: even non-contrasted objects do not mix into a one. Pixel graphics is other story. Two variants are available: either object and background colors have to be from different sides of the color chart, or the object must be separated from the background by visible outlines and shadows. I will discuss lines deeper.

If we return more to the big-size graphics, we see that in order to highlight contours, we can use any (including the most complex) angles, Bezier splines and edges. Anyway, the line will appear ideal due to anti-aliasing. When decreasing the image dimensions to the small icon size, situation changes dramatically. When each single pixel is equally important and can change the whole appearance of the composition, anti-aliasing is just unreasonable. It means that you should consider the possible line slopes.

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

For instance, a 18-degree angle contains many small 3-pixel lines combined with a 1-pixel downshift:
Lines and pixels

This is how almost every line looks like. Basic element with joining and another primary element. Unfortunately, not each angle creates lines that look look neet and not annoying.

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

It can be easily seen which line is more appealing. The 25-degree slope makes a line containing equal 2-pixel primary elements. The 20-degree angle has a primary element containing of three lines: 3-pixel, 3-pixel and 2-pixel. The slope is more complicated, therefore, if not combined by additional visual effects, it creates a feeling of untidiness: the primary elements have contrast which is too obvious to hide from the human eye.

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

For example:

It is the time to move to another issue. In the previous paragraph, I intentionally defined slopes with primary elements of 1, 2 and 3 pixels as correct. Such small lines, especially when a large number of them is combined, look like solid. But what do we see if we increase the primary elements to 10 or 20 pixels?

Here is an example:
Low quality line

It can be obviously seen that the line loses its solidness. It is not a single line now; it is a combination of different lines, located near each other. Rarely any designer wants its creation to look inconsistent. So, we have the second rule: if you use minimal slopes, which produse long primary elements, it has to be justified and employed with maximum caution.

And, finally, the third aspect I have to tell about lines. I already wrote that the primary element should be as simple as possible.

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

In the first case the primary element is a 2-pixel line. In the second case, it consists of three elements: 3-pixel, 2-pixel and 1-pixel. The same slope but the image is different. The complex primary element produced the line untidy.

This examples can be produced for about any slope, so in your projects, try to simplify everything.

2. Color

It can be stated without an exaggeration that the color is the main aspect of your work; improper or poorly balanced colors can kill even the best idea. What can we write about the color in miniature graphics?

First, there is a certain rule: if the image looks poor when converted to monochrome, it means the colors that were chosen are incorrect. This rule is valid not exclusively for icons but for the whole graphic design.

Second, you will be unable to apply safe RGB. Of course, you can select internet 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 "flat" color. The more consistently colored areas without blurring and jumps your project has, the more clear it looks. Pictograms are too tiny and the excess usage of special effects makes the picture look messy.

Fourth, gradients. This is a wonderful instrument which can improve the appearance of any composition. Other than visuals, gradients are a perfect solution to abolish the "broken line" effect (lines with too long primary elements). But be careful when applying them since too many gradients can kill the plain color, and be unable to fit into the gif palette.

Fifth, shadows and flares. All rules for using shadows and highlights in icon making are totally the same to the aspects of the overall graphic design. The only ine I would like to mention: draw everything by hand. Don't use effects, make all shades and flares in a separate layer and then edit the opacity. When using effects, you rarely know what the result will be. It is bad when you can't control the making of a project. It is awful if you don't control it when creating icons.

And, finally, sixth. Nuancing is the main aspect of pictogram design, which largely affects the visual appearance of the project. If the green human eye in the icon has the size of 1 pixel, increase the color saturation. For instance, instead of 0, 131, 159 make 71, 195, 242. It is indifferent that the human eye never has such color; in the first case it will look like a gray dot, and in the second example it will really be a blue eye.

Thoroughly control the picture, do not allow the optical illusions to spoil your design. It is OK if something is not consistent technically, but the entire picture must be flawless.

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

3. Text

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

The resolution of letters becomes the main issue as opposed to their fineness. Almost in all cases, only if not the letters are the main part of the project, the text size has to be decreased to the largest extent possible.

In general, virtually any graphic company has its own font with little characters. This font can be created in a couple of hours. You can search the web and make your own library of very interesting fonts. Primarily, I would recommend you to get the DS Pixel and Seventen 7Vedi website and the complete series of fonts from the Lakmus Lab website.

If you don't want a new font, little sizes of Arial and Verdana may do. As a last resort, you can create the needed characters by hand.

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 font into an incomprehensible set of pixels.

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

Popular Icon editors
Icon Perfect Toolbar Icons is a collection of stock icons for use in business and private applications and web-pages. All icons have a bright color palette, sleek and well-rounded borders. A variety of formats and sizes is available.

Icon Beautify your financial or market-oriented program with instantly accessible professional Business Toolbar Icons. Over two hundred of wonderfully designed and neatly crafted icons picturing different financial objects and symbols are provided.

Icon IconLover is our pick. It allows you to design and edit all kinds of images required in the software development cycle, including icons, static and moving cursors and interface parts - all these kinds of graphics can now be designed in a single program.

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

Icon ICL-Icon Extractor will scan your images, archives, directories and all local drives 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 great icons for Windows Vista. Easily replace, alter and save icons that Windows uses to display typical objects, folders, files.