Icon atau dalam bahasa Indonesia Ikon adalah sebuah simbol yang mudah dipahami oleh pengguna dari sebuah perangkat. Icon digunakan untuk mempermudah navigasi dalam sebuah komputer. Tak hanya di perangkat komputer, icon juga bisa kita lihat pada tanda lalu lintas jalan meskipun mungkin sedikit berbeda dari ikon yang ada pada perangkat komputer.
Dalam sebuah website ataupun aplikasi hampir selalu ada icon. Website besar seperti Google misalnya, pada halaman awal terdapat dua icon pada search form dan tombol aplikasi.
Bahkan dalam smartphone dan sistem operasi komputer kalian pun terdapat banyak icon yang digunakan.
Di atas adalah screenshot dari Windows 10 dan Android MIUI, terlihat bahwa banyak icon yang digunakan pada kedua sistem operasi tersebut.
Untuk membuat sebuah icon tidak boleh asal lho. Ukuran dengan kerapatan Pixel dari sebuah layar juga harus dipertimbangkan, jikalau layar dengan kerapatan pixel yang bagus seperti retina display, amoled atau oled hal tersebut tidak masalah.
Pernah saya menambahkan icon svg dengan ukuran lebar dan tinggi 36px, ketika di smartphone terlihat seperti biasanya tetapi ketika di desktop icon malah terlihat blur dibagian tepi dan sudutnya.
Setelah saya telusuri kepada mbak Google, ternyata kerapatan pixel berpengaruh. Pada smartphone yang saya gunakan kerapatan pixel dari layarnya jauh lebih tinggi dibanding layar desktop yang saya gunakan.
Daripada membuat icon yang lumayan ribet kenapa nggak menggunakan icon yang sudah ada saja? Dan berikut daftar icon gratis yang bisa kamu gunakan untuk project apapun yang sudah saya rangkum untuk kamu.
Font Awesome 5 Free
Font Awesome adalah kumpulan icon yang menurutku sangat konsisten, selain itu Font Awesome adalah kumpulan icon gratis terlengkap yang pernah saya tahu. Terdapat juga versi Pro, dimana versi Pro ini lebih lengkap lagi. Terdapat beberapa style dan jenis dari icon Font Awesome. Font Awesome juga tersedia Webfont+CSS, SVG+Javascript, Sketch, Figma, Vue, React, Angular dan Ember.
Google Material Icons
Untuk kamu yang sering menggunakan produk google bakalan nggak asing dengan Icon yang satu ini, pasalnya hampir semua desain dari produk google mengunakan Google Material Icons. Bagaimana tidak? Toh mereka yang buat ya pasti bakalan mereka gunakan. Material Icon ini adalah bagian dari proyek mereka yaitu Material UI.
Icon Material ini sangat konsisten lho bahkan menurut saya lebih konsisten dari Font Awesome, meskipun icon yang tersedia nggak sebanyak Font Awesome.
Terdapat 5 style dari Icon Material yaitu Filled, Outlined, Rounded, Two-Tone, dan Sharp. Icon nya pun dikelompokan dengan berbagai kategori.
Kamu bisa menggunakan Material Icons secara SVG atau Webfonts+CSS.
Feather Icons
Icon yang satu ini juga sangat konsisten, icon ini bisa dirubah ukuran strokenya karena berupa svg.
Feather Icons bergaya UI modern, jadi sangat cocok untuk aplikasi Mobile maupun Website dengan UI kekinian.
Untuk menggunakan icon yang satu ini, kamu harus menggunakan SVG atau SVG+Javascript.
Feather IconsMaterial Design Icons
Meskipun terlihat sama dengan Google Material Icons, Material Design Icons ini dibuat oleh komunitas bukan oleh orang Google. Namun didasarkan pada Google Material, jadi akan terlihat sama dengan Google Material.
Material Design Icons memiliki lebih banyak icon dibanding Google Material Icon, sekitar lebih dari 5600 icon. Untuk menggunakan icon ini banyak cara, mulai dari webfont, javascript/typescript, svg. Bagi pengguna Nodejs kamu juga bisa menginstallnya dari package manager yang kamu gunakan.
Material Design IconsBootstrap Icons
Bootstrap adalah sebuah framework css yang paling populer dikalangan web developer dan memiliki komunitas yang banyak. Sekitar tahun 2019 Bootstrap merilis icon mereka yaitu "Bootstrap Icon" dalam versi alpha, Januari 2021 mereka merilis versi yang sudah stabil.
Meskipun terbilang masih baru, Bootstrap Icon rupanya banyak digemari. Hal ini bisa dilihat dari yang menggunakan Bootstrap Icon dan memiliki 3.8K star di halaman githubnya.
Untuk menggunakanya kamu bisa memakai cara Copy Paste SVG dan pasang di HTML,
via <img> atau menggunakan CSS.
Jam Icons
Jam Icons berisi lebih dari 890 icon yang bisa kamu gunakan secara gratis. Bisa digunakan dengan SVG atau Font dengan ukuran 16px, 24px dan 32px.
Fontisto Icon Pack
Icons yang satu ini berupa Vektor, sehingga sangat bagus digunakan dengan layar beresolusi tinggi. Kamu dapat menggunakanya dengan Webfont + CSS.
References:
Wikipedia - Icon (computing)
20+ Best ICON Packs for Web Developers and Designers
Comments
Post a comment
- Gunakan <em>kode yang sudah diparse html</em> untuk menampilkan kode.
- Tidak diperbolehkan menggunakan hyperlink