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


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:


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="">

<img src="" class="make-blue">

<img src="" class="make-yellow-with-sepia">

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

Scroll to Top