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

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

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

📰 Сучасна 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) звучать найгучніше за рахунок кількох насичених кольорів. Добре працюють там, де іконка має емоційно зачепити: онбординг, порожні стани, картки.

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

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