html – Change color *.png of white color icon to any other color via css

Question:

Is it possible to change the color of a *.png icon from white to any other color (eg 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 task. Usually this parameter is called tintColor, but I didn't find it in css.

Image example: https://i.stack.imgur.com/1B0hl.png

Answer:

It's 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 tone 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.