Как лучше всего менять цвет белой png иконки при наведении в CSS?

Question

[Gimir]

В гугле нашел два способа(с помощью фильтров и замены изображения на другое при наведении), но первый не подходит потому что с помощью фильтров не возможно подобрать именно нужный мне цвет и поэтому остается только второй. Скажите пожалуйста, есть ли другой способ это сделать и какой(по вашему мнению) лучший?

Answer 1

[Ankhena]

Лучший: использовать SVG

А если менять PNG, то спрайты.

Answer 2

[Александр Таратин]

Одна картинка поверх другой. У верхней меняем прозрачность при наведении 0-1

Answer 3

[alex-1917]

Еще частый вариант - иконка белая, а цвет фона под ней меняем стилями. Сам фон делаем круглым, итого смотрится как цельная иконка круглой формы.
Плюсы:
1. Цвет можно корректировать с точностью до одной миллионной оттенка))
2. Картинку можно вставлять как элементом. так и стилем.
3. Не увеличивается общий размер картинок - в два раза!
4. Белая картинка как известно самая маленькая по весу.
Минусы:
1. Не соответствие дизайну иконки, предложенной например дизайнером (гнать такого дизайнера!!)) )

Приложен скрин: