Skip to main content
Question

Instance swapped icons do not receive color updates anymore


Show first post

31 replies

pterisaur
  • New Participant
  • 16 replies
  • January 28, 2025

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.

Yury Kuksa
  • New Member
  • 3 replies
  • February 13, 2025

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.


Daniel Doktor

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!


Yury Kuksa
  • New Member
  • 3 replies
  • February 24, 2025

@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!


Sreylin Y
  • New Member
  • 2 replies
  • April 21, 2025

 


Sreylin Y
  • New Member
  • 2 replies
  • April 21, 2025

@Yury Kuksa 

Thanks, it works when change color on Variable. 

 


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings