Instance swapped icons do not receive color updates anymore

We also have a design system with different visual densities and a lot of components and symbol components nested within them. All icons have an identical structure, the same naming, etc. AAAAND we have the same problem: the icon color assigned/overridden in the component is reset to the default value when the density is changed via the variable mode (see the red button in the attached example).

This currently destroys our entire design system principle.

The workaround with a masked icon and color range within the main component works, but is cumbersome given the number of components and also involves unnecessary layers.

Pleeeeaaaase dear Figma team @Celine_Figma: this is really not practicable (not even the workaround), please bring us a solution soon! Thanks 🩶

Thank you for your honest and detailed feedback. We’ve shared this issue with our internal team.

We appreciate your patience.
Toku

I had this problem when variables didn’t exist. Then they rolled out variables, problem solved. I even told my team to use color variables on buttons or any components that were using instance swap. For about a year it worked just fine. Then… only God knows what happened 🤣. What use do components have at this point.

Have same problem please fix this Figma (was working fine before)

Having the same problem here. Is there any update on the issue?

This issue has been driving me insane for years now. The only workaround I know of:

1. Duplicate the icon in the master component.
2. Select both copies of the icon and create a union. I usually rename the union something like “icon color.”
3. Delete the duplicate icon. The second copy was only needed to create the union.
4. Place the union in a frame the size of the original icon. This is required to maintain spacing because creating a union of an icon removes the bounding box.
5. Now I can apply a color to the union and it doesn’t matter what color the actual icon is.

This generally works, but has some issues:

• This won’t work for any icons with multiple colors or opacities (no duotone!).
• This forces all icon vectors to be exactly centered within the icon frame. Most icon libraries don’t actually center all icons; they are optically centered.
• This creates messy components with extra layers. It’s a pain to drill-in to the actual icon layer for designers who prefer to do so.

Figma treats an icon swap inside a button instance as an override. Therefore, any icon color change in the master button component will not be inherited by the button instance where the icon was swapped. This is similar to overriding the fill color of a button instance—any subsequent fill color changes in the master component will not affect that instance (the expected behavior).

The most logical approach, without relying on workarounds, is to use color variables for icon colors. By attaching a color variable to the icon inside the master button component, you can control its color from the Variables panel. This allows the icon color to update globally across all button instances where the variable is applied.

The only limitation is that you should never override the icon’s variable locally inside a button master component. Instead, always adjust the variable’s color value from the Variables panel to ensure the change propagates globally.

Hey ​@Yury Kuksa , could you please provide some clues on how to achieve that? I'm working with the variables for the icon, but it doesn't seem to work for me. I've tried using a different variable in the symbol variant and even applying variable mode to each symbol variant, but nothing is working. Thanks!

​@Daniel Doktor 

Hi there. Let’s say you create a button component with an icon and assign the icon’s color to a variable named Button-Icon-Color. You then create an instance of this button and swap the icon using an instance swap. As soon as you do this, the link between the icon in the instance button and the master button component is broken. So, changing the icon color in the button master won’t affect the icon inside an instance.

The only thing connecting the icon colors now is the Button-Icon-Color variable, which allows you to control the icon color inside both the button master and its instances, even though the link between their icons is broken because the icon was swapped.

So, if you later decide that the icons inside your buttons must be red, you should change the Button-Icon-Color variable to red from the Variables panel, rather than changing the variable in the master button itself to a different one.

I hope this helps!

…