Why instance swap messes with Variant property?

Ok so I’m new to Figma and I was playing with component properties.

I have a component (Nav) with Variant that has a property (state = active / inactive)
In the active state, both the icon and text get turned into pink.

When I create an instance and change the state between active / inactive it works fine.
But when I change the icon from to another instance swap such as market,
and set the state to (active) it turns into pink normally.
But when I set it back to inactive, only the text goes back to white and the icon stays pink.

What is causing this issue?

@Tarek_Elsayed this is due to how each of those icons are built, for example, maybe your puzzle icon has a shape, a fill and other things inside, and maybe your cart icon is only a solid shape.

Ensure that icons you swap have the same folder structure, try creating a union and changing the color there for icon.

Here is a quick example I just did: Figma Link :link:

Hey @Mojo thank you for the Figma file you provided. It produces the same issue I’m facing.
However the structure in my icons are the same a component that only has one vector
for both the puzzle icon and the cart.

here is an image of the layers :
2022-09-29_201856

@Tarek_Elsayed did you play the proto? for me the union workaround is working, I see the feather going from black to pink when I click, with no issues: Prototype Link :link:

I did play the proto and I saw that it’s working.
How to Union a single shape? I don’t have multiple shapes to union.