.svg)
Маленькая картинка в 24 пикселя способна сломать весь интерфейс. Не потому что она некрасивая, а потому что пользователь не понял, что она означает, не увидел её на мобильном или перепутал с соседней. Иконки кажутся простым элементом - пока не начинаешь разбираться, почему навигация вдруг стала непонятной или кнопка не читается.
Проблема почти всегда системная: стиль взят из разных библиотек, размеры расставлены на глаз, подписи добавлены там, где было место, а не там, где они нужны. Итог - визуальный шум вместо ориентиров.
Эта статья о том, как выстроить работу с иконографикой осознанно: выбрать один стиль и держаться его, задать размеры через систему, а не интуицию, и принять взвешенное решение - когда символ говорит сам за себя, а когда без текстовой подписи не обойтись.
Коротко:
- Стиль иконок должен быть единым на всём продукте - смешивать outline и filled в одном контексте нельзя.
- Размер зависит от контекста: навигация, кнопки и информационные блоки требуют разных значений.
- Подпись нужна везде, где символ неоднозначен или незнаком целевой аудитории.
- Outline хорошо работает в нейтральных состояниях, filled - для активных и акцентных.
- Самая частая ошибка - использовать иконку вместо текста там, где текст был бы понятнее.
- Перед выбором библиотеки проверьте, покрывает ли она все нужные сценарии в одном стиле.
Почему стиль важнее красоты
Когда дизайнер выбирает иконки, первый порыв - найти красивые. Но красота здесь второстепенна. Главное - согласованность. Если на одном экране часть символов нарисована тонкими линиями, а часть - залитыми формами, интерфейс начинает выглядеть несобранным, даже если каждая иконка сама по себе хороша.
Стиль иконографики - это не эстетический выбор, а системный. Он должен соответствовать общему характеру продукта: его типографике, весу элементов, плотности интерфейса. Лёгкий outline уместен в минималистичном инструменте с тонкими шрифтами. Filled-иконки с закруглёнными формами органичны в мобильном приложении с мягкой цветовой палитрой.
Outline vs filled: когда что работает
Это самый частый вопрос при выборе библиотеки. Разница между двумя подходами не только визуальная - она функциональная.
| Стиль | Когда подходит | Когда не стоит использовать |
|---|---|---|
| Outline (контурный) | Нейтральные состояния, вторичные действия, плотные интерфейсы | Маленькие размеры (меньше 16px), тёмные фоны с низким контрастом |
| Filled (заливка) | Активные состояния, акцентные действия, мобильная навигация | Информационные блоки с большим количеством символов рядом |
| Duotone / двухцветный | Иллюстративные блоки, onboarding, пустые состояния | Навигация, кнопки, любые интерактивные элементы |
Хорошая практика - использовать outline как базовое состояние и filled как активное. Именно так устроена навигация в большинстве мобильных приложений: неактивный пункт меню показывает контурный символ, активный - залитый. Это создаёт чёткий визуальный сигнал без дополнительных цветовых изменений.
Пример: В приложении с нижней навигацией на пять разделов все неактивные вкладки используют outline-версии, активная - filled того же символа с акцентным цветом. Пользователь мгновенно видит, где находится, без необходимости читать подписи.
Как выбрать библиотеку и не пожалеть
Популярных наборов много: Material Symbols, Phosphor Icons, Lucide, Heroicons, Feather, Remix Icon. Выбор зависит не от популярности, а от нескольких практических критериев.
Покрытие. Проверьте, есть ли в библиотеке все нужные вам символы - особенно специфические для вашей предметной области. Финтех, медицина, логистика часто требуют нестандартных знаков, которых нет в базовых наборах.
Единство стиля. Убедитесь, что все символы нарисованы с одинаковой толщиной обводки, одинаковыми скруглениями и одинаковой оптической плотностью. В некоторых библиотеках разные авторы рисовали разные разделы - и это заметно.
Форматы. SVG с возможностью изменить цвет через currentColor - стандарт. Если библиотека поставляется только в PNG, это ограничение при масштабировании и смене темы.
Лицензия. Особенно важно для коммерческих продуктов. Material Symbols и Heroicons - MIT, Phosphor - MIT, часть наборов требует attribution.
Осторожно: Не смешивайте символы из разных библиотек, даже если они визуально похожи. Толщина обводки в 1.5px из одного набора и 2px из другого будет заметна на одном экране, особенно на ретина-дисплеях.
Размер иконок: система, а не глазомер
Размер - одна из тех вещей, которые дизайнеры часто подбирают на ощущение. Результат - разнобой: где-то 18px, где-то 20px, где-то 24px, и всё это на одном экране. Визуально интерфейс выглядит неаккуратно, даже если никто не может сразу объяснить почему.
Рабочий подход - зафиксировать несколько стандартных значений и использовать только их.
| Контекст | Рекомендуемый размер | Примечание |
|---|---|---|
| Inline в тексте (рядом с подписью) | 16px | Должен совпадать с высотой строки текста |
| Кнопки и поля ввода | 20px | Стандарт для большинства UI-kit |
| Навигация (таббар, сайдбар) | 24px | Базовый размер для интерактивных зон |
| Акцентные блоки, карточки | 32-40px | Используется для иллюстративной функции |
| Пустые состояния, онбординг | 48-64px | Иконка как иллюстрация, не как навигация |
Важный нюанс: размер иконки и размер кликабельной зоны - разные вещи. Символ 24px должен иметь зону касания не меньше 44x44px на мобильном (рекомендация Apple HIG и Google Material). Это значит, что вокруг маленького символа нужен достаточный padding - иначе пользователь будет промахиваться.
Оптическое выравнивание: когда математика врёт
Иконки часто выглядят смещёнными, даже если они выровнены по центру математически. Это оптическая иллюзия: круглые и диагональные формы воспринимаются меньше, чем прямоугольные того же размера.
Большинство профессиональных библиотек решают эту проблему через padding внутри viewBox: символ занимает не всю сетку, а чуть меньше, оставляя оптический воздух по краям. Если вы рисуете собственные символы, закладывайте внутренний отступ 1-2px от края сетки.
Проверить оптическое выравнивание просто: поставьте иконку рядом с текстом той же высоты и посмотрите, не кажется ли она выше или ниже. Если кажется - скорректируйте вертикальное смещение на 1-2px вручную.
Когда подпись нужна, а когда нет
Это самый спорный вопрос в иконографике. Универсального ответа нет, но есть чёткие критерии.
Подпись нужна, если:
- Символ неоднозначен - например, шестерёнка может означать настройки, параметры, конфигурацию или автоматизацию в зависимости от контекста.
- Аудитория незнакома с продуктом - новые пользователи не знают ваши конвенции.
- Действие необратимо или критично - удаление, отправка, подтверждение оплаты.
- Символов несколько рядом и они похожи по форме.
- Продукт используется редко - пользователь не успевает запомнить значения.
Без подписи можно обойтись, если:
- Символ универсален и однозначен: лупа = поиск, крестик = закрыть, стрелка назад = вернуться.
- Контекст делает значение очевидным: корзина в интернет-магазине не требует подписи «Корзина».
- Пространство критически ограничено и подпись ухудшит плотность.
- Аудитория опытная и работает с продуктом ежедневно.
Правило проверки: Покажите экран пяти людям из целевой аудитории и спросите, что делает каждый элемент без подписи. Если хотя бы двое ошибаются - подпись нужна.
Иконки в навигации: отдельный разговор
Навигация - самый ответственный контекст. Ошибка здесь стоит дорого: пользователь не понимает, куда идти, и либо блуждает, либо уходит.
Для нижней навигации на мобильном подписи почти всегда обязательны - даже для очевидных символов. Исследования Nielsen Norman Group показывают, что таббар без подписей снижает точность навигации, особенно у новых пользователей. Исключение - продукты с очень узкой и опытной аудиторией, где символы стали частью профессионального языка.
Для десктопного сайдбара ситуация другая. Если сайдбар развёрнут, подписи рядом с символами обязательны. Если он свёрнут до иконок - нужны тултипы при наведении. Убирать оба варианта нельзя.
Верхняя навигация с иконками без текста работает только для очень стандартных действий: поиск, профиль, уведомления, корзина. Всё остальное требует текстового сопровождения.
Типичные ошибки при работе с иконографикой
Использовать иконку вместо текста. «Здесь и так понятно» - самообман. Если действие важное, текст надёжнее символа. Иконка дополняет текст, а не заменяет его в критических местах.
Смешивать стили из разных источников. Взяли три символа из Material, два из Feather, один нарисовали сами - и получили визуальный разнобой. Даже если каждый символ красив отдельно, вместе они не работают как система.
Не проверять читаемость на маленьких размерах. Детализированная иконка в 16px превращается в пятно. Перед финальным решением всегда смотрите на символ в реальном размере, а не в 3x zoom Figma.
Игнорировать тёмную тему. Outline-иконки с тонкой обводкой на тёмном фоне часто теряют контраст. Проверяйте оба режима.
Забывать про accessibility. Иконки без текстовой альтернативы невидимы для скринридеров. Каждый интерактивный символ должен иметь aria-label или сопровождаться видимым текстом.
Делать кликабельную зону слишком маленькой. Иконка 16px без padding - это промах при каждом третьем касании на мобильном.
Иконки в кнопках: правила сочетания с текстом
Вакансии для дизайнеров
Кнопка с иконкой и текстом работает лучше, чем кнопка только с иконкой - почти всегда. Символ ускоряет распознавание, текст снимает неоднозначность.
Несколько правил для таких сочетаний:
- Иконка слева от текста - стандарт для большинства действий. Исключение - стрелка «вперёд» или «следующий шаг», которая логично стоит справа.
- Размер символа должен визуально совпадать с высотой строчных букв текста кнопки, а не с заглавными.
- Отступ между иконкой и текстом - 6-8px для компактных кнопок, 8-12px для крупных.
- Не используйте два символа в одной кнопке - это создаёт конкуренцию за внимание.
Чеклист перед финальным решением
- Все символы взяты из одной библиотеки или нарисованы в едином стиле.
- Стиль (outline/filled) согласован с общим визуальным языком продукта.
- Размеры зафиксированы в системе: 16, 20, 24, 32, 48px - и не отступают от неё без причины.
- Кликабельные зоны не меньше 44x44px на мобильном.
- Каждый интерактивный символ имеет aria-label или видимую подпись.
- Навигационные элементы проверены с подписями и без - принято осознанное решение.
- Иконки проверены в реальном размере, а не только в увеличенном виде в редакторе.
- Оба режима (светлый и тёмный) проверены на контраст.
- Неоднозначные символы сопровождаются текстом или тултипом.
- Outline используется для нейтральных состояний, filled - для активных, если применяется такая логика.
Иконки и цветовые состояния: как не потерять смысл при смене темы
Цвет иконки несёт смысловую нагрузку, которую легко недооценить. Красный символ рядом с полем ввода сигнализирует об ошибке. Зелёный в статусной строке говорит об успехе. Серый намекает на недоступность. Всё это работает только если цвета согласованы с семантической системой продукта, а не выбраны произвольно.
Типичная проблема возникает при переходе между светлой и тёмной темой. Иконка, нарисованная тёмным цветом для светлого фона, на тёмном фоне либо пропадает, либо требует инверсии. Если символ использует currentColor, смена темы происходит автоматически. Если цвет зашит в SVG-атрибут fill напрямую, придётся поддерживать два набора вручную.
Ещё одна ловушка: семантические цвета (ошибка, предупреждение, успех) не должны быть единственным способом передать состояние. Пользователи с дальтонизмом не различают красный и зелёный. Добавляйте к цвету форму или подпись, чтобы смысл не терялся при нарушении цветовосприятия.
Хорошая практика: Используйте иконки с семантическим значением в паре с текстом или дополнительным визуальным маркером (например, форма предупреждающего треугольника плюс жёлтый цвет). Так состояние считывается даже без цвета.
Анимированные иконки: когда движение помогает, а когда мешает
Анимация в символах привлекает внимание и может усилить обратную связь. Но у неё есть чёткие границы применения.
Анимированный символ оправдан в нескольких сценариях: подтверждение завершённого действия (галочка, которая «рисуется»), индикация загрузки (вращающийся символ), переход между состояниями в навигации (outline плавно заполняется до filled при активации). Во всех этих случаях движение несёт функциональный смысл.
Анимация становится проблемой, когда она декоративная. Символ, который покачивается при наведении без причины, или иконка, которая пульсирует просто чтобы привлечь взгляд, создают визуальный шум и отвлекают от задачи пользователя.
Несколько правил для анимированных символов:
- Длительность анимации не должна превышать 300 мс для переходов состояний и 200 мс для подтверждений.
- Анимация должна быть отключаемой через prefers-reduced-motion, иначе она создаёт проблемы для пользователей с вестибулярными нарушениями.
- Не анимируйте больше одного символа одновременно на одном экране без явной причины.
- Анимированная иконка в навигации отвлекает от содержимого. Используйте её только для уведомлений или новых событий.
Собственные иконки vs готовая библиотека: когда рисовать самому
Большинство продуктов не нуждаются в собственной иконографике. Готовые библиотеки покрывают 90% стандартных сценариев, экономят время и обеспечивают единство стиля. Но бывают ситуации, когда кастомные символы необходимы.
| Ситуация | Готовая библиотека | Кастомные символы |
|---|---|---|
| Стандартные UI-действия (поиск, закрыть, меню) | Оптимально | Избыточно |
| Специфическая предметная область (медицина, логистика) | Часто не хватает символов | Необходимо для уникальных понятий |
| Сильный брендинг с уникальным визуальным языком | Может конфликтовать со стилем | Оправдано при наличии ресурсов |
| Продукт с жёсткими ограничениями по лицензии | Проверить условия использования | Полный контроль над правами |
| Быстрый MVP или прототип | Единственный разумный выбор | Трата времени на этом этапе |
Если вы всё же рисуете собственные символы, придерживайтесь нескольких технических требований. Сетка должна быть единой для всего набора: 24x24px или 20x20px с внутренним отступом 2px от края. Толщина обводки фиксируется одним значением на весь набор: 1.5px или 2px. Скругления углов должны быть одинаковыми во всех символах. Каждый новый символ проверяется рядом с уже существующими в реальном размере до финального утверждения.
Частая ошибка при создании собственных символов: рисовать их в большом масштабе, а потом уменьшать. Детали, которые выглядят хорошо в 200px, на 24px превращаются в нечитаемое пятно. Рисуйте сразу в целевом размере или регулярно проверяйте результат в нём.
FAQ
Какой размер иконок считается стандартным для UI?
Базовый размер для большинства интерфейсных контекстов - 24px. Для inline-использования рядом с текстом подходит 16px, для акцентных блоков - 32-40px. Главное - зафиксировать шкалу и не отступать от неё произвольно.
Чем отличаются outline и filled иконки на практике?
Outline (контурные) лучше работают в нейтральных состояниях и плотных интерфейсах. Filled (залитые) сильнее привлекают внимание и хорошо подходят для активных состояний. Классическое решение - outline для неактивных элементов навигации, filled для активного.
Всегда ли нужна подпись к иконке?
Нет. Универсальные символы (лупа, крестик, стрелка назад) работают без текста в большинстве контекстов. Но если символ неоднозначен, аудитория незнакома с продуктом или действие критично - подпись обязательна. Сомневаетесь - добавьте.
Можно ли смешивать иконки из разных библиотек?
Технически можно, но это почти всегда ухудшает результат. Разные библиотеки имеют разную толщину обводки, скругления и оптическую плотность. На одном экране это заметно. Лучше выбрать одну библиотеку с хорошим покрытием и придерживаться её.
Как сделать иконки доступными для пользователей со скринридерами?
Каждый интерактивный символ без видимого текста должен иметь атрибут aria-label или title. Декоративные символы, которые дублируют рядом стоящий текст, помечаются aria-hidden="true", чтобы скринридер не зачитывал их дважды.
Какие библиотеки иконок чаще всего используют в продуктовом дизайне?
Среди популярных - Material Symbols (Google), Phosphor Icons, Lucide, Heroicons, Feather. Выбор зависит от покрытия, стиля и лицензии. Для большинства продуктов Phosphor или Lucide дают хороший баланс между разнообразием и единством стиля.
Нужны ли подписи в нижней навигации мобильного приложения?
Для большинства продуктов - да. Исследования показывают, что таббар с подписями точнее используется новыми пользователями. Убирать подписи имеет смысл только если аудитория очень опытная и символы стали частью привычного языка продукта.
Итог
Иконографика работает как система или не работает вовсе. Один случайный символ из другой библиотеки, произвольный размер или пропущенная подпись в нужном месте - и интерфейс начинает ощущаться небрежным, даже если всё остальное сделано хорошо.
Решения здесь несложные: выбрать одну библиотеку и держаться её, зафиксировать несколько размеров в системе, применять подписи там, где символ не говорит сам за себя. Сложность в том, чтобы принимать эти решения осознанно, а не на автопилоте.
Хорошая иконографика незаметна - пользователь просто понимает интерфейс без усилий. Это и есть цель.