Using Variant for big icons set

[Garry_Valette]

Hello,
I’m finalizing my design system. I’m trying to combine my icons set as variants with more than 200 icons I think (I didn’t count exactly).
It works but then any kind of modifications (renaming an icon, changing icon’s color…) make Figma bug with very long loading or just freezing with message error that asks me to reload the project. I wasted a lot of time so I changed the organization.

Is it normal? Do variants match with icons set? What are your recommandations?

Best,

[tank666]

Please see this:

@tank666

And using variants for different icons is not the best way.

Figma note: We don’t recommend using variants to group different icons. If you have different sizes of the same icon, then you could combine these as variants instead.
https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants

[Pavel_Kiselev]

I would not want to scroll down 200 items list just to find an icon. Search is way better

[AlicePackard]

hey Garry, sorry to hear you’ve been experiencing these issues that’s frustrating.

I suspect the performance issues are happening because Figma doesn’t handle large variant sets well. Large variant sets eat up a lot of resources and weigh down your file. Part of this is because in order for Figma to offer instantaneous switching on instances, it needs to render every variant in the background. This happens for each instance! I expect if you switch to keeping icons as separate components you’ll see huge improvements.

Here’s some advice about how to make a clean switch without losing much time:

1. Rather than deleting your Icon variant set and starting from scratch, simply select all your variants and move them outside the main component frame. You’ll see them each become a main component. This will preserve connections to any instances of icons that you’re using elsewhere. Depending on what properties you had in place (if any) you may need to clean up the layer names.
2. Make sure the vector layer within each main component frame matches across all your icons. The standard method here is to flatten the shape (no strokes) into a single layer and name it something like “vector”, “shape”, or “icon”, but naming the icon component frame after what the pictographs represents (e.g. “pencil”, “house”, “arrow”). There’s another thread about icon color override preservation I’ve posted in showing this method.

hopefully this helps!