Etsy’s Evolving Icon System

How we systematized and customized our ever-present icons

MarcoSuarez
Jan 3, 2017 · 6 min read
Illustration by Erik Riley

When an interface is made entirely of text, the amount of time and effort it takes to read and evaluate every word increases to the point of cognitive overload. Icons offer a form of “visual shorthand”, lowering cognitive load and better utilizing space. Icons use familiar shapes and metaphors to communicate concepts in simple graphic forms.

For the past several years, Etsy has used an icon font to serve our icons on web and mobile. It’s a forked version of Oak’s Symbol Set Standard icon set that includes Etsy specific icons. Anytime we needed a new icon added, Oak would draw it for us and serve us an updated font.

But as we examined how we’re communicating our brand through our interface we saw a lost opportunity in our icons. Though Symbol Set is a well-crafted set of icons, it wasn’t crafted with the intention of expressing Etsy. We had a desire to create icons that communicated their concepts in a way that also expressed our personality.

Along with this, the current process and communication channels for working with an outside partner was complex and took too much time. We had internal bottlenecks that caused teams to come up with stopgap solutions that eventually became permanent. This resulted in a lack of consistency and various forked versions of our forked version. It just didn’t — and couldn’t — scale.

Our new icon system

The system we developed contains three parts:

  1. Guidelines to instruct designers on how to design icons in a way that ensured consistency and usability.
  2. An icon font builder that doesn’t depend on an individual building the font. Even though we were moving to SVGs, we still needed an icon font for designers to use for mockups.
  3. An easy process for adding new icons to production and using them in code.
The new Etsy icons, Etsicons

Guidelines

Grid

Apple’s iOS7 grid on the left, my initial grid on the right

It was important to me that the icons sat on the pixel so they always appeared crisp and sharp. This meant that the grid had to translate to pixels and the icons needed to be designed at the intended size of use. Our navigational icons are the largest icons we use at 20px, so I used this size to start my grid. I added a bleed area to provide a little room to visually center an icon. This gave me a max size of 24px. I added internal boxes at 2px increments to serve as guidelines, and this became our grid.

Principles

  1. Simple concepts: Don’t over-communicate. Limit concepts to one per icon. It should be instantly understandable.
  2. Minimal detail: Excessive detail increases the risk of misinterpretation.
  3. Legible: At small sizes, shapes can lose definition or blend together making them illegible. Simple shapes with ample spacing maximums legibility.
  4. Analog: Consider how the Etsy brand is expressed through the metaphors you choose in your icons. Often, analog metaphors feel more Etsy than digital.

Patterns

The goal of the principles and the patterns is to ensure clear communication and create visual consistency. But sometimes, rules need to be broken to better communicate the concept. For example, the rule of a 2px counter area is broken on icons like the printer. The space between the paper and the printer is only 1px, because the relationship between the paper and the printer started to get lost when the space was increased to 2px.

Also, icons that represent real-life objects looked less like those objects when corners were sharp. This was true of the printer icon.

These exceptions may sound like a slippery slope, but we make every attempt to follow convention before configuring.

Icon Font Builder

SVG Implementation

To do this, we started with adding our custom <etsy-icon> tag into our templates. We automatically replace that tag with the <svg> markup for the correct icon when it renders the html serverside and clientside. To specify the icon, we add its name to the attribute, “type”. By default, the icon is hidden from screen readers since most of our use cases include an icon accompanied with text. We can also add color, sizing, and spacing utility classes. In the end, the markup looks something like this:


Improved usability

iOS Buy on Etsy app with new icons. Yield Design Co

Improved process

…syntax: the discipline that controls the proper use of grammar in the construction of phrases and the articulation of a language, Design.

In order to move quickly we need to move independently. And in order to move independently, the work of improving our icon system must be distributed across our entire design team. Our icon system gives us the syntactic understanding necessary to do this without misunderstandings or sacrificing quality.

Resources

Understanding Comics

A Brief History of Iconography

Icon Usability

Usability Testing of Icons

Material Design Icons

Inline SVG vs Icon Font

Useful SVGO[ptimization] Tools

Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG

Seriously, Don’t Use Icon Fonts

Etsy Design

Stories about people-centric design from the people behind…

Thanks to Jedediah Baker, Seth Daggett, and Sufian Rhazi

MarcoSuarez

Written by

Design Systems consultant. Previously InVisionApp, Etsy, Mailchimp. Owner of Methodical Coffee.

Etsy Design

Stories about people-centric design from the people behind Etsy

MarcoSuarez

Written by

Design Systems consultant. Previously InVisionApp, Etsy, Mailchimp. Owner of Methodical Coffee.

Etsy Design

Stories about people-centric design from the people behind Etsy

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