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.
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.
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.
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.
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 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. 🙌