A flexible icon family in 6 weights

An aerial view of a desktop, with digital devices, a command key, and paperclips
An aerial view of a desktop, with digital devices, a command key, and paperclips

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


A rendering test.

A scattering of pixels on a grid
A scattering of pixels on a grid
More in the iconography series:Foundations of Iconography7 Principles of Icon Design5 Ways to Create a Settings IconIcon Grids & Keylines Demystified3 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

Image for post
Image for post
More in the iconography series:Foundations of Iconography7 Principles of Icon Design5 Ways to Create a Settings IconIcon Grids & Keylines DemystifiedPixel-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

Image for post
Image for post
More in the iconography series:7 Principles of Icon Design5 Ways to Create a Settings IconIcon Grids & Keylines DemystifiedPixel-Snapping in Icon Design3 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

Image for post
Image for post
More in the iconography series:Foundations of Iconography7 Principles of Icon Design5 Ways to Create a Settings IconPixel-Snapping in Icon Design3 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

Image for post
Image for post
More in the iconography series:Foundations of Iconography7 Principles of Icon DesignIcon Grids & Keylines DemystifiedPixel-Snapping in Icon Design3 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.

Image for post
Image for post
More in the iconography series:Foundations of Iconography5 Ways to Create a Settings IconIcon Grids & Keylines DemystifiedPixel-Snapping in Icon Design3 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

Helena Zhang

Designer/writer. Brand, product, systems. • helenazhang.comdribbble.com/minoraxisphosphoricons.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store