fill

У CSS можна динамічно змінювати деякі параметри вбудованого векторного зображення, наприклад, колір. Властивість fill керує кольором заливки. Колір можна задавати у будь-якому зручному форматі.

/* Встановлюємо колір заливки у спокійному стані. */
.icon {
  fill: #2a2a2a;
}

/* Змінюємо колір заливки при ховері. */
.icon:hover {
  fill: #03a9f4;
}

/* Змінюємо колір заливки дочернього елемента при події на бітьківському елементі при ховері. */
.box:hover .icon{
  fill: #03a9f4;
}