API d'icônes SVG gratuite : intégrer et rechercher des icônes par URL

Chaque icône de Iconyz a une URL publique stable : vous pouvez l'utiliser en HTML, en CSS, en Markdown ou dans un outil de design sans rien télécharger. Une petite API JSON permet aussi de lister les collections et de chercher leurs icônes depuis votre propre code. Aucune clé d'API n'est nécessaire.

Obtenir une icône en SVG

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

{prefix} est l'identifiant de la collection et {name} le nom de l'icône. Les deux figurent sur la page de chaque icône, par exemple lucide:house ou mdi:github. La réponse est le fichier SVG brut, avec Content-Type: image/svg+xml.

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

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

Changer la couleur

Les icônes monochromes sont dessinées en noir ou avec currentColor, que les images ne peuvent pas hériter. Ajoutez le paramètre color pour les recolorer :

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

La valeur est une couleur hexadécimale (#rgb, #rrggbb ou #rrggbbaa) dont le # est encodé en %23, ou bien white, black ou currentColor. Les icônes multicolores, comme les emojis, drapeaux et logos, gardent leurs couleurs et ignorent ce paramètre.

Lister les collections

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
}

Obtenir le détail d'une collection, auteur et licence complète compris :

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

Lister et chercher les icônes d'une collection

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

q filtre par nom d'icône, page commence à 1 et limit va jusqu'à 200. Chaque élément contient un svgUrl prêt à l'emploi :

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

Exemple : un petit sélecteur d'icônes

L'API envoie des en-têtes CORS, vous pouvez donc l'appeler directement depuis le navigateur :

<input id="q" placeholder="Rechercher des icônes 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>

Cache et usage raisonnable

• Les réponses SVG sont mises en cache un jour par les navigateurs et une semaine par le CDN : les requêtes répétées sont rapides.
• En production, intégrez les icônes que vous utilisez à votre bundle (copiez le SVG ou le code du composant depuis le panneau de l'icône) plutôt que de lier des centaines d'URL. Votre application ne dépend alors de rien à l'exécution et vos pages se chargent plus vite.
• Les icônes servies par l'API conservent leur licence d'origine. Vérifiez la licence de chaque collection et créditez l'auteur quand c'est requis. Voir les licences d'icônes expliquées.

Vous cherchez une icône pour essayer ? Cherchez dans toutes les collections ou commencez par Tabler Icons ou Material Design Icons.