How to make a color white using filter property in CSS

Question

I have a svg image where I want to change the color of the svg using the css filter property.

How can I make the svg image as white color.

Answer 1

You can combine filter properties like this.

brightness(0) invert(1);

body {
  background-color: #dadada;
}

.custom-1 {
  filter: invert(0.5);
}

.custom-2 {
  filter:  brightness(0) invert(1);
}

<img src="https://s.cdpn.io/3/kiwi.svg" class="standard" width="50" height="50" alt="img">

<img src="https://s.cdpn.io/3/kiwi.svg" class="custom-1" width="50" height="50" alt="img">

<img src="https://s.cdpn.io/3/kiwi.svg" class="custom-2" width="50" height="50" alt="img">

EDIT - 25th May 2021:

This answer has been quite popular, thus I want to warn you that filter is not supported by Internet Explorer and Opera Mini. The good news is that Microsoft is slowly phasing out IE.

Take care!