Icon design represents one of the most important trends in design. The number of web sites providing icons is increased daily, in part driven by the growing number of applications, all of which featuring interfaces and therefore icons. Today we will talk about the basic principles of creating icons, their types and trends in this area.

A computer icon is a pictogram displayed on a computer screen and used to navigate a computer system or mobile device (Wiki).

What are icons for? Maybe we could do with just text symbols?

I do not think so… and here is why:

• A human remembers pictures better than text.
• An icon, in contrast to the inscriptions, may have characteristics that help to find it quickly on screen. These characteristics are the shape and color. Inscriptions do not differ from each other by shape and color. In order to distinguish one inscription from another, you need to read them. In the case with icons, just one glance is enough.
• Icons help to save screen space. The size of an interface icon is usually smaller than one of an inscription.

What are the basic principles you should follow when creating icons?

• If you create a set of icons, they should have the same style. Icons should not be considered in isolation from the environment where they will be located. That means that you need to take into consideration interface design, website design, and so on.
• Icons of the set should be equally illuminated. That means that reflections and shadows must correspond to the same light source.
• If you create multiple sizes of the same icon, design it from scratch. This is especially true for small sizes 16×16 and 22×22. If you just reduce the large icon to the desired size, ignoring this rule, it will transform into a dirty spot. When designing an icon for a smaller size, reduce the number of objects, do not use shadow and small glares. If a large icon looks like a 3D object, draw it in the frontal plane for the small size.
• When you create small icons in vector editors use the pixel-perfect technique. Objects must lie exactly on the lines of the pixel grid. Otherwise, anti-aliasing blurs the boundaries of the image and the icon will not be clear.
• Icons should not contain unnecessary elements as it muddles the viewer’s perceptions.
• Take into consideration cultural and national differences of users. Some symbols in different cultures can be interpreted in different ways. If you do not exactly know the audience, try to use global symbols that are understandable across all parts of the globe.
• Icons in the set must be clearly differentiated among themselves. If the user will be confused with the icons due to ambiguity or similarities, then the whole point of their creation will be lost. In the first place an icon should be a “visual anchor”.

What are the different types of icons?

Let’s take a look at some examples of the main types of icons. I tried to pick the best examples, in order for them to become the source of your inspiration…

Glossy

Lovely website icons

Simple / Clean

Basic set

Realistic

Olimp-006

Front perspective

App icon

3D

Pos Machine Icons

Stroke

STROKE General

Monochrome

Ecqlipse 2

Handmade

Red Little Shoes Icon set

Pixel perfect

Vento Icon Set

Perspective

Prostor_icons

What are the trends of icon design today?

In addition to the basic principles of creating icons, you have to follow the latest trends in this area. There are some obvious trends that I have listed below:

Simple / Clean

Lately people gave been giving preferences for clean and minimalist interface. The most commonly used are calm pastel color palettes and subtle texture of background.

Free Minimal Icon Set

Vintage

While this style remains popular today, but interest in this style is waning. I think in a couple of years it will go out of fashion.

50 amazingly designed vintage and retro icons

Large icons (Realistic)

Resolution of some mobile devices has already approached HD quality (300 dpi). This fact allows you to create larger icons with more details. Therefore, there is a tendency in increase the size of icons. For example, the size 24 x 24 px is considered small for today.

Canon 400D + lens 17-85mm

Rounded corners

Icons with rounded edges look more friendly and reliable.

Round Theme Icons

Social bookmarking icons

This is probably the most popular type of icons today. Internet evolves at a staggering pace. For example, today there are about 555 million websites and 300 million of them appeared in the past year of 2011. Related to this, the development of social networks is given special attention.

Vellum Social Icon Set

This article is an introduction to the series of tutorials, in which we will create icons of various types in Adobe Illustrator.

---

About the author

My name is Iaroslav Lazunov, I am a graphic designer from Zhytomyr, Ukraine. I am glad that I finally found the job in my life that I can share my knowledge and experiments with you in my tutorials.

Follow me on Twitter, Facebook or visit my blog Vectorboom.