API gratuita de ícones SVG: use e pesquise ícones por URL

Todo ícone do Iconyz tem uma URL pública estável, então você pode usá-lo em HTML, CSS, Markdown ou em uma ferramenta de design sem baixar nada. Uma pequena API JSON também permite listar coleções e pesquisar ícones a partir do seu próprio código. Não é preciso chave de API.

Obter um ícone em SVG

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

{prefix} é o ID da coleção e {name}, o nome do ícone. Os dois aparecem na página de cada ícone, por exemplo lucide:house ou mdi:github. A resposta é o próprio arquivo SVG, com Content-Type: image/svg+xml.

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

![Configurações](https://iconyz.com/api/public/svg/tabler/settings.svg)

Mudar a cor

Ícones monocromáticos são desenhados em preto ou com currentColor, que imagens não conseguem herdar. Adicione o parâmetro color para mudar a cor:

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

O valor é uma cor hexadecimal (#rgb, #rrggbb ou #rrggbbaa) com o # codificado como %23, ou então white, black ou currentColor. Ícones multicoloridos, como emojis, bandeiras e logotipos, mantêm as próprias cores e ignoram o parâmetro.

Listar coleções

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
}

Obter os detalhes de uma coleção, incluindo autor e informações completas da licença:

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

Listar e pesquisar ícones de uma coleção

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

q filtra pelo nome do ícone, page começa em 1 e limit vai até 200. Cada item traz um svgUrl pronto 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
}

Exemplo: um pequeno seletor de ícones

A API envia cabeçalhos CORS, então você pode chamá-la direto do navegador:

<input id="q" placeholder="Pesquisar ícones do 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 e uso justo

• As respostas SVG ficam em cache no navegador por um dia e na CDN por uma semana, então requisições repetidas são rápidas.
• Em aplicações em produção, empacote os ícones que você usa (copie o SVG ou o código do componente no painel do ícone) em vez de apontar para centenas de URLs externas. Assim o app não depende de nada em tempo de execução e as páginas carregam mais rápido.
• Os ícones mantêm as licenças originais quando servidos pela API. Confira a licença de cada coleção e dê crédito ao autor quando for exigido. Veja as licenças de ícones explicadas.

Procurando um ícone para testar? Pesquise em todas as coleções ou comece com Tabler Icons ou Material Design Icons.