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 🙂

I was experiencing the exact same issue where stroke icons would not change color on hover. Another issue I had was that some paths of my stroked icon would change colors while others wouldn’t, for instance an “x” with 2 separate paths. One stroke line would change while the other remained the same. Don’t ask me why 🤷 But what a sick joke.

While the solution @Maxence suggested (good workaround Maxence!) is a good workaround, I discovered that my issue was due to how I originally imported my icons from the start.

I used the Lucide icon library (https://lucide.dev/) for my project. At first I used their browser solution to manually copy/paste my arrows as SVGs into Figma. I then discovered they had a Figma plugin (https://www.figma.com/community/plugin/939567362549682242/lucide-icons) where I proceeded to add all additional icons, which was a much easier process.

In prototype mode, some icons changed color on hover as expected, while others did not. I discovered the issue was with arrow icons copied from the browser. Icons imported using the Lucide plugin behaved correctly. After updating all icons utilizing the plugin, the clouds parted, a heavenly choir burst into song, and just like that, problem solved! 🥳

Hope this helps! 😁