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.

Two, bolder sizes: 24 & 16px

We’re increasing the stroke weight of our icons and simplifying our icon system by now only maintaining icons in these two sizes:

Any other sizes that are needed will be scaled versions of these distinct sizes.

The result is a balanced set of icons and typography, that’s more readable.

Refreshed style across the set

We merged the sets by redrawing every single icon in the new style with the thicker strokes. The vast majority of icons keep the same metaphor as before.

Increased the difference for active states

To increase clarity, active states are no longer using only subtle changes to weights but instead filling up a portion of the icon.

This is how we did it

Partnering with Rob Bartlett

Encore Foundation is responsible for all the core elements of Spotify’s design language. For several months, Rob Bartlett embedded with the team to ensure a very close and successful collaboration.

Identifying the new icon weight(s)

One of the key steps in this process was defining the icon weight we would use going forward. We primarily used 1px stroke weight and we knew we wanted to increase it – but by how much? We tried several different options; the bolder we got from where we’d been, the more we could see a clear improvement. After rounds of iterations, we settled on the two new weights. This decision was based on two key aspects:

• In order to meet our goals for the project, the new weights needed to be noticeably bolder than before. With 1.5px and 2px, we were increasing the stroke-weight at 50% for the 16px sizes and 100% for the 24px sizes.

• The new weights needed to be easy to design when creating new icons. This meant staying as close as possible to whole pixel or half-pixel values, which designers would find easier and faster to work with.

Which sizes would we use going forward?

In our previous icon set we had more than 220 icons x 5 size variants = 1,100 individual assets. Our aim with the refresh was to reduce the number of individual assets as much as possible, in order to make it faster and easier for teams to add to the system.

We already knew that Encore Web had successfully moved to using only 24px icons, but we also had to take the needs of the entire system into consideration. Using analytics, we could clearly see that 16 and 24px were the most used icon sizes – by far!

The main use-case for 16px icons was found to be in apps like desktop and in any instance where the icons might need to be even smaller, like our download indicators in all track rows for example. For downscaling to work properly in these cases, the 16px icons needed to use the full width and height of that icon space.

We determined that scaling the 24px size up would work for the vast majority of cases where icons are needed at larger sizes.

The final outcome was that we reduced the number of size variants in the system down to 40% of what we had before by using 2 sizes instead of 5 – a reduction by 660 individually drawn icons. When we make new additions or changes to the set going forward, that efficiency win will have great impact.

Streamlining the contribution flow with Figma

Another big focus for us was to bring as much of the contribution flow for new icons as possible to Figma, as that’s now the default tool at Spotify Design. This meant several things:

• The whole process for adding icons is documented within Figma.

• All the guidelines on how to follow the new structure and visual style are available in Figma.

• When teams are making their icon submission, we’re encouraging them to also share explorations that led them to their final design. This means we can build a collective history of icon-focused explorations in close proximity to where all the production icons are being housed.

• All icons have both their editable source vectors available, right next to the optimized versions used in production. This means everyone can easily build on top of existing icons when they’re considering an addition or an edit to the icon system.

Through close collaboration with our engineers, we also managed to automate almost all aspects of generating the necessary code and different output assets needed for our various platforms.

What’s next?

We’re excited for everyone to experience the refreshed icons in our mobile and desktop apps now and you’ll start to see them in other platforms gradually throughout this year.

Credits