Refreshing our Icon System: the why and the way behind the modifications

Our present suite of icons has been with us for the reason that final redesign in 2016 – and whereas they’ve served us properly, just lately, we recognized a must replace them, bringing them according to the evolution of our visible language. 

Framing the issue

To refresh our icons, one among our design programs groups, Encore Foundation, teamed up with Rob Bartlett, the expert iconographer who labored on the 2016 redesign. Together, we recognized the important thing challenges they wanted to handle:

The weight and thickness of strokes have been too skinny

We wished to revisit the burden of our icons based mostly on a couple of issues:

• In the evolution of our visible language over the previous few years, we’ve more and more switched out text-based buttons for icons and made them extra outstanding in our UI.

• On prime of that, we’ve additionally elevated the scale and weight of our typography, which made skinny icons look a bit out of proportion.

• Most importantly, we additionally noticed a chance to extend the readability of icons, particularly after they’re sitting on prime of a wide range of completely different backgrounds.

We had a couple of completely different units of icons to merge

Over time, Encore programs had diverged and we got down to create a brand new set that might accommodate all of them, making issues extra constant and simpler to handle.

Creating and managing icons wasn’t as simple correctly

We noticed a must simplify our icon system for groups basically. One key side was to construct on our latest change to Figma by bringing the design supply recordsdata for icons and creation flows there in full. Another one was to try to cut back the variety of icon sizes we needed to create for each single icon that was being added to the system.

Enabling a seamless transition for everybody

We wished this replace to really feel like a seamless transition for end-users. For the overwhelming majority of icons, we’ve saved the present metaphor intact for this very purpose in order that customers can discover their means however get pleasure from a refreshed icon fashion.

So, what’s new?

Along with an general refresh, the important thing distinction is that we’re growing the weights of our icons by altering the principle stroke measurement. We’re going from 1px to 2px at 24px icon measurement.

Two, bolder sizes: 24 & 16px

We’re growing the stroke weight of our icons and simplifying our icon system by now solely sustaining icons in these two sizes:

Any different sizes which can be wanted will likely be scaled variations of those distinct sizes.

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

Refreshed fashion throughout the set

We merged the units by redrawing each single icon within the new fashion with the thicker strokes. The overwhelming majority of icons preserve the identical metaphor as earlier than.

Increased the distinction for energetic states

To enhance readability, energetic states are now not utilizing solely refined modifications to weights however as a substitute filling up a portion of the icon.

This is how we did it

Partnering with Rob Bartlett

Encore Foundation is chargeable for all of the core parts of Spotify’s design language. For a number of months, Rob Bartlett embedded with the workforce to make sure a really shut and profitable collaboration.

Identifying the brand new icon weight(s)

One of the important thing steps on this course of was defining the icon weight we might use going ahead. We primarily used 1px stroke weight and we knew we wished to extend it – however by how a lot? We tried a number of completely different choices; the bolder we obtained from the place we’d been, the extra we might see a transparent enchancment. After rounds of iterations, we settled on the 2 new weights. This determination was based mostly on two key elements:

• In order to fulfill our objectives for the challenge, the brand new weights wanted to be noticeably bolder than earlier than. With 1.5px and 2px, we have been growing the stroke-weight at 50% for the 16px sizes and 100% for the 24px sizes.

• The new weights wanted to be simple to design when creating new icons. This meant staying as shut as potential to complete pixel or half-pixel values, which designers would discover simpler and quicker to work with.

Which sizes would we use going ahead?

In our earlier icon set we had greater than 220 icons x 5 measurement variants = 1,100 particular person property. Our purpose with the refresh was to scale back the variety of particular person property as a lot as potential, with a purpose to make it quicker and simpler for groups so as to add to the system.

We already knew that Encore Web had efficiently moved to utilizing solely 24px icons, however we additionally needed to take the wants of your complete system into consideration. Using analytics, we might clearly see that 16 and 24px have been essentially the most used icon sizes – by far!

The foremost use-case for 16px icons was discovered to be in apps like desktop and in any occasion the place the icons may should be even smaller, like our obtain indicators in all monitor rows for instance. For downscaling to work correctly in these circumstances, the 16px icons wanted to make use of the complete width and peak of that icon house.

We decided that scaling the 24px measurement up would work for the overwhelming majority of circumstances the place icons are wanted at bigger sizes.

The closing end result was that we diminished the variety of measurement variants within the system right down to 40% of what we had earlier than by utilizing 2 sizes as a substitute of 5 – a discount by 660 individually drawn icons. When we make new additions or modifications to the set going ahead, that effectivity win could have nice influence.

Streamlining the contribution movement with Figma

Another massive focus for us was to deliver as a lot of the contribution movement for brand spanking new icons as potential to Figma, as that’s now the default device at Spotify Design. This meant a number of issues:

• The complete course of for including icons is documented inside Figma.

• All the rules on find out how to observe the brand new construction and visible fashion can be found in Figma.

• When groups are making their icon submission, we’re encouraging them to additionally share explorations that led them to their closing design. This means we will construct a collective historical past of icon-focused explorations in shut proximity to the place all of the manufacturing icons are being housed.

• All icons have each their editable supply vectors obtainable, proper subsequent to the optimized variations utilized in manufacturing. This means everybody can simply construct on prime of current icons after they’re contemplating an addition or an edit to the icon system.

Through shut collaboration with our engineers, we additionally managed to automate virtually all elements of producing the required code and completely different output property wanted for our varied platforms.

What’s subsequent?

We’re excited for everybody to expertise the refreshed icons in our cell and desktop apps now and also you’ll begin to see them in different platforms regularly all through this yr.