Refreshing our Icon System: the why and how behind the changes | Spotify Design

https://spotify.design/article/refreshing-our-icon-system-the-why-and-how-behind-the-changes

It’s a new year and we have a new look! In case you haven’t seen them yet, we’re in the process of rolling out a refreshed, bolder look for our icons, starting with the mobile and desktop apps.

Our current suite of icons has been with us since the last redesign in 2016 - and while they’ve served us well, recently, we identified a need to update them, bringing them in line with the evolution of our visual language.

Framing the problem

To refresh our icons, one of our design systems teams, Encore Foundation, teamed up with Rob Bartlett, the skilled iconographer who worked on the 2016 redesign. Together, we identified the key challenges they needed to address:

The weight and thickness of strokes were too thin

We wanted to revisit the weight of our icons based on a few things:

In the evolution of our visual language over the last few years, we’ve increasingly switched out text-based buttons for icons and made them more prominent in our UI.
On top of that, we’ve also increased the size and weight of our typography, which made thin icons look a bit out of proportion.
Most importantly, we also saw an opportunity to increase the readability of icons, especially when they’re sitting on top of a variety of different backgrounds.

We had a few different sets of icons to merge

Over time, Encore systems had diverged and we set out to create a new set that could accommodate them all, making things more consistent and easier to manage.

Creating and managing icons wasn’t as easy as it should be

We saw a need to simplify our icon system for teams in general. One key aspect was to build on our recent switch to Figma by bringing the design source files for icons and creation flows there in full. Another one was to try and reduce the number of icon sizes we had to create for every single icon that was being added to the system.

Enabling a seamless transition for everyone

We wanted this update to feel like a seamless transition for end-users. For the vast majority of icons, we’ve kept the current metaphor intact for this very reason so that users can find their way but enjoy a refreshed icon style.

So, what’s new?

Along with an overall refresh, the key difference is that we’re increasing the weights of our icons by changing the main stroke size. We’re going from 1px to 2px at 24px icon size.