Система іконок і піктограм

1) Роль іконок в продукті

Іконки - компактний носій сенсу і стану. Вони прискорюють сканування, допомагають економити місце і підвищують впізнаваність патернів. У продуктових інтерфейсах іконка доповнює текст і колір, а не замінює їх.

1. Сенс> стиль: кожна іконка повинна мати чіткий сценарій застосування.

2. Консистентність: єдина сітка, штрих, кути, ритм заповнення.

3. Доступність: іконка не єдиний сигнал; завжди є підпис/tooltip/aria.

4. Продуктивність: один SVG-пайплайн, спрайти і токени кольору/розміру.

2) Сітка і ключові лінії

Базові артборди: 16 × 16, 20 × 20, 24 × 24 (основний), 32 × 32.
Ключова лінія (keyline): коло/квадрат, вписаний з відступом 1-2 px для оптичного балансу.
Крок пікселя: малюємо на цілих координатах; stroke кратний 0. 5 px (зазвичай 1. 5 px на 24 × 24).

• Діагоналі «товщі» виглядають тонше - додайте 0. 25 px до stroke в проблемних місцях.
• Вершини гострих кутів трохи утапливаем всередину keyline на 1 px, щоб не «гриміли».
• Кружки і точки часто вимагають + 1 px до діаметра для рівної візуальної маси.

Зони кліка: інтерактивна зона ≥ 40 × 40 px (mobile), ≥ 32 × 32 px (desktop); іконка центрована.

3) Стиль набору

• stroke: 1. 5 px (24×24), 1. 25 px (20×20), 1 px (16×16).
• linecap/linejoin: «round» для доброзичливості або «miter» для технічного стилю (фіксуємо в гайдлайні).
• Кути радіуса в геометрії: 2-3 px (на 24 × 24).

Заливка (filled) - для щільних областей і значків статусу.
Двотон (duotone) - допускається для ілюстративних порожніх станів, але не для критичних UI-сигналів.

• Outline - базовий стан.
• Filled - актив/виділення.
• Two-tone - декоративно/в довідці.

4) Колір і контраст (WCAG)

Базовий режим - монохром через'currentColor': іконка успадковує колір тексту/контексту.

• `icon. error'↔ фон ≥ 3:1, з підписом текстом (не тільки колір).
• `icon. on-surface'↔ фон ≥ 3:1; для дрібних розмірів цілитися в 4. 5:1.
• На кольорових плашках використовуйте «on-» кольори (автопідбір контрасту з системи кольору).

5) Стани та взаємодії

Default / Hover / Active / Disabled / Focus: різниця не тільки в кольорі - змінюємо непрозорість/заливку/товщину/фон-пігулку, додаємо focus ring.
Badges (лічильники): контраст цифри ≥ 4. 5:1 до плашки; розмір цифри ≥ 10-11 px.
Toggle-іконки (вибране, лайк): змінюємо заливку та/або внутрішню точку, а не тільки колір.

6) Іконка + текст

Іконки не замінюють лейбли в ключових діях. Мінімальна пара: іконка + короткий текст (або tooltip по'aria-label'). У списках і таблицях іконка вирівнюється за капвисотою тексту і базової лінії.

7) Доступність (A11y)

Для декоративних іконок: ' role =» img» aria-hidden =» true»'або прибрати з потоку доступності.
Для смислових: `<svg role="img" aria-labelledby="id">` + `<title id="id">Описание</title>` или `aria-label`.
Іконка не повинна бути єдиним носієм статусу: додавайте текст/підказку/іконографічний патерн (форма, штрих).
Розмір тексту і контраст підпису відповідають WCAG (звичайний ≥ 4. 5:1).

8) SVG-пайплайн і продуктивність

Чому SVG: векторна чіткість, стилізація через CSS, мала вага з оптимізацією.

• Зберігати майстер-файли в Figma, експорт в SVG з опціями: без зайвих «group», без «fill-rule» за замовчуванням, з атрибутом «viewBox» і без фіксованих «width/height» (перевизначаємо в CSS).
• Прогін через SVGO (профіль проекту): видалення метаданих, скорочення координат, об'єднання шляхів.
• Відмова від іконочних шрифтів (icon fonts) - проблеми з доступністю і рендером.

1. SVG-спрайт:

html
<svg style="display:none">
<symbol id="icon-upload" viewBox="0 0 24 24">…</symbol>
</svg>
…
<svg class="i"><use href="#icon-upload"></use></svg>

дешеві повтори, − не можна легко міняти'stroke-width'в деяких пайплайнах.
2. Інлайн-SVG (React компонент): гнучкість стилів і пропсів, tree-shaking.
3. External'< img>'- тільки для декоративних/ілюстративних.

css
.i { width: 1em; height: 1em; color: var(--icon-color, currentColor); }
.i--muted { opacity:.64; }
.i--danger { color: var(--role-danger); }

9) API компонента (приклад React)

tsx type IconProps = {
name: 'upload'      'download'      'wallet'      'trophy'      'shield'      string;
size?: number      '1em'      'sm'      'md'      'lg';
stroke?: number;       // 1      1. 25      1. 5 title?: string;        // для a11y decorative?: boolean;     // если true -> aria-hidden className?: string;
};

• За замовчуванням'size =» 1em»'і'stroke = 1. 5`.
• Якщо'decorative'- додаємо'aria-hidden =» true»'.