LabHub

ブログ

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

2026-05-16 · 26 分で読めます · #icons#icon-library#lucide#heroicons#iconoir#phosphor-icons#tabler-icons#radix-icons#fontawesome#material-symbols#boxicons#bootstrap-icons#octicons#carbon-icons#remix-icon#eva-icons#streamline#iconjar#iconify#deep-dive#japanese

한국어English日本語

プロローグ — アイコンフォント時代の終焉、SVG・可変フォントの到来

2014年の風景を思い出してほしい。Bootstrap 3 時代の glyphicon はフォントファイルで、FontAwesome 4 は CSS の ::before 擬似要素で描画されていた。アイコン一つのために woff2 一式をダウンロードし、色を変えるために color: #fff と唱えた。

2026年の風景は違う。

この記事では、2026年のアイコンライブラリ風景を最初から最後まで比較する。コード一行を書く開発者、Figma にモジュールシステムを構築するデザイナー、そしてその間で「結局どこで何を選べばいいのか」と問うすべての人のために。

1. 2026年のアイコンマップ — 四分類

世界にはアイコンライブラリが多すぎる。だからまず分類から。

1.1 無料 OSS ライブラリ (MIT/ISC/Apache)

一般的な選択。小規模なサイドプロジェクトから商用 SaaS まで気兼ねなく使える。

1.2 Pro / 商用ライセンス

デザイナーの手に握られる道具。ライセンスを買うことは、定期リリース、サポート、専用アイコンを買うこと。

1.3 デザインシステム付属アイコン

企業のデザインシステムが自社アイコンセットを同梱する。色・グリッド・線の規則が一貫している。

1.4 可変フォント・動的可変

CSS 一行で太さ・光学サイズ・グレードを調整する。2026年の新パラダイム。

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 を選ぶ理由

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 限界

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

Heroicons は Tailwind CSS・Tailwind UI を作った Steve Schoger・Adam Wathan チームの作品。2020 年に v1 発表、2026 年現在 v2.x。

3.1 Heroicons の哲学

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 を選ぶ理由

3.4 限界

4. Phosphor Icons — 5400+ × 6 weights

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

4.1 6 つの weight

Weight説明使用文脈
Thin0.75px strokeラグジュアリー・ミニマル
Light1px strokeモダン一般 UI
Regular1.5px strokeデフォルト推奨
Bold2px stroke強調・モバイル小サイズ
Fill単色塗りアクティブ状態・トグル
Duotone二色塗りイラスト的強調

同じアイコンが 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 の強み

4.4 限界

5. Iconoir — Roman Cabrol の美しさ

Iconoir は Luca Burgio・Sam Pollman・デザイナー Roman Cabrol の作品。2021 年開始、2026 年現在約 1600 個の 24×24 stroke アイコン。

5.1 Iconoir を選ぶ理由

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 ライブラリだが、美感が異なる。

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

5.4 限界

6. Tabler Icons — 4000+ 急成長中

Tabler Icons はポーランドの codecalm チームによる 24×24 stroke セット。2020 年開始、2026 年現在 4900 以上に成長中。

6.1 Tabler を選ぶ理由

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 にはある。

スタートアップ SaaS で「ほぼ Tabler 一つで終わる経験」が一般的。

6.4 限界

7. Radix Icons / Radix UI Themes Icons

Radix は WorkOS 傘下のデザインシステム・コンポーネントライブラリ。二系統のアイコンライブラリがある。

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

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 を選ぶ理由

7.4 限界

8. FontAwesome 7 — クラシック + Free + Pro

FontAwesome は 2012 年に始まった最古参のアイコンライブラリ。2026 年現在 v7。

8.1 FontAwesome 7 の構成

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 を今も選ぶ理由

8.4 限界

9. Material Symbols — Google 可変フォント、Material Icons の後継

2022 年、Google が Material Icons を Material Symbols にリブランドし、4 軸可変フォントとして再リリースした。

9.1 4 軸可変フォント

一つのフォントファイルで数万通りの形が可能。

