Skip to content

필사 모드: アイコンライブラリ 2026 — Lucide / Heroicons / Phosphor / Tabler / Radix / FontAwesome 7 / Material Symbols / Iconify 徹底比較

日本語
0%
정확도 0%
💡 왼쪽 원문을 읽으면서 오른쪽에 따라 써보세요. Tab 키로 힌트를 받을 수 있습니다.
원문 렌더가 준비되기 전까지 텍스트 가이드로 표시합니다.

プロローグ — アイコンフォント時代の終焉、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` 擬似要素で描画されて...

작성 글자: 0원문 글자: 15,851작성 단락: 0/327