無料の SVG アイコン API：URL でアイコンを読み込み・検索する
更新日 · 5 分で読めます
Iconyz のアイコンにはすべて固定の公開 URL があるので、何もダウンロードせずに HTML、CSS、Markdown、デザインツールで使えます。小さな JSON API も用意しており、自分のコードからアイコンセットの一覧を取得したり、アイコンを検索したりできます。API キーは不要です。
アイコンを SVG で取得する
GET https://iconyz.com/api/public/svg/{prefix}/{name}.svg{prefix} はアイコンセットの ID、{name} はアイコンの名前です。どちらも各アイコンのページに、lucide:house や mdi:github のように表示されています。レスポンスは Content-Type: image/svg+xml の SVG ファイルそのものです。
<img src="https://iconyz.com/api/public/svg/mdi/github.svg" width="32" height="32" alt="GitHub">
色を変える
単色アイコンは黒または currentColor で描かれていますが、画像は currentColor を継承できません。色を変えるには color パラメーターを付けます。
https://iconyz.com/api/public/svg/lucide/heart.svg?color=%23e11d48値は 16 進数のカラーコード（#rgb、#rrggbb、#rrggbbaa）で、# は %23 に URL エンコードします。white、black、currentColor も指定できます。絵文字、国旗、ロゴなどのマルチカラーアイコンは元の色を保ち、このパラメーターを無視します。
アイコンセットの一覧
GET https://iconyz.com/api/public/sets?limit=20&sort=icons| パラメーター | 説明 |
|---|---|
q | セット名と、名前が一致するアイコンを含むセットを検索 |
category | カテゴリで絞り込み（例: Logos、UI 24px） |
sort | icons（アイコン数の多い順）、alpha、recent |
limit、skip | ページング: 1 回のリクエストで最大 500 件、既定は 12 件 |
{
"items": [
{
"prefix": "fluent",
"name": "Fluent UI System Icons",
"total": 19850,
"category": "UI 24px",
"license": "MIT",
"palette": false,
"sampleIcons": ["…"]
}
],
"total": 238, "limit": 20, "skip": 0
}作者やライセンスの詳細を含む、1 つのセットの情報を取得するには：
GET https://iconyz.com/api/public/sets/{prefix}セット内のアイコンの一覧と検索
GET https://iconyz.com/api/public/sets/lucide/icons?q=arrow&page=1&limit=100q はアイコン名で絞り込み、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 のレスポンスはブラウザに 1 日、CDN に 1 週間キャッシュされるので、同じリクエストは高速に返ります。
- 本番のアプリでは、何百もの URL を直接参照するのではなく、使うアイコンをバンドルしてください（アイコンパネルから SVG やコンポーネントのコードをコピーします）。実行時に外部へ依存しなくなり、ページの表示も速くなります。
- API 経由で配信されるアイコンにも、元のライセンスがそのまま適用されます。各セットのライセンスを確認し、必要な場合は作者のクレジットを表記してください。アイコンのライセンス解説もご覧ください。
試しに使うアイコンをお探しなら、すべてのセットを検索するか、Tabler Icons や Material Design Icons から始めてみてください。