Free SVG icon API: link and search icons by URL

Every icon on Iconyz has a stable public URL, so you can use it in HTML, CSS, Markdown or a design tool without downloading anything. A small JSON API also lets you list icon sets and search their icons from your own code. No API key is required.

Get an icon as SVG

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

{prefix} is the icon set's ID and {name} the icon's name. Both are shown on every icon page, for example lucide:house or mdi:github. The response is the raw SVG file with Content-Type: image/svg+xml.

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

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

Change the color

Monotone icons are drawn in black or currentColor, which images can't inherit. Add a color parameter to recolor them:

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

The value is a hex color (#rgb, #rrggbb or #rrggbbaa) with the # URL-encoded as %23, or one of white, black or currentColor. Multicolor icons, such as emoji, flags and logos, keep their own colors and ignore the parameter.

List icon sets

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
}

Get one set's details, including author and full license information:

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

List and search icons in a set

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

q filters by icon name, page starts at 1 and limit goes up to 200. Each item includes a ready-to-use svgUrl:

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

Example: a tiny icon picker

The API sends CORS headers, so you can call it directly from the browser:

<input id="q" placeholder="Search Lucide icons…">
<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 and fair use

• SVG responses are cached by browsers for a day and by the CDN for a week, so repeated requests are fast.
• For production apps, bundle the icons you use (copy the SVG or component code from the icon panel) rather than hot-linking hundreds of URLs. Your app then has no runtime dependency, and pages load faster.
• Icons keep their original licenses when served through the API. Check each set's license, and credit the author where required. See icon licenses explained.

Looking for an icon to try? Search all sets, or start with Tabler Icons or Material Design Icons.