[Resolved] Change colour of button’s custom .svg icon on hover

[Ema]

Hello, I’m wondering how to change the colour of my custom icon to white on hover?
How do I add a class to the svg? say ‘arrow-icon’

then add something like…

.arrow-icon:hover svg {
fill: #fff;
}

here it is

[David]

Hi there,

if you edit your SVG HTML in the path you will see the fill eg.

<path fill="#3f6052"

If you change the fill to fill="currentColor" then this will respect the colors of the button text on hover.

[Ema]

Hi David!
Ahhhh. I see. Perfect and so clever.

Thanks again for all your help with this.

Best wishes Ema

[David]

Glad to be of help !

[CRAIG]

Is there a way to do this without “filling” the icon?

I want to do the exact same thing and have tried uploading a white version of my existing icons and adding your snippet so that they turn black upon hover.

They turn black upon hover which is great, but the icons in their normal state are just white blobs!

Anyway suggestions to sort this?

Didn’t want to start a new thread as this one is precisely the same issue I was having…

[David]

Hi there,

the reasons will be different depending on your SVG … if you can start a new topic and share a link to where we can see the issue i can have look

[Author]

Posts