Размер:
Стиль:

Основные

Дополнительные

ПингвинКорова 1Корова 2ЖивотныеНаграда кубокНаграда медальПарфюмерияВоздушный шарикПодарокСоскаГалстукВешалкаФутболкаОбувь женскаяОбувьСчетчикСпидометрОбучениеФонарикФонарик выклПеченьеАлкоголь бутылкаАлкоголь пивоАлкоголь коктейльАлкоголь бокалКружкаСтакан с трубочкойСтакан кофеМолокоВода в бутылкеПодносЕдаКровать двойнаяКровать одинарнаяКроватьГостиничный номерЗвонок на ресепшенеЖидкое мылоХозтоварыКоронаБриллиантЛампочкаЛампочка вклЧемодан медицинскийМедицинский крестЗубТаблеткиБАДИнвалидное креслоГромкоговорительОгоньМолнияЭлектричествоБлеск 1Блеск 2Блеск 3КапляЦветокЛистокДеревоЁлкаПальмаОтпечаток пальцаМаска анонимностиШпионПарольСейфБаскетбольный мячТеннисный мячГантеляПрицелМишеньМолотки / РострудГаечный ключВолшебная палочкаСамолетРакетаАвтомобильГрузовикВелосипедЯкорьКорабльЛунаСнежинкаСолнцеСветлая/тёмная темаГрадусникЗонтик

Бизнес и торговля

Документы

Люди

Технологии

Мультимедиа

Действия и статусы

Интерфейсы

Редактура и текст

Стрелки

Стрелка 1 внизСтрелка 1 вниз-влевоСтрелка 1 вниз-вправоСтрелка 1 влевоСтрелка 1 вправоСтрелка 1 вверхСтрелка 1 вверх-влевоСтрелка 1 вверх-вправоСтрелка 2 внизСтрелка 2 влевоСтрелка 2 вправоСтрелка 2 вверхРаскрывашка 4Раскрывашка 3Раскрывашка 2Раскрывашка 1Раскрывашка-треугольники 4Раскрывашка-треугольники 3Раскрывашка-треугольники 2Раскрывашка-треугольники 1Стрелка угловая вниз-влевоСтрелка угловая вниз-вправоСтрелка угловая влево-внизСтрелка угловая влево-вверхСтрелка угловая вправо-внизСтрелка угловая вправо-вверхСтрелка угловая вверх-влевоСтрелка угловая вверх-вправоСтрелка скругленная вниз-влевоСтрелка скругленная вниз-вправоСтрелка скругленная вверх-влевоСтрелка скругленная вверх-вправоСтрелка обратная влево-внизСтрелка обратная влево-вверхСтрелка обратная вправо-внизСтрелка обратная вправо-вверхСтрелка обратная вверх-влевоСтрелка обратная вверх-вправоСтрелка диагональная 1 LСтрелка диагональная 1 RСтрелка влево-вправоСтрелка вверх-внизСтрелки диагональные 2 наружуСтрелки диагональные 2 внутрьСтрелки перетащитьСтрелки диагональные перетащитьСтрелки диагональные 4 наружуСтрелки диагональные 4 внутрьСтрелка - вниз к краюСтрелка - влево к краюСтрелка - вправо к краюСтрелка - вверх к краюСтрелка - вниз от краяСтрелка - влево от краяСтрелка - вправо от краяСтрелка - вверх от краяСтрелки - к центру - по горизонталиСтрелки - от центра - по горизонталиСтрелки - к центру - по вертикалиСтрелки - от центра - по вертикалиСтрелки - размер по горизонталиСтрелки - размер по вертикалиСтрелка внизСтрелка влевоСтрелка вправоСтрелка вверхСтрелка внизСтрелка влевоСтрелка вправоСтрелка вверхСтрелки вправо-влевоСтрелки вверх-внизСтрелка круговая синхронизацияСтрелка время назадСтрелка время впередСтрелка-шейп внизСтрелка-шейп вниз-влевоСтрелка-шейп вниз-вправоСтрелка-шейп влевоСтрелка-шейп вправоСтрелка-шейп вверхСтрелка-шейп вверх-влевоСтрелка-шейп вверх-вправоСтрелка-шейп Р2 влевоСтрелка-шейп Р2 вправоСтрелка-шейп Р1 влевоСтрелка-шейп Р1 вправоТреугольник внизТреугольник влевоТреугольник вправоСтрелка-треугольник вверх

