7 Principles of Icon Design

7 Principles of Icon Design

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

Jan 29 ·9min read

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 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:

Familiar metaphors from Phosphor Carbon icon family

The arrow is a powerful symbol used in wayfinding:

NYC subway sign (Source: Capture of an original copy of NYC Transit Authority Graphic Standards Manual )

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.

Readability

Once you have an understandable symbol, make sure it’s readable.

Icons in the Amtrak mobile app

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:

Icons in the Transit mobile app

A slight adjustment makes a big improvement:

Adjusted clipboard icon

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:

Google Map icons

Alignment

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:

Better.

The learning is: don’t simply trust the numbers; use your eye to check your work.

Brevity

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.

Beautiful.

Materialillustrates brevity in their system icon guidance quite well. Instead of saying:

Overly complex boat icon (Source: Material )

Simply say:

Succinct boat icon (Source: Material )

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:

Telegram icons

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:

Yelp icons by Scott Tusk

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.

Apple app icons

Consistency

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:

Icons from Apple’s Home Screen Quick Actions pre-iOS 13

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.

Icons from Apple’s SF Symbols

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:

Subset of the Phosphor Carbon icon family

Personality

Every icon set has a flavor. What makes it unique? What does it say about the brand? What mood does it create?

Waze icons

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:

Twitter icons

Sketch’s icons are delicate and airy:

Sketch icons by Janik Baumgartner

Freemojisare cute and lovable:

Freemojis from Streamline

Android icon packs cater to a wide array of moods for home screen theming—here’s an abstract, pixel, bubbly, and neon style:

Top to bottom, left to right: iJUK , PixBit , Crayon , Linebit

Ease of Use

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.

Organized

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?

A Nucleo Sketch file, organized by type across pages

Well-Documented

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 canvasUse a 1.5px centered strokeUse rounded end capsUse contiguous strokes unless broken segments are helpful for comprehensionUse straight segments, perfect arcs, and 15° angle increments where possible• Adjust curves when necessary to maintain the design principlesUse whole, even number increments for measurements where possible; fold down to 1px and .5px if necessaryUse the following shape keylines: 28x28px circles, 25x25px squares, 28x22px landscape rectangles, 22x28px portrait rectanglesKeep a 6px thick trim area

Iterate on these, and make the documentation public if you like:

Tested

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:

Test sheets used in Phosphor ’s QA process

Custom Tools

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:

Material’s easy-to-use icon library

An icon set in use is a living thing. Give it the love and tools it needs to succeed and grow.

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章