Website Icons

  • by

Icons save the space and look fresh. Icons are the quick answer to complex questions:

  • How to make it more beautiful?
  • How can we brand this?
  • How to make it more fun?

We love icons. Until we start to get confused in them.

Icons are different: on products, PCs, in lists, on buttons, for the web and applications, for iOS and Android. Icons are on toolbars, can be signed and unsigned, stylized and standardized, in color or monochrome, in iconic fonts, PNG or SVG files. There are many free and paid sets of icons, vector and raster, flat and large, and if you write down the rules for working with them, you need a notebook thicker. But be careful. Incomplete icons litter the interface and the scientific community has long shown: people remember the values of only a small number of icons. Can you remember the meaning of all these icons? I don’t.

Here’s a great example from Apple Mail for OS X: how many of these icons do you recognize without a signature?

What do we see in this example? That only a designer who made those icons can figure out what these actually mean.

Here are the same icons, but with the text:

The text explains icons. With it, the interface becomes more convenient. Because of this, some heartless people argue that “the best icon is text.” Logically, the correct text saves from confusion. So why do not we just use text without icons?
Functionally “pure text” design is clear, but something breaks down when you remove images from the interface. Life leaves the interface and it stops to be fresh and cheerful.

Simple Rules

Do not rush to add icons! If something is wrong with the design if it looks like it does not work as planned. Icons will not fix the poor structure of the site! Add them at the very end. A good information architecture puts the right words in the right context. Work out the rational part before moving to the emotional one.

The icon indicates a certain section or function. It is a kind of word that conveys a simple and understandable meaning. The meaning of the message depends on the context. Even the most beautiful icon will be useless if the word is picked up incomprehensible or not corresponding to the context. Before selecting an icon, ask yourself: What word will it denote? Is this the right word? Clear? Will it work in this context? The icon can hide many different concepts. Words in the context are not so plastic. Unlike icons, they always have the same meaning.

When your structure is ready, it’s time to start adding icons. Follow the simple rule: add the minimum required icons, but not less. Treat icons with maximum attention. Their improvement can take up all of your time. They should be recognizable, should clearly illustrate the concept they represent, and should work in context with other icons and concepts. Icons are adjectives and adverbs in the text. Their removal will not turn your text into a literary masterpiece. Remove unnecessary, look for suitable, replace vague and pretentious formulations with precise and concise ones.