Логотипы

Государство

Контур

Чтобы скопировать код иконки нужно войти

Рекомендации по использованию

В наборе много иконок, близких по смыслу или обозначающих одну и ту же сущность. Какую из похожих выбрать — зачастую зависит от вкуса дизайнера.

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

Действия и статусы

Действия обозначайте контурными иконками — без заливки.

Таблица сочетаний контурной иконки принтера с текстом «Напечатать»: Light 16×16 с текстом XS 12 и S 14, Regular 16×16 с S 14 Bold, Light 20×20 с M 16, Regular 20×20 с M 16 Bold, Regular 24×24 с L 18 и L 18 Bold

Статусы обозначайте залитыми иконками: контраст заливки помогает отличить состояние объекта от действия над ним.

Таблица сочетаний залитой зелёной галочки в круге со статусом «Ошибок нет»: Solid 16×16 с текстом S 14, Solid 20×20 с M 16, Solid 24×24 с L 18

Не смешивайте иконки разного начертания и формы для обозначения статусов одного порядка.

Статусы разного начертания и формы: контурная зелёная галочка «Ошибок нет», залитый красный круг с минусом «7 ошибок», жёлтый треугольник «13 предупреждений», контурный синий квадрат с «i» «15 уведомлений»

Неправильно

Статусы одного вида — залитые круги: зелёный с галочкой «Ошибок нет», красный с крестиком «7 ошибок», жёлтый с восклицательным знаком «13 предупреждений», синий с «i» «15 уведомлений»

Правильно

В компактных списках, когда иконки стоят близко друг к другу, допустимо использовать более лёгкие варианты статусов.

Компактный список «Отправленные отчёты» с датами: лёгкие иконки статуса без круга — зелёные галочки, у отчёта «Налог на прибыль» красный крестик

Удаление и скрытие

Корзина

Корзина — для удаления «долгоживущих» объектов, к которым можно вернуться из других частей системы. Например:

  • Документы
  • Товары
  • Пользователи
  • Организации
Список «Отчёты»: при наведении на строку «Расчёт по страховым взносам» справа появляется красная кнопка с корзиной и подсказкой «Удалить отчёт»Список «Организации» с ИНН: при наведении на строку НЧОУ «ОДС НТМК» справа появляется красная кнопка с корзиной и подсказкой «Удалить организацию»

Крестик

Крестик — для скрытия или удаления краткосрочных сущностей. Обычно они живут на одном экране и не связаны с другими частями системы. Например:

  • Подсказки
  • Уведомления
  • Поля в документе
Список «Уведомления» с датами: при наведении на уведомление «Заканчивается срок действия доверенности» появляется крестик с подсказкой «Скрыть уведомление»Строки с полями «Дата возврата» и «Сумму налога», у каждой справа крестик, на первом подсказка «Удалить строку»; внизу ссылка «Добавить строку» с плюсом

Контекст

Выбор между корзиной и крестиком зависит от контекста. Например, мы добавили пользователя в список контактов — чтобы убрать его оттуда совсем, используем корзину.

«Список контактов» с иконками человека: при наведении на «Никита Беспамятных» справа появляется красная кнопка с корзиной и подсказкой «Удалить контакт»

Тех же пользователей добавляем в рассылку. Чтобы убрать из неё, используем крестик: сам пользователь остаётся в контактах и пропадает только из этой рассылки.

Список «Создание рассылки» с теми же людьми: при наведении на «Никита Беспамятных» справа появляется кнопка-крестик с подсказкой «Удалить из рассылки»

Минус

Минус уменьшает количество сущностей и работает только в паре с плюсом.

Список «Новый заказ» с количеством товаров в полях: при наведении на строку по бокам поля появляются кнопки минус и плюс, курсор на минусе

Очистка

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

Поле поиска с текстом «фывап» и серым крестиком, затем при наведении крестик темнеет и появляется подсказка «Очистить»Раздел «Суммы НДФЛ» с суммами в полях, справа от заголовка ссылка «Очистить раздел» с крестиком в круге

Библиотеки

Для дизайнеров — «Libraries / Kontur UI Icons»

Для инженеров — React @skbkontur/icons и документация — /kontur-ui