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

I also have this issue. Is there a way to contact Figma support on this so they’re more aware?

Thank you @Alexandre_Navarro_Caldeira ! This has been such a frustration for so long. I haven’t been able to have my swapped icons obey my hover states, and your solution totally worked for me. I just went back and set all my root icons in my library to another so it reminds me to override my icon color on me default states when creating new components with icons.

Happy to know it helped 🙂

Uh. I don’t see this working. If I have let’s say 3 states for a component (default, hover, active), and the icons for each state are a diff colour, every time I change the icon in an instance it inherits the icon colour from the icon component itself.

So this happens:

• Default button has grey icons. All icons in icon component set are grey, so swapping this out is fine in the instance
• Hover state button has a BLUE icon. When changing this icon out in the instance the new icon pulls the GREY in from the icon component set.

Idiotic. Icons should always inherit the colours from the button state.

Also, what if I have multiple button variants? Primary = grey, secondary = outlined, teriary = black no background etc. Your “fix” would mean you’d need 3 sets of icon components in 3 colours. No, bad.

Figma needs to fix this. Icons should be treated like text. It’s a special object, not just another component.

And while they’re at it, they should create specific component types for buttons, fields etc that COME WITH states (hover, focus, active etc), AND allow variants (primary, secondary, etc) as standard without us having to reinvent the wheel every time we create a new library 🙄

Come on, @Figma_Support ! Web components are a fairly standard lot. You can give us a set of pre-built editable components that covers like 99% of all design use cases and then let the l33ts go off and invent new components if they want (I’ve been doing this 17 years and have maybe needed a custom component like twice). This is a no-brainer, even that lot from adobe should see the sense in it.

This issue is giving me a proper headache with a design system I’m creating - It’s crazy that this isn’t fixed! It just ruins the mechanics of a system when when components look all broken when presenting prototypes 😞

Please fix ASAP Figma!

This stuff is killing me.
@figma_support anything that uses the nested component (with instance swap in that component) is not working for icons.

Basically the structure might look like:
-Button
-----Icon with swap instance

If I leave the original icon - the hover works. If I swap the icon - sometimes it works, but most often it takes either original icon color, or behaves strangely… like not using overall any color changes

this answer should be pumped up! because that’s exactly what was going wrong with my single black icon, all I had to do is rename the inner vector layer to “icon” like all its sisters, and it worked

terrible . Why is this not fixed?

I found this solution and it worked for my case: How to solve the icons colors problem In Figma | by Edward Chechique | Prototypr
basically you need to make sure that the layer names inside the icons are the same and then apply the colour as a style in the component. Then when you swap the icon in an instance of the component the colour style applied will remain and the shape of the icon will be able to be swapped.

What @Beatrice_Rachello says is correct. As long as the top-level name inside the component is the same, it should work. I now systematically group content in a component and always use the same name.

Solved, Here is my solution for this:

First, you need to Flatten each layer in a variant, for this, as you know Figma doesn’t have to Flatten each layer option, so I suggest you download the Automator plugin.

After that, Select all layers (you can do this by pressing Enter while selecting the parent layer) Run Automator > Object > Flatten selection, then click Flatten each layer.

Done!

It does look to be all about forcing an override in addition to flattening and consistent naming.

If the original base icon component has a default colour of WHITE, make sure this colour is overridden in the next component where it is to be used as a variant.

It then stands a better chance of defaulting back to the variant than defaulting to WHITE. (if you still need white, specify a different white)

When applying the variant, it’s worth applying/unapplying/applying to “clear the cache”.

I’m with the sentiment of the thread though, this is maddening.

Simply Naming things correctly doesn’t work in all cases. This is extremely frustrating

both of these use the same "Active Variant that should make all parts red

Note: they have the same Layer naming, but one is a Vector (01) and one is a Union (02) that has been named Vector

Joining you all to scream into the void at @Figma_Support that this issue really defeats the purpose and utility of nesting icon components. I’m using a base button component where if I change the instance of the icon in an instance of the core component and then swap another variant on the instance, the color of the icon reverts to the color it uses in the base component. I follow the flatten-and-naming pattern as described throughout this thread.

You should naming the layer inside the icon such as:
Icon component> Live area > Vector.
Keep all icon has the structure like this. ( Layer name is the same with Live area and the last is vector).
Hope it will help you

The layer name in the icon component needs to be the same for each icon.

Hey, I have a complex indented components for my Design System and I still have the problem same if vector icon all have the same name.

I am also having this issue. I have meticulously ensured that layer structures and layer names are all identical across variants, and across all icons. I am still getting icons not keeping their override colours when viewing in prototype mode.

Imagine the frustration of seeing people post “fixes” and “workarounds,” none of them working, and just having to accept that Figma don’t care and are perfectly happy to let designers look like fools showing stakeholders a prototype that looks like amateur hour.

I can confirmed that this solution worked for me. Thanks a ton.

Nope. Does not work for me even if the vector layers are one shape with the same name. This is a bug. @Figma_Support

Hi @Mani_Noroozi , can you share the file (or a copy of the file) with our support team? They can help fix this with you here.

Boosting this. It feels like the way overrides work is really unpredictable at the moment, I keep having to reset everything to get them to apply.

This has been an old issue since variant introduction Day1.

The problem is, I can’t even try the Outline Stroke or Flatten because all icons react differently. This bug has also been frequently reported by several people over the last years in this community.

It’d be hard to reach the Adobe Illustrator level but I am expecting these bugs to be adjusted

Anyone who is using a Font for their icons (Material Symbols, Font Awesome) find a way to solve this color override problem? I love that our icons will opticall scale for the larger sizes but we’re finding that when swapping nested instances of icon components made with a font it’s not preserving the color override. Components made out of text don’t seem to have color preservation when swapped… Am I SOL until the Text Properties is introduced for variables?