Using Variant for big icons set

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

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!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.