02Дизайн-системы
Иконочная система
Набор, вес, размеры, правила использования, accessibility — иконки как система, не разнобой.
Спроектируй иконочную систему.
1. Источник
Выбери один:
- Готовая библиотека: Lucide (рекомендую — стиль, покрытие, open-source), Phosphor, Heroicons
- Кастом: только если есть дизайнер с временем — поддержание = много работы
- Смешанный: Lucide + 5-10 кастомных для бренда
Не комбинируй несколько библиотек со схожими, но разными стилями — пользователь это заметит.
2. Параметры стиля
- Stroke width: 1.5 или 1.75 (премиум-чувство) / 2 (привычно)
- Corner radius: скругление концов линий
- Fill vs outline: одно консистентно
- Размер базовой иконки: 24×24 (стандарт) / 20×20 (compact)
3. Размеры
| Контекст | Размер |
|---|---|
| В тексте (inline) | 1em (наследует) |
| В кнопке (sm) | 14px |
| В кнопке (md) | 16px |
| В кнопке (lg) | 20px |
| Standalone (toolbar) | 20-24px |
| Hero / illustration | 32-48px |
4. Цвета
- Наследуют currentColor по умолчанию (text-fg / text-muted)
- Акцентный цвет — только для активных / важных
- Не раскрашивай иконки множеством цветов
5. Accessibility
// Декоративная — рядом с текстом
<Icon aria-hidden />Сохранить
// Стоит сама за себя — нужно имя
<button aria-label="Сохранить"><Icon aria-hidden /></button>
// Текст в SVG
<svg role="img">
<title>Корзина</title>
...
</svg>
6. Правила использования
- Одна иконка = одно значение в системе
- НЕ используй одну иконку для двух разных действий
- "Корзина" всегда удаляет, не "ваши покупки"
7. Документация
В дизайн-системе для каждой иконки:
- Имя
- Когда использовать
- Когда не использовать
- Доступные размеры
- Пример
8. Spritesheet или компонент
- React: компонент из библиотеки, tree-shaking сам отбросит неиспользуемые
- HTML:
<svg><use href="#sprite">— один файл со всеми иконками
Принципы
- Лучше 30 хороших чем 300 разных по стилю
- Если иконка нужна "чтобы было красиво" — убери
- Тестируй: показал иконку без подписи — поняли что она значит?
Похожие промты
site / audit
Аудит brand-consistency
Прогон интерфейса на согласованность: цвета, spacing, typography, voice, иконки. Найти отклонения от системы.
auditdesign-systembrand
Открыть
Средний30-60 мин
site / audit
Brand guidelines с нуля
Сборка полного гайдлайна: voice, color tokens, типографика, правила логотипа, антипаттерны и примеры. Готовый DESIGN.md.
brandguidelinesdesign-system
Открыть
Продвинутый2-4 часа
design / design-system
Дизайн-токены из референса
Извлечь систему цветов, типографики, теней, радиусов и spacing из примера и оформить как токены.
design-systemtokenscss
Открыть
Средний30-60 мин