Instance swapped icons do not receive color updates anymore

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!

…

​@Yury Kuksa 

Thanks, it works when change color on Variable. 

Would it be too difficult to simply add a checkbox somewhere to propagate color changes to instance swaps?

My use case:

• Each icon is a standalone component inside a folder. Example “Icons/AArrowDown”. The actual vector is a flattened shape named “vector”. By default, I apply a “Content Default” color variable to all of them.
• On my button component I add an icon as a default. Let’s say “Icons/Square”. And change the color depending on the buton
  • If primary “Content Inverted”
  • If secondary “Content Default”
  • etc.
• I apply instance swap property to the icon, so designers using the button can quickly replace it
• Designers start using the buttons and when they replace “Icons/Square” with something else like “Icons/MoveRight”, the color I defined at the button component level is maintained.
• However, let’s say I need to darken the icon a bit, so I go back to my button component and change the Secondary Button icon color from “Content Default” to “Content Muted”.
• The instances that were swapped (like the MoveRight) do not get the color change
• The only way to get the new color is to reset properties and swap again. Which obviously is unsustainable if multiple designs have already been made.

Is there something I’m doing wrong? From what I’ve read, so many designers trying to find workarounds… as I read in a previous reply swapping icons is surely the primary use case for the swap feature.

The only workaround that comes to mind is trying to apply a dedicated color variable to icons in buttons. Basically “icon-primary”, “icon-secondary”, “icon-muted”. But, this doesn’t seem ideal.