API gratuita de iconos SVG: enlaza y busca iconos por URL

Cada icono de Iconyz tiene una URL pública estable, así que puedes usarlo en HTML, CSS, Markdown o una herramienta de diseño sin descargar nada. Una pequeña API JSON también te permite listar colecciones y buscar sus iconos desde tu propio código. No hace falta clave de API.

Obtener un icono en SVG

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

{prefix} es el ID de la colección y {name}, el nombre del icono. Ambos aparecen en la página de cada icono, por ejemplo lucide:house o mdi:github. La respuesta es el archivo SVG tal cual, con Content-Type: image/svg+xml.

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

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

Cambiar el color

Los iconos monocromos se dibujan en negro o con currentColor, que las imágenes no pueden heredar. Añade el parámetro color para recolorearlos:

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

El valor es un color hexadecimal (#rgb, #rrggbb o #rrggbbaa) con el # codificado como %23, o bien white, black o currentColor. Los iconos multicolor, como emojis, banderas y logotipos, conservan sus colores e ignoran el parámetro.

Listar colecciones

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
}

Obtener los detalles de una colección, incluidos el autor y la información completa de la licencia:

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

Listar y buscar iconos de una colección

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

q filtra por nombre de icono, page empieza en 1 y limit llega hasta 200. Cada elemento incluye un svgUrl listo para usar:

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

Ejemplo: un pequeño selector de iconos

La API envía cabeceras CORS, así que puedes llamarla directamente desde el navegador:

<input id="q" placeholder="Buscar iconos de 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>

Caché y uso responsable

• Los navegadores guardan las respuestas SVG en caché durante un día y la CDN durante una semana, así que las peticiones repetidas son rápidas.
• En aplicaciones en producción, empaqueta los iconos que usas (copia el SVG o el código del componente desde el panel del icono) en lugar de enlazar cientos de URLs externas. Así tu app no depende de nada en tiempo de ejecución y las páginas cargan más rápido.
• Los iconos conservan sus licencias originales cuando se sirven a través de la API. Revisa la licencia de cada colección y cita al autor cuando sea obligatorio. Consulta las licencias de iconos explicadas.

¿Buscas un icono para probar? Busca en todas las colecciones o empieza con Tabler Icons o Material Design Icons.