Spotify Iconset

15 May 2014

Last Autumn I was contacted by Andreas Holmström, Lead Communications Designer at Spotify, to see if I’d be interested in working on a new icon set to accompany the major redesign that was underway in-house. As a music fanatic, and a keen user of Spotify for about 6 years, I jumped at the chance! It’s fair to say I’ve discovered more new music with Spotify than any other medium, and I use it as much as a way of previewing albums I’m thinking of buying.

A month ago the full redesign was unveiled, and I’ve finally had a chance to write up some of the process and decisions that were made…

Discovery Phase

I always start a large icon project with what I call a ‘discovery phase’, where we select a few icons to look at first, and consider different approaches, metaphors and styles. It also helps ensure we get the size, format and file naming correct before cracking on with the rest. Working with Andreas, Stanley, Daniel and Sebastian from the Spotify design team, we set about defining the new icon set. The brief was to create an icon style that would be simple, rounded, friendly and intuitive (without being childish or cute), while considering existing brand elements such as the Spotify logo, Spotify Connect icon, and the Proxima Nova typeface that was being used for the redesign.

We started with Album, Artist, Collection (which became Your Music), Discover, Playlist, Profile and Radio:

One of the challenges was representing something that doesn’t have physical form. There are of course existing metaphors for parts such as the audio player controls, but how do represent the actual music? Spotify’s music library is immense, and yet doesn’t have any appearance as such.

An early idea was to use an iconic album cover – in this case, Pink Floyd’s Dark Side of the Moon:

In this case however, both Vinyl and CDs have a similar appearance – two circles within a square. We decided this much simpler design would work best. In particular, (my personal favourite) the Browse icon is intended to extend this, and hark back to the days of nimbly flipping through racks upon racks of albums. Nostalgia? Certainly, but it hasn’t done ‘envelope for email’ any harm.

We also tried out other music metaphors, such as a band’s setlist, or a cassette mixtape for Playlist, and a backstage pass for Profile. While mixtapes are decidedly ‘old school’ they are a unique and memorable symbol in their own right, but the simpler musical note is an established convention.

Iterating on these we developed a set of rules to design the rest of the iconset:

Genre Icons

The next stage was to tackle the much larger ‘Genre’ icons that you can see in Browse. Unlike the main interface icons, there was more room for exploration and a little detail.

One fun idea I explored, but rejected early on were ‘busts’ (busticons if you will)

Left to Right: Gene Simmons (KISS), Redfoo (LMFAO), Michael Jackson and a generic ‘Workout lady’

Redfoo was used for the “Party* icon (Party Rocking?) but we decided it could all be too obscure. It’s also harder to portray categories like Mood this way.

The direction we decided was this: for specific genres of music, convey it with an instrument that is representative of the genre. Particularly for rock and its sub-genres, there were several guitars that were ideal for each. Gibson Les Paul for Classic Rock, Flying V for Hard Rock, Fender Jaguar for Alternative and so on (these sub-genres aren’t visible in the app yet, but hopefully will be in the future):

I looked at showing the instruments in perspective, to allow them to be shown as a whole, but the result wasn’t as effective, or consistent with the rest of the set:

The other type were mood/atmosphere based which we represented with non-musical objects, such as the egg chair for Chill (right).

The project is still ongoing, and in particular there will be more Genre icons to add to the set!

Recent Posts

Leigh and Jon did Inktober

01 Nov 2018

We are Oxvik

15 Oct 2018

The Hicks Logowall

05 Oct 2018

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Firefox Identity Project

21 Aug 2018

It’s just fashion

26 Jun 2018

The Symbol Sourcebook

08 Jun 2018

Differences between Icon and Logo Design on This is HCD Podcast

10 Apr 2018

Instagram Hickstagram

  • 11 Nov 2018

    It’s got to the PowerPoint presentation part of Gruff Rhys’ set.

  • 11 Nov 2018

  • 06 Nov 2018

    The light falling on @matthamm this afternoon was like a renaissance painting

  • 02 Nov 2018

    Vector illustration of a Tufted Duck, using @affinitybyserif Designer on the iPad Pro (+ Pencil). This app is a game changer, letting me do the kind of work I’d normally need a desktop computer and a Wacom tablet for. #illustration #birdillustration

  • 01 Nov 2018

  • 01 Nov 2018

  • 31 Oct 2018

    Inktober Day 31: last day! @hicksmade and I decided to finish on a joint drawing using the Inktober logo as the basis. It’s been really fun to do this together, and I never thought we’d manage to keep it up to the end 😊 #inktober #inktober2018 #leighandjondoinktober

  • 30 Oct 2018

    Inktober Day 30. Almost there! @hicksmade drew our retriever Olive, who was named after “Olive the other Reindeer” by J Otto Seibold. This is Olive, with Martini the Penguin, on their way to the North Pole. #inktober #inktober2018 #leighandjondoinktober

  • 29 Oct 2018

    Inktober Day 29. Taking the theme of ‘lies’ from @hicksmade’s post today, here’s a generic picture of a liar. No one particular in mind… #inktober #inktober2018 #leighandjondoinktober #liar

  • 29 Oct 2018

    Inktober Day 28. From @hicksmade’s Willo the Wisp character to its narrator, Kenneth Williams #inktober #inktober2018 #leighandjondoinktober

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom