A flexible icon family in 6 weights
Introducing Phosphor Icons, a flexible icon family for everyone. Toby Fried and I have been hard at work the last 3 months drawing 588 icons in 6 weights, building out design and developer libraries, and showcasing the product in our website.
More in the iconography series:• Foundations of Iconography• 7 Principles of Icon Design• 5 Ways to Create a Settings Icon• Icon Grids & Keylines Demystified• 3 Classic Icon Families
We all want our designs to display sharp on all platforms, for all our users. To achieve this goal for digital icons, a best practice has held the standard: it is recommended to pixel-fit or pixel-snap icons to sit precisely on a pixel grid. This means that all strokes and shapes snap to 1px increments and are positioned on the pixel.
More in the iconography series:• Foundations of Iconography• 7 Principles of Icon Design• 5 Ways to Create a Settings Icon• Icon Grids & Keylines Demystified• Pixel-Snapping in Icon Design
Icons communicate so much with so little. When they’re successful we hardly notice them—a pedestrian sign, a back button, a notification bell. I’d like to examine a few enduring examples that have not only solved the design problem at hand but further left an imprint on the way we approach design as a discipline.
It has been a joy to redraw the icons for this article.
…
More in the iconography series:• 7 Principles of Icon Design• 5 Ways to Create a Settings Icon• Icon Grids & Keylines Demystified• Pixel-Snapping in Icon Design• 3 Classic Icon Families
An icon is a compact symbol that represents a discrete object, action, or idea. Icons are meant to be read at a glance and are typically created on a square (1:1) canvas.
Icons employ visual metaphors to speed comprehension, by transferring properties from something we already understand.
In some cases, the metaphor is literal. Material’s alarm icon represents a classic mechanical alarm clock with bells…
More in the iconography series:• Foundations of Iconography• 7 Principles of Icon Design• 5 Ways to Create a Settings Icon• Pixel-Snapping in Icon Design• 3 Classic Icon Families
If you’re a digital designer, you’ve probably encountered an icon grid before. Perhaps you were tasked to create an app icon for iOS or Android, or you contributed to a set of UI icons. Perhaps—like me—you weren’t sure how to use it.
Though the lines can look like cryptic mumbo jumbo, there’s a purpose behind each one. Let’s investigate.
Icon grids represent an icon set’s rules visually…
More in the iconography series:• Foundations of Iconography• 7 Principles of Icon Design• Icon Grids & Keylines Demystified• Pixel-Snapping in Icon Design• 3 Classic Icon Families
The gear has become a ubiquitous symbol for settings in our digital applications.
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.
An icon’s primary goal is to communicate a concept quickly.
Designer/writer. Brand, product, systems. • helenazhang.com • dribbble.com/minoraxis • phosphoricons.com