Cara memilih set ikon yang tepat untuk proyek Anda

Set ikon yang konsisten membuat antarmuka terasa dirancang dengan baik; campuran tiga set membuatnya terasa asal tempel. Dengan ratusan set gratis yang tersedia, tantangannya bukan mencari ikon, melainkan menemukan satu set yang memenuhi kebutuhan Anda, cocok dengan gaya Anda, dan lisensinya bisa Anda terima. Berikut cara cepat untuk memutuskannya.

1. Periksa cakupan terlebih dahulu

Buat daftar 15 sampai 20 ikon yang paling dibutuhkan produk Anda (beranda, cari, pengaturan, pengguna, unggah, tempat sampah, edit, tutup, chevron, peringatan…) ditambah beberapa ikon khusus bidang Anda, seperti faktur, stetoskop, atau git branch. Lalu cari satu per satu di set kandidat. Set yang tidak memiliki dua ikon utama Anda akan memaksa Anda mencampur set lain nantinya, dan ikon yang tidak serasi adalah inkonsistensi visual paling umum di antarmuka.

Jumlah ikon membantu, tapi bukan segalanya: Material Design Icons punya 7.447 ikon dan Fluent UI System Icons 19.850, sementara Heroicons punya 1.288 ikon pilihan. Untuk situs pemasaran, set kecil mungkin sudah cukup; untuk dasbor yang kompleks, Anda akan menghargai kedalamannya.

2. Pilih gaya: outline, filled, atau duotone

• Ikon outline (garis) terlihat ringan dan modern serta cocok untuk sebagian besar antarmuka. Contoh: Lucide, Tabler Icons.
• Ikon filled (solid) lebih mudah dibaca di ukuran kecil dan untuk keadaan aktif. Contoh: Material Design Icons, Bootstrap Icons (yang juga punya versi outline).
• Set dengan beberapa ketebalan memungkinkan Anda memakai outline untuk keadaan normal dan filled untuk keadaan terpilih tanpa berganti keluarga. Phosphor punya enam ketebalan, dari tipis hingga duotone. Material Symbols menawarkan gaya outline, membulat, dan tajam. Heroicons dan Fluent memasangkan outline dengan solid.
• Ikon multiwarna memberi karakter pada ilustrasi, onboarding, dan tampilan kosong, tetapi lebih sulit disesuaikan dengan tema. Jelajahi ikon UI multiwarna.

Sesuaikan gaya ikon dengan tipografi Anda: garis tipis cocok dengan font ringan dan geometris, sedangkan ikon yang lebih tebal cocok dengan teks antarmuka yang tebal.

3. Sesuaikan grid dan ketebalan garis

Ikon digambar di atas grid, biasanya 24×24 piksel. Ikon terlihat paling tajam saat ditampilkan di ukuran grid atau kelipatannya, jadi pilih set yang dirancang untuk ukuran yang benar-benar Anda pakai:

• Set UI 24px cocok untuk tombol, menu, dan navigasi, kasus yang paling umum.
• Set 16 px dan 32 px masing-masing cocok untuk alat yang padat dan area sentuh yang besar.

Halaman setiap set menampilkan ukuran grid-nya. Jika Anda memadukan ikon dengan teks, periksa juga ketebalan garisnya: garis 1,5 px terlihat seimbang di samping teks biasa, sedangkan garis 2 px cocok dengan teks medium atau tebal.

4. Periksa lisensinya

Sebagian besar set mengizinkan penggunaan komersial, tetapi syaratnya berbeda-beda. MIT, ISC, dan Apache 2.0 hanya meminta Anda menyertakan teks lisensi, sedangkan CC BY mewajibkan kredit yang terlihat. Beberapa set sama sekali melarang penggunaan komersial. Setiap halaman kategori punya tabel lisensi, dan panduan lisensi ikon menjelaskan setiap lisensi.

5. Utamakan set yang masih dikembangkan

Set yang aktif dikembangkan akan mendapat ikon baru sesuai kebutuhan (merek baru, pola antarmuka baru) dan perbaikan untuk ikon yang sudah ada. Set di kategori arsip tidak dikembangkan masih berfungsi, tetapi Anda harus mengurus sendiri saat membutuhkan ikon baru. Periksa juga ekosistemnya: set populer punya paket resmi untuk React, Vue, dan framework lain, serta file desain untuk Figma.

Rekomendasi berdasarkan kebutuhan

Masih ragu? Buka dua kandidat berdampingan, cari sepuluh ikon terpenting Anda di keduanya, lalu tempatkan di layar produk Anda yang sebenarnya. Pilihan terbaik biasanya terlihat dalam beberapa menit. Setelah memutuskan, panduan memakai ikon SVG menjelaskan cara menambahkannya ke HTML, React, atau Vue.