The interconnected world of design system icons
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
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
Helping the user understand and take action
Ready to plug into any Zendesk interface
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.
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
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.
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.
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.”
Anyone can enjoy wine. Anyone can enjoy icons. But the more you know, the more you can appreciate.
Let icons do what they do best and don’t put too much pressure on them. Love the icons and they will love you. ❤️
Check out design.zendesk.com for more thought leadership, design process, and other creative musings.