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.
Overview
- 588 icons and counting
- 6 weights: Thin, Light, Regular, Bold, Fill, and Duotone
- Designed at 16 x 16px to read well small and scale up big
- Raw stroke information retained to fine-tune the style
A rendering test.
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.
And why they matter
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.
Olympics Games Event Icons
…
Definition, purpose, and benefits
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.
Meaning Through Metaphor
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…
Purpose, anatomy, and in-depth examples
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.
Overview
Icon grids represent an icon set’s rules visually…
Learn to use an array of Illustrator features through this exercise
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.
Clarity, Readability, Alignment, Brevity, Consistency, Personality, Ease of Use.
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.
Helena Zhang
Designer/writer. Brand, product, systems. • helenazhang.com • dribbble.com/minoraxis • phosphoricons.com
