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.
An icon’s primary goal is to communicate a concept quickly.
In this flurry of symbols, which are clear to you? Drivers may learn them over time, but some of these icons are unintuitive; you need a manual to decipher their meaning.
Here’s roughly how they stack up for me:
When an icon uses an unfamiliar metaphor, it’s hard to understand. The seatbelt “reminder light” (3rd from the left) is quite literal and we can grasp it quickly. The “electric power steering system warning light” (far right) is much hazier.
Often, an unclear icon will simply be frustrating. For driving, misunderstanding the warning indicators can be dangerous.
Here are a few icons that feel more familiar—symbols for love, warning, music, and up/forward direction:
The arrow is a powerful symbol used in wayfinding:
When most successful, icons are not only easy to understand for one group of people but are universal across cultures, ages, and backgrounds. Consider your audience and use metaphors and colors that resonate with them.
Keep in mind that a standalone icon may not be the clearest solution, if the idea being represented is too abstract. In this case, pair the icon with a text label or find an alternative.
Once you have an understandable symbol, make sure it’s readable.
It’s hard to make out the Amtrak app’s Station icon above (first row) because the details are too fine.
The Transit app has a similar issue. Their clipboard icon reads as a blob because the space between the board and clip is too small:
A slight adjustment makes a big improvement:
When working with multiple shapes, leave enough space between them. Thinner strokes, and more of them, will make the icon busier and harder to read.
Google Mapsdoes an excellent job with their transit icons—very readable at a very small size:
To make sure each icon feels balanced, align its elements optically.
In this play icon, though the triangle is metrically placed in the center of the circle, our eyes read it as off-kilter. The wider part of the triangle feels ‘heavier’ than the point and is tipping it to the left.
Just as typographers make fine adjustments to create the optical illusion of balance in a typeface (note the off-center dots on the “i” and “j” and overshoot on the “O”)—
—iconographers make similar adjustments to balance an icon. To correct the example above, shift the elements over a bit:
The learning is: don’t simply trust the numbers; use your eye to check your work.
An idea expressed well in just a few words feels efficient and elegant. Take this statement:
Teaching what you know strengthens your own understanding of the subject.
We could more succinctly say (from Robert Heinlein):
When one teaches, two learn.
Materialillustrates brevity in their system icon guidance quite well. Instead of saying:
Brevity is apt for icon design since we are often working in small canvases. Use the right amount of detail for your icons and don’t use more than you need.
In user interfaces, a reductive style gets the point across and makes way for the content. Telegram ’s icons are short and sweet:
On occasion, UI icons take on a more illustrative style. These multi-tone Yelp icons are a delightful way to surface popular food searches. The shrimp in the Thai food icon is exquisite:
With app icons, which represent mobile, tablet, and desktop applications, the right amount of detail might mean more depth and color. Because viewers understand their context in mobile home screens, docks, and app stores, the icons can be more expressive of the brand and product.
To achieve harmony for an icon family, maintain the same stylistic rules throughout.
Before iOS 13, Apple ’s icons exhibited all sorts of strokes, fills, and sizes:
Squint at this set. Do some icons feel heavier than others?
Any given icon has a certain visual weight , determined by parameters like fill, stroke thickness, size, and shape. Keeping these parameters the same across a set builds consistency.
Applehas recently course-corrected with their introduction of SF Symbols , an impressive companion to San Francisco . SF Symbols embraces a more graphic icon style in 9 weights and 3 scales (perhaps a bit complex, definitely thorough). From icon to icon and between fill and outline variants, these feel much more harmonious.
Maintaining consistency isn’t an easy task with a large icon family, especially with multiple authors involved. It’s critical to have clear principles and rules to follow (and bend).
The Phosphor icon pack—designed by yours truly and built by my other half —keeps 700+ icons consistent by sticking to the same general guidelines and testing each icon rigorously. Though each one has a different shape, they carry the same weight and hang together well:
Every icon set has a flavor. What makes it unique? What does it say about the brand? What mood does it create?
Waze’s beloved interface relies a lot on their iconography. These colorful, chunky icons say, “We’re quirky!”
Twitter’s icons are soft, light, and crisp:
Sketch’s icons are delicate and airy:
Freemojisare cute and lovable:
Android icon packs cater to a wide array of moods for home screen theming—here’s an abstract, pixel, bubbly, and neon style:
An icon set isn’t done after it’s been drawn to perfection. It requires further testing and preparation to make sure it’s easy for contributors to make new icons, designers to use them in their designs (for screen, print, etc.), and engineers to code them into production.
A quality icon set is organized , well-documented , and tested in context. Nice to have: it’s supported by custom tools like an icon manager as well.
Keep the master file clean, name your assets well, and place them so they are easy to find. Consider the best way to categorize. Alphabetically? By size? By type?
Articulate the icon family’s key principles:
Example principles from the Phosphor icon family (a riff on what we covered above):• Clarity. Be clear first and foremost. Make the icon recognizable and readable. Never sacrifice clarity of what the icon represents.• Brevity. Use as few details as possible. Phosphor’s style is reductive. Be concise and intentional with every stroke to communicate the essence of what’s being represented.• Character. Be quirky. Add unique details sparingly to bring a little warmth and play to what may otherwise be a very austere set.
List out the technical rules:
Example technical rules from the Phosphor icon family:• Use a 48x48px canvas• Use a 1.5px centered stroke• Use rounded end caps• Use contiguous strokes unless broken segments are helpful for comprehension• Use straight segments, perfect arcs, and 15° angle increments where possible• Adjust curves when necessary to maintain the design principles• Use whole, even number increments for measurements where possible; fold down to 1px and .5px if necessary• Use the following shape keylines: 28x28px circles, 25x25px squares, 28x22px landscape rectangles, 22x28px portrait rectangles• Keep a 6px thick trim area
Iterate on these, and make the documentation public if you like:
Check for consistency. Make sure the icons work in context, at the relevant sizes. Make sure they work in harmony with the larger visual system.
Placing icons next to each other is helpful in proofing for our principles above—clarity, readability, alignment, brevity, consistency, and personality:
Lastly, if you have the resources, create tools to facilitate the icons’ usage.
Materialmakes their icons easily accessible with their custom icon library. Search for the one you need and download different styles (‘themes’), different colors, and different sizes, in your preferred file format:
An icon set in use is a living thing. Give it the love and tools it needs to succeed and grow.