필사 모드: アイコンライブラリ 2026 — Lucide / Heroicons / Phosphor / Tabler / Radix / FontAwesome 7 / Material Symbols / Iconify 徹底比較
日本語プロローグ — アイコンフォント時代の終焉、SVG・可変フォントの到来
2014年の風景を思い出してほしい。Bootstrap 3 時代の `glyphicon` はフォントファイルで、FontAwesome 4 は CSS の `::before` 擬似要素で描画されていた。アイコン一つのために `woff2` 一式をダウンロードし、色を変えるために `color: #fff` と唱えた。
2026年の風景は違う。
- **SVG が標準**だ。色・線・サイズは自由なパラメータで、`currentColor` でダークモードも一行で済む。
- **可変フォント**が新しい武器だ。Google Material Symbols は `weight 100〜700`、`fill 0〜1`、`grade -25〜+200`、`opsz 20〜48` の四軸を一つのフォントファイルに収める。
- **Iconify** は 20 万以上のアイコンを単一の API に統合する。Lucide も Phosphor も Tabler も一つのコンポーネントで呼べる。
- **Pro ライセンス**は今も健在。FontAwesome Pro・Streamline・Iconjar はデザイナーの時間を買う道具。
- **可変フォント + Tree-shaking + ESM** のおかげで、バンドルサイズは事実上気にする必要がなくなった。
この記事では、2026年のアイコンライブラリ風景を最初から最後まで比較する。コード一行を書く開発者、Figma にモジュールシステムを構築するデザイナー、そしてその間で「結局どこで何を選べばいいのか」と問うすべての人のために。
1. 2026年のアイコンマップ — 四分類
世界にはアイコンライブラリが多すぎる。だからまず分類から。
1.1 無料 OSS ライブラリ (MIT/ISC/Apache)
一般的な選択。小規模なサイドプロジェクトから商用 SaaS まで気兼ねなく使える。
- **Lucide** — Feather 正統後継、1500+ MIT、最も活発なコミュニティ
- **Heroicons** — Tailwind チーム、厳選 296 個
- **Phosphor Icons** — 5400+ × 6 weights、デザイン一貫性最高水準
- **Tabler Icons** — 4000+、MIT、急成長中
- **Iconoir** — Roman Cabrol、美的統一感
- **Radix Icons** — Radix UI とペア、15×15 単一サイズ
- **BoxIcons / Bootstrap Icons / Eva Icons / Remix Icon**
1.2 Pro / 商用ライセンス
デザイナーの手に握られる道具。ライセンスを買うことは、定期リリース、サポート、専用アイコンを買うこと。
- **FontAwesome 7 Pro** — Duotone・Sharp・Thin・Brands
- **Streamline 8** — 10 万以上のイラスト + アイコン
- **Iconjar** — Mac 専用アイコンマネージャ、独自ライブラリも販売
1.3 デザインシステム付属アイコン
企業のデザインシステムが自社アイコンセットを同梱する。色・グリッド・線の規則が一貫している。
- **Material Symbols** (Google) — Material 3
- **Carbon Icons** (IBM) — Carbon Design System
- **Octicons** (GitHub) — GitHub.com 用
- **Radix UI Themes Icons** — Radix UI v3 コンポーネントとペア
1.4 可変フォント・動的可変
CSS 一行で太さ・光学サイズ・グレードを調整する。2026年の新パラダイム。
- **Material Symbols** — 4軸可変フォント
- **Iconoir Variable** — ベータ、線可変
- **Phosphor Variable** — 6 weights を一つのフォントファイルに
2. Lucide — Feather 後継、1500+ MIT
[Feather Icons](https://feathericons.com) は 2017 年に Cole Bemis が作った 24×24 stroke アイコンセット。2px stroke のミニマルなライン様式は一時代を支配したが、2020年頃から事実上停滞。最後のメジャー更新は 2018 年だった。
**Lucide** はその停滞への答えだった。2021 年に ariperkkio・Eric Fennis らが Feather からフォークして始まり、2026 年現在 1500 以上のアイコンと 30 以上の公式パッケージを持つ最も活発な OSS アイコンライブラリになった。
2.1 Lucide を選ぶ理由
- **Feather の美学を忠実に継承** — 24×24、2px stroke、ライン様式
- **追加が速い** — 毎週新アイコン PR がマージされる
- **公式 React / Vue / Svelte / Angular / Solid パッケージ**
- **Tree-shaking 最適化** — 使ったアイコンだけがバンドルに入る
- **MIT ライセンス** — 商用利用無料
2.2 React での使い方
npm install lucide-react
export default function Toolbar() {
return (
)
}
2.3 核心の魅力 — `currentColor` + stroke
すべてのアイコンが `stroke="currentColor"` 属性を持つ。親要素の `color` を継承するので、ダークモードは一行。
2.4 Lucide Lab — 実験的セット
`lucide-lab` パッケージは、本ライブラリに入る前段階のアイコンをまとめている。正式マージ候補がここにある。
2.5 限界
- 同じ stroke 様式一種類のみ (Phosphor のような多 weight 不在)
- Feather 時代のシンプルさは美徳であり同時に制約。表現力が必要なイラスト的アイコンは不足する。
3. Heroicons — Tailwind チームの厳選 296 個
[Heroicons](https://heroicons.com) は Tailwind CSS・Tailwind UI を作った Steve Schoger・Adam Wathan チームの作品。2020 年に v1 発表、2026 年現在 v2.x。
3.1 Heroicons の哲学
- **296 個に限定。** わざと少なく。全部覚えられる量。
- **三つのバリエーション** — `outline` (24×24、1.5px stroke)、`solid` (24×24、fill)、`mini` (20×20、fill)、`micro` (16×16、fill)
- **単一の `@heroicons/react` パッケージ**
- **Tailwind UI コンポーネントと同じ視覚言語**
3.2 使用例
export default function Notification() {
return (
)
}
3.3 Heroicons を選ぶ理由
- **Tailwind との視覚一貫性** — Tailwind デザイントークンに自然に溶け込む
- **明確なバリエーション** — outline/solid/mini/micro の使用文脈が明確
- **単一デザイナーの一貫性** — 一人のデザイナーの手から出たセット
3.4 限界
- 296 個では足りない場面が多い。ドメイン特化のアイコン (コーディング・医療・自動車) はほぼ存在しない。
- 追加要望は通常却下される。「Use Iconify or Lucide」 が定型回答。
4. Phosphor Icons — 5400+ × 6 weights
[Phosphor Icons](https://phosphoricons.com) は Rafael Conde・Helena Zhang の作品。2021 年に v1 公開、2026 年現在 v2.1、5400 以上のアイコンを 6 つの太さバリエーションで提供する。
4.1 6 つの weight
| Weight | 説明 | 使用文脈 |
|---|---|---|
| Thin | 0.75px stroke | ラグジュアリー・ミニマル |
| Light | 1px stroke | モダン一般 UI |
| Regular | 1.5px stroke | デフォルト推奨 |
| Bold | 2px stroke | 強調・モバイル小サイズ |
| Fill | 単色塗り | アクティブ状態・トグル |
| Duotone | 二色塗り | イラスト的強調 |
同じアイコンが 6 つの姿で存在する — 一貫性が保証されたまま。
4.2 React で
npm install @phosphor-icons/react
export default function Gallery() {
return (
)
}
4.3 Phosphor の強み
- **5400 個以上** — カテゴリが広い (医療・ゲーム・カジノ・音楽・本など)
- **6 weight システム** — トグル onActive 表現で Fill 使用が自然
- **Duotone** — マーケティングページ・空状態イラストにマッチ
- **MIT ライセンス**
- **Figma プラグイン + Sketch ライブラリ + iOS・Flutter パッケージ**
4.4 限界
- 5400 は量だが、結局二人のデザイナーの手から出ている。新規 PR は受けるが Tabler より頻度は遅い。
- Duotone の二色システムを自社デザイントークンに合わせるのは少し手間。
5. Iconoir — Roman Cabrol の美しさ
[Iconoir](https://iconoir.com) は Luca Burgio・Sam Pollman・デザイナー Roman Cabrol の作品。2021 年開始、2026 年現在約 1600 個の 24×24 stroke アイコン。
5.1 Iconoir を選ぶ理由
- **視覚的統一感** — 一人の手から出たような一貫した stroke と曲線
- **MIT ライセンス**
- **React / Vue / React Native / Flutter / Tailwind 公式パッケージ**
- **CSS フォントパッケージ別** — `iconoir-css` 一行インポート
5.2 使用例
5.3 Iconoir vs Lucide
両方とも 24×24 stroke ライブラリだが、美感が異なる。
- **Lucide** — Feather 正統、より機械的・機能的
- **Iconoir** — より柔らかい曲線、若干イラスト的
A/B テストにはちょうどよい。デザイナーの好みで分かれる。
5.4 限界
- Lucide ほどのコミュニティモメンタムはない
- 1600 個は小さなセット
6. Tabler Icons — 4000+ 急成長中
[Tabler Icons](https://tabler.io/icons) はポーランドの codecalm チームによる 24×24 stroke セット。2020 年開始、2026 年現在 4900 以上に成長中。
6.1 Tabler を選ぶ理由
- **4900+ アイコン** — 量で圧倒
- **Outline + Filled 二バリエーション**
- **MIT ライセンス**
- **新アイコン追加速度が速い** — 隔週単位のリリース
- **React / Vue / Svelte / Solid / Astro / Web Components 公式パッケージ**
6.2 React で
npm install @tabler/icons-react
export default function Nav() {
return (
)
}
6.3 Tabler の真の価値 — ドメイン多様性
Lucide・Iconoir にないアイコンが Tabler にはある。
- 自動車・運送 (`IconCar`、`IconBus`、`IconShip`)
- 医療・ヘルス (`IconStethoscope`、`IconHeartbeat`)
- ゲーム・カジノ (`IconDice`、`IconChess`)
- 通貨・決済 (数百個)
- ブランドロゴ (数百個)
スタートアップ SaaS で「ほぼ Tabler 一つで終わる経験」が一般的。
6.4 限界
- 量が多くて一貫性が少し揺れる場合がある (特にブランドロゴ)
- React 19 の Server Component 互換性は最近やっと整理された
7. Radix Icons / Radix UI Themes Icons
[Radix](https://www.radix-ui.com) は WorkOS 傘下のデザインシステム・コンポーネントライブラリ。二系統のアイコンライブラリがある。
7.1 Radix Icons (`@radix-ui/react-icons`)
- **15×15 単一サイズ**
- **約 300 個のアイコン**
- **単一 stroke 様式**
- **MIT ライセンス**
7.2 Radix UI Themes Icons
Radix UI v3 と一緒に使う伴走アイコンセット。Themes の視覚トークン (scale、accent、gray) によく合う。
7.3 Radix を選ぶ理由
- **Radix UI コンポーネントとの視覚一貫性**が絶対の価値
- 他のライブラリ (Lucide・Heroicons) と混ぜると微細な隙間が見える
- 15×15 という小サイズに最適化 — メニュー・ツールチップ・小ボタンにフィット
7.4 限界
- 300 個ではドメインカバレッジ不足 — Tabler・Phosphor と混ぜることが多い
- 多サイズを望むなら `transform: scale()` が必要 (デザイン的に非推奨)
8. FontAwesome 7 — クラシック + Free + Pro
[FontAwesome](https://fontawesome.com) は 2012 年に始まった最古参のアイコンライブラリ。2026 年現在 v7。
8.1 FontAwesome 7 の構成
- **Free** — 約 2000 個無料
- **Pro** — 32,000 個以上、8 様式 (Classic・Sharp・Duotone・Light・Regular・Solid・Thin・Brands)
- **Sharp Duotone** v7 新規追加
- **Kit** — ユーザー別 CDN パッケージ + アナリティクス + ホスティング
8.2 React で
npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
8.3 FontAwesome を今も選ぶ理由
- **ブランド認知** — 非開発者の PM/デザイナーでも知っている
- **WordPress・Drupal・レガシー互換** — フォント方式の CSS だけインポートで終わる
- **Brands** — 1000 以上のブランドロゴ (Pro ライセンス)
- **Kit** でホスティング・アナリティクス・サブセット化を自動化
8.4 限界
- モダン React 環境では `@fortawesome/react-fontawesome` インポートパターンが不自然 (個別 import per icon)
- バンドルサイズが Lucide・Tabler より重い
- Pro ライセンスに費用 ($99/year individual、$399/year team)
9. Material Symbols — Google 可変フォント、Material Icons の後継
2022 年、Google が Material Icons を **Material Symbols** にリブランドし、4 軸可変フォントとして再リリースした。
9.1 4 軸可変フォント
- **Weight** — 100 〜 700
- **Fill** — 0 〜 1 (outline → 塗り)
- **Grade** — -25 〜 +200 (微細な太さ)
- **Optical Size** — 20 〜 48 (小サイズで stroke を太く)
一つのフォントファイルで数万通りの形が可能。
9.2 三つの様式
- **Material Symbols Outlined** — ライン基本
- **Material Symbols Rounded** — 丸い角
- **Material Symbols Sharp** — 角張った角
9.3 CSS で使う
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
}
.active .material-symbols-outlined {
font-variation-settings: 'FILL' 1, 'wght' 600;
}
9.4 React で
`react-material-symbols` パッケージか Iconify (`@iconify-icons/material-symbols`) 経由で SVG として呼ぶ。
9.5 Material Symbols を選ぶ理由
- **3000 個以上** — デザインシステム付属だけあって非常に広いカバレッジ
- **Google・Android との視覚一貫性**
- **4 軸可変フォント**でトグル onActive を fill 可変で表現可能
- **Apache 2.0**
9.6 限界
- Material 3 デザイン言語は好みが分かれる (Material You のやや柔らかい美感)
- 可変フォントの学習コスト (慣れれば強力だが)
10. BoxIcons / Bootstrap Icons / Octicons / Carbon Icons
10.1 BoxIcons
[boxicons.com](https://boxicons.com) — Atisa の作品。約 1600 個、MIT。
三つのバリエーション: Regular (outline)・Solid・Logos。ブランドロゴが強みだが、2024 年以降アップデートが遅い。
10.2 Bootstrap Icons
[icons.getbootstrap.com](https://icons.getbootstrap.com) — Bootstrap チーム公式。約 2000 個、MIT。
Bootstrap CSS とペア。Bootstrap ユーザーには自然な選択。1.5px の堅実な stroke 様式。
10.3 Octicons
[GitHub Primer](https://primer.style/octicons) — GitHub の Primer Design System 付属。約 250 個。
GitHub.com サイトと同じ視覚。PR・Issue・Branch のような GitHub ドメインアイコンが強み。GitHub クローンサイトにはほぼ必須。
10.4 Carbon Icons
[Carbon Design System](https://carbondesignsystem.com/elements/icons/library/) — IBM 公式。約 2200 個。
エンタープライズ SaaS の視覚言語。IBM Cloud・Watson のドメインアイコンが強み。視覚が重く真面目で、B2B SaaS によく合う。
10.5 比較まとめ
| ライブラリ | 数 | 強み | 弱み |
|---|---|---|---|
| BoxIcons | 1600 | ブランドロゴ | 更新が遅い |
| Bootstrap | 2000 | BS 一貫性 | 閉鎖的美感 |
| Octicons | 250 | GitHub ドメイン | 狭すぎる |
| Carbon | 2200 | エンタープライズ | 重い美感 |
11. Remix Icon / Eva Icons / Streamline — 無料 + 有料
11.1 Remix Icon
[remixicon.com](https://remixicon.com) — 中国人デザイナー Jimmy Cheung。約 3000 個、Apache 2.0。
Outline + Fill 二バリエーション。比較的太い stroke 様式。**中国語圏で最も人気の** OSS アイコン。
11.2 Eva Icons
[Akveo](https://akveoeva.netlify.app) — Akveo チーム。約 480 個、MIT。
Nebular デザインシステムとペア。Outline + Fill 二バリエーション。2020 年以降アップデートが事実上止まっているが、セット自体は完成度が高い。
11.3 Streamline
[streamlinehq.com](https://www.streamlinehq.com) — 有料、10 万以上。
- 80,000 以上のアイコン + 30,000 のイラスト + UI パターン
- 4 つの様式 (Light・Regular・Bold・Plump・Cute)
- Figma プラグイン・Sketch・iOS・Android・React パッケージ
- $109/year 〜 $599/year
デザイナーの時間を買う。マーケティングページ・空状態・オンボーディングに必要なイラストレーションに非常に強い。
12. Iconjar — Mac アイコンマネージャ
[Iconjar](https://geticonjar.com) は Mac 専用のデスクトップアプリ。アイコンライブラリを OS レベルで管理する。
12.1 何ができるか
- **アイコンライブラリ統合検索** — Lucide・Phosphor・Tabler・FontAwesome など 30+ ライブラリを一つの検索ボックスで
- **ドラッグ&ドロップ** — Figma・Sketch・VS Code・Slack どこへでも
- **タグシステム** — 自前のタグで分類
- **SVG・PNG・ICNS・PDF Export**
- **独自ライブラリ販売** — Iconjar 内蔵ライブラリ (80,000+) もある
12.2 価格
$39.99 一回払い (永久ライセンス)。追加ライブラリは別料金。
12.3 誰に向いているか
- Mac を使うフルタイムのデザイナー — 毎日アイコンを探す人
- 複数プロジェクトを同時進行 — プロジェクトごとに違うライブラリを使う人
- Windows/Linux ユーザーには代替が少ない (代替: Nucleo、Iconpacks など)
13. Iconify — 200K+ アイコン統合 API
[Iconify](https://iconify.design) は、すべてのアイコンライブラリを単一の API に統合するメタツール。2026 年現在、200 以上のアイコンセットと 250,000 以上のアイコンが登録されている。
13.1 中核アイデア
> アイコンライブラリを毎回 npm install せずに、一つのコンポーネントで全部呼ぼう。
13.2 動作の仕組み
- **オンデマンドダウンロード** — 初回使用時に CDN から SVG を取得
- **セルフホスティング可能** — `@iconify/json` パッケージでローカルビルド
- **Tree-shaking フレンドリー** — `@iconify-icons/lucide` のようなセット別パッケージで import
13.3 React + セルフホスティング
// ビルド時にバンドルに含まれる
13.4 Iconify の強み
- **一つの学習曲線ですべてのアイコン** — デザイナーが Phosphor を望み、開発者が Tabler を望んでも、同じコンポーネント
- **Tailwind プラグイン** — `@iconify/tailwind` で `bg-[mask-image]` CSS だけで使用
- **VS Code 拡張機能** — エディタ内でアイコンプレビュー
- **Figma プラグイン** — Figma で同じライブラリそのまま
13.5 限界
- 統合抽象化のためセット別最適化が不足する場合がある (特に Phosphor の weight prop は別途処理)
- 動的 import 依存 — 初回レンダリングでわずかな遅延
14. 韓国 — トスデザインシステム、カカオデザイン
14.1 トスデザインシステムアイコン
[Toss (トス)](https://toss.im) は韓国フィンテックのデザインシステム標準だ。トスのアイコンセットは公開パッケージとして配布されていないが、内部の **TDS (Toss Design System)** では一貫した太さ・角・グリッドのルールが維持されている。
特徴:
- **24×24 グリッド**
- **2px stroke デフォルト**
- **丸い角** — トスのシグネチャ
- **金融ドメインアイコン** — 送金・カード・積立など豊富
トスのデザインは公開されていないが、トスの美感を真似た韓国フィンテックサイトが非常に多い。ライセンスなしで模写することはあってはならないが、影響力は圧倒的だ。
14.2 カカオデザインシステム
[カカオデザイン](https://www.kakaocorp.com/page/service/design) も自社アイコンセットを運用している。非公開。カカオトーク・カカオマップ・カカオペイがすべて同じ視覚言語を共有する。
14.3 NAVER デザイン
NAVER も自社デザインシステム (Nuxt Design System など) を運用しているが、外部公開は限定的。LINE Design System は一部公開されている。
14.4 韓国の開発者が実務で使うとき
- **公共ドメイン (政府24、トスを模倣しない自社サイト)**: Lucide・Phosphor・Tabler が安全なデフォルト
- **フィンテック SaaS**: トスのスタイルを直接模倣せず、Heroicons solid + 自前の丸い角コンベンションを作るのが安全
- **メッセンジャー・コミュニティ**: カカオの UX を踏襲したいなら、Phosphor Bold・Fill バリエーションが最も近い美感
15. 日本 — NAVITIME ピクトグラム、JR・公共アイコン標準
15.1 JIS Z 8210 — 日本の公共ピクトグラム標準
JIS Z 8210 は日本工業規格が定める **公共ピクトグラム** だ。トイレ・出口・エレベーター・応急処置などの公共サインがこの標準に従う。2017 年、東京オリンピックに合わせて国際標準 (ISO 7001) に近づくよう更新された。
15.2 NAVITIME ピクトグラム
NAVITIME は日本を代表する地図・乗換案内アプリだ。自社ピクトグラムセットを運用し、一部は公開されている。日本の公共交通機関 (JR・メトロ・バス) のラインカラー + ピクトグラムが統合されている。
15.3 JR サイネージ
JR (Japan Railway) の駅サイネージは、日本のグラフィックデザインの正統だ。時計・乗換・出口案内がすべて一つの視覚言語で結ばれている。外部ライブラリとして提供されていないが、日本向けサイトを作るなら影響を意識する必要がある。
15.4 日本の開発者が実務で使うとき
- **公共サイト**: Material Symbols Rounded + JIS Z 8210 ピクトグラム (独自 SVG)
- **旅行・交通 SaaS**: Phosphor Regular + Duotone 組み合わせ (NAVITIME の美感に近い)
- **マンガ・ゲーム調**: Phosphor Bold・Fill + Tabler のゲームドメインアイコン
16. 誰が何を選ぶべきか — シナリオ別推奨
16.1 サイドプロジェクト・速いプロトタイプ
**選択: Lucide**
- 1500 個で十分
- Feather 正統美感
- Tree-shaking が最もきれい
16.2 デザインシステムを構築するスタートアップ
**選択: Phosphor**
- 6 weight システムがデザインシステムのトークン化にうまく合う
- トグル・アクティブ状態の表現が自然
- 5400 個でドメインカバレッジ十分
16.3 Tailwind UI・Tailwind フルスタック環境
**選択: Heroicons + Lucide サブ**
- Heroicons で視覚一貫性
- 不足ドメインは Lucide で補助
16.4 大規模 SaaS・ドメイン多様性要求
**選択: Tabler + Iconify サブ**
- 4900 でほぼ全部カバー
- 不足分は Iconify で Phosphor・Material Symbols 補助
16.5 エンタープライズ B2B SaaS
**選択: Carbon Icons + FontAwesome Pro**
- Carbon の重い美感がエンタープライズのトーン
- FontAwesome Pro Brands で連携サイトロゴ表現
16.6 Google・Android 一貫性
**選択: Material Symbols**
- Google・Android ユーザーの学習された視覚言語
- 可変フォントで表現力が圧倒的
16.7 GitHub・開発者ツールクローン
**選択: Octicons + Lucide**
- Octicons で GitHub ドメイン
- Lucide で一般 UI
16.8 デザイナーフルタイム — Mac 使用
**選択: Iconjar + Streamline**
- Iconjar ですべてのライブラリを統合管理
- Streamline でイラスト・空状態
16.9 意思決定マトリックス
| 優先順位 | 推奨ライブラリ |
|---|---|
| ミニマル・正統 | Lucide |
| デザインシステムトークン化 | Phosphor |
| Tailwind 一貫性 | Heroicons |
| ドメイン多様性 | Tabler |
| 可変フォント表現力 | Material Symbols |
| エンタープライズトーン | Carbon Icons |
| 統合 API | Iconify |
| デザイナーツール | Iconjar + Streamline |
| 商用ライセンス + ブランド | FontAwesome Pro |
| Radix UI ユーザー | Radix Icons |
17. ライセンス・商用利用・まとめ
17.1 ライセンス早見表
| ライブラリ | ライセンス | 商用利用 | 再配布 |
|---|---|---|---|
| Lucide | MIT | OK | OK |
| Heroicons | MIT | OK | OK |
| Phosphor | MIT | OK | OK |
| Iconoir | MIT | OK | OK |
| Tabler | MIT | OK | OK |
| Radix Icons | MIT | OK | OK |
| FontAwesome Free | CC BY 4.0 | OK | 出典明記 |
| FontAwesome Pro | Commercial | ライセンス購入 | 制限あり |
| Material Symbols | Apache 2.0 | OK | OK |
| BoxIcons | MIT | OK | OK |
| Bootstrap Icons | MIT | OK | OK |
| Octicons | MIT | OK | OK |
| Carbon Icons | Apache 2.0 | OK | OK |
| Remix Icon | Apache 2.0 | OK | OK |
| Eva Icons | MIT | OK | OK |
| Streamline | Commercial | ライセンス購入 | 制限あり |
| Iconjar ライブラリ | Commercial | ライセンス購入 | 制限あり |
17.2 出典明記義務
- **CC BY 4.0 (FontAwesome Free)**: フッターまたは about ページに「Icons by Font Awesome」と明記
- **MIT/Apache**: 出典明記義務なし (ただしライセンスファイルは保管)
- **Pro ライセンス**: ライセンス条件によって異なる。通常は明記不要
17.3 韓国・日本の出典表記慣習
- 韓国 SaaS: 「Icons: Lucide, Phosphor」のようなフッター表記が徐々に一般化
- 日本サイト: 公共ピクトグラムは JIS Z 8210 標準を引用
- 両国とも CC BY 4.0 は義務、MIT は礼儀
エピローグ — アイコンはデザイントークンだ
2026 年の良いアイコンライブラリはもう「きれいな絵のコレクション」ではない。
- **stroke width** がデザイントークンで
- **fill 可変** がインタラクション状態で
- **weight 6 段階** が強調システムのスケールで
- **24px vs 20px vs 15px** は情報密度の決定だ
Lucide のミニマル、Phosphor の表現力、Tabler の多様性、Material Symbols の可変フォント 4 軸、Iconify の統合 — それぞれ異なる答えを与えてくれる。
自分が作るプロダクトのアイデンティティは何で、そのアイデンティティを最もよく支えるアイコンは何か。この記事がその決定の地図になりますように。
良いアイコンはユーザーに「これは何だ」を 0.1 秒で伝える。その 0.1 秒を軽く見ないこと。
参考 / References
- Lucide: [https://lucide.dev](https://lucide.dev)
- Lucide GitHub: [https://github.com/lucide-icons/lucide](https://github.com/lucide-icons/lucide)
- Feather Icons: [https://feathericons.com](https://feathericons.com)
- Heroicons: [https://heroicons.com](https://heroicons.com)
- Heroicons GitHub: [https://github.com/tailwindlabs/heroicons](https://github.com/tailwindlabs/heroicons)
- Phosphor Icons: [https://phosphoricons.com](https://phosphoricons.com)
- Phosphor GitHub: [https://github.com/phosphor-icons](https://github.com/phosphor-icons)
- Iconoir: [https://iconoir.com](https://iconoir.com)
- Tabler Icons: [https://tabler.io/icons](https://tabler.io/icons)
- Tabler GitHub: [https://github.com/tabler/tabler-icons](https://github.com/tabler/tabler-icons)
- Radix Icons: [https://www.radix-ui.com/icons](https://www.radix-ui.com/icons)
- Radix UI: [https://www.radix-ui.com](https://www.radix-ui.com)
- FontAwesome: [https://fontawesome.com](https://fontawesome.com)
- Material Symbols: [https://fonts.google.com/icons](https://fonts.google.com/icons)
- BoxIcons: [https://boxicons.com](https://boxicons.com)
- Bootstrap Icons: [https://icons.getbootstrap.com](https://icons.getbootstrap.com)
- Octicons (Primer): [https://primer.style/octicons](https://primer.style/octicons)
- Carbon Design System Icons: [https://carbondesignsystem.com/elements/icons/library/](https://carbondesignsystem.com/elements/icons/library/)
- Remix Icon: [https://remixicon.com](https://remixicon.com)
- Eva Icons: [https://akveoeva.netlify.app](https://akveoeva.netlify.app)
- Streamline: [https://www.streamlinehq.com](https://www.streamlinehq.com)
- Iconjar: [https://geticonjar.com](https://geticonjar.com)
- Iconify: [https://iconify.design](https://iconify.design)
- Iconify React: [https://iconify.design/docs/icon-components/react/](https://iconify.design/docs/icon-components/react/)
- Iconify Tailwind plugin: [https://iconify.design/docs/usage/css/tailwind/](https://iconify.design/docs/usage/css/tailwind/)
- Toss Design: [https://toss.im](https://toss.im)
- Kakao Design: [https://www.kakaocorp.com/page/service/design](https://www.kakaocorp.com/page/service/design)
- LINE Design System: [https://designsystem.line.me](https://designsystem.line.me)
- JIS Z 8210 (Japanese pictogram standard): [https://www.jisc.go.jp](https://www.jisc.go.jp)
- Nerd Fonts: [https://www.nerdfonts.com](https://www.nerdfonts.com)
현재 단락 (1/327)
2014年の風景を思い出してほしい。Bootstrap 3 時代の `glyphicon` はフォントファイルで、FontAwesome 4 は CSS の `::before` 擬似要素で描画されて...