Skip to main content
bld_design
bld_design
New Participant
July 23, 2024
Question

Change icon colour in hover state

  • July 23, 2024
  • 11 replies
  • 3618 views

Hello Figma community!

I have a question about hover button state and icons. I have a component set of buttons in different states, and separately I have icons as components that I can use in button instances. However when I change a button icon in one, it doesn’t follow the colour change. How can I fix that?

Here is some pictures to show what I mean^

Components:

image

Button in action after icon was changed in the instance:

figma button issue

This topic has been closed for replies.

11 replies

Show previous replies
CoreyLewis
CoreyLewis
New Member
September 23, 2024

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! 😁

    Terms & ConditionsAccessibility statement