Archived topic
Change colour of button's custom .svg icon on hover
5 replies · Started by Ema on April 20, 2021
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;
}
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.
Hi David!
Ahhhh. I see. Perfect and so clever.
Thanks again for all your help with this.
Best wishes Ema
Glad to be of help !
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...
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
