Interactive Component Icon Component Set Variant Not Being Preserved

I created a component set of icons with two properties: icon type and hover

I created a component set of cards with one property: hover, so that whenever you hover over an instance of that component, it changes to the hover variant.

The card contains an instance of the icon set and a label.

In my frame, when I toggle a card’s hover state, it shows the proper icon with the proper label.

But when I play it, hovering over a card shows the correct label and just the icon I happened to have in the hover state of the card’s hover variant.

What am I missing? Is this a bug?




Here is the link: https://www.figma.com/file/AVT3bAhDQYnNqwebCUqgjp/Purple-Cards

I managed to find a work around by just having a generic Font Awesome Icon and use that in my card component set.

Then every instance of the card in my actual frame has a text override for the generic Font Awesome icon, allowing me to preserve the icon used in the card’s hover variant.

It would be really nice if I could have the icon variants be the actual icons I want to use, instead of having to text override every card instance.

Does anyone have any better ways of doing this that still preserve the icon used when hovering?

The shared file is up to date with my work around.

I modified your file and everything should work properly now. Try swapping the instance at the “icon” layer level.