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

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.

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

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

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?

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.

2. 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.”

3. 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! 😃

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.

I manage to make it work if the layer icon in the component it’s still named the same (let’s say Icon-left) and if the shape of the icon in the icon component is also still named the same (Icon color).

I’m having the same issue. Icons are all flattened, and have the same name. I’ve tried it with the icons as variants, and as separate components. I tried the mask suggestion, but the mask doesn’t stay connected to the icon when I update the icon.

So… this is still a thing?

This type of thing baffles me - it’s like figma designers and developers don’t know how web elements work. Icons inherit div styles, buttons always have at least 4 states (default, hover, focus, disabled), and dropdowns are a thing, my guys, and can have x menu items. Instead of making us build everything from scratch every time, can you not just create components that mirror what actually happens on the web?

You’re giving us flexibility we don’t need. I’ve created a million button components and variants I shouldn’t have to. Give us states as a concept, fix this interminable issue with icon colors (and sizing! wtf!), and give us dropdowns that we can add and remove menu items to as needed 😦

While you’re at it, you can create: checkboxes, radios, tabs and badges as standard components that can be configured. These are components that look and work more or less the same everywhere online, and we’re not out here reinventing the wheel with every project.

Yikes.

I have the same problem as the original poster. This has been around for several years. Wish we could vote on this being a fix. I have to give my designers instructions that when they swap things in some places they have to change the icon colour manually. And i spent time making sure all my icon components have a nice “Vector” in the root, and nothing else.

Is there not a bug filed for this, having been such an issue for so long… ?

Response I had from Figma looking at this bug. So I guess take it as final for now. Looks like they’re not going to touch it.

"After looking through the file I can confirm this is currently a known feature limitation in override preservation across multiple levels of nested variant instances.

This is something our engineering would definitely like to improve in the future, however we don’t have any updates on our immediate roadmap."

Hi @Dawid_P,
Hope you doing great.

The reason why you face with this issue is your icons layer are separated from each other. You easily can select all layers from each icon and select “Union Selection” option from top menu. Problem gonna be solved. ❤️

Regards.

it worked for me after i FLATTENED (CMD-E) my vectors and named all layers consistently The little arrow besides the layer disappears if the union or whatever has been flattened:

Unfortunately, this is still a thing that occured to my team today.

We tested a very simple button component like this:

❖ Button (= Auto Layout Frame)
— ◇ Icon (= Nested Component Instance)
— Label (= Text)

We defined an instance swap property for the nested icon component inside the Button.
The Button has Variants for two different states (normal, hover). The normal state button contains text and icon Color A and the hover in Color B. We utilize the while hovering interaction to change the normal state to the hover state via smart animate.

Also, we have two different icon components which we can swap to.
Each icon component has exactly the same layer structure and naming – and we don’t use any hack like the union trick.

After inserting the Button component as an instance in the test design, we override the default icon by swapping its instance to another icon and change the text.

When testing the button and its interaction behavior in a prototype the following happens:

1. hovering the button = change to hover state, icon color has changed from A to B as expected.
2. not hovering any more / placing mouse cursor outside the button = changes back to normal state as expected, but the icon color stays color B and does not revert back to color A – this is an unexpected behavior and a bug we cannot resolve at all.

This only occurs if the Button doesn’t use the default Icon, so it just happens when using the icon instance swap.

Any thoughts on this?

Not sure if this also solves your problem, but the issue I found in my case was: The Default state needs to override the nested icon. If the Color Style applied to the icon on a component’s default state is the same that the icon component has in the library, Figma doesn’t “identify” any change, so when coming back from another state that does override the color results in no change.

How I solved this:

1. The icon component has ColorStyleA applied to it by default
2. The component in which the icon is applied overrides ColorStyleA with ColorStyleB in its default state. ColorStyleB is identical to ColorStyleA.
3. The hovered component applies ColorStyleC to the icon.

This way, when removing the mouse from the component, Figma understands that ColorStyleB needs to be applied to it.

That is indeed what I came across too… changed all default Icon colors and now it works.
Pretty never wrecking if you’re not aware of this issue.

Thanks for this insight, this was a super annoying issue to fix.

I have this same issue. Figma please fix this!

If you force color override on your icons it would work, here is my take on it