Understanding Icons that Work


This post was originally published on April 26, 2016.

There are many things that could be considered an “icon,” so let’s start with a clear definition. This definition comes from Scott McCloud in “Understanding Comics: The Invisible Art”: An icon is any image used to represent a person, place, thing, or idea.

Why do we use Icons?

In a way, we’ve always used icons. The first forms of written communication were symbolic imagery painted on cave walls. A more recent example are Egyptian hieroglyphs. As far as we can tell, humans have been communicating with images long before they communicated using words. (And in written form, even words themselves are made up of icons—26 icons, in the English language—arranged in various ways to convey different meanings.)

Icons are important because images communicate faster and broader than language. Images are received information, meaning you need no formal education to understand their meaning. Words, however, are perceived information: you need to have studied and learned a language as a prerequisite to understanding their meaning.

Since images have the ability to communicate beyond language, this makes them incredibly useful for signage. No matter what language a person speaks, they will probably be able to understand what a stop sign is, which door to use for the bathroom, or where a disabled parking space is located.

Icons are also intuitive. When you’re dealing with any sort of user experience on the web, mobile apps, or even street signs, you’re going to see icons because people can understand them quickly, and they know what action to take in response.

Examples of Iconic Icons

Icons can exist as standalone symbols or appear in sets.

The pictorial part of a logo is considered the icon, such as the Nike Swoosh or the Starbucks Siren. Religious and ideological symbols can also be considered icons, and so can flags. When you see icons appear as sets, you will probably see them in magazines and infographics to represent sequential or similar chunks of information. On websites, you’ll typically see them used to represent a company’s services.

Designing Icons: Best Practices

The best icons exhibit both clarity and creativity

They are meant to draw attention and interest to content. First, you want the icon to be clear in what it’s representing so the viewer is prepared for what they are about to read. Second, you also want that icon to look badass so they are compelled to engage.

When developing an icon set, consistency is key

If you’re designing in a monoline style, make sure all your line weights are the same.
If you’re incorporating color, follow a set color palette or choose colors that work well with the entire set.
In most cases, you’ll want the sizes of the icons to be uniform. Be sure to use the same amount of detail throughout so the visual weight of the icon set is consistent.

Let context dictate style

In situations when you are designing icons that are meant to appear under the umbrella of a brand, take cues from the style of the logo. When Belief Agency made icons for our site to represent our services, we played off the style of our logo and used our brand color palette. In situations where the icons will appear as a stand-alone unit outside the context of a particular brand, perhaps in editorial work, take cues from the article or other graphic elements that may also appear on the page.

Icon Inspiration

These are some of my favorite icon sets, chosen for their thoughtful design and eye-catching illustration.

Icons designed by Lance Wyman

Icons designed by Tim Boelaars

Icons designed by LaTigre