Бесплатный API SVG-иконок: подключение и поиск иконок по URL

У каждой иконки на Iconyz есть постоянный публичный URL, поэтому её можно использовать в HTML, CSS, Markdown или в инструменте для дизайна, ничего не скачивая. Небольшой JSON API также позволяет получать список наборов и искать иконки из вашего кода. Ключ API не нужен.

Получить иконку в SVG

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

{prefix} — идентификатор набора, {name} — название иконки. Оба указаны на странице каждой иконки, например lucide:house или mdi:github. В ответ приходит сам SVG-файл с Content-Type: image/svg+xml.

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

![Настройки](https://iconyz.com/api/public/svg/tabler/settings.svg)

Изменить цвет

Одноцветные иконки нарисованы чёрным или через currentColor, который изображения унаследовать не могут. Чтобы перекрасить иконку, добавьте параметр color:

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

Значение — шестнадцатеричный цвет (#rgb, #rrggbb или #rrggbbaa), где # закодирован как %23, либо white, black или currentColor. Многоцветные иконки — эмодзи, флаги и логотипы — сохраняют свои цвета и игнорируют этот параметр.

Список наборов

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 https://iconyz.com/api/public/sets/{prefix}

Список и поиск иконок в наборе

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

q фильтрует по названию иконки, page начинается с 1, limit — до 200. У каждого элемента есть готовый 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
}

Пример: небольшой выбор иконок

API отправляет CORS-заголовки, поэтому его можно вызывать прямо из браузера:

<input id="q" placeholder="Поиск иконок 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>

Кеширование и честное использование

• Браузеры кешируют SVG-ответы на сутки, а CDN — на неделю, поэтому повторные запросы выполняются быстро.
• В рабочих приложениях включайте используемые иконки в сборку (копируйте SVG или код компонента из панели иконки), а не ссылайтесь на сотни внешних URL. Тогда приложение не зависит от внешних сервисов во время работы, а страницы грузятся быстрее.
• Иконки, отдаваемые через API, сохраняют исходные лицензии. Проверяйте лицензию каждого набора и указывайте автора, если это требуется. См. разбор лицензий иконок.

Ищете иконку для пробы? Ищите по всем наборам или начните с Tabler Icons или Material Design Icons.