List icon library keren dan open source untuk mempercantik website kamu

Halo teman ngide, kalian pasti pernah membutuhkan icon-icon yang dalam membuat sebuah website bukan? Kali ini kita mau membagikan beberapa icon library yang bisa di pakai untuk mempercantik tampilan user interface website kamu. Yang pasti icon-icon ini gratis dan open source.

1. Fontawesome

Icon library yang pertama adalah Fontawesome. Fontawesome bisa dibilang salah satu icon library yang paling populer di pakai citizen jaman now. Adapun beberapa fitur-fiturnya adalah:

  • Total ada 675 Icons
  • Gratis
  • Tanpa javascript
  • Scalable, jadi bisa diperbesar/diperkecil tanpa takut menjadi blur
  • Gampang untuk di edit dengan css
  • Sudah support dengan retina display
  • Gampang di instegrasikan dengan beberapa css framework lain seperti boostrap dll.

Untuk kamu yang mau mengecek dokumentasinya bisa kunjungin link berikut: http://fontawesome.io/get-started/

2. Openiconic

Selanjutnya kita punya icon library yaitu Open Ionic yang merupakan versi free dan open source dari Iconic. Apa saja fitur-fitur dari Open Iconic?

  • Open Iconic memilki total 223 icon dalam bentuk SVG, webfont dan raster formats. 
  • Gratis
  • Ukurannya yang cukup kecil hanya 12,4kb atau lebih kecil 4x dari ukuran fontawesome
  • Bisa diwarnai dengan css
  • Bisa digunakan dengan banyak css framework seperti bootstrap & foundation

Cara menggunakan Open Iconic adalah dengan meng-include cssnya secara langsung seperti contoh di bawah ini:

<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">
#penggunaan
<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>

Kalian bisa melihat contoh iconya dengan mengunjungi halaman berikut ini: https://useiconic.com/open/

3.Google Material icons

Dari namanya kalian pasti bisa menebak kan siapa pembuat icon library ini? Yup, Icon ini dibuat oleh Google. Buat kalian yang ingin memakai icon-icon dengan style google material maka icon ini menjadi pilihan yang cocok. Adapun beberapa fitur dari icon ini adalah:

  • 900+ material icons 
  • Bisa menggunakan hosting di Google Web Font atau kamu dowload 
  • Sudah support semua modern web browsers.
  • Bisa di edit dengan css langsung seperti warna, ukuran dan posisinya
  • Vector based yang artinya ga ngeblur mesti di kecilin atau dibersarkan ukurannya,

Cara penggunaanya cukup mudah kamu hanya perlu menginclude cssnya seperti di bawah ini:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

Kemudian kamu bisa memanggil icon-nya dengan tag seperti dibawah ini:

<i class="material-icons">face</i>

Untuk lebih detailnya kamu bisa kunjungi dokumentasinya disini: http://google.github.io/material-design-icons/#icon-font-for-the-web

4. Ionicons

Font library yang satu ini khusus di desain untuk ionicframework yaitu framework untuk membuat mobile app. Untuk kalian pengguna Ionic Framework bisa cek ke websitenya langsung disini: http://ionicons.com

Itulah beberapa icon library yang bisa kamu gunakan dengan mudah di project website kamu. Apa kalian punya icon library lainnya? Silakan sampaikan di kolom komentar ya teman ngide!

Please follow and like us:

Hi, Saya Agus Yusida

Hello, perkenalkan saya Agus Yusida, seorang freelancer programmer, pernah membuat startup dan suka mencoba hal-hal baru. Jika ada pertanyaan bisa DM saya di IG @yusidajohn untuk fast respond. Jangan lupa like facebook ngide.net ya!

Related Article