In this article, we’ll take a look at how to change the colour of a simple SVG using a CSS filter.
I was doing a bit of work on a site the other day that had a simple hamburger menu icon.
The icon was black but I wanted to convert it to a white colour and didn’t have any appropriate editors to hand.
I’m not that great with SVGs to be honest, I try and stick with simple PNG or JPG files but I understand the huges benefits of using them.
So rather than trying to convert the image to a PNG and change the colour, I did a bit of research on what could be done to modify the colour in the browser.
Using a CSS filter
So the short answer to what I found is that you can apply a specifc CSS filter to an SVG element (via a CSS selector) that modifies the appearance to your desired colour.
svg.white-icon {
filter: invert(100%) sepia(25%) saturate(0%) hue-rotate(99deg) brightness(110%) contrast(101%);
}How do you know what CSS filter to apply?
Well, there’s a handy tool available at https://codepen.io/sosuke/pen/Pjoqqp that has been created where you simply enter the hex code you would like to see and it creates the filter for you.
Other uses
I guess there’s no reason why you would have to limit this technique to just SVGs, if you had a specifc icon or solid colour image you wanted to convert then you could use the same approach.