Updating Yelp’s Icon System
Why update the icons now?
Yelp’s icon library has been around for almost 10 years and has evolved from a single product and library to a robust system of multiple products covering an array of libraries. With the recent user interface update, it was the perfect time to revisit our icon system and make sure it blended seamlessly into the product’s new look and feel. This also was a good time for us to address consistency issues, consolidate some of the sizes, simplify the icons and write guidelines around their construction and philosophy so other designers across the organization could create icons that would fit into the existing libraries.
One problem that grew over time was the almost dozen different icon sizes that spawned and needed to be supported. Early on, the systems team decided to move towards a simple small, medium and large set and fold in all of the inbetween sets. By reducing the icon libraries down to just three sizes, we believed it would not only reduce the amount of time we spent recreating icons at multiple sizes, but would also help with consistency in the Yelp product.
To help support our visual language we saw an opportunity to use the largest icon set to bridge the gap between product illustration and iconography. Pulling cues from Yelp’s illustration style, we landed on a composition of a simple gray background element, with foreground elements drawn with a black stroke and topped off with a small hint of red.
Lastly, we wanted to create a central place where everyone, including folks outside of the product team, could easily access all the icons as well as rules around their usage and creation.
How we approached the new icon system
The largest visual change resulted from moving away from solid filled icons and towards icons that were built from strokes. The stroked icons would seamlessly blend in with the airiness of the updated UI, help with consistency and give the icons more delightfulness and personality. They would also give more options with active and inactive states. We used a black 2px stroke from Yelp’s illustration style as the stroke weight meshed well with the updated typography in-product. It was a detail that helped tie some of the different design elements together.
With almost 500 total icons across all sets, we came up with a strategy to redraw all the icons across the system. We started by creating a spreadsheet of all the icons that were currently in use and noted what sizes we would need moving forward. We then grouped the icons into categories like navigation, cuisine types, actions and so on. It made the most sense to start with the highest profile categories and work our way down to the icons that were less visible. As long as each icon’s metaphor felt on point, we didn’t feel the need to update it. This would have required multiple rounds of feedback and we needed to move quickly to get large batches of icons into our github repository.
Now starting with a clean slate, we wanted to create a library where we could not only view all the icons together, but also document some principles about their creation and logic for when they should be used in-product. Since the product team uses Figma it seemed ideal to have all the icons live there. We could also use Figma to help with any review processes and store documentation so designers had just one place to go for anything icon-related.
The final step was to actually write and document the principles of our iconography system. We wrote out the rules for usage, sizing, grids, stroke weights, color and some light design principles. The idea was to give background context about when and why we use icons, so that if a designer needed to create their own icon, they would have the rules and design guidelines.
Final Results
The grids
We wanted to go with a simple approach to grids and lean more into making an icon’s weight feel optically correct vs. mathematically. This gives the designer more room to be creative and explore as opposed tos having a very rigid set of rules to adhere to.
Strokes
1.5px and 2px stroke weights are key to tying together the overall illustration and icon systems. A 1.5px stroke width is used for all instances in illustration and in the 16px icon set. A 2px stroke width is used for all instances in the 24px and 40px icon sets.
Looking ahead
Each icon is built with simple and friendly shapes, stripped of any unnecessary details and is able to scale from 40px all the way down to 16px. Our visual language is not to redraw pictures or objects, but to emphasize their key features and leave out anything unnecessary. With these simple rules this update has a solid foundation to grow and evolve over time.
