Shaping an icon

Nick Levesque
May 21 · 7 min read

Creating a new icon style for Zendesk

Image for post
Image for post

With the ubiquity of emoji, there’s never been a more prevalent time for icons in marketing and design than there is now. Icons play an important role in creating visual shorthands for brands: they’re mini images that can be quickly scanned and understood. They make presentations more visually appealing and billboards quicker to read. And let’s be honest—they’re just more fun to look at. 🤡

Here’s a peek into our journey in creating the new icon style for Zendesk.

Drawing the line

Our line art icons served us well for a long time. They really embodied one of our brand attributes: charm. (I mean c’mon, just look at how cute that hamster is. 🐹) But when we rebranded, a couple years passed without a refresh to our icon style. We removed line art illustration from our brand, but let these icons hang out a bit longer. As the brand continued to mature and evolve, it was finally time for an update.

Let icons be icons

There were a few goals of the icon refresh. We needed to create:

  1. Icons that align with our current aesthetic, while also being timeless.
  2. A unique icon set that feels distinctly Zendesk.
  3. A scalable system that many designers can contribute to.

Design and refine

The original idea that sparked the project was to use geometry with gaps between the shapes to mimic the Zendesk “z” symbol.

Image for post
Image for post

In pitching the initial exploration to the team, the feedback was that the icons sort of felt like clip art. Oof. There was something about the color that lacked sophistication.

I took the feedback as an opportunity to pursue other ideas. At the time, we were exploring different illustration styles, and it started influencing the icon work. But we didn’t come to a conclusion on illustration and decided the icons didn’t need to match any illustration style. They needed to exist on their own.

Image for post
Image for post

Needing some fresh perspective, I enlisted some help from other designers. We took four icons and explored several different styles.

Image for post
Image for post

Back to basics

After all of the further explorations, we decided there was still merit in the original idea. The icons didn’t need to be rethought, they just needed to be refined into a tighter system. So I went back to keeping it simple. After all, “distilled” is another one of our brand attributes. We took our system of simple geometric shapes from our logos and used them in our icons.

The more the merrier

When I started building out the library, I needed inspiration on which icons to make. I started with our existing library. If you’re starting from scratch, a great place to start is trying to interpret emoji into your icon style.

Image for post
Image for post

I referenced our set of Garden icons used for product design. It’s important to note the distinction between UI icons and brand icons. UI icons are buttons inside the product that indicate an action. The brand icons I describe here are a bit bigger, aren’t necessarily clickable, and used more for storytelling.

For more inspiration I thought about Zendesk’s products, our industry, and the industries the products serve. While grapes make a cute geometric icon, we needed icons related to customer engagement, like agents, headsets, sales, charts, and software.

With plenty of references, I did pages and pages of sketching. I tried to be quick and not overthink. I simplified objects into their most basic, geometric forms. A lot of them were unsuccessful, but it was important to attempt as many as possible and get the ideas to paper.

Image for post
Image for post

Pixel perfect

As I started to turn the icon sketches into vectors in Adobe Illustrator, I placed them on top of a 16 x 16 grid. I used a 1/16 gap between the shapes to mimic our Zendesk “z” symbol.

Image for post
Image for post
Yes, those are undies

While refining the shapes I tried for more perfect geometry, avoiding slight curves and trapezoids.

With every iteration the icons were starting to feel more cohesive and distinct.

Image for post
Image for post

Survey says

Now that it felt like we were getting close to a final set, I surveyed 5 people and asked them what they thought the different icons represented. I asked non-designers and a few friends from back home in New Hampshire.

Image for post
Image for post

Some icons were obvious.

And others were not so obvious.

Buddhi, is that you?

The survey really helped identify icons that weren’t as successful at communicating what they were — and at the end of the day, that’s the most important thing. Icons are useless if they aren’t instantly recognizable.

Some icons needed to be scrapped and some needed to be reworked. I was trying so hard to avoid strokes because of the old line art icon style. But as soon as I allowed myself to explore lines, it brought clarity to old icons that weren’t working and allowed for the creation of so many more. The solid geometry was still intact and they were legible.

My friend in New Hampshire kept me honest through the process. Abstract shapes are pretty to look at, as long as they’re not too smart for the room.

Image for post
Image for post

An icon is born

Here’s a look at the first set of icons and how we’ve been applying them to our work.

In the wild

Our first big update was refreshing the apps in Zendesk’s App Marketplace.

The icons were added to our presentation slide templates to empower our fellow employees to tell stories.

Icons were created to represent all of our office locations and added onto our careers page.

Image for post
Image for post

When designing the podcast art for Repeat Customer, the new icons were used as stamps to represent the company each episode was about. It was a nominee for Best Branded Podcast at the 2019 Webby Awards!

Empower the people

Now that the first set has been adopted, we want to continue to scale the system and enable other designers to contribute. We’re actively working on more icons for the company to use.

Keep a look out for an update to Brandland as we publish guidelines for anyone to be able to create a Zendesk icon. ⭐️

Image for post
Image for post
Image for post
Image for post

Check out design.zendesk.com for more thought leadership, design process, and other creative musings.

Follow Zendesk Creative: Instagram | Dribbble
Follow Nick: Instagram | Dribbble | Twitter

Zendesk Creative

We're a blend of art, copy, video, and product design.

Nick Levesque

Written by

Art Director | nlevesque.com | instagram.com/nicholaslevesque

Zendesk Creative

We're a blend of art, copy, video, and product design. We come from different backgrounds, but we share one passion as the Creative team—making compelling work for Zendesk.

Nick Levesque

Written by

Art Director | nlevesque.com | instagram.com/nicholaslevesque

Zendesk Creative

We're a blend of art, copy, video, and product design. We come from different backgrounds, but we share one passion as the Creative team—making compelling work for Zendesk.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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