How to create an ownable suite of icons
Icons, although small in scale, have a huge part to play in the design of digital products. They are the visual symbols that communicate key features or actions to a user, so making sure they are instantly recognisable is important.
There are many ways to craft an icon. Consistency of size, stroke weight and spacing are all fundamental considerations in their design, but how can you make them ownable to your brand?
Twitter provide a great example of this. The ‘home’ icon within their app, styled like a bird box, is a clever nod to their brand even when viewed in isolation. Google is another example, as they utilise their four brand colours in selected states on desktop.
As part of a wider rebrand project, I was tasked with updating the icon suite for Auto Trader with the aim of making them more ownable to our brand. This article explores the process we went through and what we learnt along the way.
Defining icon principles
It had been a few years since we last looked at our icons in detail and different designers had contributed to the library during that time. This caused a number of inconsistencies in their style and it became clear from the outset that we needed to establish a solid set of rules which every designer could follow moving forward. We set out the following three principles:
- Identifiable
Icons must be easy for users to understand - Consistent
Icons must feel part of the same family - Unique to Auto Trader
Icons must reflect our brand identity
Choosing a style and making them ownable
We compiled a list of roughly 100 icons that we set out to create. The next step was to decide on a style. For this we looked to our logo to see if there were any visual characteristics that we could apply to our icons that would make them feel part of our brand.
Apart from colour, we highlighted a strong mix of round and sharp lines within the chevron, a curved apex within the ‘t’ of our typeface, AT Fabriga, as well as the use of flat terminals. Based on this style analysis, we were then able to start applying these to some icons.
To narrow down the choices, we looked at how well each style reflected our brand personality. For example, a rounder, softer icon felt more ‘friendly’ compared to a two-colour, squarer design which felt more ‘insightful’ or ‘pioneering’. We agreed the final direction needed to sit somewhere in the middle.
The result was an icon which had rounded corners on the outside edges, sharp internal angles, typically at 45 or 90 degrees, as well as the use of flat end caps. These became some of the ‘rules’ we would apply to every icon we created to keep the suite consistent and build a stronger connection to our Auto Trader logo and thus the brand.
Making them responsive
Once we had a full set of icons, we created them in four custom sizes: 16px, 24px, 32px and 48px. This allows us to be flexible in their use across different devices, adding or removing details as we scale icons up or down.
Systematise!
In total we crafted over 450 icons — and counting! By dissecting our brand, such as the logo, we were able to create a system and set of rules that we can apply to any icon we need to create. These building blocks helped us to craft a suite at scale and have provided more alignment with other elements of our brand, strengthening the overall visual design.
Check out some of the brand refresh work on our recently launched new car landing page.
