Иконки продуктов

У большинства продуктов Контура есть собственные иконки. Они выполнены как единый набор, и гармонично сочетаются между собой и остальными элементами фирменного стиля.

Использование

Иконки продуктов используются в следующих случаях:

  • Списки продуктов;
  • Фавиконки и touch-иконки сайтов;
  • Иконки мобильных и десктоп-приложений;
  • Аватарки продуктов в соцсетях;
  • Другие случаи, когда текстовый логотип неприменим.

Иконка — не логотип

Иконка продукта не является логотипом или его частью. Нельзя использовать конструкцию «иконка + текстовый логотип».

Стили иконок

Дефолтный

Основной стиль с цветной подложкой, используется в большинстве случаев.

Symbol

Легкая версия приглушенного цвета без подложки. Подходит для больших списков продуктов, и где уместнее использовать упрощенную иконку.

Glyph

Специальная версия, где линия — вырез. Используется в маленьких фавиконках.

Специальные версии

Для круглых аватарок

Версия «Avatar» для использования в качестве аватарки в соцсетях и других местах, где накладывается круглая маска. Значок в этой версии немного уменьшен и оптически скомпенсирован так, чтобы лучше смотрелся в круге.

Фавиконки и Touch-иконки

Для маленьких фавиконок используется стиль «Glyph», где линия — это прозрачный вырез, принимающий цвет фона. Такая фавиконка выгодно смотрится сразу в светлой и темной теме браузера. Для больших Touch-иконок используется дефолтный стиль в версии без скруглений у плашки (браузеры обернут их в свои скругления).

Мобильные приложения

Приложения для iOS и Android используют дефолтный стиль иконок, но с учетом требований магазинов приложений. Такие иконки готовятся по запросу.

Рабочий стол Windows

Используется дефолтный стиль. По умолчанию для всех продуктов доступен ICO-файл, в который включены размеры 16, 32, 48 px. Другие размеры готовятся по запросу.

Размеры

Иконки в дефолтном стиле доступны во многих ходовых размерах. Используйте их в оригинальном размере, т.к. толщина линии подобрана индивидуально, а элементы подогнаны под пиксельную решетку.

Палитра

Продуктовые иконки используют собственную палитру, которая немного отличается от оттенков «Basic (60)» из общей палитры. В ней цвета приведены к более общему тону, чтобы в списках продуктов явно не было более темных/светлых иконок.

Если в промо-материалах это отклонение является проблемой, допускается перекрасить иконки в оттенки из общей палитры.

Сервер статики

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