Tips on organizing large number of icons?

Hey @Linda_Kim2 , this is a great question! And @tank666’s reply is spot on: it is always best to avoid combining icon components into variant sets whenever possible.

There’s a few reasons why:

1. Performance. For Figma to be able to let you instaneously switch variants using properties in the design panel, it must load all variants in the background. This happens for every instance on the canvas. The more instances you place, the more variants get rendered, and this means less and less file memory you have. For something as foundational as icons that get used within other components and on their own, this could quickly drown a file.
2. Instance usability. You mentioned the select list in the design panel is getting very long–this is a symptom of a variant set that’s getting too big. Besides being a lot of information to take in and potentially a lot of scrolling, there’s also
   • no visual preview of the icons
   • no way to narrow the list by searching for keywords
3. Instance discoverability. Because all the icons are buried in a select list, it’s hard to know how many icons are available, and what they look like. You may be able to add descriptions to each of them so that way if someone searches the asset panel for “pencil” then your Icon component will show up… but unless the default variant is that pencil, they might be confused about whether that’s the component they should use.

So instead, the best practice is to have every icon be it’s own component. I don’t even combine tightly related ones like “chevron-up” and “chevron-down”—I still keep those separate for the same reasons listed above.

At first you may want to keep your icon components in the same library file as your other components. Eventually you may want to move your icons into a library file of their own! You could choose to do this sooner too.

One area where I disagree with Figma’s best practice mentioned above is with how to offer the same icon at various sizes. Instead of using variants I recommend you use @Ridd’s icon wrapper method.

And if you need components with interactive states, you might consider re-wrapping an instance of the component you’re working with within a new main component frame. Then making overrides on it. That way you have both a static version where you can control the artwork and a separate interactive one.

I hope this helps you find some relief with your icons!

Thank y ou @AlicePackard and @tank666 so much for the help and clear explanation!

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