Зачем нужны иконки в интерфейсах
Интерфейс с иконками выглядит понятнее: изображение считывается быстрее, чем текст. Иконки помогают обозначить и подсказать пользователю действие, состояние элемента, функцию или раздел интерфейса: поиск, корзину или кнопку «Назад».
Иконки навигации на сайте Mobbin. Источник
Еще иконки помогают сэкономить место в мобильных версиях сайтов, приложениях или интерфейсах с большим количеством деталей. Однако важно помнить: иконка часто не заменяет текст, а дополняет его.
Главные принципы работы с иконками
Чтобы иконки выполняли свою задачу, дизайнер должен помнить о нескольких важных правилах.
Консистентность
Консистентность — это единообразие элементов интерфейса. Консистентный дизайн выглядит аккуратно, структурированно и логично для пользователя.
Иконки бывают линейные, с заливкой, двухцветные. Чтобы дизайн смотрелся аккуратно, в одном проекте дизайнер использует только один стиль иконок. А чтобы они гармонично сочетались друг с другом, иконки должны иметь одинаковую толщину линий, форму, скругления углов, цветовую палитру и пропорции.
Плохой и хороший пример консистентности иконок
Важно помнить, что иконки должны сочетаться и с другими частями интерфейса — типографикой и формой элементов, а также поддерживать стиль и настроение проекта.
Форма иконок в приложении Duolingo сочетается с формой кнопок и карточек
Оптический баланс
Оптический баланс — это ощущение равновесия в композиции. Даже одинаковые по размеру фигуры глаз воспринимает по-разному: круг кажется меньше квадрата, а треугольник будто уходит в сторону, даже если он стоит точно по центру.
Чтобы иконки выглядели аккуратно, дизайнеры доверяют не только сетке, но и своему глазу: слегка увеличивают круг, смещают треугольник, подстраивают пропорции. Так визуальный ряд выглядит гармоничным.
Пример оптического выравнивания. Важно обращать внимание и на детали внутри иконок, и на то, как иконки выровнены относительно друг друга
Узнаваемость
Узнаваемость — ключевой принцип в работе с иконками. Пользователь должен без раздумий понять, что именно она обозначает. Мы привыкли: лупа — это поиск, корзина — удаление, шестеренка — настройки.
Эти ассоциации настолько закрепились, что любая попытка усложнить или сильно изменить привычный знак только запутает. Интерфейс станет менее предсказуемым, а когнитивная нагрузка — выше.
Привычные для пользователей формы иконок
Пиксель-перфект
Пиксель-перфект — это идеальная точность. Каждый элемент должен стоять строго по пиксельной сетке. Если размеры или положение иконки заданы дробными значениями, при экспорте или верстке она может «поплыть» и потерять четкость.
В Figma есть инструменты для выравнивания объектов по пикселям. С их помощью иконка сохраняет аккуратность и остается резкой даже в самых маленьких размерах.
Пиксельная сетка
Пиксельная сетка — сетка из квадратов, где каждый соответствует одному пикселю на экране. Она включена в Figma по умолчанию, но если сетка не отображается, ее можно включить сочетанием клавиш Shift + Э.
Привязка к пиксельной сетке
Настройка Snap to pixel grid привязывает точки и линии к пиксельной сетке. Она упрощает работу с вектором и помогает избежать дробных значений.
Предпросмотр
Параметр Pixel preview в Figma помогает дизайнерам проверить, стоят ли линии по пиксельной сетке, и показывает, как будет выглядеть вектор, когда его будет растрировать браузер.
Сравнение иконок с дробными и целыми значениями в Pixel Preview
Где в Figma включить Pixel preview, Pixel grid и Snap to pixel grid
Простота
Минимум деталей — максимум пользы. Лишние украшения перегружают иконку и мешают ее восприятию, особенно в маленьких размерах. Линии сливаются, детали теряются — и иконка становится нечитаемой.
Поэтому дизайнеры оставляют только главное. Так иконка сохраняет узнаваемость и остается удобной в любом масштабе.
Лишние детали перегружают интерфейс и сливаются в маленьких размерах
Источник 1, Источник 2, Источник 3
Как подготовить иконки к верстке
Перед тем как иконка попадет в интерфейс, дизайнеру нужно ее правильно подготовить. Это упрощает работу в команде с другими дизайнерами и экономит время разработчиков.
Поместите иконки в контейнеры
Иконки принято помещать во фреймы. Так гораздо проще согласовывать их по размеру, а еще фреймы увеличивают кликабельную область иконки.
Например, Apple в своих гайдлайнах рекомендуют использовать контейнер для иконок 44 × 44 пикселя. Пользователю легче попасть курсором или пальцем во фрейм такого размера, чем именно в саму иконку, которая не всегда квадратная и часто бывает гораздо меньше.
Иконки во фреймах
Сделайте каждую иконку компонентом
Фреймы с иконками переводят в самостоятельные компоненты. Это позволяет легко находить их в библиотеке и быстро заменять друг на друга.
Если сделать каждую иконку отдельным компонентом, их можно заменять друг на друга одним движением
Наведите порядок в слоях
Чтобы иконки были плавными, легкими и корректно отображались в браузере, дизайнеры упрощают их структуру: убирают лишние точки на линиях, объединяют элементы, удаляют ненужные слои. Это снижает вес файла и делает иконку аккуратнее.
Не менее важно, как иконки организованы внутри библиотеки. Четкие названия помогают команде быстро находить нужные элементы, а разработчикам — без ошибок использовать их в верстке. Правильная структура экономит время всем участникам проекта.
Когда стоит создавать собственные иконки, а не использовать готовые
Сеты иконок экономят время, но они редко делают интерфейс уникальным. Чтобы подчеркнуть характер бренда и добавить деталей, которых нет у конкурентов, дизайнер может собрать свой собственный набор.
Для этого используют простые шейпы — овалы, прямоугольники, линии. Их комбинируют через булевые операции: объединяют, вычитают или пересекают. Так рождаются аккуратные иконки, подстроенные под нужды конкретного проекта.
Пример создания кастомной иконки с помощью инструмента Subtract — вычитание
Недавно в Figma появился новый инструмент — Figma draw. С его помощью создавать иконки стало удобнее: теперь можно добавить элементам динамическую обводку, искажение, автоматически удалить лишние точки вектора, создавать кисти и добавлять фигурам заливку паттерном.
Почему в Figma удобно работать с иконками
Figma изначально создана для работы с векторной графикой, и для иконок это идеальный формат. Вектор легко масштабируется: можно менять толщину линий, форму или цвет — и при этом иконка не теряет четкость даже при сильном увеличении или уменьшении. Такая гибкость важна, когда один и тот же элемент должен выглядеть одинаково хорошо на разных устройствах и экранах.
Сравнение растровой и векторной графики
Еще Figma работает онлайн: над одним элементом могут работать разные дизайнеры, а чтобы передать иконки в разработку, их не нужно экспортировать.
Где найти иконки
Сейчас разработали десятки библиотек и сервисов с бесплатными и платными иконками. Ниже приводим популярные варианты.
- Популярные сеты иконок: Ionicons, Phosphor, Lucide Icons, Remix Icon, Atlas Icons, Bootstrap Icons, Iconoir. Для многих из них разработаны Figma-плагины.
- Библиотеки, где собрано сразу много наборов иконок. Например, Noun Project, Svg Repo, Iconer, Iconify. Для последней есть Figma-плагин, а еще дизайнер может добавить в свой Figma-проект виджет Icon Hub, где собраны десятки сетов бесплатных иконок.
Перед тем как добавить иконку в проект, убедитесь, что ее можно использовать легально.
- Для коммерческих проектов подходят наборы с лицензиями Open Source — MIT, GPL или Apache. Они разрешают свободное использование без ограничений.
- Если иконки распространяются по лицензии Creative Commons, важно внимательно читать условия: иногда нужно указывать автора и оставлять ссылку на источник, а в ряде случаев иконки можно использовать только в личных целях.
Так вы избежите проблем с авторским правом и сохраните проект «чистым» с юридической точки зрения.
Лучшие примеры иконок в интерфейсах
В работе с иконками важна насмотренность. Чтобы развить этот навык, дизайнеру нужно смотреть и анализировать, как выглядят иконки в крупных продуктах и как их используют.
Еще можно изучать популярные наборы иконок и отмечать их сильные стороны: простоту, единый стиль, согласованность форм и пропорций.
Совет для практики: выберите понравившуюся иконку и постарайтесь воспроизвести ее самостоятельно. Сравните результат с оригиналом и проанализируйте, что сделано хорошо, а что можно улучшить. Это упражнение хорошо подходит для развития любого навыка, который касается UI.
Главное о том, как работать с иконками в Figma
- Иконки — важная часть интерфейса. Они снижают когнитивную нагрузку на пользователя и помогают быстрее считать функцию или раздел интерфейса.
- Иконки должны сочетаться друг с другом по толщине линий, стилю, пропорциям и поддерживать общее настроение проекта. Они должны быть узнаваемыми и простыми.
- Чтобы интерфейс выглядел аккуратно, дизайнер выравнивает иконки по пиксельной сетке. Так они будут отображаться корректно в браузерах и на экранах.
- Дизайнеры помещают иконки во фреймы, делают из них отдельные компоненты и аккуратно подписывают. Это упрощает работу с ними команде и разработчикам.
- Чтобы подчеркнуть стиль и добавить в проект индивидуальности, дизайнеры создают собственные сеты иконок. Figma позволяет гибко работать с вектором и использовать продвинутые функции, чтобы создавать уникальные иконки, которые будут корректно отображаться в интерфейсах.
Бонус
Делимся полезным видео о том, как работают с иконками в дизайн-системах, от дизайнера Ozon.