I have been working on icons recently. This is the first time I’m responsible for designing icons.  So I have been learning design principles related icons. In the last post, I wrote about the three types of icons/signs and theory of semiotics. This helped me to identify what to use as the icon. The next step was creating the actual icon. I always imagined creating icons as a very artistic activity and requires a mastery of an illustrating tool. But I learned that by following some basic principles I can create the right icons that are simple to create.


Show only the required details

Icons help users recognize a class of object. This AIGA icon for example can be instantly recognized as a bus. The icon does not show many details like rear view mirrors or grills. But they are not going to make the user recognizer the icon any faster. In fact it may increase the time to recognize since the user has to process more information. So once I selected the object to be used as an icon, reduce the object to its most basic elements. This reduced the amount of work I had to do.


Design icon in the size they will be used

I wanted icons at 16x16px. Our team a had purchased a library of vector icons, which could be scaled to any size. But when I reduced them to 16×16 px many details of the icons got distorted and the icons were not legible. So I created bitmap icons at 16x16px, either from a blank slate or retouching the vector icon at the required size. Vector icons don’t always get distorted, but I think there is a range of sizes beyond which a icon looks distorted.


Contrast across icons

It is important that icons are distinguishable from each other especially if icons are going to be shown next to each other. Otherwise the user would take longer time to recognize the icons, which defeats the whole purpose of icons. Whenever I have to design for contrast, I refer to Bertin’s retinal variables: Hue, Shape, Texture, Orientation, Size & Value.

Since all icons have to be similarly sized, I could not use size and position for showing contrast. But using only shape, hue, and orientation I could show sufficient contrast across the icons. I didn’t use texture, since it would be harder to perceive texture at small sizes and also it needs more illustrating skill.

Google’s icons are a good example of  icons having contrast across hue, shape and orientation. I like how the icons for Blogs and Realtime have the same shape, but different hue and orientation. It captures their conceptual similarity and differences beautifully.

One thought on “Three Principles for Designing Simple Icons

    Leave a reply


    <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>