Иконочные шрифты — да или нет?

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

На самом деле иконочный шрифт — это обычный шрифт, только вместо букв в нём используют иконки. Вы подключаете шрифт, добавляете элемент в HTML и браузер рисует символ, соответствующий нужной иконке. Например, подключим Google Material Symbols:

        
          
          <link  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"  rel="stylesheet"><span class="material-symbols-outlined">  search</span>
          <link
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
  rel="stylesheet"
>

<span class="material-symbols-outlined">
  search
</span>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Иконка появляется на экране как будто это текст: она масштабируется через font-size, окрашивается через color и ведёт себя как обычная буква.

• Работало в старых браузерах, включая Internet Explorer.
• Легко вставлять иконки рядом с текстом, особенно в кнопках и формах.
• Размер и цвет задавались как для обычного текста через привычный CSS.
• Один шрифт — сотни иконок, которые загружаются одной строчкой кода.

Это было быстро и просто в эпоху, когда альтернатив почти не было.

• Проблемы с доступностью: скринридеры не понимают иконки без специальных атрибутов.
• Только один цвет: нельзя использовать градиенты, устанавливать прозрачность или красить отдельные части иконок.
• Если шрифт не загрузился, пользователь увидит квадрат ▢ или текст вместо иконки.
• Неконсистетность: разные браузеры и операционные системы применяют свои алгоритмы сглаживания шрифтов (anti-aliasing), из-за чего иконки могут выглядеть иначе, чем задумал дизайнер, и заметно различаться на разных устройствах.
• Нет гибкости: иконки нельзя анимировать, добавлять эффекты при наведении, управлять цветом через fill как в SVG.
• Большой размер файла: шрифт содержит все иконки, даже если используете только несколько из них.
• Плохой опыт разработки (DX): чтобы поправить иконку или добавить новую, вам нужны специализированные инструменты или сервисы. В то время как SVG код открывается во множестве графических редакторах и относительно легкочитаем для человека.
• Несемантичность и потенциальные проблемы с SEO: Иконки, реализованные через шрифты, по сути являются текстом (псевдоэлементами ::before с юникод-символами). Для поисковых систем этот текст является бессмысленным набором символов, который не несет полезной информации и может потенциально снижать качество выдаваемого контента, в отличие от семантически верной разметки с SVG.

Если проект новый и важна гибкость, лучше использовать SVG-иконки или SVG-спрайты. Они поддерживают цвет, анимации, доступны для вспомогательных технологий и легко кастомизируются.

Иконочные шрифты подходят для быстрых прототипов или для поддержки старых браузеров. В долгосрочных проектах лучше полагаться на современные решения.

На практике

Скопировать ссылку "На практике" Скопировано

DrakesWeb советует

Скопировать ссылку "DrakesWeb советует" Скопировано

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

Сейчас все уже давно перешли на SVG-спрайты, забыв про иконочные шрифты. После перехода на SVG-спрайты уменьшился размер загружаемого содержимого, расширились возможности кастомизации и улучшилась поддержка доступности через aria-label.