Memilih provider icon gratis untuk website modern berarti menyeimbangkan gaya visual, lisensi, cara pengiriman (SVG inline, komponen NPM, atau icon font), dan stack Anda (HTML statis, WordPress, React, Vue, Flutter). Tidak ada satu library yang cocok untuk semua proyek: logo brand, dashboard admin, dan landing page marketing menuntut katalog, atribusi, dan metode integrasi yang berbeda.
Daftar berikut memuat 20 sumber icon yang layak dipertimbangkan, dengan penekanan pada data resmi (dokumentasi, repositori, halaman lisensi). Jumlah icon, paket harga, dan nama package dapat berubah, jadi angka di bawah memakai tanda ± atau rujukan ke halaman resmi bila nilainya volatil. Bila Anda mencari situs icon gratis atau koleksi icon web siap pakai, filter stack dan lisensi dulu sebelum mengunduh aset.
- Pisahkan kebutuhan UI umum, logo merek, dan marketplace ilustratif sebelum memilih library.
- Gratis di unduhan tidak selalu berarti bebas atribusi atau bebas pemakaian komersial tanpa syarat tambahan.
- SVG/komponen dengan import spesifik sering lebih mudah dioptimalkan bundler daripada icon font monolitik, tetapi hasil akhir tetap bergantung jumlah icon, caching, dan DOM.
- WordPress dan page builder dapat memuat lebih dari satu library sekaligus sehingga CSS dan font ganda perlu diaudit.
- Iconify menyatukan banyak set, namun lisensi mengikuti set asal masing-masing icon, bukan satu lisensi global.
Cara Memilih Provider Icon Gratis Sebelum Membuka Katalog
Mulai dari tiga pertanyaan: apakah Anda butuh glyph UI, logo merek pihak ketiga, atau aset ilustratif langka? UI admin dan aplikasi web modern cenderung cocok dengan SVG atau komponen framework. Situs PHP/HTML klasik masih sering memakai kelas icon font. Logo GitHub, Stripe, atau WhatsApp membutuhkan set brand (Simple Icons, bagian Brands Font Awesome, theSVG), bukan sekadar ikon keranjang generik.
Lalu tentukan jalur integrasi: CDN untuk prototipe cepat, NPM untuk aplikasi dengan bundler, atau SVG statis self-hosted untuk kontrol CSP dan offline. Terakhir, baca lisensi software icon dan, terpisah, kebijakan trademark untuk logo. Lisensi MIT/ISC/Apache permissive tetap dapat meminta notice, sedangkan marketplace gratis sering menambah kewajiban atribusi meski unduhan tidak dibayar.
Perbandingan Cepat 20 Provider Icon Gratis dan Berbayar
Tabel berikut memindai atribut yang paling sering memengaruhi keputusan. Kolom Pro merujuk paket berbayar resmi bila ada, bukan perkiraan pihak ketiga.
| Provider | Gratis | Pro / berbayar | Lisensi utama | SVG | Icon font | NPM | CDN | React | Logo brand |
|---|---|---|---|---|---|---|---|---|---|
| Lucide | Ya | Tidak | ISC | Ya | Tidak | Ya | Ya | Ya | Terbatas |
| Font Awesome | Free tier | Ya | Free/Pro (terpisah) | Ya | Ya | Ya | Ya | Ya | Ya (Brands) |
| Bootstrap Icons | Ya | Tidak | MIT | Ya | Ya | Ya | Ya | Opsional | Tidak fokus |
| Material Symbols | Ya | Tidak | Apache 2.0 | Ya | Variable font | Ya | Google Fonts | Ya | Tidak |
| Heroicons | Ya | Tidak | MIT | Ya | Tidak | Ya | Ya | Ya | Tidak |
| Phosphor | Ya | Tidak | MIT | Ya | Tidak | Ya | Ya | Ya | Tidak |
| Iconoir | Ya | Tidak | MIT | Ya | Tidak | Ya | Ya | Ya | Tidak |
| Simple Icons | Ya | Tidak | CC0 1.0 (repo) | Ya | Tidak | Ya | Ya | Ya | Ya |
| CSS.gg | Ya | Tidak | MIT | Ya | CSS-based | Ya | Ya | Terbatas | Tidak |
| Feather | Ya | Tidak | MIT | Ya | Tidak | Ya | Ya | Opsional | Tidak |
| Flaticon | Free + atribusi | Premium | Per asset/plan | Ya | Tidak | Terbatas | Tidak | Download | Sebagian |
| Icons8 | Free + syarat | Paid plan | Per plan | Ya | Tidak | API | Download | Plugin/API | Sebagian |
| Tabler Icons | Ya | Tidak | MIT | Ya | Tidak | Ya | Ya | Ya | Tidak |
| Radix Icons | Ya | Tidak | MIT | Ya | Tidak | Ya | Tidak | Ya | Tidak |
| Boxicons | Ya | Tidak | MIT | Ya | Ya | Ya | Ya | Opsional | Terbatas |
| Remix Icon | Ya | Tidak | Apache 2.0 | Ya | Ya | Ya | Ya | Opsional | Tidak |
| Ionicons | Ya | Tidak | MIT | Ya | Tidak | Ya | Ya | Ya | Terbatas |
| theSVG | Ya | Tidak | Per repo | Ya | Tidak | Ya | Ya | Ya | Ya |
| Super Tiny Icons | Ya | Tidak | MIT | Ya | Tidak | Terbatas | GitHub raw | Tidak | Ya |
| Iconify | Ya (engine) | Opsi hosted | Per icon set | Ya | Tidak | Ya | API | Ya | Via set |
Library Icon Gratis untuk React dan SPA
Kelompok ini menargetkan developer frontend yang ingin import icon per nama, styling lewat props atau CSS, dan dukungan tree-shaking melalui bundler modern. Gaya visual cenderung konsisten karena satu tim desain mengkurasi set.
Lucide
Lucide adalah fork aktif dari Feather dengan ribuan icon outline (±1.900+ saat dokumentasi terbaru diakses). Lisensi ISC, gratis penuh. Integrasi: package lucide-react, Vue/Svelte sejenis, SVG statis, sprite. React:
npm install lucide-reactimport { Camera, Trash2 } from 'lucide-react';Named import dan komponen SVG memudahkan design system modern, tetapi Lucide bukan sumber utama logo merek resmi. Ukuran bundle akhir tetap bergantung bundler dan pola import, bukan otomatis minimal.
Heroicons
Heroicons (MIT) dari tim Tailwind Labs menawarkan ±1.260+ variasi outline/solid/micro. Package React/Vue resmi, inline SVG, NPM. Cocok proyek Tailwind atau UI minimalis. Katalog lebih kecil dari Tabler/Phosphor, tetapi kurasi ketat.
Phosphor Icons
Phosphor (MIT) menonjolkan banyak weight (thin, light, regular, bold, fill, duotone). Dokumentasi menyebut ribuan variasi visual, bukan selalu ribuan konsep unik. NPM, CDN, React/Vue/Svelte. Berguna bila state selected/unselected butuh pasangan weight berbeda tanpa mengganti library.
Iconoir
Iconoir (MIT) berfokus outline bersih dengan dukungan React, Vue, Flutter, React Native melalui package terpisah. Verifikasi package terbaru di situs resmi sebelum commit stack mobile. Cocok dashboard ringan dan produk SaaS dengan estetika garis tipis.
Radix Icons
Radix Icons (MIT) sengaja kecil (±332 icon) dengan grid 15×15 untuk kontrol padat di komponen Radix UI. React-first. Pilihan layak bila Anda sudah memakai ekosistem Radix dan butuh icon konsisten di dialog, menu, dan form.
Tabler Icons
Tabler Icons (MIT) menyediakan ±6.200+ icon outline yang cocok dashboard admin dan aplikasi data-heavy. Ada package React/Vue/Svelte dan SVG/NPM. Gaya seragam, densitas tinggi, namun visual Tabler mudah dikenali sehingga kurang cocok bila brand membutuhkan icon custom unik.
Icon Font dan Kelas HTML
Workflow berbasis kelas (<i class="bi bi-alarm">) masih praktis untuk tema WordPress, template PHP, atau legacy tanpa bundler. Perhatikan overhead webfont, FOIT/FOUT, dan aksesibilitas nama kontrol.
Font Awesome
Font Awesome memisahkan Free dan Pro, dengan jalur SVG, icon font, CDN Kit, NPM, plugin WordPress, serta set Brands untuk logo sosial. Paket berbayar (contoh tier Solo) tercantum di halaman pricing resmi, dengan opsi annual sekitar US$96/tahun untuk Solo (nilai dapat berubah). Kelebihan: ekosistem matang dan dokumentasi luas. Keterbatan: Pro dan batas pageview Kit perlu Anda hitung, icon font dapat menambah request CSS/font jika subsetting tidak dipakai.
Bootstrap Icons
Bootstrap Icons (MIT, ±2.000+) tidak mewajibkan framework Bootstrap. Mendukung SVG inline, sprite, NPM, CDN, dan icon font. Anda bisa memakai kelas <i class="bi bi-alarm" aria-hidden="true"></i> di situs marketing HTML/PHP yang sudah familiar dengan utility Bootstrap, tanpa memuat CSS framework penuh.
Boxicons
Boxicons (MIT, ±1.600+) menawarkan icon font dan SVG dengan sintaks kelas mirip Font Awesome (bx bx-camera). CDN dan NPM tersedia. Verifikasi versi CDN sebelum production karena cache lama dapat menahan glyph usang.
Remix Icon
Remix Icon (Apache 2.0, ±3.200+ saat situs resmi diakses) menyediakan pasangan line/fill berguna untuk navigasi selected/unselected. NPM, CDN, SVG, dan icon font. Anda sebaiknya mengecek wording lisensi final di repositori GitHub resmi saat rilis produk.
Ionicons
Ionicons (MIT, ±1.300+) ditujukan Ionic serta web components/React/Vue. Cocok aplikasi hybrid mobile-web bila Anda sudah di ekosistem Ionic. Perilaku visual platform-specific harus mengacu dokumentasi versi yang Anda pin.
CSS.gg
CSS.gg (MIT) menyediakan ratusan icon sebagai CSS murni plus SVG. Menarik bila Anda ingin styling lewat pseudo-element tanpa inline SVG panjang. Stylesheet eksternal tetap membuat request HTTP bila di-host CDN, jadi klaim tanpa request tidak tepat untuk skenario CDN.
Feather Icons
Feather (MIT, 287 icon) tetap usable untuk proyek kecil minimalis, namun aktivitas repositori feathericons/feather jauh di bawah fork Lucide. Untuk proyek jangka panjang, banyak tim beralih ke Lucide agar mendapat update glyph baru.
Material Symbols (Google)
Material Symbols (Apache 2.0, ribuan glyph) bukan icon font statis biasa: axes variable font (FILL, wght, GRAD, opsz) memungkinkan satu glyph berubah penutup dan berat. Integrasi via Google Fonts, SVG, atau komponen React sesuai panduan Google. Visual sangat Material, sehingga kurang cocok bila brand non-Google membutuhkan identitas unik. Pelajari juga ejaan aksesibilitas saat icon berdampingan teks Material.
Logo Brand dan Sosial
Logo perusahaan memerlukan pemisahan lisensi file SVG dan hak merek dagang. CC0 atau MIT pada repo tidak otomatis memberi izin merek sesuai brand book, sehingga tim legal atau brand masih perlu meninjau guideline pemilik logo sebelum publikasi.
Simple Icons
Simple Icons mengkurasi ±3.400+ logo monochrome untuk merek teknologi. Repo memakai CC0 1.0, namun trademark pemilik logo tetap berlaku. NPM/CDN tersedia. Cocok baris Built with React/Stripe atau dokumentasi integrasi API.
theSVG
theSVG menarget logo brand multi-warna dengan package React/Vue/Svelte dan CLI. Proyek relatif muda dibanding Simple Icons, jadi verifikasi license file per package, jumlah icon, dan dukungan framework di dokumentasi resmi sebelum menggantikan set logo production.
Super Tiny Icons
Super Tiny Icons (MIT) berisi ratusan SVG logo dengan fokus ukuran file ringkas, berguna email HTML atau badge sempit. Bukan pengganti library UI harian, melainkan pelengkap logo.
Marketplace Berbayar: Flaticon dan Icons8
Katalog marketplace jauh lebih besar dan bervariasi gaya dibanding set UI kurasi, dengan syarat atribusi atau langganan premium yang perlu Anda baca per unduhan. Tim desain sering memakai marketplace untuk mockup, lalu mengganti dengan set internal saat produk matang.
Flaticon
Flaticon menawarkan jutaan aset dari kontributor. Free tier sering mewajibkan atribusi, sedangkan Premium mengubah syarat sesuai plan. Anda perlu mengecek harga dan interval billing di halaman pricing resmi Flaticon sebelum membeli. Kelebihan: konsep visual langka. Keterbatan: gaya antar icon dari kontributor berbeda-beda sehingga UI bisa terlihat campuran.
Icons8
Icons8 menggabungkan download, API, editor, dan berbagai gaya (flat, 3D, dll.). Free tier punya batas resolusi/atribusi, paket berbayar membuka vector penuh sesuai plan. Verifikasi lisensi komersial sebelum memakai icon di produk berbayar. API berguna tim desain, bukan sekadar drop-in SVG statis.
Iconify sebagai Aggregator
Iconify bukan satu gaya visual, melainkan mesin yang mengekspos ratusan ribu icon dari banyak koleksi lewat API/NPM/komponen React/Vue/Svelte. Lisensi mengikuti set asal (Material, MDI, Tabler, dll.), jadi Anda wajib mematuhi lisensi masing-masing icon, bukan asumsi satu lisensi global. Kelebihan: satu API untuk eksperimen cepat. Risiko: campuran keluarga icon dapat merusak konsistensi UI bila tidak difilter.
Metode Integrasi: SVG, Sprite, NPM, dan CDN
Inline SVG memberi kontrol warna/ukuran lewat CSS dan memudahkan accessible name pada tombol, namun puluhan icon inline dapat membesarkan DOM. SVG external atau <img> sederhana dan cacheable, tetapi styling internal path terbatas. SVG sprite centralizes symbol definitions, cocok situs statis dengan icon berulang. Icon font memakai kelas seperti Font Awesome atau Bootstrap Icons, praktis untuk legacy, dengan trade-off loading webfont. NPM/component cocok SPA: import spesifik, props ukuran, integrasi TypeScript. CDN/API (Kit Font Awesome, API Iconify) mempercepat prototipe, tetapi menambah ketergantungan jaringan dan kebijakan CSP. Pilih satu metode dominan per halaman agar audit performance tetap mudah.
Dokumentasi MDN tentang SVG membantu memahami perbedaan inline versus referenced asset, terutama saat menggabungkan icon dengan animasi atau filter CSS pada landing page.
Integrasi Menurut Stack Proyek
HTML/PHP/CodeIgniter: Bootstrap Icons, Font Awesome, Boxicons, atau Remix via CDN/self-host SVG sprite. React/Next.js: Lucide, Phosphor, Heroicons, Tabler, Radix, atau Iconify dengan import spesifik. Tree-shaking membutuhkan ESM, bundler yang mendukung, dan import per icon, bukan jaminan otomatis. Vue/Nuxt/Svelte: pilih package resmi maintained, uji SSR/hydration. Electron/offline: bundel SVG/NPM lokal lebih andal daripada runtime CDN, meski Electron tidak memblokir CDN secara bawaan. React Native/Flutter: hanya klaim compat bila ada package resmi (Iconoir Flutter, Ionicons, dll.).
Untuk alur desain ke produksi WordPress, checklist lisensi aset dari Figma ke tema live relevan di artikel Figma ke tema WordPress dengan bantuan AI, termasuk icon dan font.
WordPress: Beberapa Library Icon Sekaligus
Tema, plugin page builder, dan snippet custom dapat masing-masing enqueue Font Awesome, Bootstrap Icons, atau Kit CDN. Akibatnya CSS ganda, font request berulang, dan icon duplicate. Langkah praktis: audit enqueue dengan Query Monitor atau Network tab, pilih satu library canonical, ganti inline SVG untuk icon sporadis, dan hindari plugin yang menarik Kit penuh hanya untuk beberapa glyph. Sebelum mengunggah SVG ke Media Library, sanitasi file karena SVG adalah XML yang dapat membawa script aktif bila tidak dibersihkan. Panduan company profile menyarankan icon SVG inline untuk UI ringan, selaras dengan praktik membuat website company profile.
Performance, Keamanan, dan Aksesibilitas
SVG inline dengan width, height, atau aspect-ratio membantu browser mereservasi ruang sehingga risiko layout shift dapat turun, tetapi SVG tanpa dimensi tetap bisa bergeser. Icon font dapat menampilkan kotak kosong sementara webfont loading, tergantung font-display, preload, subset, dan cache. CDN pihak ketiga menambah dependency availability dan pertimbangan CSP, bukan kerentanan otomatis. Self-host, pin versi, dan Subresource Integrity (bila applicable) mengurangi risiko supply chain.
Untuk metrik lab, tutorial Lighthouse dan artikel LCP WordPress lambat terkait CDN dan font menjelaskan hubungan font/icon dengan LCP. Pada aksesibilitas, icon dekoratif memakai aria-hidden="true", sedangkan tombol icon-only wajib punya accessible name pada elemen kontrol. Pola berikut mengikuti panduan MDN tentang aria-label.
<button type="button" aria-label="Buka keranjang">
<svg aria-hidden="true" width="24" height="24">...</svg>
</button>Konsistensi visual icon juga berkaitan dengan gaya desain situs secara keseluruhan, sebagaimana jenis-jenis gaya desain website jelaskan. Menyatukan stroke width, sudut, dan ukuran grid icon dengan komponen UI mengurangi kesan aset tempelan.
Rekomendasi Berdasarkan Use Case
React/Next.js modular: Lucide, Phosphor, Heroicons, Tabler. Dashboard padat: Radix Icons, Tabler. Logo brand: Simple Icons, theSVG, Font Awesome Brands. HTML/PHP/WordPress kelas: Bootstrap Icons, Font Awesome, Boxicons, Remix. Eksplorasi banyak set: Iconify dengan filter disiplin. Ilustrasi langka: Flaticon atau Icons8 dengan cek lisensi. Semua rekomendasi bersifat kondisional, bukan ranking absolut dari 1 sampai 20.
Keputusan akhir sebaiknya mengikuti stack, design system, dan kebutuhan lisensi sejak awal proyek web custom, karena mengganti library di tengah jalan memakan waktu refactor komponen dan enqueue WordPress. Pemilihan icon yang selaras dengan tipografi dan warna UI membantu situs terasa utuh, mirip prinsip harmoni pada CSS gradient untuk website yang memperhatikan kontras dan hierarki visual.
Checklist Sebelum Mengunci Library Icon
- Apakah kebutuhan utama UI, logo, atau ilustrasi?
- Apakah lisensi software dan trademark logo sudah dibaca?
- Apakah free tier membutuhkan atribusi atau batas komersial?
- Apakah integrasi CDN/NPM/self-host sesuai CSP dan mode offline?
- Apakah bundler/import pattern mendukung optimasi ukuran?
- Apakah WordPress hanya memuat satu library icon?
- Apakah tombol icon-only sudah punya nama aksesibel?
- Apakah SVG user-upload disanitasi?
Dengan checklist ini, daftar 20 provider di atas berfungsi sebagai referensi jangka panjang untuk memilih provider icon gratis maupun berbayar menurut proyek, bukan daftar terbaik generik tanpa konteks.
