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][1]) |
| **Heroicons**       | Tailwind 系／`24 px`・`solid/outline` | MIT           | `<link href="https://cdn.jsdelivr.net/npm/heroicons-css@1.2/heroicons.min.css" rel="stylesheet">` ([jsDelivr][2])                   |
| **Remix Icon**      | 中立的デザイン・4 重み                       | Apache-2.0    | `<link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.min.css" rel="stylesheet">` ([cdnjs][3])              |
| **Feather Icons**   | 極細線・最小限                            | MIT           | `<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.2/feather.min.js"></script>` ([cdnjs][4])                   |
| **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][5])            |
| **Phosphor Icons**  | 重み5段階＋アニメ対応                        | MIT           | `<script src="https://cdn.jsdelivr.net/npm/phosphor-icons@1.4.2"></script>` ([jsDelivr][6])                                         |
| **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][7])       |
| **Lucide**          | Feather 派生・1,500+・ISC              | ISC           | `<script src="https://unpkg.com/lucide@latest"></script>` ([Lucide][8])                                                             |
| **Iconoir**         | 約 1,600 の線画アイコン                    | MIT           | `<link href="https://unpkg.com/iconoir@7.11.0/css/iconoir.css" rel="stylesheet">` ([Iconoir][9])                                    |
| **Eva Icons**       | 4 種アニメ＋塗り／線                        | MIT           | `<script src="https://cdn.jsdelivr.net/npm/eva-icons@1.1.3/eva.min.js"></script>` ([jsDelivr][10])                                  |
| **Octicons**        | GitHub 公式セット                       | MIT           | `<link href="https://cdn.jsdelivr.net/npm/octicons@8.5.0/build/build.css" rel="stylesheet">` ([jsDelivr][11])                       |

[1]: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/?utm_source=chatgpt.com "Bootstrap Icons v1.3.0"
[2]: https://www.jsdelivr.com/package/npm/heroicons?utm_source=chatgpt.com "heroicons - A CDN for npm and GitHub - jsDelivr"
[3]: https://cdnjs.com/libraries/remixicon?utm_source=chatgpt.com "remixicon - Libraries - cdnjs - The #1 free and open source CDN ..."
[4]: https://cdnjs.com/libraries/feather-icons?utm_source=chatgpt.com "feather-icons - Libraries - cdnjs - The #1 free and open source CDN ..."
[5]: https://cdnjs.com/libraries/boxicons/2.1.0?utm_source=chatgpt.com "boxicons - Libraries - cdnjs - The #1 free and open source CDN built ..."
[6]: https://www.jsdelivr.com/package/npm/phosphor-icons?utm_source=chatgpt.com "phosphor-icons CDN by jsDelivr - A CDN for npm and GitHub"
[7]: https://cdnjs.com/libraries/tabler-icons?utm_source=chatgpt.com "tabler-icons - Libraries - cdnjs - The #1 free and open source CDN ..."
[8]: https://lucide.dev/guide/packages/lucide?utm_source=chatgpt.com "Lucide Icons"
[9]: https://iconoir.com/docs/packages/css?utm_source=chatgpt.com "CSS - Iconoir | Free Icons"
[10]: https://www.jsdelivr.com/package/npm/eva-icons?utm_source=chatgpt.com "eva-icons CDN by jsDelivr - A CDN for npm and GitHub"
[11]: https://www.jsdelivr.com/package/npm/octicons?utm_source=chatgpt.com "octicons CDN by jsDelivr - A CDN for npm and GitHub"



# 選び方のヒント
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) しておくと将来の破壊的変更を避けられます。必要最小限のアイコンだけを自前ビルドで絞り込む手もあるので、プロダクトのパフォーマンス要件に合わせて取捨選択してください。