Member-only story

7 Principles of Icon Design

Clarity, Readability, Alignment, Brevity, Consistency, Personality, Ease of Use.

Helena Zhang

Published in

UX Collective

10 min readJan 29, 2020

More in the iconography series:• Foundations of Iconography• 5 Ways to Create a Settings Icon• Icon Grids & Keylines Demystified• Pixel-Snapping in Icon Design• 3 Classic Icon Families

Creating a high-quality icon family requires a thoughtful approach, a trained eye, a bit of iteration, and a lot of practice. Below, I’ll illustrate the hallmarks of quality through 7 principles and plenty of real-world examples. The goal is to tune you to the key attributes of great icon design.

Clarity

An icon’s primary goal is to communicate a concept quickly.

Icons on a Prius Prime instrument cluster (Source: 2020 Manual)

In this flurry of symbols, which are clear to you? Drivers learn these over time, but many are unintuitive; you need a manual to decipher their meaning.

Here’s roughly how they stack up for me:

This article should absolutely be required reading. Seriously great work. One thing to add is the squint/blur test, though. It’s a quick way to check if your icons are consistent in weight, value, and contrast.

When apple changed all their icons to the same fill and line style, they lost their identifiability. It’s much harder to spot a specific icon and it takes much more effort to read and understand each icon. I think this cost is higher than the gain in consistent style.