How to change the colour of SVGs with CSS filters

  1. Using a CSS filter
  2. Other uses

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.