Tips on organizing large number of icons?

[Linda_Kim2]

My list of icons is becoming very large and I currently have it organized under one component with a variant called “Icon Name” for the name in addition to other properties (color, size, etc.). As I add new icons, I noticed that the list in the right panel for the “Icon Name” property is getting large and it’s out of order. It’s always being ordered by the order in which I added the new icon instead of how it’s placed. Any suggestions would be helpful to help organize this because I’m clearly not doing something right. Thank you in advance.

[tank666]

@tank666

Figma note:

Create and use variants

[AlicePackard]

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!

[Linda_Kim2]

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