Ikon dalam UI — Kecil tapi Penting
Ikon membantu user memahami fungsi elemen dengan cepat tanpa membaca teks. Tapi ikon yang buruk justru membingungkan.
Aturan Penggunaan Ikon
- Ikon + teks lebih baik dari ikon saja — kecuali ikon yang sangat universal (search, close, menu)
- Konsisten dalam style — jangan mix ikon outline dan filled dalam satu UI
- Ukuran konsisten — biasanya 16px, 20px, atau 24px
- Touch target minimum 44x44px — ikon bisa kecil, tapi area tap harus cukup besar
Accessibility untuk Ikon
Ikon dekoratif (di samping teks):
<button>
<svg aria-hidden="true">...</svg>
Simpan
</button>
aria-hidden="true" — screen reader skip ikon, baca teksnya saja.
Ikon fungsional (tanpa teks):
<button aria-label="Tutup dialog">
<svg aria-hidden="true">...</svg>
</button>
aria-label memberikan deskripsi untuk screen reader.
Icon-only tanpa button:
<span role="img" aria-label="Peringatan">⚠️</span>
Library Ikon Populer
| Library | Style | Cocok untuk |
|---|---|---|
| Heroicons | Outline + Solid | Tailwind ecosystem |
| Lucide | Clean outline | Modern UI |
| Phosphor | 6 weight variants | Versatile |
| Material Symbols | Google style | Material Design |
Tips
- Pilih 1 icon library dan konsisten — jangan mix
- SVG > icon font — SVG lebih fleksibel, bisa di-color dan resize
- Warna ikon = warna teks — ikon mengikuti warna teks di sekitarnya
- Gap antara ikon dan teks — minimal 4-8px
Gojek menggunakan custom icon set yang konsisten di seluruh app — setiap ikon punya style yang sama (filled, rounded corners).
