17

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

body {
  background-color: #dadada;
}

.custom-1 {
  filter: invert(0.5);
}
<img src="https://image.flaticon.com/icons/svg/62/62945.svg" class="standard" width="50" height="50" alt="img">

<img src="https://image.flaticon.com/icons/svg/62/62945.svg" class="custom-1" width="50" height="50" alt="img">

How can I make the svg image as white color.

1 Answer 1

46

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!

2
  • Oh yeah, you make the brightness as 0 which goes to black then invert the color. Thank for the answer.
    – Rehan
    Oct 16, 2018 at 7:07
  • Exactly! @Rehan Oct 16, 2018 at 7:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.