Как изменить цвет иконки svg CSS

Для изменения цвета иконки SVG в CSS обычно используется свойство fill. Задавая свойству fill значение нужного цвета, можно изменить цвет заливки иконки.

Пример SVG-иконки:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M18 8H6v8h12V8zm2-4H4v12h16V4z"/>
</svg>

Чтобы изменить цвет заливки этой иконки, нужно прописать стили для этой иконки в CSS.

svg {
  fill: red;
}

Здесь прописываются стили для всех SVG-иконок на странице. Если нужно изменить цвет только для конкретной иконки, можно прописать стиль для класса или ID этой иконки.

Например, если SVG-иконка имеет класс «icon», то стили можно прописать так:

.icon {
  fill: red;
}

Кроме того, чтобы изменить цвет контура иконки, можно использовать свойство stroke. Например, чтобы задать цвет контура иконки зеленым, можно добавить такой стиль:

svg {
  fill: red;
  stroke: green;
  stroke-width: 2px;
}

Здесь свойство stroke-width устанавливает толщину контура в 2 пикселя. Свойство stroke-opacity можно использовать для задания прозрачности контура.