[Variants] How to keep the icon color override while changing the variant state

Hi,

I’m building a big library and have a popular problem with icon color override which is not supported.

I’m have read a lot of topics and following them, unfortunately, it doesn’t work all the time in my case.

I created a button variant: a button with icons. Then I’m creating an instance and I’m replacing the icon symbol. The color keeps override. Hurra! I’m changing the state to disabled. The color keeps disabled override, hurra!

But when I’m changing the variant state ONCE AGAIN it keeps the second override.

Video:

My build:

Structure (All icons are shapes, all names are the same)

:sob: Problem:

I will be happy for any advice. Thanks

5 Likes
1 Like

Unfortunately it doesn’t work.

In my case all icons are grouped into a variant too (per size). When I’m doing that on a figma example created by you, it still has the same issue when I’m changing the button state twice.

Check the file from this post:

2 Likes

Figma still hasn’t fixed that, even though it totally breaks Variants.

5 Likes

Yeah, unfortunately, Figma didn’t solve the issue…
It makes some real troubles for us now cry:

4 Likes

It’s a nice little workaround. Thank you!

What? I have flattened vectors here, my man. Why should I have to need a workaround for them to inherit the colour I told the instance of the button component they appear in to be???

This is a ridiculous mess guys. Icons should ALWAYS inherit the styles of the button they appear in. That’s literally how icons are used. Why is this a problem?

1 Like

Here’s how I did it. (importing from illustrator: copy/paste or as an svg file)

  1. You will get multiple “layers” of the icon, depending on complexity.
  • The inner (vector) layers has to be merged (boolean group: union and finally flatten into ONE vector file).
  • Be careful while merging and flattening. Watch carefully as some may merge/flatten awkwardly, especially icons with a ton of layers. You may have to do it piece by piece until it all becomes one. Tedious. But it works.
  1. That “vector” file should be renamed - consistently (across ALL icons). I named mine “ICON” (yeah, ingenious). You can name the actual icon component to what is appropriate - eg. “circle.”

  2. Create your button etc. variants with updated icon component. Use its child component, and replace it with another icon. This should solve the problem.

  • Now that ALL the icon components are consistently named (ICON - on the inner vector layer) and has only ONE vectorized layer, this would work.

(VERY tedious, especially when you have already created a ton of icons - not doing it this way. I know. I did. I had to backtrack. But it is worth it and you learn how to do it the right way the next time)

Hope this helps! :smiley:

Screen Shot 2022-02-21 at 10.42.57

3 Likes


Hi guys,
in my case, i used the vector icon as a mask then put a solid rectangle color on top. That’s it! It works perfectly with nested components.

Sorta… Though I bet that makes handoff to dev a nightmare right?

This is an ongoing issue for over a year. If I look back it’s probably been two and Figma still hasn’t addressed it. Don’t expect them to either. We all still have issues with it, and it rarely makes sense. But you can expect 10 Figjam updates in no time, its been quite clear which product takes the priority.