Skip to main content
Question

Icons as components vs icons as variants?

  • June 13, 2024
  • 2 replies
  • 1092 views

Rasmus_Schultz

I’ve seen some people create their icon sets as multiple components - this is nice, because your icons will actually be displayed in the assets browser.

I’ve seen other people create their icon sets as a single component with variants - this is also nice, because you can create variants for size or color etc.

Unfortunately, if you create your icons as a single component with variants, you can’t see what you’re choosing anymore - the icon type property is just text, which isn’t helpful for choosing an icon at all.

A single component with variants definitely seems like the right approach - however, I am inclined to choose the multiple components approach, even though this is much less manageable and somewhat impractical when you want to make changes to icons across the board, just because the UI for selecting the icon type isn’t visual.

I wish there was an option to make a property display as images rather than text.

Or an option to make variants of a component display in the assets browser.

Since we have none of those things, is there any technique that lets you pick your icons visually while still using variants?

Or is this what we’re stuck with?

2 replies

Pavel_Kiselev

Icons in a single component set isn’t good idea. It’s much harder to maintain, you’d need to sort variants by hand, no preview, no search. Also instance swap seems to give better experience overall. And lastly, it takes much more memory because adding a single instance loads all variants into the memory. It’s better to have each icon as a separate component and use variants for something else like different style, or size.


Talita Emmanuela

@Pavel_Kiselev The only problem with this approach for me is that my icons are white so when searching/viewing in library they all look white on white. I have added a frame around all the icon components that has a colour but that didn’t have any effect of the ‘invisible’ white icons. Any advice would be much appreciated.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings