Clarity

The main function of an icon is to convey a concept swiftly and effectively.

Among the myriad symbols found in vehicles, which ones are easily recognizable? Drivers gradually familiarize themselves with these icons, but many lack intuitiveness, often requiring a manual for interpretation.

When an icon employs an unfamiliar metaphor, comprehension becomes challenging. For instance, the seatbelt reminder light is straightforward, while the electric power steering warning light is less transparent.

Some particularly unclear icons can be found in the photography app VSCO. Can you decipher their meanings?

From left to right, these navigational icons signify: Feed, Discover, Studio, Profile, and Members. The stakes of confusion in VSCO are minimal, as users can quickly learn the meanings through interaction. In contrast, misinterpretations while driving can have dire consequences.

Over time, abstract icons can become familiar through repeated usage. The standardization of car tell-tales aims to foster a shared understanding. For example, in 1984, Susan Kare designed the command key symbol for Apple keyboards, a design that has become widely recognized.

Kare's innovation stemmed from the absence of established standards. When crafting new icons, evaluate if an existing metaphor exists—such as a gear for settings—or if a new concept needs to be introduced.

Familiar symbols, such as those representing love, warnings, music, and directional arrows, have gained recognition over time.

Directional arrows serve as powerful symbols in navigation.

Successful icons transcend cultural and demographic boundaries, making them universally comprehensible. Always consider your audience, employing metaphors and colors that resonate with them.

Readability

Once you’ve established an understandable icon, ensure it remains easily readable.

For instance, the Station icon in the Amtrak app is challenging to decipher due to overly intricate details.

Similarly, the Transit app struggles with its clipboard icon, which appears as a blob because the spacing between the board and clip is too tight.

A minor adjustment can significantly improve clarity.

Maintain adequate spacing between different shapes when designing icons. Excessively thin strokes can clutter the icon, making it harder to read.

Google Maps excels in creating transit icons that are very readable, even at small sizes.

Alignment

To ensure that each icon feels visually balanced, align its components optically.

In the example of a play icon, although the triangle appears centered within the circle, it feels uneven due to the visual weight of the triangle's base, which tilts the perception leftward.

Typography often involves subtle adjustments to create an optical balance. Similarly, iconographers should apply these principles to achieve visual harmony.

To correct the aforementioned play icon, shift its elements slightly.

Remember: rely on your visual judgment rather than solely on numerical measurements.

Brevity

Effective communication often requires concise expression. For example:

Teaching what you know enhances your understanding of the subject matter.

This could be distilled to:

When one teaches, two learn.

Material Design effectively showcases brevity in its system icon guidance. Rather than presenting an overly complex boat icon:

They present a simplified version:

Brevity is essential in icon design due to the limited canvas size. Use just enough detail to convey your message without unnecessary embellishments.

In user interfaces, a minimalist style enhances clarity and allows the content to shine. Telegram’s icons exemplify this succinct approach.

Occasionally, UI icons can adopt a more illustrative style, as seen in Yelp’s delightful multi-toned icons, which creatively represent popular food searches.

For app icons, which represent various platforms, adding depth and color may enhance their expressiveness, as users recognize their context on mobile home screens and app stores.

Consistency

To create a harmonious icon family, maintain uniform stylistic rules throughout.

Before iOS 13, Apple's iconography exhibited a variety of strokes, fills, and dimensions.

Do any of these icons seem visually heavier than others?

Each icon possesses a unique visual weight influenced by its fill, stroke thickness, size, and shape. Ensuring these characteristics are consistent across a set fosters visual harmony.

Apple has recently rectified this with the introduction of SF Symbols, which offers a cohesive graphic style across multiple weights and scales, creating a more unified appearance.

Maintaining consistency can be challenging, especially with large icon families and multiple contributors. Establishing clear guidelines is crucial to ensure coherence.

Phosphor for Android, developed by my partner and me, maintains consistency across 900 icons by adhering to shared principles and conducting thorough testing.

Since this article's publication, we have launched Phosphor Icons, an expansive open-source icon library boasting over 6,000 icons for user interfaces and more.

Personality

Each icon set has its unique character. What distinguishes it? What message does it convey about the brand? What atmosphere does it create?

