Change Image Color to white with CSS

The simplest way to change any image color to white is with the CSS filter property. Simply write this CSS to your image and it will turn white.

img{
  filter: brightness(0) invert(1);
}

Advantages and Usage

If you are not using SVGs on your website and you want to change the image or icon color on hover then you have to use 2 different images for it. One for the normal state and the other for the hover. So you need 2 different images to do your work. Now with the help of this property, you can change the color of the image without changing the image. Now you only need 1 image and you can achieve your goal with a simple 1 line of CSS. Have a look at the CODEPEN example below.

CodePen Example