Pixel perfect

The interconnected world of design system icons

Published in

Zendesk Design

9 min readAug 10, 2020

From Kidpix to design systems

Did you ever create stamps in KidPix? Kidpix is bitmap drawing software that’s been around since the nineties, and I remember many happy — more like maddening — hours creating tiny pixelated images to reuse in my pictures. I was continually amazed to see how different the stamp looked at rendered size than in the zoomed-in view I was working on. Will these stark grey blocks really look like shadows? Magic.

For the past four years, I’ve been a caretaker of system icons. I’m currently helping to cultivate Garden, the design system for Zendesk. That includes agonizing over lots of pixels, so, I guess I’ve achieved all of my childhood dreams. I enjoy the challenging tension between small details and big user experience questions.

Why I’m here

I’m passionate about providing quality icons to users. I know when I use a product frequently, I build a connection with the icons that influences my experience for better or worse.

I want to focus on the craft of icons. Tools will come and go. Technology will change. Already, icons are viewed at increasingly high resolutions.

Designing icons may seem like a purely visual exercise, but much more is involved. I think of icon design as a microcosm of the overall UX design process, challenging me in terms of visual design, communicating concepts, and defining problems. Icons follow the principle of things being interconnected. When I try to consider any icon in isolation, I find it hitched to everything else in the universe. I start by looking at an icon, and I end up helping a team consider a whole user flow.

Crafting practical icons

So what kind of icons am I talking about here? Icon design is a broad topic. Icons can be many things:

Mini illustrations for brands (check out Nick Levesque’s post Shaping an icon for more on this)
Pictograms for navigating the world
Anything on the broad spectrum in between

Damian Orellana, Sample National Park Service pictographs

The icons I’m talking about are design system icons. These are on the practical pictogram side of things, in the digital world. In Garden, I’ve defined icons as visual symbols of simple concepts. They aim to:

Visually support a text string
Make content more scannable by differentiating items at a glance
Simplify repeating or persistent actions

Garden icons are treated like any user interface component in our system.

Consistent and standardized

Meeting strict style and quality guidelines

Utilitarian

Helping the user understand and take action

Modular

Ready to plug into any Zendesk interface

Reusable

Useful for multiple situations, though usually precipitated by a product’s specific need

Flexible and robust

Sized at 12px and 16px, allowing scaling to many multiples of 4 to fit our base grid. Styled in two ways: stroke style is the default; fill is used for greater visual weight. Each icon comes in 4 versions.

International

Using universal metaphors and avoiding words, which won’t be translated. Can be flipped for use with languages that are read right-to-left.

Love the pixels

Pixels matter

The first UI icon I ever designed was a cursor. I drew it as a vector, thought, “great,” and gave it to the design director. She asked me if I knew what a pixel was. I had placed the vector without consideration of pixels, so the aliasing was completely arbitrary.

That fateful day, I learned that vector graphics are translated into rasterized images on a display. I went back to my KidPix roots and began the practice of aligning icons to the pixel grid so that they will be sharp when they’re rasterized. As usual, knowing was 7% of the battle. Pixel-wrangling is a unique challenge for each icon. What a thrill. 😏

Practical tips for drawing icons

Because icons’ limited number of pixels have such an impact on what I can draw, I move to digital quickly. I may sketch on paper as I think through metaphors, but once I know what I’m drawing, I work out the visual design in pixels. Only in the final medium do I know what will be possible.

When I draw an icon, I set anchor points to snap to half pixels. That’s because I’m drawing 1px borders, so the shape of them will fill a whole pixel.

I preview the pixels constantly, and shift anchor points to see how the elements are going to alias.

I also zoom out to 100% constantly. Sometimes I am agonizing over how a curve is going to alias but find it doesn’t matter at actual size.

