Figma Support Forum

How do you override icon color when going back and forth between variants?

Hi! I have a component that uses variants to toggle between different states. The icon color override works fine when going from Rest to Disabled.

But when going back to Rest afterwards, the icon remains grey.

The structure of the components are all the same:
image

Any ideas why this is happening?

Have you tried the vector in union trick? How to preserve icon color override and size?

This isn’t perfect as the icon change size upon using the Union operation.

1 Like

Wrapping every icon you have in a union is an easy way to add unnecessary complexity and more grunt work in the future if/when this is solved a different way.

Yes, Union will fit the vector, but you can wrap it in a frame. I redid my file and now it looks like this: Base-Component > Union > Icon-Component > Vector.

Yes, I agree. Therefore, I reduced all this unnecessary complexity to one component as I wrote above.