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
Tokyo, 1964. People all over the world come together for the first Olympics in Asia. …
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, carrying over functionality we’d expect — it rings to wake us up in time. …
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, laying a canvas to draw from. They delineate the icon’s dimensions, the underlying pixel grid, and additional key gridlines — or keylines — to follow. …
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.
About
