Skip to main content
September 29, 2023
Question

Instance swapped icons do not receive color updates anymore

  • September 29, 2023
  • 32 replies
  • 3323 views

When changing an icon’s color in a button component, the color change doesn’t appear on the buttons where the icon has been instance swapped. This was still working yesterday, and I tested it on several projects with different icon sets.

This topic has been closed for replies.

32 replies

Sreylin Y
New Member
April 21, 2025

@Yury Kuksa 

Thanks, it works when change color on Variable. 

 

Omar SA
New Member
October 10, 2025

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.