How we created a joyfully bolder icon system

As part of creating a new design system, one of our major tasks was to breathe some new life into our existing iconography, by pulling them into the new look and feel, as well as correct inconsistencies that have been present from years of legacy design work.

Where we were: MONO

Our prior design system MONO, featured a suite of single use icons. Apart from the fact they were visually incoherent with our new look and feel, there were quite a few inconsistencies built up over the years from legacy work, including different stylistic treatments, stroke widths and random sizes. There was also a large visual gap between the icons used for web and those used across our John Lewis App.

Our aim

Undertaking the icon redesign, we had a series of aims to achieve:

• Clearer, bolder and consistent stroke widths
• Think interaction first
• Take a holistic mindset to designing icons
• Define and unify a selection of sizes and their stroke treatments for multichannel use
• Draw a clear relationship to our Gill Sans typeface
• Revamp our naming conventions and contribution process with our engineers

Refreshed and intuitive icons

We now have a growing suite of over 96 icons in a range of sizes. These are separated under their own IA of Actions, Alerts, Comms, Services and Navigation.

Stroke width and sizes

Three size sets of icons using consistent stroke widths

• 24px with 1.5px strokes
• 32px with 2px strokes
• 48px with 3px strokes

Filled states

We now have consistent and considered filled variants of our icons across all sizes. This allows for stronger interaction feedback on components such as tooltips.

Harmony with our typography and components

Our new suite of icons is derived from cuts of our typeface. We’ve used angles and shapes from the characters to visually tie icons and typography together. All icons are now designed and scaled to work with our components such as icon buttons and message blocks.

Consistency across apps

We’ve established guidelines for icon usage across our different products, making sure we have parity on icons being used throughout the John Lewis website. We’ve merged and aligned our icon system with our app, and have expanded to other digital touch points such as CRM who are adopting the design system iconography where relevant.

Identify icon sizes and weights

We collated our existing sizes and boiled them down to three clear size groups. It was important to make sure these three sizes were set up for specific use cases, and that they felt balanced with other elements such as typography and buttons. With the sizes defined we landed on a stroke width for each group that was visible at command zero on small displays and worked well with the type styles.

One of five icon grids

We then set five basic grid structures to assemble our icons:

• Square
• Circle
• Vertical rectangle
• Horizontal rectangle
• Vertical + Horizontal rectangle (For icons that need extra space to feel cohesive with the rest of the family)

Starting with type

While each icon is visually distinct, each icon is unified in adoption of our brand typeface. Dissecting the character’s shape within our bespoke cut of Gill Sans informed decisions based on the shape of the icons. When using this method, the shape was considered for inspiration, but the development of the icons remained true to the grid, ensuring alignment is set.

Defining a scaling-up and artworking process

All our icons are first designed to our 24px size. At this size the icons are at their simplest. While our icon style is quite geometric, if extra slight flourishes are needed these can be introduced at larger sizes.

Maintaining balance and breathing room for our iconography is a must, especially as these icons flow into our atoms such as buttons. For scaling up, we scale our 24px icons up to 30px. The stroke is rounded up to 2px and the icon is adjusted where needed to sit comfortably on the grid. We then centre this within a 32px frame which allows for some extra breathing room.

The same process is used for 48px, we scale the 24px up to 46px and centre, adding the additional pixels to the frame for balance.
All our icons are catalogued, with type cut references and their original outline versions. These are then artworked using the union or subtract features in Figma. Filled variants then follow the same process. Once these artworked versions are set, we import them into our Icon Library.

Naming conventions and icon roles

When choosing an individual name for the icon, we have opted where possible to keep the name very practical. Naming an icon such as “ruler” allows guided use across things such as length, measure, size and straighten. Obviously icons locked to use cases will be named as such, such as “sales tag”.

We opted for the naming convention of “IconName-Sizepx-State.svg”. This marries up to the naming using by our engineers.

Once we are happy with the naming convention, we export the SVGs and upload a ticket to the design system kanban to track its progress into the next release. Once the icon has been released we will publish a library update to match what’s available live.

Encouraging contribution from our designers

As our design system matures, we’re encouraging our designers to actively contribute new icons into the design system. We are in the process of creating a contribution model for icons, as well as opening up hot houses/ workshops to chat about anything from concept creation to scaling and artworking.

Future

New icons and new placements

Our icon suite is maturing and growing along with our components. We are looking to investigate size 16px icons for specific components and use cases. We still have work to do on what’s larger than 48px, their style and how they should be defined, all the way up to micro illustrations. We are also investigating motion within icon interactions, specifically around things like accordions, icon buttons and messaging components.

It’s definitely a key and interesting part of the design system, so stay tuned for a future post!