アイコンライブラリ 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 は 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

import { Camera, Github, Settings } from 'lucide-react'

export default function Toolbar() {
  return (
    <div className="flex gap-2">
      <Camera size={20} strokeWidth={1.5} />
      <Github size={20} color="#333" />
      <Settings size={20} className="text-gray-600 hover:text-gray-900" />
    </div>
  )
}

2.3 核心の魅力 — currentColor + stroke

すべてのアイコンが stroke="currentColor" 属性を持つ。親要素の color を継承するので、ダークモードは一行。

<button className="text-gray-700 dark:text-gray-300 hover:text-blue-500">
  <Settings size={20} />
</button>

2.4 Lucide Lab — 実験的セット

lucide-lab パッケージは、本ライブラリに入る前段階のアイコンをまとめている。正式マージ候補がここにある。

2.5 限界

• 同じ stroke 様式一種類のみ (Phosphor のような多 weight 不在)
• Feather 時代のシンプルさは美徳であり同時に制約。表現力が必要なイラスト的アイコンは不足する。

3. Heroicons — Tailwind チームの厳選 296 個

Heroicons は 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 使用例

import { ChevronRightIcon } from '@heroicons/react/24/outline'
import { CheckCircleIcon } from '@heroicons/react/24/solid'
import { XMarkIcon } from '@heroicons/react/20/solid'

export default function Notification() {
  return (
    <div className="flex items-center gap-2">
      <CheckCircleIcon className="h-5 w-5 text-green-500" />
      <span>保存しました</span>
      <button>
        <XMarkIcon className="h-4 w-4 text-gray-400" />
      </button>
    </div>
  )
}

3.3 Heroicons を選ぶ理由

• Tailwind との視覚一貫性 — Tailwind デザイントークンに自然に溶け込む
• 明確なバリエーション — outline/solid/mini/micro の使用文脈が明確
• 単一デザイナーの一貫性 — 一人のデザイナーの手から出たセット

3.4 限界

• 296 個では足りない場面が多い。ドメイン特化のアイコン (コーディング・医療・自動車) はほぼ存在しない。
• 追加要望は通常却下される。「Use Iconify or Lucide」 が定型回答。

4. Phosphor Icons — 5400+ × 6 weights

Phosphor Icons は Rafael Conde・Helena Zhang の作品。2021 年に v1 公開、2026 年現在 v2.1、5400 以上のアイコンを 6 つの太さバリエーションで提供する。

4.1 6 つの weight

同じアイコンが 6 つの姿で存在する — 一貫性が保証されたまま。

4.2 React で

npm install @phosphor-icons/react

import { Heart, BookOpen, Camera } from '@phosphor-icons/react'

export default function Gallery() {
  return (
    <div>
      <Heart size={24} weight="fill" color="#ff4d4f" />
      <BookOpen size={24} weight="duotone" />
      <Camera size={24} weight="bold" />
    </div>
  )
}

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 は 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 使用例

import { Camera, Github, Settings } from 'iconoir-react'

<Camera height={24} width={24} strokeWidth={1.5} color="#333" />

5.3 Iconoir vs Lucide

両方とも 24×24 stroke ライブラリだが、美感が異なる。

• Lucide — Feather 正統、より機械的・機能的
• Iconoir — より柔らかい曲線、若干イラスト的

A/B テストにはちょうどよい。デザイナーの好みで分かれる。

5.4 限界

• Lucide ほどのコミュニティモメンタムはない
• 1600 個は小さなセット

6. Tabler Icons — 4000+ 急成長中

Tabler 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

import { IconHome, IconUser, IconSettings } from '@tabler/icons-react'

export default function Nav() {
  return (
    <nav>
      <IconHome size={20} stroke={1.5} />
      <IconUser size={20} stroke={1.5} />
      <IconSettings size={20} stroke={1.5} />
    </nav>
  )
}

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 は WorkOS 傘下のデザインシステム・コンポーネントライブラリ。二系統のアイコンライブラリがある。

7.1 Radix Icons (@radix-ui/react-icons)

• 15×15 単一サイズ
• 約 300 個のアイコン
• 単一 stroke 様式
• MIT ライセンス

import { GitHubLogoIcon, MoonIcon, SunIcon } from '@radix-ui/react-icons'

<GitHubLogoIcon />
<MoonIcon />

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 は 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

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

<FontAwesomeIcon icon={faCoffee} size="2x" color="#6f4e37" />

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 で使う

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet" />

<span className="material-symbols-outlined">home</span>

.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 として呼ぶ。

import { MaterialSymbol } from 'react-material-symbols'

<MaterialSymbol icon="home" size={24} fill grade={-25} weight={500} />

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 — Atisa の作品。約 1600 個、MIT。

三つのバリエーション: Regular (outline)・Solid・Logos。ブランドロゴが強みだが、2024 年以降アップデートが遅い。

10.2 Bootstrap Icons

icons.getbootstrap.com — Bootstrap チーム公式。約 2000 個、MIT。

