Как использовать SVG-иконки в HTML, CSS, React и Vue

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

1. Подключить SVG тегом <img>

Самый простой способ — обращаться с иконкой как с обычным изображением. У каждой иконки на Iconyz есть публичная ссылка на SVG, она показана в панели иконки.

<img src="https://iconyz.com/api/public/svg/lucide/house.svg"
     width="24" height="24" alt="Главная">

Браузер кеширует файл, а иконка никогда не блокирует отрисовку HTML. Минус в том, что CSS не проникает внутрь изображения, поэтому стили color и :hover на него не действуют. Для одноцветных иконок цвет можно задать прямо в ссылке: добавьте ?color=%23e11d48 (это #e11d48, закодированный для URL). Подробности — в руководстве по SVG API.

В рабочих приложениях стоит скачать SVG и отдавать его со своего сайта, чтобы страницы не зависели от чужого URL.

2. Вставить SVG прямо в разметку

Откройте иконку, выберите SVG и скопируйте код прямо в HTML:

<button class="btn">
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
       aria-hidden="true">
    <path fill="none" stroke="currentColor" stroke-width="2" d="…"/>
  </svg>
  Главная
</button>

Встроенный SVG становится частью страницы, поэтому CSS управляет им полностью: цветом, размером, состоянием при наведении, переходами и даже отдельными контурами. Одноцветные наборы используют currentColor, и иконка автоматически принимает цвет текста родителя. Это самый гибкий вариант, и он не требует дополнительных HTTP-запросов.

Цена — размер HTML. Каждая встроенная иконка добавляет свои контуры на каждую страницу, где она используется. Это заметно, если одна и та же иконка повторяется сотни раз, например в длинной таблице.

3. Использовать иконку из CSS

CSS-маска превращает любой одноцветный SVG в фигуру, залитую background-color. Иконка следует цвету текста, а её разметка не попадает в HTML:

.icon-home {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("https://iconyz.com/api/public/svg/lucide/house.svg") no-repeat center / contain;
          mask: url("https://iconyz.com/api/public/svg/lucide/house.svg") no-repeat center / contain;
}

<span class="icon-home" aria-hidden="true"></span>

Вкладка CSS в панели каждой иконки генерирует это правило со встроенным SVG в виде data URI, поэтому внешние запросы не нужны. Используйте маски только для одноцветных иконок: маска сохраняет форму и отбрасывает собственные цвета иконки. Для многоцветных иконок используйте background-image.

4. React и другие фреймворки с JSX

В JSX атрибуты пишутся в camelCase (strokeWidth, а не stroke-width), а props передаются дальше. Вкладка React в панели каждой иконки создаёт готовый компонент:

export function HouseIcon(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
         viewBox="0 0 24 24" {...props}>
      <path fill="none" stroke="currentColor" strokeWidth={2} d="…" />
    </svg>
  );
}

// Использование
<HouseIcon className="text-blue-600" style={{ fontSize: 20 }} aria-hidden="true" />

Размер равен 1em, поэтому иконка масштабируется вместе с font-size, а цвет — currentColor, поэтому утилитарные классы вроде text-* в Tailwind меняют её цвет. Храните по одному файлу на иконку или соберите иконки в модуль, чтобы сборщик выбрасывал неиспользуемые (tree-shaking). Тот же компонент работает в Preact, а вкладка Solid даёт вариант для Solid.

5. Vue и Svelte

Во Vue сохраните иконку как однофайловый компонент. Переданные атрибуты, например class, попадут на корневой <svg>:

<!-- HouseIcon.vue -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
    <path fill="none" stroke="currentColor" stroke-width="2" d="…" />
  </svg>
</template>

Svelte работает так же: файл .svelte с разметкой SVG и {...$$props} на корневом элементе. Оба варианта доступны на вкладках панели иконки.

Размер и цвет

• Задавайте размер в 1em. С шириной и высотой 1em иконка совпадает по размеру с соседним текстом. Меняйте font-size, чтобы изменить размер.
• Не удаляйте viewBox. viewBox задаёт систему координат рисунка. Без него масштабирование ломается; меняйте размер через ширину и высоту.
• Учитывайте сетку. Иконки, нарисованные по сетке 24 px, выглядят чётче всего в размерах 24 px, 48 px и других кратных. При 18 или 20 px тонкие линии могут слегка размываться.
• Красьте одноцветные иконки через color. С currentColor одно CSS-правило покрывает обычное состояние, наведение и тёмную тему.
• Многоцветные иконки сохраняют палитру. У эмодзи, флагов и логотипов цвета встроены. Перекрашивайте их, только если лицензия разрешает изменения, и никогда не изменяйте логотипы брендов.

Доступность

Решите, несёт ли иконка смысл. Декоративные иконки рядом с текстовой подписью нужно скрывать от программ чтения с экрана, а иконкам без подписи нужна текстовая альтернатива:

<!-- Декоративная: у кнопки уже есть подпись -->
<button><svg aria-hidden="true" …>…</svg> Сохранить</button>

<!-- Кнопка только с иконкой: подпишите кнопку, скройте иконку -->
<button aria-label="Закрыть"><svg aria-hidden="true" …>…</svg></button>

<!-- Значимое изображение -->
<img src="…/triangle-alert.svg" alt="Предупреждение">

Проверьте и контраст: по WCAG 2.2 иконки, передающие информацию, должны иметь контраст с фоном не ниже 3:1.

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

Готовы начать? Ищите по всем наборам или загляните в популярные: Lucide, Tabler Icons и Material Design Icons. Перед публикацией проверьте лицензию набора — в руководстве по лицензиям иконок объясняется, что требует каждая.