How to create an ownable suite of icons

Rob Hayman
Feb 25, 2020 · 4 min read

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:

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.

Auto Trader Workshop

Design, UX and Product Thinking from Auto Trader

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store