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.
Reader Interactions