You might think it's clever to combine icon components together into a variant set. <span class="figma-component">Arrow left</span> and <span class="figma-component">Arrow right</span> are both Arrows after all! Same glyph, different orientations. Why not!?
Well, I've (unfortunately) got 3 reasons why that "direction" property is a bad idea (and not just for arrows, but other icons too):
Even if you add keywords in the description of the main component (not the variants! The asset panel doesn't search over those), your consumers who rely on the asset panel are about to have a real bad time. Watch this:
No matter how diligent you are with keywords in the main component, a lot of information gets hidden from view. Notice how that "details" preview panel only shows what the first component in the set looks like.
Consumers shouldn't have to fiddle with variant properties to get the icon they need. Keep each icon separate.
More variants means more layers, and more layers means more memory usage. Considering how prolific icons can be in certain interfaces I don't think the risk is worth it.
Using some examples from above: a single instance from <span class="figma-component">Thumbs</span> variant set with 2 variants (thumbs up, thumbs down) requires 6 layers.
But if you split out each thumb as a separate component, an instance only requires 2 layers.
Keep things light. Again, keep each icon separate.
Your devs are smart people, and I trust they could figure out how to extract icons from a variant set VS icons kept as separate components.
But why not keep things simple for them? Engineers are Figma library consumers too.
Keep things simple for everybody! Please, keep each icon separate.
And this does not only apply to arrows! Do the same for these other icons too:
Here's the list above in screenshot form:
This post is very much related to one of my longer and more popular posts about how to make the most of features like variants, variables and component properties. Part of making the most of features like variants is knowing when not to use them. Icons is a really good example. Here's an anchor link jumping to you to my rationale for always organizing individual icons as separate components.
If you'd like to be notified of when I publish a new blog post, joining my newsletter is a great way to keep up. My readers enjoy bonus behind-the-scenes insights on every post!
