After trying a bunch of combinations, I’ve realised it’s somewhat dependent on the icon, for one icon it works for another it doesn’t. Not sure why, as all my icons are flattened into 1 layer with fill.

BUT the icon always goes back to primitive’s colour if I use instance swap to change it.

Same problem here. Issue still persists. So many are complaining about this and nothing happens. It’s ridiculous.

It sounds like you’re running into an issue where the icon color reverts to the default when switching between variants of your Button component in Figma. This is likely due to how component properties and instance swaps interact, especially when dealing with nested components and overrides.

Here’s a breakdown of why this might be happening and how to fix it:

Issue Breakdown:

1. Nested Component Properties: When you swap an instance inside your Primitive component (like the icon), it inherits the properties from the parent (like the color or style).


2. Override Propagation: The icon’s color change may be getting reset because it’s tied to the properties of the parent component (the Button). When you update the properties of Button again, Figma may reset the icon color to its default value, as it’s still considered part of the Primitive component.


3. Instance Swapping Behavior: Figma’s Instance Swap behavior doesn’t always maintain overrides (like icon color) when switching between variants of nested components.

Possible Solutions:

1. Use Component Properties for the Icon Color

Instead of directly changing the icon color in the Primitive component, make the icon color a component property of the Primitive. This way, when you swap the Primitive inside the Button component, you can control the color via the Button component’s instance overrides.

Steps:

• In your Primitive component, set the Icon Color as a component property.


• When you create the Button component that uses the Primitive as a child, make sure the icon color is exposed as a property in the Button as well.


• When swapping the icon instance, override the Icon Color property directly on the Button component instance.

2. Ensure Icon Instance Swaps Don’t Override Overrides

If you’re using instance swaps for the icons in your Primitive component, check that the icon color is applied as a direct override rather than as a part of the icon’s default style. This might involve ensuring that:

• The Icon component itself has a default color property but is not overriding the color through its styles.


• If you’re using Auto Layout, make sure the icons are not reset by the layout properties (like padding or constraints) when switching between variants.

3. Use Preserve for Instance Overrides

In Figma, some overrides can be locked or preserved to ensure they don’t reset when switching between variants. You could try setting the icon color to Preserved Override in the Primitive component so it stays consistent even when you swap variants within Button.

4. Check Layer Name Matching

Ensure that the name of your icon in the Primitive component matches the icon name in the variant. In Figma, if there is a name mismatch, the properties could get reset when swapping instances.

5. Avoid Nested Instance Swapping if Possible

If you are nesting too many instance swaps (e.g., swapping icons within a button component), try reducing the complexity. Instead of swapping instances of the icon, use variants of the icon inside the Primitive and control the size and style of the icon via component properties instead of swaps.

Final Steps:

1. Double-check that you’re using component properties for things like icon color rather than using layer overrides directly.


2. Ensure that all component instances have matching names and are not resetting each other’s overrides.


3. Test with simpler structures: Create a simpler button variant and check if the same problem arises, so you can isolate whether it’s related to instance swapping or component property handling.

Let me know if this helps or if you need a more detailed step-by-step guide!

I’m interested in the point mentioned above:

‘In your Primitive component, set the Icon Color as a component property.’

Is it possible to set color as a property?

​​​​​​​

@Kenny_McAndrew1 I strongly suspect that the message from @Alok is AI generated. Which means it might have hallucinated here and there, unfortunately. 

I use a ton of components in my projects and never has the override of colors been a problem. But in a bunch of newly created components, I am no longer capable of changing colors in instances as mentioned in this thread. 

Honestly I do not have any clue so far what the source of the issue might be – yet.

Same here: I have an action bar with interactive states: The action bar consists of icon buttons, whose icons color change on different states, but also I need to swap icons in various contexts…. so i used instances to easily change icon, but I want to keep the rule for the states. But it does not apply the various colors of the component to the various instances. this is really a pitty!

Not sure if helpful, but what I observed something weird: the ability to override a color in an instance of a component seems to depend on how the component has been created. In my case (UI Icons) I am converting multiple line vectors to “outline stroke” vector shapes and then flatten them. If I at some point in the process first “union” the multiple shapes before flattening them, the final shape cannot be changed in color in the instances of the component. If I convert and flatten the shapes while avoiding the “union” conversion, the final form can be changed in color later.

Not sure if that makes sense technically, but at least I was able to reproduce this weird behavior.

​@adrian_n has given the solution. You need to flatten the icons so they will change according to the variation. Thank you Adrian, you saved me from headaches.

​@adrian_n I love you man. You save my work, thank you