Icon Gratis Ciamik Terbaik

Taufik Nurhidayat

Taufik Nurhidayat

Updated

5 min
Icon Gratis Ciamik Terbaik
On This Page

    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.

    Windows 10 UI Screenshot

    Di atas adalah screenshot dari Windows 10, terlihat bahwa banyak icon yang digunakan pada 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 tidak menggunakan icon yang sudah ada saja? Dan berikut daftar icon gratis yang bisa kamu gunakan untuk project apapun yang sudah saya rangkum untuk kamu.

    Fontawesome 6 Free

    Font Awesome

    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

    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

    Heroicons

    Heroicons

    Heroicons adalah icon yang dibuat oleh pengembang tailwind css. Terdapat 2 style yaitu outline dan fill.

    Heroicons memiliki konsistensi yang bagus dan untuk menggunakannya pun kamu cukup copy paste svg dari website nya. Jika kamu ingin meng-install di framework react atau vue pun bisa.

    Karena dibuat oleh pengembang yang sama icon ini sangat cocok dengan Tailwind CSS.

    heroicons.com

    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.

    IBM UI Icons

    UI Icons IBM

    UI Icons dari IBM ini sangat bagus dan konsisten, untuk setiap sudut pun menggunakan sudut 45 dan 15 derajat.

    Icons ini pun sudah sangat lengkap, tersedia berbagai macam kategori sehingga tidak sulit untuk mencari ikon berdasarkan kategori.

    IBM UI Icons

    Bootstrap Icon

    Preview Bootstrap Icon

    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.

    Namun menurut saya kelemahan dari bootstrap icons ialah kurang konsistensi nya baik ukuran lebar keseluruhan maupun ketebalan stroke di beberapa icons.

    CSS Icons

    CSS Icons

    Icon bagus yang satu ini dibuat oleh seorang designer UI Astrit Malsia dibantu dengan beberapa desainer lain sehingga tercipta lebih dari 700 icon yang siap digunakan secara gratis dibawah lisensi MIT.

    Website CSS 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