Change icon colour in hover state

Hello ! 🙂

Did you try to use an instance swap properties on the icons on your button component set ? This can help to maintain the colors of the instance whatever the icons you set.

Hi, thanks for the response 🙂

So the way I have it set up, I have a button set with variants, and I can use instance swap in a button instance.

This is instance options I have set up:

But these work in an instance only, I can play around like this with button variants. Should I rearrange it somehow?

I worry I overcomplicated the button set somehow, but I wanted to cover options for a lot of button types we have on the website.

I don’t think the way that you create a lot of variant is the problem. Maybe it can be a mistake on a local modification. Can you send me a copy of your button component set in a Figma file format ?

Could you let me know how I can best share it with you, so you can see it? Would this work?

Yes thank you ! Do you also have your icons component set separately ? Just to try to reproduce your issue with your colors variable

I added icons to the same file 🙂 I can’t, however, share editing access as Figma immediately adds a paid seat to our team 😬 Is there a way I can share and avoid that?

It’s okay, i made a copy on another file to edit 🙂

Your ‘search’ icon has a stroke, while your ‘phone’ icon has a fill. When you link the colour of your icon to your button, the colour takes the colour of the stroke of your ‘search’ icon. When you hover, the colour remains linked to the stroke, so your ‘phone’ icon takes on an orange outline.

To correct this, you can modify your ‘search’ icon by adding an ‘outline stroke’, which will give it a fill colour rather than a stroke. 🙂

OH this makes perfect sense. Thank you for pointing that out!

Okay, I did outline stroke for all icons in question, all of them now have a fill instead of a stroke. I reset the instance in my file, and fixed my components, but… the icon is not just staying white and still not taking on the orange colour, despite it being so in the component variants. This is so odd! Would you mind taking a look again, I added a new version to the same file link.

In fact, I think Figma should always take into consideration that it’s a stroke. The way I’ve found to bypass this is to export the ‘search’ component as an svg and then re-import it into the file by recreating a component and replacing the initial component.

Oh thank you so much @Maxence, this worked! Now buttons work very satisfyingly 🙂