Redesigning the Spotify Icon Suite

Redesigning the Spotify Icon Suite

Enjoy our companion playlist for this article:

I almost always listen to minimal music when I’m doing some craft heavy work

Designing icons that scale across our products and reflect the Spotify Brand

Rob and I wanted to update the icon suite so that it was original and bold (in style) to reflect our brand. At the same time, we wanted the icons to be simple, yet remain elegant over time. The updates we discuss in this article are now also reflected in the recent update to our Spotify Premium experience.

Some core improvements: (1) consistent stroke width, (2) clean and simple shapes, (3) outlines over solid and (4) flat shapes over 3d forms

The new icon shapes were designed to mirror our Circular typeface — its sharper forms inform the overall icon style — creating a set that felt unique to Spotify. We also made sure these icons were drawn in their simplest form, considering the bare minimum needed to convey the idea behind the icon.

While designing the icons, we took inspiration from our Circular typeface — characters and glyphs: (1) a combination of round and sharp corners, (2) A use of common angles to define the overall style of our icons. Other characteristics such as the proportion and strength of the type also feature heavily.

Functional

Spotify is on more than 300 devices increasingly on new platforms and screen sizes, as our business grows we needed to create a flexible icon set to support that growth. The old icons were too complex and the visual metaphors were difficult for users to understand — which presented challenges when used in different sizes for all of our products. Meanwhile, the new simple shapes made it easier for us to implement icons that responded to any range of sizes, screens, and use cases.

We identified common icon sizes across the product and increased the breakpoints to ensure pixel perfection. Each icon was then created in 5 custom sizes and, at the end of the process, we had over 600 individually crafted icons.

Contextual

The final challenge was ensuring each icon adapted well in different pages, views, and features. At the start, we mapped out all the icons in all our Spotify products and planned to design every icon around its context. We thus needed to spend the first few weeks talking to teams, engineers, and designers to understand their specific needs.

By doing this and looking at each icon in context, we were able to identify the issues with the old icons on both visual and interaction levels. Furthermore, the simplified and responsive icon set helped improve some core interactions in our product. It helped make our new navigation model simple and more accessible.

The icon style helped the new navigation feel lighter and simpler.

Designing with constraints

The biggest learning, however, came from the process we used for this project. We forced ourselves to remain creative and open-minded within very specific design, technical, and product requirements.

We explored different variations of the home icon shapes. But ultimately, we ended up choosing the simplest one. This is a principle we kept in mind as we designed the rest of the set.

We researched the technical and product constraints up front, and began our design process from there. Identifying these early on saved time, built trust across other functions at Spotify, and helped us create an icon language that’s a balance between form and function.

Shout out to the GLUE team (desktop, web and mobile) for helping implement this into our products. 🙌

Bringing Spotify to India - and Beyond
Case studies

Bringing Spotify to India - and Beyond

Spotify Design and It’s Nice That take an in-depth look at ethics in design
Design

Spotify Design and It’s Nice That take an in-depth look at ethics in design