Feather Icons後継のアイコンライブラリLucideがv1をリリース。ブランドアイコン削除、サイズ32.3%削減、Context Provider対応など全変更点を解説。Heroicons・React Iconsとの比較やv0からの移行手順も紹介します。
アイコンライブラリ「Lucide」がついにv1.0を正式リリースしました。週間ダウンロード数3,000万超、世界中の数百万プロジェクトで使われているLucideが、数年の開発期間を経てメジャーバージョンに到達です。
LucideはFeather Iconsのコミュニティフォークとして始まり、今や1,600以上のアイコンを提供する最大級のオープンソースアイコンライブラリに成長しました。v1では破壊的変更を含む大幅なアップデートが行われています。
この記事では、v1の全変更点、他ライブラリとの比較、移行方法を詳しく解説します。
Lucide v1の主な変更点
一目でわかるv1の変更一覧
| 項目 | v0 | v1 |
|---|---|---|
| ブランドアイコン | 含む | 完全削除（法的リスク対応） |
| ビルド形式 | ESM + CJS + UMD | ESM + CJS のみ（UMD削除） |
| アクセシビリティ | aria-hidden 手動設定 | aria-hidden デフォルトtrue |
| Vue パッケージ名 | lucide-vue-next | @lucide/vue |
| Context Provider | なし | React/Vue/Svelte/Solid対応 |
| フォントコードポイント | 不安定 | 固定化（将来も変わらない） |
| Shadow DOM | 非対応 | 対応 |
| lucide-reactサイズ | 11.4 MB (gzip前) | 1 MB (gzip) — 32.3%削減 |
ブランドアイコンの完全削除
v1最大の破壊的変更です。GitHub、Twitter、Facebook等のすべてのブランドアイコンが削除されました。
削除の理由
- 商標権を持つブランドロゴの使用は法的リスクを伴う
- 各企業がロゴの使用ガイドラインを厳格化する傾向
- OSSプロジェクトとして法的に持続可能な形を優先
代替手段
ブランドアイコンが必要な場合はSimple Icons（https://simpleicons.org/）が推奨されています。3,000以上のブランドロゴを提供しており、各ブランドのガイドラインに準拠しています。
# Simple Icons のインストール
npm install simple-icons
lucide-reactのサイズが32.3%削減
UMDビルドの削除により、lucide-reactのパッケージサイズが**11.4MB → 1MB（gzip）**に大幅削減されました。
週間2,500万ダウンロード以上あるパッケージでこの削減は、エコシステム全体で見ると巨大な帯域節約になります。
UMDとは？ Universal Module Definitionの略で、ブラウザの<script>タグで直接読み込める形式です。現代のフロントエンド開発ではバンドラー（Vite、webpack等）を使うのが主流なため、ESMとCJSだけで十分とされています。ただしlucideパッケージ（バニラJS用）ではUMDも引き続きサポートされています。
Context Provider対応
v1の大きな新機能です。React、Vue、Svelte、Solidで一括スタイル設定が可能になりました。
React での使用例
import { LucideProvider, Home, Settings, User } from 'lucide-react';
const App = () => (
<LucideProvider
color="red"
size={48}
strokeWidth={2}
>
{/* この中のすべてのアイコンに設定が適用される */}
<Home />
<Settings />
<User />
</LucideProvider>
);
なぜこれが重要か
今までLucideはCSSでのグローバルスタイリングを推奨していましたが、CSSだとsizeやcolorを個別アイコンで上書きしたいときに困ることがありました。Context Providerならデフォルト値を設定しつつ、個別の上書きも可能です。
アクセシビリティの改善
すべてのアイコンに**aria-hidden="true"がデフォルト**で設定されるようになりました。
なぜ重要か
アイコンの多くは装飾目的で使用されます。スクリーンリーダーがこれらを読み上げると、ユーザー体験が悪化します。v1ではデフォルトで非表示にし、必要な場合のみ明示的にラベルを付ける方式に変更されました。
{/* 装飾アイコン（デフォルトでaria-hidden="true"） */}
<Home />
{/* 意味のあるアイコン（明示的にラベルを付ける） */}
<Home aria-label="ホームに戻る" aria-hidden={false} />
他のアイコンライブラリとの比較
| 項目 | Lucide | Heroicons | React Icons | Font Awesome |
|---|---|---|---|---|
| アイコン数 | 1,600+ | 292 | 4,000+（複数セット） | 2,000+（Free） |
| 週間DL | 3,000万+ | 200万+ | 400万+ | 300万+ |
| バンドルサイズ | 小（ツリーシェイク対応） | 小 | 大（全セット読み込み） | 中 |
| スタイル | 1種（Outlined） | 3種（Outline/Solid/Mini） | 複数セット混在 | 6種 |
| メンテナンス | コミュニティ活発 | Tailwind CSS チーム | メンテナンス低下気味 | 企業（Fonticons） |
| ライセンス | ISC | MIT | 各セットによる | CC BY 4.0（Free） |
shadcn/uiを使っているなら迷わずLucide。 shadcn/uiはLucideをデフォルトのアイコンライブラリとして採用しています。また、200アイコン以上使う場合のバンドルサイズはLucideが最も軽量です。
v0からv1への移行ガイド
React
# アップグレード
npm install lucide-react@latest
主な変更点：
- ブランドアイコンのimportをSimple Iconsに移行
aria-hiddenがデフォルトtrueに（カスタムしている場合は確認）
Vue
# パッケージ名が変わったので注意
npm uninstall lucide-vue-next
npm install @lucide/vue@latest
// Before (v0)
import { Home } from 'lucide-vue-next';
// After (v1)
import { Home } from '@lucide/vue';
Svelte / Solid / Angular
各フレームワーク用の移行ガイドが公式ドキュメントに用意されています。基本的にはパッケージのアップデートとブランドアイコンの移行が主な作業です。
移行チェックリスト
LLM対応：llms.txtの提供
v1からllms.txtが提供されるようになりました。これはLLM（大規模言語モデル）がLucideの使い方を正確に理解するためのファイルです。
Claude CodeやCursorなどのAIコーディングツールを使っている開発者にとって、AIがLucideのアイコン名やAPIを正確に提案してくれるようになります。
Web制作・UI改善もお任せください
フロントエンド開発
モダンな技術で、使いやすく美しいWebサイトを実現します
※ 通常1営業日以内にご返信します
まとめ
Lucide v1は、法的持続可能性（ブランドアイコン削除）、パフォーマンス（サイズ32.3%削減）、DX（Context Provider、アクセシビリティ改善）のバランスが取れたリリースです。
週間3,000万ダウンロードという数字が示す通り、Lucideは今やフロントエンド開発のデファクトスタンダードになりつつあります。v1への移行は比較的簡単なので、早めのアップデートをおすすめします。
