Tip: Create icons to support colour mapping across Figma variants

How you build and structure your icons in your library matters.
Structure your icons consistently to support Figma’s colour mapping between variants.

Structure your icons consistently to support Figma’s colour mapping between variants.

Icons play a big part in any brand and any design system. Good icons can balance communication, usability, brand identity and enhance a user’s experience and vital to be included in your design system.

Good design systems also follow these conventions, plus are built with the goal of consistency, scalability, and accessibility can be quickly adopted by ease of use. They bridge gaps between disciplines with shared language, shared conventions, shared guidelines, shared code, and even shared repositories, especially for tangible items like icons.

It has been great to see design systems and brands scale and mature over the years with a greater emphasis on their integrity. Topics like design tokens have been significant in reducing the gaps between design and development and even opening up to wider stakeholders like brand having a welcomed seat at the table. Icons are a great foundation for all to the table.

A goal of our design system is to encourage adoption and this has to start with making the right tools for the job. Making components that can be quickly dropped into place and manipulated within their boundaries. An early lesson I learned is standardising the technical structure of the icon to support Figma colour mapping and multiple variants.

My icons change colour when added to components.

Problem of icon colour not mapping with Figma colour

Solution of icon colours to map across Figma variants. Primary to Secondary, icon maps from white to dark

Looking into icon conventions with external libraries

A brief look at who I consider leaders in Design systems specifically at common conventions and standards.

• Atlassian Foundations
• Bootstrap Icons
• Decathlon — Vitamix
• GitHub Primer — Octicons
• Google Material icons
• IBM — Carbon icon
• Shopify Polaris Icons
• Streamline
• WISE

These are the following standards I considered to rate each.

• Single layer = Icon is reduced to a single layer
• Layer name = Vector name is the same throughout the library
• Fill = Uses a filled shape and not a stroke
• Structure = Consistent structure within the library
• Variants = Support different screen sizes, weights, and padding (this is not considering resize scale)
• Rating = How reusable this system is for my context

Rating scalability of external libraries

Bootstrap icons: Inconsistently named and inconsistently structured. 2/10

IBM Carbon Icons: Inconsistently named and inconsistently structured. 2/10

Atlassian: Icons are consistently named and follow a single fill layer convention. 8/10

Google Material: Icons are consistently named and follow a single fill layer convention. 8/10

GitHub Octicons: Icons are consistently named and follow a single fill layer convention. 8/10

Shopify: Icons consistent in name, structure and support size variants. 10/10

Icon structure

Inconsistent icon structure looks like an error in the component and encourages designers to detach a component.

Inconsistent icon structure looks like an error in the component and encourages designers to detach a component.

Button anatomy

Our buttons are built using Figma Nested instances, I wrote a short piece on easy and maintainable design systems with nested instances a few months back.

Here we’re focusing on swapping the icon part, in this instance chevron-down.

Different ways to build an icon

There are many different ways to build the same icon and will vary from designer to designer and system to system but could be crucial to growing your design system adoption amongst your team.

Icon 1 — Stroke with multiple layers

Using strokes disregards the fill colour mapping relationship we set on the button component that maps across all variants and themes.

Using strokes disregards the fill colour mapping relationship

Resolve

• Group layers
• Use the Figma Flatten tool
• Use Vector or rename to something generic that would be used for all icons
• Outline stroke

Icon 2 — Stroke of a single layer

Using a single stroke again disregards the fill colour mapping relationship we set on the button component that maps across all variants and themes.

Using a single stroke disregards the fill colour mapping relationship

Resolve

• Use Vector or rename to something generic that would be used for all icons
• Outline stroke

Icon 3 — Fill of multiple layers

We set the colour mapping to a single fill value on the button component so any additional fill colours would be ignored.

Multiple layers confuses the Figma mapping relationship and only maps to the single Vector layer

Resolve

• Use Vector or rename to something generic that would be used for all icons
• Outline stroke

Icon 4 — Using the Figma grouping Union tool

The Figma Union tool is a way to group layers together and still have a lot of flexibility to edit beneath. Similar to the above examples, this is not a scalable format as some icons could be simpler and some more complex.

The different structures break the Figma mapping relationship.

Resolve

• Use Vector or rename to something generic that would be used for all icons
• Outline stroke

Icon 5– Layer name differs to its legacy

The different layer name now ignores the Figma colour mapping.

Different layer name breaks the Figma mapping relationship

Single layer with different layer name

Resolve

• Use Vector or rename to something generic that would be used for all icons
• Outline stroke

Icon 6 — Single fill layer with same layer name

Using a single fill layer gives us the flexibility for icons to follow a range of visual complexity and still follow our mapping conventions. This allows our designers to easily swap to whatever icon fulfils their needs.

Single layer with same vector name as icon library

Colour mapping

Identical structure and layer names to support colour mapping and scale.

Conclusion

Icons are a big part of any design system foundations, they balance communication, usability, brand identity and enhance a user’s experience. How you build your icons plays a big role in their contingency and is worth reviewing. Making sure they’re built in a way that supports colour mapping, allows designers to easily change component variants, and states with the icon inheriting the colour set from the design system.

Design systems and these ways of working are gradually closing the gap between design and development and I look forward to seeing it mature further.