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

Основные

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

ЖивотныеНаграда кубокНаграда медальПарфюмерияВоздушный шарикПодарокСоскаГалстукВешалкаФутболкаОбувь женскаяОбувьСчетчикСпидометрОбучениеФонарик выклФонарикАлкоголь бутылкаАлкоголь пивоАлкоголь коктейльАлкоголь бокалКружкаСтакан с трубочкойСтакан кофеМолокоВода в бутылкеПодносЕдаКровать двойнаяКровать одинарнаяКроватьБинокльОчкиГостиничный номерЗвонок на ресепшенеЖидкое мылоХозтоварыКоронаБриллиантЛампочка вклЛампочкаЧемодан медицинскийМедицинский крестЗубБАДТаблеткиИнвалидное креслоГромкоговорительОгоньМолнияЭлектричествоБлеск 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 вправоТреугольник внизТреугольник влевоТреугольник вправоСтрелка-треугольник вверх

Логотипы

Государство

Контур

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

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

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

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

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

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

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

Неправильно

Правильно

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

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

Корзина

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

  • Документы
  • Товары
  • Пользователи
  • Организации

Крестик

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

  • Подсказки
  • Уведомления
  • Поля в документе

Контекст

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

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

Минус

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

Очистка

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

Библиотеки

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

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