API ikon SVG gratis: tautkan dan cari ikon lewat URL

Setiap ikon di Iconyz punya URL publik yang tetap, jadi Anda bisa memakainya di HTML, CSS, Markdown, atau alat desain tanpa mengunduh apa pun. API JSON kecil juga memungkinkan Anda menampilkan daftar set ikon dan mencari ikonnya dari kode Anda sendiri. Tidak perlu API key.

Mengambil ikon sebagai SVG

GET https://iconyz.com/api/public/svg/{prefix}/{name}.svg

{prefix} adalah ID set ikon dan {name} adalah nama ikon. Keduanya tampil di setiap halaman ikon, misalnya lucide:house atau mdi:github. Responsnya adalah file SVG itu sendiri dengan Content-Type: image/svg+xml.

<img src="https://iconyz.com/api/public/svg/mdi/github.svg" width="32" height="32" alt="GitHub">

![Pengaturan](https://iconyz.com/api/public/svg/tabler/settings.svg)

Mengubah warna

Ikon satu warna digambar dengan warna hitam atau currentColor, yang tidak bisa diwarisi oleh gambar. Tambahkan parameter color untuk mengubah warnanya:

https://iconyz.com/api/public/svg/lucide/heart.svg?color=%23e11d48

Nilainya adalah warna heksadesimal (#rgb, #rrggbb, atau #rrggbbaa) dengan # di-encode menjadi %23, atau salah satu dari white, black, atau currentColor. Ikon multiwarna seperti emoji, bendera, dan logo tetap memakai warnanya sendiri dan mengabaikan parameter ini.

Daftar set ikon

GET https://iconyz.com/api/public/sets?limit=20&sort=icons

{
  "items": [
    {
      "prefix": "fluent",
      "name": "Fluent UI System Icons",
      "total": 19850,
      "category": "UI 24px",
      "license": "MIT",
      "palette": false,
      "sampleIcons": ["…"]
    }
  ],
  "total": 238, "limit": 20, "skip": 0
}

Mengambil detail satu set, termasuk pembuat dan informasi lisensi lengkap:

GET https://iconyz.com/api/public/sets/{prefix}

Daftar dan pencarian ikon dalam satu set

GET https://iconyz.com/api/public/sets/lucide/icons?q=arrow&page=1&limit=100

q memfilter berdasarkan nama ikon, page dimulai dari 1, dan limit maksimal 200. Setiap item berisi svgUrl yang siap dipakai:

{
  "items": [
    { "id": "lucide:arrow-left", "prefix": "lucide", "name": "arrow-left",
      "svgUrl": "/api/public/svg/lucide/arrow-left.svg", "width": 24, "height": 24 }
  ],
  "total": 94, "page": 1, "limit": 100, "hasMore": false
}

Contoh: pemilih ikon sederhana

API mengirim header CORS, jadi Anda bisa memanggilnya langsung dari browser:

<input id="q" placeholder="Cari ikon Lucide…">
<div id="results"></div>
<script>
  const base = "https://iconyz.com";
  const results = document.getElementById("results");
  document.getElementById("q").addEventListener("input", async (e) => {
    const q = encodeURIComponent(e.target.value.trim());
    const res = await fetch(`${base}/api/public/sets/lucide/icons?q=${q}&limit=48`);
    const { items } = await res.json();
    results.innerHTML = items
      .map((i) => `<img src="${base}${i.svgUrl}" width="24" height="24" alt="${i.name}" title="${i.name}">`)
      .join("");
  });
</script>

Caching dan penggunaan wajar

• Respons SVG disimpan di cache browser selama sehari dan di CDN selama seminggu, jadi request berulang terasa cepat.
• Untuk aplikasi produksi, masukkan ikon yang Anda pakai ke dalam bundle (salin kode SVG atau komponen dari panel ikon) alih-alih menautkan ratusan URL. Dengan begitu aplikasi tidak bergantung pada layanan luar saat berjalan, dan halaman dimuat lebih cepat.
• Ikon yang disajikan lewat API tetap memakai lisensi aslinya. Periksa lisensi setiap set dan cantumkan kredit untuk pembuatnya bila diwajibkan. Lihat penjelasan lisensi ikon.

Mencari ikon untuk dicoba? Cari di semua set, atau mulai dengan Tabler Icons atau Material Design Icons.