Skip to main content
Question

Svg icon - different color in different variants

Cristian_Banu

Hi guys,
I have a problem I can’t seem to be able to solve.

Let’s say I have a button component, with two states (variants): normal and hover. The button has text and also an icon and the icon is also a component, so that you can swap the instance depending on your needs in order to change the icon according to the context. The icon has a certain color in the NORMAL button variant and another color in the HOVER variant.

The problem is, if I create an instance of the button and I want to change the icon to another one (swap instance), the color of the new icon will replace the color of the default button icon, which totally makes sense. But if I wanna customize the color of the new icon in the newly customized button, I simply can’t do for both NORMAL and HOVER states, if I change the icon color in the NORMAL state, that’s going to affect the HOVER state as well. The problem is that I want the NORMAL state icon to have a color, the HOVER state icon to have a different color.

What do you guys do in this situation?

Thank you kindly,
Chris

This topic has been closed for replies.

Brian_Saunders1

Hi, it is hard for me to know exactly what the problem is without seeing the file, but you might want to look into the way that Figma applies, preserves, or ignores overrides to component instances. Usually when I have issues like this it’s something to do with layer naming or structure. I apologize if this is something you’re already aware of, but it’s what came to mind first.

Figma Learn - Help Center
Cristian_Banu

Hi @Brian_Saunders1
Thanks for the link, I’ll check it out 🙂
The solution I found was indeed renaming the layers in the NORMAL and HOVER variants, but that means replacing the icon in both instances. And if you have a component which has 10 instances, that means replacing the icon 10 times, so I’m looking to find something simpler 🙂

R

Hello @Cristian_Banu,
In a design system I’m building I have no problems by using fontIcons (like fontawesome). In variants using SVGs I encounter the problem you describe.

Did you find a solution for your issue?

Cristian_Banu

Hi @rortelli
No, no solution yet. Actually I was checking to see if there are new answers to this post 🙂

R
1 person likes this
  • R
    rortelli
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