Шрифтовые иконки: основы

Шрифтовые иконки — это шрифты, в которых глифы (обычно буквы и цифры) заменены пиктографическими символами. Вместо буквы «А» шрифтовая иконка отображает значок дома, поисковую лупу или корзину покупок.

Поскольку иконки хранятся внутри шрифтового файла, они ведут себя в точности как текст. Их можно масштабировать до любого размера с помощью font-size, менять цвет через color, добавлять тени, применять CSS-переходы и даже анимировать — не трогая ни одного файла изображения.

Такой подход даёт несколько практических преимуществ:

• Независимость от разрешения — векторные контуры чётко масштабируются на экранах с любой плотностью пикселей
• Минимальный вес — один сжатый шрифтовой файл заменяет десятки отдельных графических ресурсов
• Управление через CSS — цвет, размер, тень, прозрачность и состояния при наведении доступны «из коробки» при стилизации текста
• Один HTTP-запрос — весь набор иконок загружается за один сетевой обмен

На заре веба разработчики полагались на отдельные изображения или CSS-спрайты — большие составные изображения, где каждая иконка занимала фиксированную прямоугольную область. Спрайты сокращали количество HTTP-запросов, но были хрупки: добавление или изменение размера иконки требовало регенерации всего спрайта и ручного обновления пиксельных смещений.

Около 2012 года такие проекты, как Font Awesome и IcoMoon, популяризировали более чистую альтернативу: упаковку иконок в виде глифов шрифта, сопоставленных с зоной частного использования Unicode. Дизайнеры могли сменить целый набор иконок, изменив одно объявление @font-face, а разработчики — стилизовать иконки тем же CSS, что уже использовали для текста. Методика быстро распространилась и по-прежнему остаётся надёжным, малозатратным выбором для дизайн-систем, использующих одноцветную иконографию.

Дискуссия «шрифтовые иконки vs встроенный SVG» является неизменной темой фронтенд-обсуждений уже более десяти лет. Оба подхода состоятельны — правильный выбор зависит от требований вашего проекта.

Шрифтовые иконки

• Один HTTP-запрос — один шрифтовой файл содержит все иконки
• Предельно простая стилизация CSS — меняйте color, font-size и text-shadow, как для любого текста
• Только монохром — каждый глиф поддерживает единственный цвет заливки
• Простое подключение — добавьте ссылку на таблицу стилей, используйте CSS-класс, готово

Встроенный SVG

• Многоцветность — каждый контур может иметь собственную заливку, обводку или градиент
• Доступность по умолчанию — <title> и aria-label предоставляют скринридерам реальную семантику
• Кэшируется по отдельности — неиспользуемые иконки никогда не загружаются
• Точечное управление — анимация отдельных контуров, применение фильтров к каждому элементу

SVG-спрайты

• Объединяют несколько SVG в единый спрайт из элементов <symbol>
• Иконки подключаются через <use href="#icon-name">
• Сочетает преимущества обоих подходов — один запрос, многоцветность, доступность — но требует более сложного конвейера сборки

Шрифтовые иконки могут быть упакованы в пять файловых форматов, каждый из которых имеет разные степень сжатия, поддержку браузеров и сценарии использования. Вот краткое сравнение:

Не знаете, какие форматы включить? Воспользуйтесь этим практическим руководством:

• Если выбирать только один — используйте WOFF2. Он обеспечивает наилучшее сжатие (Brotli) и охватывает 97%+ браузеров.
• Если нужна поддержка IE 11 — используйте WOFF2 + WOFF. WOFF охватывает оставшиеся браузеры без поддержки декодирования Brotli.
• Если нужна поддержка IE 8 — используйте WOFF2 + WOFF + EOT. EOT — единственный формат, понятный Internet Explorer 6-8.
• Для настольных приложений — используйте TTF. Это нативный формат для рендеринга шрифтов на уровне ОС в Windows, macOS и Linux.
• Для отладки проблем со шрифтами — изучите SVG Font. Его XML-структура читаема человеком, что упрощает проверку контуров глифов и метаданных.

Подробнее изучите каждый формат, чтобы понять его внутреннее устройство, совместимость с браузерами и лучшие практики:

Узнайте, как использовать эти форматы в своих проектах: