Ничего не найдено 🤷🏻♀️
Основные
Дополнительные
Бизнес и торговля
Документы
Люди
Технологии
Мультимедиа
Действия и статусы
Интерфейсы
Редактура и текст
Стрелки
Логотипы
Государство
Контур
В наборе много иконок, близких по смыслу или обозначающих одну и ту же сущность. Какую из похожих выбрать — зачастую зависит от вкуса дизайнера.
Использование одинаковых иконок помогает создавать у пользователя ощущения экосистемы и консистентной среды как внутри продукта, так и между продуктами.
Действия и статусы
Действия обозначайте контурными иконками — без заливки.
Статусы обозначайте залитыми иконками: контраст заливки помогает отличить состояние объекта от действия над ним.
Не смешивайте иконки разного начертания и формы для обозначения статусов одного порядка.
Неправильно
Правильно
В компактных списках, когда иконки стоят близко друг к другу, допустимо использовать более лёгкие варианты статусов.
Удаление и скрытие
Корзина
Корзина — для удаления «долгоживущих» объектов, к которым можно вернуться из других частей системы. Например:
- Документы
- Товары
- Пользователи
- Организации
Крестик
Крестик — для скрытия или удаления краткосрочных сущностей. Обычно они живут на одном экране и не связаны с другими частями системы. Например:
- Подсказки
- Уведомления
- Поля в документе
Контекст
Выбор между корзиной и крестиком зависит от контекста. Например, мы добавили пользователя в список контактов — чтобы убрать его оттуда совсем, используем корзину.
Тех же пользователей добавляем в рассылку. Чтобы убрать из неё, используем крестик: сам пользователь остаётся в контактах и пропадает только из этой рассылки.
Минус
Минус уменьшает количество сущностей и работает только в паре с плюсом.
Очистка
Чтобы очистить значение в поле или разделе, не удаляя саму сущность, используйте крестик.
Библиотеки
Для дизайнеров — «Libraries / Kontur UI Icons»
Для инженеров — React @skbkontur/icons и документация — /kontur-ui