How to make icons that make sense
We use icons to convey ideas and actions in their most instantly recognizable terms, to save on space and lengthy explanations, and, if we’re being totally honest, because they look cool. But creating an icon that distills an object’s “iconic” features into something meaningful, functional and memorable is no easy task — especially when it needs to be as impactful at 256 pixels as it does at 32.
99% Invisible’s Roman Mars recently gave a TED Talk on the principles of flag design (vexillology for the crossword enthusiasts) that we think can be applied to all forms of design, including and perhaps especially iconography. With a little help from the North American Vexillological Association’s Five Basic Principles of Flag Design, here are some tips for making icons that make sense.
1. Keep it simple
To design a “kickass flag,” Roman recommends drawing a one-by-one-and-a-half inch rectangle on a piece of paper and designing within these dimensions — the idea being that a flag of this size held 15 inches from your eye looks about the same as a three-by-five foot flag a hundred feet away. The same approach can be applied when creating an icon. Overambitious, complex designs might look great in Photoshop, but view them on an iPhone and they become an indecipherable mess.
2. Use meaningful symbolism
The purpose of an icon is to represent a concept with a graphical symbol. Good icons don’t necessarily need to be self-evident, but they should be clear, memorable and enduring (just ask Scott Hanselman). Take the System Preferences icon on Mac OS X. It’s a detailed silver cog, which, on some level, we all associate with The Way Things Work. By contrast, VLC uses a traffic cone — not exactly the most logical choice for an open-source, cross-platform media player.
3. Use 2-3 basic colours
There are essentially two things that form the base of an icon: shape and colour. While we can think of a few “iconic icons” that feature polychromatic colour schemes (Google Chrome and Instagram come to mind) most effective icons are fairly restrained in their use of colour. More than three colours are hard to distinguish at 32 pixels and make the icon unnecessarily complicated.
4. No lettering or seals
This one probably pertains more to flags than icons (have you seen the flag of San Francisco?), but there are some significant disadvantages to using text in icons, too. First, text limits your reach to users who can read the language. Second, text is almost impossible to read in a small icon. Third, when you use text in app icons, the name of the app is also displayed, so the text is needlessly repeated.
And as for seals: do we really need more rising phoenixes?
5. Be distinctive or be related
As HBO’s Silicon Valley pointed out, the logos of top tech companies look strangely similar: “Twitter: lowercase ‘t’, Google: lowercase ‘g’, Facebook: lowercase ‘f’.” Hey, sometimes the good designs are taken. Instead of fixating on originality, it can be useful to research existing icons and adapt them to your own purpose and style. Using recognizable symbols, shapes and colours can create connectedness and meaning with a lot more ease than an original design.