Как изменить цвет иконки 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 можно использовать для задания прозрачности контура.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как изменить цвет иконки svg CSS

Наш специалист свяжется с вами в ближайшее время и уточнит детали