Arrow SVG icon made in Figma

Why organize icon styles with Figma Variants

Analyzing all the pros and cons of this method compared to the classic approach with individual icon components.

Thumbnail: 6 Figma icons organized with variants

Anyone with minimal experience organizing components in Figma knows that even in small systems there is no way to go without Figma variants. Besides being structurally beautiful and reducing the number of components, it also speeds up the customization of child components and makes it easier to find the right component. In a word, it is extremely practical. But what about icons?

Anron Icons latest version with 5,000 icons in 6 styles has been completely rebuilt on variants. This happened almost 8 months ago as of this writing. The rebuilding process was not quick, it was that routine and monotonous work that you are afraid to undertake because it seems like it will drag on endlessly. In short, it wasn't quick and it wasn't easy.

But I have never once regretted that I invested time here. During these 8 months, I actively used my icons in private mode. It's clear to me now that organizing icon styles using variants is generally the best way to work with large icon sets in multiple styles, although it's not without downsides. In this article, I want to share my conclusions.

What are variants?

Let's first just make sure everyone understands what we're talking about in this post. Here's a pretty accurate definition from Figma's official documentation. By following this link, you will also be able to learn all the details of how variants work in Figma.

Variants allow you to group and organize similar components into a single container. This simplifies your component library and makes it easier for everyone to find what they need.

To put it more simply, variants are just a group of components that live in a single container. This is how the difference looks visually for icon components in different styles.

The visual difference between Figma icons organized with Variants and classic individual components
In the first case, icon styles are grouped into a single component. In the second, they are simply separate components, not connected to each other in any way.

Let's look at a short list of all the pros and cons of this approach, and then look at the key ones in more detail.

Benefits of using Figma variants for icon styles

  1. Quickly switch between icon styles without using the search.
  2. Ability to mass switch between styles using Figma plugins.
  3. You can clearly see all available styles for each icon and easily edit all of them at once.
  4. Significantly reduced the number of icons in search results.
  5. Faster search due to reduced number of components.
  6. Ability to add extra tags to all variants of the icon at once to improve search.
  7. Reduces the risk of inconsistent naming of icons in different styles.
  8. Easy to scale, add new icon sizes in a single component container.

Don't worry if you don't understand everything from this list, we will now go into a more detailed exploration of these features.

Quickly switch between icon styles

Anron Icons currently has 5,000 icons / 6 styles. Imagine that you just want to change the style of 10 icons in some app sidebar from Line style to Filled. Without variants, you'll have to search through the 5,000 Figma components to simply change the style of the icons. And this will have to be done for each icon!

Two Figma panels with icons showing the difference between using variants and simple components
With the classic approach, you would have to search among all the other icons to switch the icon style. In the second case, thanks to the Figma variants, you don't use search at all, but immediately switch between styles using a simple dropdown.
The more often you need to switch between icon styles, the more obvious the imperfections of the classic approach will be.

Using Figma variants allows you to switch between icon styles without using search. This is just a super feature that saves a lot of time and energy. This difference in performance will of course be even more noticeable when dealing with large Figma libraries with thousands of icons.

Group switching between icon styles

This is only possible when your icons are organized using variants. Imagine the same example with 10 icons in the sidebar. With the help of plugins such as Variant Switcher, you will be able to play with the design much more freely. Just select the icons you want to change and specify the required style.

Switching the icons style using the Figma plugin called "Variants Switcher"
Quick bulk icon style switching with the Variant Switcher plugin.

Significantly reduced the number of icons in search results

If the icon styles are organized using variants, Figma shows only one icon style in the search results. Using variants in the latest version of Anron Icons with 6 icon styles reduced the number of components from 5000 to 850. This greatly reduces the cognitive load when using search.

2 Figma panels showing the difference in icon search results before and after using variants
With the classic approach, your search results will be cluttered with all icon styles. The use of variants reduces the number of components in the search results several times.

It is also worth mentioning right away that if you replace components through the Properties Panel or Resources Panel ( + I), the style of the icon will be preserved.

Easily add tags to improve search

Each component has a separate field where you can add additional information about the component. Figma also looks at this field when searching for components. In the case of icons, this is a good opportunity to add "tags" to improve search results.

Figma panel for adding a description of a component, which allows you to add additional tags for icons, which makes it easier to find the right icons
An example of adding additional tags. You can find the "trash" icon if you type "delete" or "remove" in the search.

With the classic approach with separate icon components, maintaining such a tagging system requires a lot of time and energy, as you have to manually duplicate the icon tags for each icon style. It's quite easy to get confused here, simply miss a tag, or make a mistake. While when using variants, you set tags on a single container with all icon styles at once, which makes the whole process much easier to keep track of.

Easy and convenient scaling

In addition to being able to keep icons in different styles in one container, you can always expand and add icons in additional sizes, such as 20px and 16px, when required.

9 Figma icons grouped in a single container with the ability to switch the size and style through a simple dropdown
The classic approach with individual components will make your search even more confusing. Variants solve this issue elegantly by hiding the extra sizes and not showing them in search results.

Cons of using Figma variants and how to work around them

  1. Inability to search for an icon in the desired style — you will see only 1 style in the search, instead of all 6 at once.
  2. Complicated visual search for the desired icon on the canvas — instead of 1 icon, you will see 6 at once.
  3. Naming problems during export, because Figma uses the name of the variant by default, not the component.
After some research, it turned out that all these cons are quite easy to work around.

Regarding the first point, yes, you will not be able to search for an icon in the specific style right away, but in practice, it turned out to be not so important. If you replace components via the Properties Panel or Resources ( + I), the style of the icon will be preserved.

2 Figma panels that allow you to switch the style of icons while saving the selected style
Two panels that respect the selected option when replacing a component.

Regarding the second and third points, the problem of visual search and export is easily solved if you just create a page with icons in a single style.

For example, the latest version of Anron Icons has a Variants page and an Instances page. The first page contains all the icon styles organized with variants, while the second one includes only Line icons.

2 pages from the Anron Icons file: one contains all component variants, and the second one contains only icons in a Line style
A separate page with icons in a single style completely solves the issue of complicated visual search on the Variants page.

In this way, we get rid of the issue of visual search on the canvas and also allow exporting icon variants with original component names.

It is worth noting that the Variant Switcher plugin allows you to quickly change the style of all icons on the Instances page at once. That is, if desired, you can easily make separate pages with different styles, or simply switch to the priority style on this page.

Group switching of icon styles using the Variant Switcher plugin in Figma
Group style change of icons using the Variants Switcher plugin.

So, as it turned out, the specified cons of using Figma variants are not such an issue, because they have almost no effect on performance and are quite easy to get around.


Using Figma variants is the most efficient way to organize large icon sets in multiple styles. This saves a lot of time and energy when switching between styles and simplifies the search process. Simplifies the process of creating new icons, naming, documentation, and allows easy scaling.