Ücretsiz SVG ikon API'si: ikonları URL ile kullanın ve arayın

Iconyz üzerindeki her ikonun kalıcı, herkese açık bir adresi vardır; böylece hiçbir şey indirmeden HTML, CSS, Markdown veya bir tasarım aracında kullanabilirsiniz. Küçük bir JSON API'si de kendi kodunuzdan ikon setlerini listelemenizi ve ikonlarında arama yapmanızı sağlar. API anahtarı gerekmez.

Bir ikonu SVG olarak almak

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

{prefix} ikon setinin kimliği, {name} ise ikonun adıdır. İkisi de her ikon sayfasında gösterilir, örneğin lucide:house veya mdi:github. Yanıt, Content-Type: image/svg+xml ile SVG dosyasının kendisidir.

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

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

Rengi değiştirmek

Tek renkli ikonlar siyah veya currentColor ile çizilir; görseller bu rengi devralamaz. Yeniden renklendirmek için color parametresini ekleyin:

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

Değer, # karakteri %23 olarak kodlanmış onaltılık bir renktir (#rgb, #rrggbb veya #rrggbbaa) ya da white, black veya currentColor değerlerinden biridir. Emoji, bayrak ve logo gibi çok renkli ikonlar kendi renklerini korur ve bu parametreyi yok sayar.

İkon setlerini listelemek

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
}

Yazar ve tam lisans bilgileri dahil tek bir setin ayrıntılarını almak için:

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

Bir setteki ikonları listelemek ve aramak

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

q ikon adına göre filtreler, page 1'den başlar ve limit en fazla 200 olabilir. Her öğe kullanıma hazır bir svgUrl içerir:

{
  "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
}

Örnek: küçük bir ikon seçici

API CORS başlıkları gönderdiği için onu doğrudan tarayıcıdan çağırabilirsiniz:

<input id="q" placeholder="Lucide ikonlarında ara…">
<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>

Önbellek ve adil kullanım

• SVG yanıtları tarayıcılarda bir gün, CDN'de bir hafta önbellekte tutulur; bu yüzden tekrarlanan istekler hızlıdır.
• Canlıdaki uygulamalarda yüzlerce adrese doğrudan bağlanmak yerine kullandığınız ikonları paketinize dahil edin (ikon panelinden SVG veya bileşen kodunu kopyalayın). Böylece uygulamanız çalışırken dış bir hizmete bağımlı olmaz ve sayfalar daha hızlı yüklenir.
• API üzerinden sunulan ikonlar orijinal lisanslarını korur. Her setin lisansını kontrol edin ve gerektiğinde yazara atıf yapın. İkon lisansları açıklamasına bakın.

Denemek için bir ikon mu arıyorsunuz? Tüm setlerde arayın ya da Tabler Icons veya Material Design Icons ile başlayın.