All great icons are alike, all bad icons have their own drama.
We don’t pay attention to an icon which is truly great.
Search icon is just perfect: simple, recognizable, and we all know the meaning.
But we’ll notice if something is wrong:
It’s hard to believe these icons were created for a real product. A great one, by the way. So, what makes a good icon?
How to Make a Good Icon
Short answer:
- Keep it simple
- Make icons in a single context (a single app, website, etc.) different from each other.
However, it is not that easy. Some little tempters make icons complicated, unrecognizable, and messy. Let’s check them not to be seduced.
6 Temptations of an Icon Designer
Here’s the list of major temptations icon designers fall into.
Temptation #1: Explain each aspect of functionality
We generally use the printer icon to print one copy of a document with a default printer. But imagine you have no experience of printing documents: this icon might equally be used to direct you to specify printer’s settings or finding and adding a printer. It’s a classic example from Alan Cooper’s About Face 3 – and it never gets old.
When you’re thinking up the metaphor, you try to make it as explanatory as possible. But let’s face the facts: in most cases, it’s hardly possible to make it explanatory. Even when you’re dealing with simple icons, you often can’t tell for sure what they do.
For example, in this toolbar in Outlook 2010, multiple envelopes are bad for legibility.
Temptation #2: Add three or more objects
Adding more than two objects to an icon is asking for trouble. Two simple objects are most often ok even for 16×16, though you should always be asking yourself if you can reduce the number of objects to increase readability.
Try explaining just one aspect of the functionality the icon stands for. For example, a “network administrator” icon, draw a guy in nerdy glasses; don’t add a wrench and computer connected to a network.
This setup icon is a good example of excessive objects on an icon. We already know the software is usually installed on computers. A CD box would be enough:
Temptation #3: Be too specific
It’s about symbols, not picturing the reality:
This icon is great, and you can roughly see the idea, but hey, don’t use this stuff in a biz app!
Temptation #4: Use branding
You’re strongly tempted to use corporate colors for your set to please your boss or client. Also, it looks so consistent. Don’t!
Bringing brand identity to icons results in reduced readability in 99% of cases. Bringing icons to the same style makes icons uniform. Use OS icon guidelines instead (check examples for Windows 10 and Material).
Above, you can almost see a marketing department asking for branding, can’t you?
Another extreme example: these somewhat cute icons turn into find a difference game.
Temptation #5: Use the text on the icon
Don’t write what the icon does on the icon. There are hints and text labels to tell what it does.
See, the text next to each icon describes what the icon stands for. Instead of repeating this information, the icon designer should attempt to make the icons different, so that experienced clients can use them more quickly.
Unfortunately, sometimes text is necessary. In this case, try reducing it and adding some shape:
These currency icons use country symbols instead of just currency tickers EUR, CAD, and HKG.
Temptation #6: Add facial detail
Don’t draw the facial detail; use empty faces. If the face carries too much information, it distracts from the icon’s meaning.
This classic cartoon by Bidstrup shows how much you can read from a face:
Summing up, don’t be seduced to transform your icon into a piece of art: its purpose is to serve users, aka to be clear, legible, and as simple as possible. Cheers!
About the author: Ivan Braun, UX designer, founder of Icons8
Title image credits to Dmitri Litvinov
To learn more about icons, check our articles about types and functions of icons , guide to icons sizes and formats and use of big data in relevant icon search
