Etsy’s Evolving Icon System
How we systematized and customized our ever-present icons
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
Along with designing a new Etsy icon set, Etsicons, we needed a system that empowered our entire design team to create, maintain, and implement icons.
The system we developed contains three parts:
- Guidelines to instruct designers on how to design icons in a way that ensured consistency and usability.
- 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.
- An easy process for adding new icons to production and using them in code.
Guidelines
Grid
The first task was establishing a grid. Apple’s iOS7 icon grid served as a starting point and I tried to create something similar. This direction was quickly abandoned because it was completely unnecessary for our needs. To create an appropriate grid, I first needed to evaluate and understand how we use our icons.
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
Icon design ain’t easy. Developing a symbol that represents a concept clearly, void of ambiguity, is a challenge. After doing a good amount of research into iconography, I developed a set of principles to ensure our icons communicate well. The book Understanding Comics was one of the most informative sources I found for iconography. Here are the principles I came up with:
- Simple concepts: Don’t over-communicate. Limit concepts to one per icon. It should be instantly understandable.
- Minimal detail: Excessive detail increases the risk of misinterpretation.
- Legible: At small sizes, shapes can lose definition or blend together making them illegible. Simple shapes with ample spacing maximums legibility.
- 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
To achieve visual consistency, I developed seven patterns to follow while designing Etsicon icons.
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
Because neither I nor anyone else wanted to become an expert at the font making Glyphs program, we had to create an icon builder that was completely automated. Daniel Espeset, Staff Engineer at Etsy, and I worked to create this process. Daniel created a program that builds an icon font from a shared SVG folder. Anytime a file is updated or added, the program runs and generates a new version of the font. The font is then shared across the design team via a program called Self Service. We’re still testing this process, but hope to fully implement it soon.
SVG Implementation
Our web toolkit allows designers and developers the luxury of building interfaces without touching CSS. This is also true of our icons. We had to get clever to create reusable and accessible inline SVGs that could be sized and colored with utility classes.
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
We’re currently in the process of converting all our icons to the new Etsicons. This will take some time as there are a lot of icons across all our apps. But we’ve already seen usability improvements where they have been updated. The icons in our Buy on Etsy app is one of the first places we implemented Etsicons. We were pleasantly surprised to see it positively impact metrics like add-to-cart and conversion.
Improved process
In Massimo Vignelli’s Canon, he eloquently writes that rules are imperative for using and understanding a language.
…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
None of this could’ve been done without the help of many other people outside of Etsy. The amount of knowledge freely shared on the internet empowers all of us to do better work. Thank you to the following sites and articles, which I’d urge you to check out if you’re interested in working on your own set of icons.
A Brief History of Iconography
Useful SVGO[ptimization] Tools
Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG
