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>