Icon colors won't change for variants

[Alyssa_Maac]

I’m building a design system.

For the Atoms, I have these icons that are just colored black so I have no other versions in a different color. There’s one component and the different icons are the variants (search icon, menu icon, etc.)

And then I made a button and used the icon component (see the dashed circle on the screenshot below). And since the button has a dark background I colored the icon into white (on the button itself not affecting the master icon component).

But when I try my other icons the lines are not affected with the white coloring. (See screenshot)

Why does this happen? I’m considering of creating another component with the light icons but it kinda defeats the purpose of having one component and just multiple variants.

[Alyssa_Maac]

Up! Please help me.

[tank666]

Probably your icon consists of several layers of vector paths. Try to flatten (Cmd/Ctrl + E) these layers into one.

And using variants for different icons is not the best way.

Figma note: We don’t recommend using variants to group different icons.If you have different sizes of the same icon, then you could combine these as variants instead.
https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants

[Alyssa_Maac]

Hello Yury, thank you for replying. That sucks I would have to restructure everything again. That would take me weeks. I just followed other designers they also combined their icons into one variant. However for mine the small, regular, and large icons are separate components. So:
Small Icon (1 Component) > Different Icons (Variants)
Regular Icon (1 Component) > Different Icons (Variants)
Large Icon (1 Component) > Different Icons (Variants)

I did rogie’s trick and kind of solved my issue above but I now have another issue to my other post in which you replied.