Как изменить цвет SVG-иконки: 4 способа

Изменить цвет SVG-иконки можно четырьмя способами: задать currentColor и управлять цветом через CSS-свойство color, поправить атрибуты fill и stroke прямо в коде, перекрасить файл в векторном редакторе или воспользоваться онлайн-инструментом. Для сайта лучше всего подходит первый способ, для разовой задачи — последний.

Сначала разберитесь, чем окрашена иконка

В SVG у фигуры два источника цвета: fill — заливка и stroke — обводка. У линейных иконок цвет задан обводкой, а заливки нет (fill="none"), у залитых — наоборот. Если после замены fill линейная иконка превратилась в сплошное пятно, вы перекрасили не тот атрибут. Значение fill="none" трогать не нужно: это отсутствие заливки, а не цвет.

Способ 1. currentColor и CSS

currentColor означает «взять текущий цвет текста». Если у иконки указано stroke="currentColor" или fill="currentColor", она окрашивается в значение CSS-свойства color своего родителя. Так устроены монохромные иконки freeicons, например линейные, залитые и двухцветные.

<a class="nav-link" href="/cart">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="1.5" aria-hidden="true">…</svg>
  Корзина
</a>

.nav-link { color: #5b6470; }
.nav-link:hover { color: #2563eb; }

Иконка меняет цвет вместе с текстом при наведении и сама подстраивается под тёмную тему. У двухцветных иконок второй слой — тот же currentColor с прозрачностью 35%, так что оба тона перекрашиваются одним свойством.

Способ работает, если SVG встроен в HTML или подключён из SVG-спрайта через <use>. Файл в <img src="icon.svg"> — отдельный документ, и CSS страницы до него не дотягивается. Для такого случая есть обходной путь — CSS-маска: иконка задаёт форму, а цвет берётся из фона элемента.

.icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url(/icons/cart.svg) center / contain no-repeat;
  mask: url(/icons/cart.svg) center / contain no-repeat;
}

Способ 2. Атрибуты fill и stroke в коде

Откройте SVG в любом текстовом редакторе и замените цвет: например, stroke="#111418" на stroke="#2563eb" или на currentColor. Цвет может «прятаться» в трёх местах:

1. атрибуты fill и stroke у <svg>, <g>, <path> и других фигур;
2. атрибут style="fill: …" — он сильнее обычного атрибута;
3. блок <style> внутри файла — его правила тоже перебивают атрибуты.

Учтите приоритеты: атрибут fill у фигуры проигрывает любому CSS-правилу, нацеленному на эту фигуру, но правило для родительского <svg> его не перекроет — наследование работает, только если у фигуры нет своего значения. Для многоцветных плоских иконок удобно вынести цвета в переменные: style="fill: var(--icon-accent, #ffc23d)" — и акцент меняется одной строкой CSS.

Способ 3. Векторный редактор

В Figma, Illustrator или Inkscape откройте SVG, выделите фигуры и поменяйте заливку или обводку в панели свойств, затем экспортируйте файл обратно в SVG. Способ хорош для многоцветных иконок, где части нужно покрасить по-разному. Минус в том, что редакторы добавляют в файл служебный код и часто заменяют currentColor конкретным цветом, поэтому после экспорта проверьте результат.

Способ 4. Онлайн-инструмент

Для разовой задачи быстрее всего онлайн-перекраска SVG. Загрузите файл, вставьте код из буфера через Ctrl+V или возьмите иконку прямо из каталога, выберите цвет заливки и обводки и скачайте результат. За раз можно обработать до 50 файлов и получить их одним ZIP-архивом. Файлы не уходят на сервер: всё работает в браузере.

Для иконок из каталога есть путь ещё короче: на странице монохромной иконки выберите один из 12 цветов палитры или введите HEX и скачайте SVG уже в нужном цвете.

Какой способ выбрать

Если нужен PNG

Растровую иконку аккуратно перекрасить трудно: цвет записан в пикселях, а края сглажены полупрозрачными точками. Поменяйте цвет в SVG любым способом из списка и уже потом переведите файл в PNG нужного размера.

Итог

Для сайта задайте иконкам currentColor и управляйте цветом через CSS — тогда одна и та же иконка работает в любой теме и состоянии. Для разового файла хватит онлайн-перекраски, а многоцветные иконки удобнее править в редакторе. Как лучше подключать иконки на сайте, мы сравнили в статье об иконочном шрифте, спрайте и inline SVG.