Иконки на сайте: стили, библиотеки, SVG

Зачем нужны иконки на сайте

Иконки — визуальные подсказки, которые помогают пользователю ориентироваться. Лупа = поиск, конверт = почта, корзина = покупки. Хорошие иконки ускоряют навигацию, экономят место и делают интерфейс понятнее без единого слова.

Но иконки работают только если они понятны. Абстрактный символ без подписи — загадка для пользователя. Поэтому важно знать, когда и какие иконки использовать.

Стили иконок

Линейные (outline)

Тонкие контуры без заливки. Лёгкий, современный стиль. Подходит для минималистичных сайтов. Важно следить за толщиной линии (stroke width) — одинаковая для всех иконок.

Заливные (filled/solid)

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

Двухтонные (duotone)

Комбинация контура и полупрозрачной заливки. Современный тренд, добавляет глубину. Используются в hero-секциях и блоках преимуществ.

Цветные (multicolor)

Иконки с несколькими цветами. Для продуктовых категорий, социальных сетей, эмоциональных акцентов. Не подходят для интерфейсных элементов — отвлекают.

Популярные библиотеки иконок

• Lucide — 1400+ линейных иконок, MIT-лицензия. Преемник Feather Icons. Рекомендуем как основную библиотеку
• Heroicons — от создателей Tailwind CSS. Outline и solid варианты. Идеально для современных сайтов
• Phosphor Icons — 6 стилей, 7000+ иконок. Самая большая бесплатная библиотека
• Material Symbols — от Google. 3000+ иконок, 3 стиля. Для проектов в Material Design
• Font Awesome — классика, но тяжёлая. Бесплатная версия ограничена. Лучше заменить на SVG-библиотеку

SVG — правильный формат для иконок

Забудьте про иконочные шрифты (icon fonts). SVG-иконки — стандарт современного веба:

• Масштабируемость — чёткие на любом экране, включая Retina
• Стилизация через CSS — меняйте цвет, размер, анимацию
• Лёгкий вес — одна SVG-иконка весит 200–500 байт
• Доступность — можно добавить title и aria-label для скринридеров
• Не блокируют загрузку — в отличие от шрифтов, инлайн-SVG отображаются сразу

Как подключать SVG-иконки

Три основных способа:

• Инлайн SVG — код прямо в HTML. Максимальный контроль стилей. Идеально для интерфейсных иконок
• SVG-спрайт — все иконки в одном файле, вызов через <use>. Оптимально для больших наборов
• Тег <img> — как обычная картинка. Простейший способ, но без CSS-стилизации

Правила использования иконок

Единый стиль

Все иконки на сайте должны быть из одной библиотеки или нарисованы в одном стиле. Смешение линейных и заливных иконок, разная толщина линий, разные скругления — визуальный хаос. Это часть фирменного стиля.

Размер и отступы

Стандартные размеры: 16px (мелкие), 20px (в кнопках), 24px (навигация), 32–48px (блоки преимуществ). Вокруг иконки должен быть отступ — не ставьте иконку вплотную к тексту.

Подписи

Правило: если иконка не общеизвестна (лупа, корзина, меню-бургер) — добавьте текстовую подпись. Иконка шестерёнки для «Настроек» понятна не всем. Иконка с подписью — понятна всем.

Доступность

Декоративные иконки: aria-hidden=»true». Информативные: aria-label=»Поиск» или title внутри SVG. Это важно для доступности сайта.

Типичные ошибки

• Иконки из разных библиотек — выглядят как «собраны из мусорки»
• Растровые иконки (PNG) — размываются на Retina
• Слишком мелкие — на мобильных невозможно нажать (минимум 44×44px touch target)
• Иконки без смысла — декоративные иконки рядом с каждым пунктом списка перегружают

Нужна помощь с иконками и графикой для сайта? Обратитесь к нам — подберём идеальный набор для вашего проекта.