Pencarian Ikon Cari dan sesuaikan ikon SVG sumber terbuka dengan ukuran, warna, dan goresan yang dapat disesuaikan.

🎨

Pencarian Ikon

Cari dan sesuaikan ikon SVG sumber terbuka dengan ukuran, warna, dan goresan yang dapat disesuaikan.

Cari ikon

Ketik kata kunci untuk memfilter ikon berdasarkan nama dari beberapa kategori.

Sesuaikan tampilan

Atur warna ikon, ukuran, dan lebar garis untuk mencocokkan desain Anda.

Salin kode SVG

Klik ikon untuk menyalin kode SVG yang telah disesuaikan.

Loading tool...

What Is Pencarian Ikon?

Alat Pencarian Ikon memungkinkan Anda untuk menjelajahi, menyesuaikan, dan menyalin ikon SVG sumber terbuka. Ikon adalah elemen UI penting untuk navigasi, tindakan, indikator status, dan komunikasi visual. Alat ini mencakup ikon dari enam kategori: Panah, Tindakan, UI, Media, Komunikasi, dan File. Setiap ikon merupakan SVG berbasis goresan yang dapat disesuaikan dengan warna, ukuran, dan lebar goresan yang Anda inginkan. Cari dengan kata kunci untuk menemukan ikon yang Anda butuhkan dengan cepat. Klik ikon mana saja untuk menyalin kode SVG-nya dengan pengaturan kustom yang diterapkan. SVG yang dihasilkan bersih, dapat diakses, dan siap digunakan secara inline dalam HTML atau sebagai file SVG mandiri.

Why Use Pencarian Ikon?

Kategori ikon terorganisir: Panah, Tindakan, UI, Media, dan lain-lain
Pencarian kata kunci untuk penemuan ikon cepat
Warna, ukuran, dan lebar garis yang dapat disesuaikan
Salin kode SVG bersih dan mudah diakses dengan satu klik

Common Use Cases

Pengembangan UI

Cari dan sesuaikan ikon untuk tombol, navigasi, dan elemen antarmuka.

Prototipe Cepat

Dapatkan ikon dengan cepat untuk mockup dan prototipe tanpa mencari di web.

Konsistensi Desain

Gunakan ikon berbasis garis yang sesuai untuk desain antarmuka yang kohesif.

Dokumentasi

Tambahkan ikon visual ke dokumentasi, panduan, dan file README.

Technical Guide

Ikon SVG menggunakan elemen <svg> dengan viewBox untuk penskalaan independen dari ukuran tampilan. Ikon berbasis goresan menggunakan atribut stroke untuk warna, stroke-width untuk ketebalan garis, dan stroke-linecap/stroke-linejoin untuk ujung garis. Atribut fill="none" memastikan hanya goresan yang terlihat. Ikon SVG dapat digunakan secara inline dalam HTML untuk styling CSS langsung, sebagai sumber <img> untuk penggunaan sederhana, atau sebagai gambar latar belakang CSS melalui URI data. Untuk aksesibilitas, tambahkan atribut role="img" dan aria-label ke ikon dekoratif, atau aria-hidden="true" untuk ikon dekoratif murni dengan label teks yang terlihat. Ikon SVG menskalakan secara sempurna ke ukuran apa pun tanpa kehilangan kualitas. Untuk sistem ikon, pertimbangkan untuk menggunakan lembar sprite SVG atau komponen ikon yang merujuk pada definisi SVG. Kata kunci currentColor memungkinkan ikon untuk mewarisi warna teks elemen induk.

Tips & Best Practices

1
Gunakan ikon berbasis garis untuk gaya yang konsisten di seluruh proyek Anda
2
Atur warna garis ke currentColor untuk mewarisi warna teks secara otomatis
3
Jaga ukuran ikon tetap konsisten-24px adalah ukuran standar umum
4
Tambahkan aria-label untuk tombol ikon yang dapat diakses tanpa teks yang terlihat

Related Tools

Pembuat Tombol CSS

Desain tombol CSS kustom dengan warna, padding, border, bayangan, dan efek hover.

🎨 CSS & Design

SVG ke Latar Belakang CSS

Kodekan kode SVG sebagai latar belakang-gambar CSS menggunakan pengkodean URI data.

🎨 CSS & Design

Pembuat Variabel CSS

Buat properti kustom CSS (variabel) untuk warna, spasi, dan tipografi.

🎨 CSS & Design

Pembuat Pola SVG

Buat pola berulang berbasis SVG untuk latar belakang CSS dengan berbagai bentuk.

🎨 CSS & Design

Frequently Asked Questions

Q Apakah ikon-ikon ini gratis digunakan?

Ya, semua ikon dalam alat ini adalah open-source dan gratis untuk penggunaan pribadi dan komersial.

Q Dapatkah saya mengubah warna ikon?

Ya, atur pemilih warna untuk mengubah warna garis dari semua ikon.

Q Bagaimana cara menggunakan ikon SVG dalam proyek saya?

Tempelkan kode SVG langsung ke HTML Anda, gunakan sebagai sumber <img>, atau konversi menjadi komponen React.

Q Dapatkah saya menambahkan ikon-ikon ini ke React?

Ya, tempelkan kode SVG ke dalam komponen React atau gunakan alat pengubah SVG-to-React.

Q Bagaimana cara membuat ikon dapat diakses?

Tambahkan aria-label untuk tombol ikon mandiri, atau aria-hidden="true" ketika disertai dengan teks yang terlihat.

About This Tool

Pencarian Ikon is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.