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!