Skip to main content
Question

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.)

01

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).

02

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

03

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.

This topic has been closed for comments

4 replies

Alyssa_Maac

Up! Please help me.

M
1 person likes this
  • M
    Marina60
tank666
  • tank666
  • 4859 replies
  • July 15, 2021

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

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Henrique_Sphera1
M
2 people like this
  • Henrique_Sphera1
    Henrique_Sphera1
  • M
    Marina60
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.

A
  • Anonymous
  • 0 replies
  • August 14, 2021

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings