Иконки в интерфейсе: стили, размеры и наборы
Практика4 минРедакция Innovialabs
Коротко
Возьмите один готовый набор иконок с одним стилем и толщиной линии, используйте его на сетке 24 px с размерами 16, 20, 24 и 32, а для неочевидных действий всегда добавляйте текстовую подпись.
Коротко: что важно в иконках
Хорошие иконки в интерфейсе — это не красота отдельной картинки, а единая система. Пользователь должен узнавать действие за долю секунды и не замечать, что иконки нарисованы разными людьми.
Три правила, которые решают большую часть проблем:
- Один набор и один стиль на весь продукт.
- Одна сетка и фиксированная шкала размеров.
- Подпись рядом, если смысл иконки не очевиден всем.
Контурные или залитые
| Стиль | Где хорош | Риски |
|---|---|---|
| Outline (контурные) | Плотные интерфейсы, навигация, панели инструментов | На маленьком размере тонкая линия теряется |
| Filled (залитые) | Активные состояния, мелкие размеры, яркие акценты | Много залитых иконок рядом делают экран тяжёлым |
| Duotone | Маркетинговые страницы, иллюстративные блоки | Сложнее поддерживать в теме и в тёмном режиме |
Распространённый приём: контур для обычного состояния, заливка для активного. Так работает нижняя навигация во многих мобильных приложениях — выбранная вкладка становится залитой. Главное — менять стиль осознанно, а не случайно в разных местах.
Сетка и размеры
Большинство наборов рисуется на сетке 24×24 px с внутренним отступом около 2 px. Внутри этой «живой зоны» лежат основные формы: круг, квадрат, вертикальный и горизонтальный прямоугольник. Тогда круглая и квадратная иконки выглядят одинаково крупными.
Практичная шкала размеров:
- 16 px — внутри плотного текста, бейджи, мелкие поля.
- 20 px — кнопки и пункты меню в компактных интерфейсах.
- 24 px — базовый размер для навигации и действий.
- 32 px и больше — пустые состояния, крупные карточки.
Важные детали:
- Толщина линии должна быть одинаковой у всех иконок: обычно 1,5 или 2 px на размере 24. При масштабировании до 16 px линию часто приходится утолщать, иначе она «рассыпается».
- Кликабельная зона больше самой иконки. Apple рекомендует минимум 44×44 pt, Material Design — 48×48 dp. Иконка 24 px внутри такой области — нормальная практика.
- Выравнивайте по пиксельной сетке, чтобы линии не размывались на обычных экранах.
Единообразие
Признаки того, что иконки «из разных опер»:
- разная толщина линии и разные скругления углов;
- у одних закрытые контуры, у других обрезанные;
- разная перспектива: одни плоские, другие в изометрии;
- одна и та же метафора используется для разных действий.
Если нужной иконки в наборе нет, рисуйте её по правилам набора: та же сетка, линия, радиусы и концы штрихов. Хуже всего — взять недостающую из другой библиотеки «на время».
Подписи и смысл
Однозначно узнаются лишь немногие иконки: поиск, закрыть, домой, настройки, корзина. Почти всё остальное — догадка. Поэтому:
- Подписывайте иконки в навигации. Нижняя панель с подписями понятнее, чем без них.
- Не заменяйте иконкой уникальное действие вроде «Экспорт в 1С» — текст здесь надёжнее.
- Тултип не спасает на мобильных: там нет наведения.
- Иконка-кнопка без текста должна иметь доступное имя (
aria-label), чтобы её прочитал скринридер. - Цвет не единственный носитель смысла: статус «ошибка» показывайте и формой, и текстом.
Бесплатные наборы, которые стоит рассмотреть
| Набор | Особенности |
|---|---|
| Material Symbols | Огромный выбор, вариативные параметры: толщина, заливка, оптический размер |
| Lucide | Аккуратный контурный стиль, удобные пакеты для React и других фреймворков |
| Phosphor | Несколько начертаний одного набора: thin, light, regular, bold, fill, duotone |
| Heroicons | Компактный набор с outline и solid, хорошо сочетается с Tailwind |
| Tabler Icons | Большой контурный набор с единой толщиной линии |
Перед использованием проверьте лицензию конкретного набора и условия коммерческого использования — они различаются и могут меняться.
Частые ошибки
- Смешивание двух-трёх библиотек в одном интерфейсе.
- Иконки «для красоты» у каждого пункта списка, которые ничего не объясняют.
- Произвольные размеры вроде 18, 22 и 26 px в одном экране.
- Иконка без подписи для действия, которое пользователь видит впервые.
- Экспорт иконок растром вместо SVG.