in Icon design

Icons – The Only Language Everyone Understands

Icons, which are sometimes called pictograms, are those little symbols you (un)consciously interact with every day. They are those somewhat recognisable signs that you click on when working on your computer, your smart phone, your car, your television or any other home appliance  —  even your toaster!

The word icon comes from the Greek word eikōn, which means an image or likeness that represents something else. But people communicated through the use of symbols long before they ever relied on written language.

Icons are understood independently of words, language or culture. That’s why they have an important role in international trade and transit. Just imagine searching for a toilet in an airport with all the signs in a foreign language!

toilet_signs

The first wave of modern icons was triggered by the 1964 Olympic Games in Tokyo, followed by the most famous Olympic pictogram set for the Games in Munich in 1972. Since then, the Olympic icons have been reinterpreted and modernised every four years.

Olympic pictogram set designed by Otl Aicher (1972)

Olympic pictogram set designed by Otl Aicher (1972)

Icons Have a Universal Communicative Power

A good icon not only looks good, but also breaches multilingual or cultural differences. In other words, a good icon can be understood anywhere in the world. Rather than providing multiple translations, an icon’s metaphor  —  if it’s widely recognisable and has unmistakable semantics  —  can provide information that is independent of any language.

A metaphor (or as some may call it, the heart of an icon) is a representation associating one object or meaning with another. While some metaphors have become so iconic  that they carry unmistakable associations, others have faded away or changed over time.

Microsoft Word 95 User Interface

Microsoft Word 95 User Interface

An example of this is the metaphor for Save. For many years, a floppy disk served as an unquestionable metaphor for this action. And while the older generation will still remember the floppy disk, the younger never used this “ancient” storage medium. Based on a survey from TeachHub, only 14 percent of kids knew what the “Save” icon represented. This is because real objects can change into something completely different over time, and icons are no exception.

Modern pictograms used for “Save” (by Picons)

Modern pictograms used for “Save” (by Picons)

Not only has the “Save” icon changed, but it almost went obsolete. Nowadays, as everything is in the cloud and automatically synced and saved, there is no longer any need to store data on physical devices. Something similar may happen to the rotary dial, the CD or the archive box, although these icons will stay in use for many more years.

Icons Only Work When They Are Recognisable

An icon can be a representation of an object from the real world, a fantasy motive, an action, a sound, a gesture, a state or even a feeling. It can be as simple as a basic shape, or as complex as a realistic 3D object.

Users have to decode the metaphor (the “secret” meaning of the icon) without using text labels. There is no need to write additional captions beside symbols like home/house, cogwheels, pencils, users, etc.  —  everyone understands that. Familiarity, after all, is what makes an icon functional.

How to find the right metaphor?

This is the first part of the icon design process. While plenty of icons use the same standardised and immediately obvious metaphors, others require a lot of research, sketching, user testing and so on. For me, the first step is to conduct a Google Image Search, followed by a search for icons on IconFinder. If none of the conventional metaphors fit the context, you have to explore on your own and start from scratch. During the design process, always ask yourself, “is it recognisable?”.

view_icon_alternativesIf an icon is not obvious enough, then it’s the best not to use it. Don’t be afraid to use plain text rather than icons, especially if the metaphor is too abstract or doesn’t make a clear interpretation.

And how about colour?

Colour can help reinforce the metaphor of an icon, changing its importance or distinguishing one state from another. While it helps to provide more context, you cannot solely rely on colour to communicate a message.

using_colors_with_icons

Make Icons Simple

As with graphic design in general, there is no difference with icons. Reducing details, but still keeping enough to be easily recognised at any size, is one of the hardest and most important parts of icon design. When you ask how much detail you need to make an icon recognisable, the answer should always be: the bare minimum. Abstraction is what makes icons beautiful and easy to recognise. Always go for simplicity!

But there should be some level of care involved as well. The degree of abstractness should be in balance with the familiarity of the metaphor. The better it is known, the more abstract the metaphor can be. So, the recipe should be: as little detail as possible, but still enough to be recognisable.

Example of making an icon: the complexity of an real object has to be reduced from the unnecessary clutter

Example of making an icon: the complexity of an real object has to be reduced from the unnecessary clutter

What’s Next?

The images drawn by primitive people developed over hundreds of years into sign systems, reaching their apogee in the modern-day pictogram (R. Abdullah & R. Hübner, 2006)

If the first icons had the simple task of conveying general information regarding public transport, today they carry a much deeper and emotional message, guiding users through all kind of interfaces, raising attention and communicating feelings.

Today’s icons aren’t boring, but fun. Even the simplest forms have a great deal of style. Icons have an individual note and can even communicate the values of a brand.

It looks like icons have reached their apogee and importance in graphic design. But, when you think you’ve peaked, new paths will open up for exploration. Let’s see what the future brings!

Iconfinder wants to thank Gasper Vidovic, a graphic designer, web enthusiast & lawyer(!), for this excellent article. You can find Gasper’s icons on Iconfinder, too.

Write a Comment

Comment