Icon Gratis Terbaik di 2021

Taufik Nurhidayat
Taufik Nurhidayat
- calculating..

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.

Icon di halaman awal google

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 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.

Ke Font Awesome

Google Material Icons

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.

Google Material Icons

Feather Icons

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 Icons

Material Design Icons

Material 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 Icons

Bootstrap Icons

Bootstrap 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.

Bootstrap Icons

Jam Icons

Jam Icon

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.

Jam Icons

Fontisto Icon Pack

Icons yang satu ini berupa Vektor, sehingga sangat bagus digunakan dengan layar beresolusi tinggi. Kamu dapat menggunakanya dengan Webfont + CSS.

Fontisto

Bonus:
Flaticons
Icons8

References:

Wikipedia - Icon (computing)
20+ Best ICON Packs for Web Developers and Designers

Thumbnail Designed by coolvector

Comments