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
Sweeping list of Halloween’s visual symbols enriched with some fun facts to know. Icons, illustrations,…
Halloween is almost here. It's time to think about costumes. If you're looking for something…
Create spooky, funny, or creative face swaps for your Halloween celebration with Face Swapper.
Design a stunning book cover with the Illustration Generator. This guide helps you brainstorm, craft…
Why is my printed logo not as vibrant as the digital one? Why do I…
Get an all-in-one UI kit to build a professional fintech landing page. It includes everything…
This website uses cookies.