9.2 三つの様式

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 を選ぶ理由

9.6 限界

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 比較まとめ

ライブラリ数強み弱み
BoxIcons1600ブランドロゴ更新が遅い
Bootstrap2000BS 一貫性閉鎖的美感
Octicons250GitHub ドメイン狭すぎる
Carbon2200エンタープライズ重い美感

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 万以上。

デザイナーの時間を買う。マーケティングページ・空状態・オンボーディングに必要なイラストレーションに非常に強い。

12. Iconjar — Mac アイコンマネージャ

Iconjar は Mac 専用のデスクトップアプリ。アイコンライブラリを OS レベルで管理する。

12.1 何ができるか

12.2 価格

$39.99 一回払い (永久ライセンス)。追加ライブラリは別料金。

12.3 誰に向いているか

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 動作の仕組み

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 の強み

13.5 限界

14. 韓国 — トスデザインシステム、カカオデザイン

14.1 トスデザインシステムアイコン

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

特徴:

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

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

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

14.3 NAVER デザイン

NAVER も自社デザインシステム (Nuxt Design System など) を運用しているが、外部公開は限定的。LINE Design System は一部公開されている。

14.4 韓国の開発者が実務で使うとき

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 日本の開発者が実務で使うとき

16. 誰が何を選ぶべきか — シナリオ別推奨

16.1 サイドプロジェクト・速いプロトタイプ

選択: Lucide

16.2 デザインシステムを構築するスタートアップ

選択: Phosphor

16.3 Tailwind UI・Tailwind フルスタック環境

選択: Heroicons + Lucide サブ

16.4 大規模 SaaS・ドメイン多様性要求

選択: Tabler + Iconify サブ

16.5 エンタープライズ B2B SaaS

選択: Carbon Icons + FontAwesome Pro

16.6 Google・Android 一貫性

選択: Material Symbols

16.7 GitHub・開発者ツールクローン

選択: Octicons + Lucide

16.8 デザイナーフルタイム — Mac 使用

選択: Iconjar + Streamline

16.9 意思決定マトリックス

優先順位推奨ライブラリ
ミニマル・正統Lucide
デザインシステムトークン化Phosphor
Tailwind 一貫性Heroicons
ドメイン多様性Tabler
可変フォント表現力Material Symbols
エンタープライズトーンCarbon Icons
統合 APIIconify
デザイナーツールIconjar + Streamline
商用ライセンス + ブランドFontAwesome Pro
Radix UI ユーザーRadix Icons

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

17.1 ライセンス早見表

ライブラリライセンス商用利用再配布
LucideMITOKOK
HeroiconsMITOKOK
PhosphorMITOKOK
IconoirMITOKOK
TablerMITOKOK
Radix IconsMITOKOK
FontAwesome FreeCC BY 4.0OK出典明記
FontAwesome ProCommercialライセンス購入制限あり
Material SymbolsApache 2.0OKOK
BoxIconsMITOKOK
Bootstrap IconsMITOKOK
OcticonsMITOKOK
Carbon IconsApache 2.0OKOK
Remix IconApache 2.0OKOK
Eva IconsMITOKOK
StreamlineCommercialライセンス購入制限あり
Iconjar ライブラリCommercialライセンス購入制限あり

17.2 出典明記義務

17.3 韓国・日本の出典表記慣習

エピローグ — アイコンはデザイントークンだ

2026 年の良いアイコンライブラリはもう「きれいな絵のコレクション」ではない。

Lucide のミニマル、Phosphor の表現力、Tabler の多様性、Material Symbols の可変フォント 4 軸、Iconify の統合 — それぞれ異なる答えを与えてくれる。

自分が作るプロダクトのアイデンティティは何で、そのアイデンティティを最もよく支えるアイコンは何か。この記事がその決定の地図になりますように。

良いアイコンはユーザーに「これは何だ」を 0.1 秒で伝える。その 0.1 秒を軽く見ないこと。

参考 / References

コメント

まだコメントはありません。

ログインするとコメントできます