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?
Short answer:
However, it is not that easy. Some little tempters make icons complicated, unrecognizable, and messy. Let’s check them not to be seduced.
Here’s the list of major temptations icon designers fall into.
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.
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:
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!
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.
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.
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
WOKONEO, a puzzle book for kids that blends playful learning with creativity, featuring Icons8’s Color…
Find the perfect gift for graphic designers! Explore everything from ergonomic tools to creative resources,…
Here’s a case study from UNIKO™ on how premium website design drives growth. See how…
Here’s a case study from our friends at Red Collar on how they reimagined CSSDA…
Tired of struggling to get the perfect profile picture? I tested everything from bad photoshoots…
Check the diverse sets of Christmas clipart and illustrations from the Icons8 library.
This website uses cookies.