Sometimes, pixel perfection means offsetting a whole icon. For example, Garden has a set of icons with a symbol sitting inside a circle. If the circle size is an even number, the 1px symbol inside will land on a half pixel and be blurry. Because of this, my colleague Nicolette designed the whole set of icons to be smaller and offset within their 16px viewboxes, so the shapes inside are sharp and they align to one another. This principle has been a helpful precedent to reference when I’ve come across similar situations.

Pixel-perfect icons look great on any display. Plus, they have a subtle underlying logic holding them together. Relationships between shapes will be rational, based on the grid of the pixels. Even in a high-resolution world, paying attention to pixels helps make good icons into great icons.

Working with extreme size constraints

Twelve pixels, squared. I appreciate this icon size, since it allows clean scaling to 24px, 36px, and so on. It fills those crannies the 16px icons can’t. But, 12 × 12 is a challenging space to work in. I respond to this challenge in a couple of ways.

First, I keep the icon as simple as possible.

Second, I use the pixels as a grid to structure the space and manage it effectively. If I align to the grid, clear constraints emerge that I can use to make decisions. Which pixels should each element occupy? Every pixel, whether it is filled or left empty, impacts the clarity of the icon.

Every icon is like a puzzle, and the details matter. I feel really jazzed when I find a combination of pixels that gets the idea across.

As I zoom out and compare the iterations, there are usually only a few options that will make sense.

Make it memorable, not literal

How can I communicate “API” in a 12px ✕ 12px icon? I don’t; it is a trap. Size may feel like the problem, but even if there were space to include many complex elements, the icon would be too confusing to parse at a glance within a product interface. Not being able to fit everything into an icon is a red flag that something else may be wrong and clarity is needed through another method. I could try to depict everything about the concept, but I would end up with an illustration instead of a practical interface icon — valid, just not my goal.

API icons from the Noun Project by: Yu luck, Becris, Eucalyp, faisalovers

Instead of illustrating a concept, the most successful icons have become universally recognized by associating a tangible object with words, over and over, until the users learn what it means. For example, a gear icon is generally recognized as “settings.” However, this is a learned association, not an intuitive one. As users, we have seen a gear with the word “settings” so many times that now the gear triggers that concept in our minds.

Nothing is truly intuitive in UX design, and icon design is the same — everything is learned. My goal is to help the user learn, quickly and easily.

For example, for “API,” I drew a plug because it’s tangible and recognizable. If it were just another slightly different combination of arrows, it would be harder to remember.

Define the problem first

Look at the big picture

Icon design may seem self-contained, but it takes some big-picture thinking to get it right. And because it is so detailed, the stakes are pretty high to make sure I am drawing the right thing before I start focusing on whether this anchor point should be one or two pixels from the edge.

Too many times, I have jumped into the detailed work of drawing an icon only to find I am making the wrong thing. I have ended up in an inefficient trial-and-error cycle where I don’t really know the use case well enough, so I take a best guess at what the icon should be. Then, the team tells me it doesn’t really fit, and I have to rework the metaphor.

Validate the concept

The designer working on the feature knows better than I do what metaphor is needed. They know where the icon will appear, and what the user and business needs are. So before I get into the nitty-gritty of drawing the icon precisely, I lean on them to figure out what is needed. With so many free icon libraries out there, the icon concept can easily be shown along with the rest of the feature, at design critique and in user testing.

Now that I know this, it seems so obvious! But I used to try to figure out the metaphor myself.

Find the words

It’s important to work with the UX Content Strategy team right away to figure out the words that go along with an icon. What is it communicating? What is the associated description?

This informs the icon’s metaphor. We might think we need a trash can icon to represent “delete,” then find that “remove link” is the real issue at play and so we need a different icon.

Enjoy

Now that I understand the goals and constraints for icons, I can talk and think about them objectively. I hope you can too.

This has freed me up to enjoy the delightful part about icons. Tangible icons can be adorable. Heck, the other day the Garden team and I were using wine tasting notes. “This shopping cart flaunts Target flavors, with subtle notes of Whole Foods.” “It has an assertive Walmart finish.”