Cara menggunakan Pencari Ikon SVG
- Ketik yang kamu butuhkan — beranda, panah kanan, keranjang belanja — lalu pilih set, atau cari di semua set.
- Klik ikon untuk membukanya. Atur ukuran, biarkan currentColor agar mengikuti warna teksmu, atau pilih warna kustom; sesuaikan garis untuk ikon outline.
- Salin sebagai SVG, JSX untuk React, data URI, mask CSS, atau tempel ke Webflow — atau unduh SVG atau PNG.
- Klik ☆ Simpan untuk menyimpan ikon yang sering kamu pakai; ikon itu akan muncul di ★ Tersimpan lain kali.
Ikon gratis yang bisa langsung kamu pakai
Setiap ikon di sini berasal dari set open-source dengan lisensi permisif, sehingga kamu bisa memakainya di website dan aplikasi pribadi maupun komersial. Lisensi dan pembuatnya ditampilkan di setiap ikon:
| Set | Lisensi | Gaya |
|---|---|---|
| Lucide | ISC | Outline, grid 24 px |
| Tabler Icons | MIT | Outline dan terisi |
| Heroicons | MIT | Outline, solid, mini |
| Phosphor | MIT | Enam ketebalan |
| Bootstrap Icons | MIT | Terisi dan outline |
| Feather, Iconoir | MIT | Outline |
| Fluent UI System Icons | MIT | Gaya Microsoft |
| Material Symbols, Material Design Icons, Carbon | Apache 2.0 | Gaya Google, Pictogrammers, dan IBM |
Lisensi MIT, ISC, dan Apache 2.0 meminta kamu menyertakan hak cipta dan catatan lisensi saat mendistribusikan ulang file ikon itu sendiri (misalnya dalam paket ikon). Memakai ikon di dalam website atau aplikasi adalah kasus sehari-hari yang memang diatur oleh lisensi tersebut.
Kenapa currentColor penting
Ikon yang fill atau stroke-nya currentColor akan mengambil nilai CSS color dari elemen induknya, jadi SVG yang sama bisa menjadi putih di tombol gelap, biru di tautan, dan abu-abu saat nonaktif — tanpa mengedit file. Gunakan currentColor untuk ikon di teks UI dan tombol; pilih warna tetap untuk ilustrasi dan favicon.
Format mana yang disalin
- SVG — tempel langsung ke HTML, Webflow Embed, atau file
.svg. - JSX — atribut siap React (
strokeWidth,className) untuk dimasukkan ke komponen. - Data URI — untuk
<img src>ataubackground-imageCSS tanpa file terpisah. - CSS mask — ikon yang mewarisi
currentColordari CSS, berguna di pseudo-element. - Salin ke Webflow — menempelkan Code Embed berisi SVG ke Webflow Designer.
Optimalkan SVG milikmu dengan SVG Optimizer atau ubah salah satunya menjadi favicon dengan Favicon Generator.
Juga dicari sebagai: ikon svg gratis, download ikon svg, ikon open source, ikon untuk website, lucide icons, heroicons, tabler icons, currentcolor svg.
Tool yang cocok dipakai bersama Pencari Ikon SVG
- Konverter SVG ke PNG — Render grafis vektor SVG menjadi gambar PNG yang tajam dengan ukuran persis yang kamu butuhkan, untuk app store, media sosial, email, atau dokumen.
- Gambar ke Base64 — Ubah PNG, JPEG, SVG, WebP atau GIF menjadi data URI Base64 dengan CSS dan HTML yang siap disalin, atau tempel string Base64 untuk melihat pratinjau dan mengunduh gambarnya.
- Generator CSS Mask — Buat gambar dan bagian halaman memudar perlahan alih-alih berakhir tegas: pudarkan satu tepi, atas dan bawah, keempat tepi, vignette radial atau spotlight, atau potong elemen menjadi garis-garis.
- Generator Barcode — Buat barcode yang bisa dipindai untuk produk, inventaris, pengiriman, dan perpustakaan.