Waze employs a vibrant and playful icon style that communicates its quirky identity.

In contrast, Twitter's icons are soft and streamlined.

Sketch features delicate and airy iconography.

Freemojis are charming and endearing.

Android icon packs offer a diverse array of styles, catering to different moods for home screen customization, including abstract, pixelated, bubbly, and neon aesthetics.

Ease of Use

An icon set's journey doesn’t end with its design; it requires rigorous testing and preparation to ensure usability for contributors, designers, and engineers alike.

A high-quality icon set should be organized, well-documented, and contextually tested. Ideally, it should also be supported by custom tools such as an icon manager.

Organized

Maintain a tidy master file, appropriately naming assets and categorizing them for easy access. Determine the most effective organization method—alphabetical, by size, or by type?

Well-Documented

Clearly define the fundamental principles of the icon family. For example, the Phosphor icon family emphasizes:

• Clarity: Prioritize clear recognition and readability without compromising the icon's meaning.
• Brevity: Limit details to what’s essential. The Phosphor style embraces minimalism to convey core concepts effectively.
• Character: Infuse unique touches to add warmth and engagement to what could otherwise be a stark collection.

Additionally, list the technical specifications:

• Utilize a 48x48px canvas.
• Implement a 1.5px centered stroke.
• Favor rounded end caps.
• Maintain contiguous strokes unless segments aid comprehension.
• Use straight lines, perfect arcs, and 15° angle increments whenever possible.
• Adjust curves as needed to uphold design principles.
• Opt for whole, even number increments for measurements, simplifying to 1px and 0.5px as necessary.
• Follow specified shape keylines: 28x28px circles, 25x25px squares, 28x22px landscape rectangles, and 22x28px portrait rectangles.
• Maintain a 6px trim area.

Iterate on these principles and consider making the documentation publicly accessible, similar to:

• Material System icons
• IBM’s UI icons, App icons, and contributor guide for icons
• Shopify Polaris Icons

Tested

Ensure consistency by verifying that icons function well in various contexts and sizes. They should align with the broader visual system.

Testing icons side-by-side aids in validating adherence to principles like clarity, readability, alignment, brevity, consistency, and personality.

Custom Tools

Enhance the icon creation, production, and usage process by developing tailored tools.

For Phosphor Icons, we created a web tool to facilitate icon comparison and contextual testing.

Material provides easy access to their icons through a custom library, allowing users to search for specific icons and download various styles, colors, and sizes.

Font Awesome, while not perfect in all aspects, has made their icons highly accessible, offering multiple methods for integration, including frontend framework libraries, CDN, icon font, and raw SVGs. Their public backlog showcases the most requested icons and ongoing developments.

An icon set is a dynamic entity; nurture it with the necessary resources and tools to thrive.

Resources

Icon Libraries

Here are some noteworthy selections:

• Feather: A stunning, free collection of 287 minimal line-style icons by Cole Bemis.
• Material system icons: Over 1,000 practical icons for UI in five styles.
• Nucleo: More than 30,000 icons in three styles: outline, flat/colored, and glyph.
• Phosphor: A free, open-source library featuring over 6,000 icons in six weights, created by Tobias Fried and myself.
• Streamline: One of the largest icon collections, boasting over 100,000 icons in various styles by Vincent Le Moign.

Icon Aggregators

• The Noun Project: A mixed-quality resource that provides inspiration for styles and metaphors.

Icon Managers

• Nucleo app: Import, view, export, and seamlessly integrate icon sets into your design software.

Icon Documentation

• Material stands out for its comprehensive design documentation, including Material System icons and Product icons.
• IBM offers excellent visual resources, including UI icons, App icons, and a contributor guide for icons.
• Shopify provides some of the best-written guidance available through Shopify Polaris Icons.

? Written to the sounds of: The Black Dog and Autechre ? Thanks to: Toby Fried, Monica Chang, Darcy O’Donnell, Sara Thompson, Lonny Huff, Stephany Shigekuni, Clarissa Soto, Tate Chow, Christine Lee, Victor Vasquez, Chris Rodemeyer, David Landa, Pawel Piekarski, Matthew Vargas, and Marlon Bishop