Figma UI kit
Using custom icons
Our UI Kit let's you switch all icons between outlined and solid styles with a single change (see global variables). This works because our default Heroicons library, in your Icons Figma file, is built with Style variants.
What if you want to create or use a
different icon library?
To get the most out of your UI kit, we recommend structuring your preferred icons in the following way.
Source your icons
Whether you're downloading a set from a library or creating your own, the first step is to decide on the icon styles you want for your project.
Most icon libraries include outline and solid styles, but your project might only need one. Our system is flexible enough to handle either scenario.
Solid
Outline
Duo-tone
Structure your icons in Figma
The key to making your custom icons compatible with our system is to use variants. Every icon style you want to use — whether it's just one or several — needs to be a variant within a single component set. This structure is what allows our global variables to control them.
Setting up the "Style" property
For each icon in your Figma Icon file:
Select a set of icon(s) (e.g. check-badge, settings-gear, etc).
Combine them as variants.
Rename the property to
Style.Name each variant within the set to give its
Stylevalue a name that matches its look (e.g.outline, solid, duotone).
Core recommendations
Icon size
Our system uses an 8pt grid, so we recommend a standard icon size of 24x24px, as it’s a multiple of 8.
This dimension refers to the frame (or bounding box) that contains the icon, not the visual artwork itself. While there isn't a strict rule for the inner artwork, ensuring it has ~2px of padding on all sides is a good starting point for visual balance.
Color
To ensure your icons can easily work with color variables, it's best to link their fill color in your Figma Icons file to a variable from the Brand Figma library, such as colors / black.
How to swap a new icon library into your Figma UI kit
While Figma doesn't have a native feature to swap all component instances across an entire file in one click, you can still update the icons in your UI kit on a page-by-page basis.
In your UI kit file,
Accept changes from your published Icon file, and navigate to a component page.
For icon instances:
Select the icon name and use the swap-instance menu to choose a new replacement icon.For icons using a Instance Swap Property:
Select the main component property to update the value and preferred list of icons.Repeat this process for all necessary pages with icons.
When finished, publish your changes to the UI Kit.
Need more Figma help?