Bootstrap CSS とペア。Bootstrap ユーザーには自然な選択。1.5px の堅実な stroke 様式。

10.3 Octicons

GitHub Primer — GitHub の Primer Design System 付属。約 250 個。

GitHub.com サイトと同じ視覚。PR・Issue・Branch のような GitHub ドメインアイコンが強み。GitHub クローンサイトにはほぼ必須。

10.4 Carbon Icons

Carbon Design System — IBM 公式。約 2200 個。

エンタープライズ SaaS の視覚言語。IBM Cloud・Watson のドメインアイコンが強み。視覚が重く真面目で、B2B SaaS によく合う。

10.5 比較まとめ

11. Remix Icon / Eva Icons / Streamline — 無料 + 有料

11.1 Remix Icon

remixicon.com — 中国人デザイナー Jimmy Cheung。約 3000 個、Apache 2.0。

Outline + Fill 二バリエーション。比較的太い stroke 様式。中国語圏で最も人気の OSS アイコン。

import { RiHomeLine, RiHomeFill } from '@remixicon/react'

<RiHomeLine size={20} />

11.2 Eva Icons

Akveo — Akveo チーム。約 480 個、MIT。

Nebular デザインシステムとペア。Outline + Fill 二バリエーション。2020 年以降アップデートが事実上止まっているが、セット自体は完成度が高い。

11.3 Streamline

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 は 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 は、すべてのアイコンライブラリを単一の API に統合するメタツール。2026 年現在、200 以上のアイコンセットと 250,000 以上のアイコンが登録されている。

13.1 中核アイデア

アイコンライブラリを毎回 npm install せずに、一つのコンポーネントで全部呼ぼう。

import { Icon } from '@iconify/react'

<Icon icon="lucide:home" />
<Icon icon="phosphor:heart-fill" />
<Icon icon="material-symbols:settings" />
<Icon icon="tabler:user-circle" />
<Icon icon="fa6-solid:coffee" />

13.2 動作の仕組み

• オンデマンドダウンロード — 初回使用時に CDN から SVG を取得
• セルフホスティング可能 — @iconify/json パッケージでローカルビルド
• Tree-shaking フレンドリー — @iconify-icons/lucide のようなセット別パッケージで import

13.3 React + セルフホスティング

// ビルド時にバンドルに含まれる
import { Icon } from '@iconify/react'
import homeIcon from '@iconify-icons/lucide/home'
import heartIcon from '@iconify-icons/phosphor/heart-fill'

<Icon icon={homeIcon} />
<Icon icon={heartIcon} color="#ff4d4f" />

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 (トス) は韓国フィンテックのデザインシステム標準だ。トスのアイコンセットは公開パッケージとして配布されていないが、内部の TDS (Toss Design System) では一貫した太さ・角・グリッドのルールが維持されている。

特徴:

• 24×24 グリッド
• 2px stroke デフォルト
• 丸い角 — トスのシグネチャ
• 金融ドメインアイコン — 送金・カード・積立など豊富

トスのデザインは公開されていないが、トスの美感を真似た韓国フィンテックサイトが非常に多い。ライセンスなしで模写することはあってはならないが、影響力は圧倒的だ。

14.2 カカオデザインシステム

カカオデザイン も自社アイコンセットを運用している。非公開。カカオトーク・カカオマップ・カカオペイがすべて同じ視覚言語を共有する。

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 意思決定マトリックス

17. ライセンス・商用利用・まとめ

17.1 ライセンス早見表

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
• Lucide GitHub: https://github.com/lucide-icons/lucide
• Feather Icons: https://feathericons.com
• Heroicons: https://heroicons.com
• Heroicons GitHub: https://github.com/tailwindlabs/heroicons
• Phosphor Icons: https://phosphoricons.com
• Phosphor GitHub: https://github.com/phosphor-icons
• Iconoir: https://iconoir.com
• Tabler Icons: https://tabler.io/icons
• Tabler GitHub: https://github.com/tabler/tabler-icons
• Radix Icons: https://www.radix-ui.com/icons
• Radix UI: https://www.radix-ui.com
• FontAwesome: https://fontawesome.com
• Material Symbols: https://fonts.google.com/icons
• BoxIcons: https://boxicons.com
• Bootstrap Icons: https://icons.getbootstrap.com
• Octicons (Primer): https://primer.style/octicons
• Carbon Design System Icons: https://carbondesignsystem.com/elements/icons/library/
• Remix Icon: https://remixicon.com
• Eva Icons: https://akveoeva.netlify.app
• Streamline: https://www.streamlinehq.com
• Iconjar: https://geticonjar.com
• Iconify: https://iconify.design
• Iconify React: https://iconify.design/docs/icon-components/react/
• Iconify Tailwind plugin: https://iconify.design/docs/usage/css/tailwind/
• Toss Design: https://toss.im
• Kakao Design: https://www.kakaocorp.com/page/service/design
• LINE Design System: https://designsystem.line.me
• JIS Z 8210 (Japanese pictogram standard): https://www.jisc.go.jp
• Nerd Fonts: https://www.nerdfonts.com