👏
UIデザイン、CDNで使えるアイコン集
| ライブラリ | スタイルの傾向 | 主なライセンス | CDN 利用例（最新版は各サイトで確認） |
|---|---|---|---|
| Bootstrap Icons | 2 ,000+／塗り・アウトライン両対応 | MIT |
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet"> (Bootstrap Blog) |
| Heroicons | Tailwind 系／24 px・solid/outline
|
MIT |
<link href="https://cdn.jsdelivr.net/npm/heroicons-css@1.2/heroicons.min.css" rel="stylesheet"> (jsDelivr) |
| Remix Icon | 中立的デザイン・4 重み | Apache-2.0 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.min.css" rel="stylesheet"> (cdnjs) |
| Feather Icons | 極細線・最小限 | MIT |
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.2/feather.min.js"></script> (cdnjs) |
| Boxicons | Solid／Regular／Logos の3系統 | MIT/OFL/CC-BY |
<link href="https://cdnjs.cloudflare.com/ajax/libs/boxicons/2.1.0/css/boxicons.min.css" rel="stylesheet"> (cdnjs) |
| Phosphor Icons | 重み5段階＋アニメ対応 | MIT |
<script src="https://cdn.jsdelivr.net/npm/phosphor-icons@1.4.2"></script> (jsDelivr) |
| Tabler Icons | 2 px ストローク／500+ | MIT |
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/3.28.1/tabler-icons.min.css" rel="stylesheet"> (cdnjs) |
| Lucide | Feather 派生・1,500+・ISC | ISC |
<script src="https://unpkg.com/lucide@latest"></script> (Lucide) |
| Iconoir | 約 1,600 の線画アイコン | MIT |
<link href="https://unpkg.com/iconoir@7.11.0/css/iconoir.css" rel="stylesheet"> (Iconoir) |
| Eva Icons | 4 種アニメ＋塗り／線 | MIT |
<script src="https://cdn.jsdelivr.net/npm/eva-icons@1.1.3/eva.min.js"></script> (jsDelivr) |
| Octicons | GitHub 公式セット | MIT |
<link href="https://cdn.jsdelivr.net/npm/octicons@8.5.0/build/build.css" rel="stylesheet"> (jsDelivr) |
選び方のヒント
UI のトーン
きわめてシンプル → Feather / Lucide
細めの線で情報量多め → Tabler / Iconoir
アプリ寄り・重み可変 → Phosphor / Remix
ビルド無しで SVG を差し替えたい → Feather・Lucide・Phosphor は JS1 行で feather.replace() のように自動置換。
ロゴ類も欲しい → Boxicons (Logos)、Bootstrap Icons (brand 系) が豊富。
Tailwind と親和性 → Heroicons (公式), Lucide (同じクラス文化)。
CDN ならバージョンを固定 (@1.11.3) しておくと将来の破壊的変更を避けられます。必要最小限のアイコンだけを自前ビルドで絞り込む手もあるので、プロダクトのパフォーマンス要件に合わせて取捨選択してください。
Discussion