**Найтихіший елемент інтерфейсу, який усе одно всіх перекрикує **

Їх часто сприймають дрібничкою, але насправді вони шифрують дії, підказують структуру, тримають ритм і допомагають бренду лишатися впізнаваним — навіть коли користувач не вчитується в текст.

 Сучасна UI-іконографія народилася наприкінці 1970-х разом із графічними інтерфейсами Xerox PARC, а в побут увійшла з Apple Macintosh (1984) та Windows.

Зараз ми рідше робимо суто скевоморфізм (техніка дизайну, що імітує реальні об'єкти в інтерфейсі), але принципи лишаються незмінними: проста форма, зрозуміла метафора, стабільне повторення у різних контекстах.

 **Іконка має читатися без підпису**

Головний тест будь-якої іконки — наскільки користувачам зрозуміло, що вона робить. За способом «впізнавання» іконки бувають двох типів:

• **Зображальні** (схожі на реальний об'єкт): конверт = пошта, кошик = видалити
• **Символічні / абстрактні**: стрілки, фільтри, теги

 **Де ховаються проблеми:**

**Масштабованість**. Одну іконку не можна просто розтягувати під усі розміри: при зменшенні лінії злипаються, при збільшенні вона виглядає бідно. Тому зрілі бібліотеки малюють окремі версії (optical sizes) — як Material Symbols чи SF Symbols. І памʼятайте: іконка стоїть поруч із текстом, тож не має бути товщою чи вищою за нього.

**Консистентність**: однаковий грід, кут заокруглень, товщина ліній, логіка заповнення.

**Контраст і доступність**: якщо іконка передає інформацію або є інтерактивною, вона має контрастувати з фоном щонайменше 3:1 (WCAG 1.4.11). На декоративні це не поширюється. І не покладайтесь лише на колір — додавайте форму або підпис.

 **Іконки — це ще й про вагу та акценти**

Працюють дві різні осі: заповнення (outline чи filled) і товщина лінії (regular чи bold). Разом вони задають, наскільки «голосно» звучить іконка.

 **Лінійні** (outline) поводяться як легкий текст — не перетягують увагу з контенту.
 **Заповнені** (filled) створюють сильні акценти — для основних дій, плаваючих кнопок та активних станів навігації.
 **Товщина лінії **— окремий інструмент: товщі лінії роблять іконку помітнішою, тонші — делікатнішою.
 **Duotone** (лінія + один акцентний відтінок) додають виразності, але лишаються стриманими — зазвичай це 1–2 кольори з низькою насиченістю.
 **Кольорові / насичені** (у деяких бібліотеках — Bulk) звучать найгучніше за рахунок кількох насичених кольорів. Добре працюють там, де іконка має емоційно зачепити: онбординг, порожні стани, картки.

Іконка здається найтихішим елементом — але саме дрібні неузгодженості найпомітніше псують враження. Тому варто розуміти основи й дотримуватися правил: тоді продукт виглядає і відчувається цілісно, саме так, як ви й задумували.

А вам знайома ситуація, коли в одному макеті змішались іконки з трьох різних бібліотек?