Change the color of the.png icon white to any other color via css

Hello. Is it possible to change the color of the. png icon to white, to any other color (for example, yellow) using css?

I considered solutions where the icon is cut out and highlighted with a background. But this is a very strange solution for a typical problem. Usually this parameter is called tintColor, but I didn't find it in css.

Example image: https://i.stack.imgur.com/1B0hl.png

Author: sanmai, 2017-09-20
Source

2 answers

It is easier to start with an already colored image, but you can also start with a colorless one. In this case, you must first set the base shade with a sepia filter.

.make-blue {
   filter: hue-rotate(180deg) brightness(0.5) saturate(600%);
}

.make-yellow-with-sepia {
   filter: contrast(50%) sepia(100%) hue-rotate(5deg) brightness(0.8) saturate(500%);
}
<img src="https://i.stack.imgur.com/FGN3Z.png">

<img src="https://i.stack.imgur.com/FGN3Z.png" class="make-blue">

<img src="https://i.stack.imgur.com/1B0hl.png" class="make-yellow-with-sepia">

The directive may need to be duplicated with the -webkit- prefix.

 4
Author: sanmai, 2017-09-21 06:20:13

Thanks to sanmai for the tip. To repaint the image in any other color, I used the following scheme:

filter: brightness(50%) sepia(1) hue-rotate(hue-rotate) saturate(saturate%) brightness(brightness%);

 2
Author: insFriZzz, 2017-09-21 06:29:53