Иконки продуктов
Иконки продуктов являются упрощенными графическими знаками, которые позволяют легко распознавать сервисы в списках или в компактных форматах, где текстовый логотип менее эффективен или вовсе не подходит.
Где используются
Интерфейсы
- Списки продуктов, меню сервисов
- Фавиконки и Touch-иконки
- Иконки мобильных и десктоп-приложений
- Аватарки в соцсетях и почтовых сервисах
- Расширения для браузеров
- Внутренняя инфраструктура (Биллинг, Инфо, Стафф...)
Промо
- Визуалы и веб-баннеры
- Презентации и схемы
- Посты в соц.сетях
- Видео
- Печать и наружная реклама
- Выставочное оформление
- Мерч и сувениры
Иконка — это не логотип
Иконка продукта не является логотипом. Нельзя использовать конструкцию «иконка + текстовый логотип». С иконкой можно использовать название продукта обычным наборным шрифтом.
Стили иконок
Дефолтный. Основной стиль с цветной подложкой, используется в большинстве случаев.
Symbol. Легкая версия приглушенного цвета без подложки. Подходит для больших списков продуктов, и где уместнее использовать упрощенную иконку. Используются в суббрендах для продуктов-расширений.
Glyph. Специальная версия без подложки, где линия — вырез. Используется в маленьких фавиконках.
Размеры
Используйте иконки в оригинальных размерах, т.к. толщина линии подобрана индивидуально под каждый размер, а элементы подогнаны под пиксельную решетку.
Если подходящего размера нет, используйте ближайший, поскольку при значительном апскейле/даунскейле иконок изначально задуманная толщина линии нарушается:
Палитра
Продуктовые иконки используют собственную палитру, которая немного отличается от оттенков из общей палитры:
Дефолтные иконки близких цветов (зеленые, синие) сильнее разведены между собой по оттенкам, чтобы в мелких размерах они не воспринимались как иконки одного цвета.
Иконки в стиле «Symbol» также имеют собственную приглушенную палитру, чтобы на них хорошо считывались черные линии.
Важно! Если отклонение по цветам дефолтных иконок является проблемой, допускается перекрасить иконки в цвета из общей палитры.
Дизайн иконки
Иконка всегда состоит из трех элементов
Простые формы и минимум линий
Сложная конструкция из нескольких объектов плохо работает в мелких размерах (16, 24 px), поэтому изображаем не более 1–2 объектов и не перегружаем линиями:
Белая форма — единое массивное пятно
Форма без вырезов и отверстий, так при переводе в стиль «Symbol» эта форма становится подложкой.
Типы продуктов
Обычные продукты
Используются иконки преимущественно в дефолтном стиле.
Суббренд-продукты
Используются иконки в стиле «Symbol» (без подложки, приглушенные цвета).
При создании таких иконок важно, чтобы они визуально отличались формой значков и не конфликтовали в рамках одного суббренда.
Суббренды в коммуникациях (Figma)
Суббренды в сервисах (Гайды)
Бета-продукт / протопродукт
Для продуктов, не вышедших в операционное управление, на этом этапе рекомендуется использовать иконку с буквой «К»:
Уникальную иконку можно будет заказать уже на более поздних этапах перед полноценным запуском продукта.
Внутренние сервисы
Для внутренних сервисов желательно не разрабатывать новую продуктовую иконку с нуля и не готовить полный пакет всех стилей и размеров, а подобрать подходящую из набора неиспользованных иконок, либо сделать полностью новую силами дизайнера продукта.
Для внутренних сервисов может потребоваться иконка для меню Стаффа в стиле «Symbol»:
Что нужно знать при заказе иконки
Метафоры
Рекомендуется использовать ассоциации первого порядка (если такие метафоры ранее не были заняты другими продуктами). Например, сервис про путешествие — самолет, багаж, билет, глобус...
В качестве отправной точки по подбору метафор используется набор неиспользованных иконок:
Набор неиспользованных иконок (Figma)
Если требуются дальнейшие поиски метафоры, то возможны три подхода:
- Предмет / объект / символ
- Абстракция / геометрия
- Графема (первая буква из названия продукта)
Ограничения
- В Контуре используется порядка 150+ продуктовых иконок, поэтому многие популярные метафоры (например, документы, люди...) могут быть заняты, и нужно искать новые подходы.
- Новые иконки не должны визуально совпадать с уже существующими.
- Не все образы можно удачно изобразить в текущем стиле.
Нейминг и зависимости
Для имен файлов иконок будет использоваться латинское написание продукта (например: trades, torgi…), которое должно быть заранее выбрано и согласовано с отделом маркетинга. Оно же обычно используется в URL промо-сайта или сервиса. Это же латинское написание будет использоваться в файлах текстовых логотипов.
Принятие решений
Иконки продуктов в первую очередь создаются для коммуникации с клиентом, а не для самой команды продукта.
Последнее слово всегда за функцией дизайна, и арт-директор может предложить конкретную иконку как финальное решение.
Сроки
Разработка продуктовой иконки обычно занимает 1 неделю, но в сложных случаях может потребоваться несколько недель — учитывайте это при запуске продукта.
Стандартный пакет иконок
В стандартном пакете помимо иконок в нескольких стилях и размерах доступны следующие версии иконок:
Аватар
Версия «Avatar» используется в качестве аватарки в соцсетях и других местах, где накладывается круглая маска. Значок в этой версии немного уменьшен и оптически скомпенсирован так, чтобы лучше смотрелся именно в круге.
Фавиконки и Touch-иконки
Для маленьких фавиконок используется стиль «Glyph», где линия — это прозрачный вырез, принимающий цвет фона. Такая фавиконка выгодно смотрится сразу в светлой и темной теме браузера.
Для больших Touch-иконок используется дефолтный стиль в версии без скруглений у плашки (браузеры обернут их в свои скругления).
Windows
По умолчанию для всех продуктов готовится.ico-файл в дефолтном стиле, в который включены размеры 16, 32, 48, 256 px. Другие размеры готовятся по запросу.
Расширенный пакет иконок
Следующие иконки готовятся по отдельному запросу:
iOS и macOS
Для iOS 26 + macOS 26 (и новее) готовится универсальный Xcode-совместимый.icon-файл в стиле Liquid Glass, послойно собранный в программе Icon Composer.
Версии с плашкой «тест» готовятся для тестовых версий приложений.
Для iOS 18 на время переходного периода готовятся «легаси» PNG-иконки в более классическом стиле:
Android
Для Android-приложений иконки готовятся в дефолтном стиле и в специальном упрощенном Themed-стиле для тем оформлений.
Версии «Full Bleed» с большими отступами делаются под анимации движения.
UI-иконки
Готовятся для набора Icons UI и используются в интерфейсах и промо-материалах в этих случаях:
- когда есть техническое ограничение на использование иконок именно из набора Icons UI;
- когда они смотрятся уместнее именно в этом стиле по соседству с другими UI-иконками.
Сервер статики
При использовании в вебе по возможности ссылайтесь на иконки прямо с сервера статики, где хранятся самые актуальные версии. Если со временем продукт сменит цвет или значок в иконке, изменения произойдут автоматически.