Lucideとは？React・Vueでも使えるSVGアイコン集

ページ内ナビ

概要

Lucideは、統一した見た目のSVGアイコンを1600種類以上提供するオープンソースのアイコン集です。素のJavaScriptに加え、React、Vue、Svelte、Solid、Preact、React Native、Angular、Astroなどの公式パッケージがあり、利用環境に合わせて導入できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-09-30

主な特徴

複数のフレームワークで同じアイコン体系を使う

公式リポジトリはJavaScript、React、Vue、Svelte、Solid、Preact、React Native、Angular、Astro、静的SVG向けのパッケージを提供しています。デザイン資産を揃えながら、各フレームワークに合う使い方を選べます。

出典：[2]

Reactでは必要なアイコンだけをコンポーネントとして読み込む

lucide-reactはES Modulesとして提供され、個別に読み込んだアイコンだけをバンドル対象にできます。size、color、strokeWidthなどのpropsと標準SVG属性で見た目を調整できます。

出典：[3]

向いている用途

Web・モバイルのUIアイコンを共通化したい開発に向く

ナビゲーション、操作ボタン、状態表示などで、一貫した線幅と形状のアイコンを使いたいアプリに向きます。Figmaプラグインも案内されており、デザインと実装で同じアイコン体系を共有できます。

出典：[2]

導入前の確認

ブランドロゴの用途には使わない

プロジェクトは法的制約、デザインの一貫性、保守上の理由からブランドロゴを受け付けない方針を明記しています。企業やサービスの公式ロゴが必要な場合は別の資産を確認してください。

出典：[2]

再配布時はFeather由来アイコンのライセンス表記も確認する

Lucide本体はISC Licenseですが、LICENSEにはFeather由来として列挙されたアイコンにMIT Licenseが適用される旨も記載されています。再配布条件を確認する際は、トップレベルのライセンス表記だけでなくLICENSE本文も確認してください。

出典：[4]

参考にした公式資料

[1]lucide-icons/lucide repository(2026-09-30)
[2]Lucide README(2026-09-30)
[3]Lucide React getting started(2026-09-30)
[4]Lucide license(2026-09-30)

編集部からの補足

複数フレームワークで同じアイコン体系を共有できる点が強みです。ブランドロゴは対象外で、LICENSEにはFeather由来アイコンのMIT表記もあるため、再配布時は全文を確認してください。

3ステップで試す

1
React向けパッケージを追加
公式Reactガイドの手順でlucide-reactを既存のReactプロジェクトへ追加します。
npm install lucide-react
2
使うアイコンだけを読み込む
必要なアイコンを名前付きexportから個別に読み込みます。未使用アイコンはtree shakingの対象になります。
import { Camera } from 'lucide-react';
3
SVGの見た目を調整して表示
size、color、strokeWidthなどのpropsと標準SVG属性を使ってUIへ組み込みます。
<Camera size={48} color="currentColor" strokeWidth={2} />

公式READMEで確認

成長

成長の推移 · 直近30日

24,795 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 118
Open PR: 197

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

svgs
icons
feather-icons
figma
ui-design
ui-components
react
vue
svg
svg-icons

Stars: 24,795
Forks: 1,606
Watchers: 60
Open Issues: 276
Contributors: 385
所有者種別: Organization
主要言語: TypeScript
ライセンス: ISC
リポジトリ最終更新: 2026/09/29

概要

特徴と向いている用途

主な特徴

複数のフレームワークで同じアイコン体系を使う

Reactでは必要なアイコンだけをコンポーネントとして読み込む

向いている用途

Web・モバイルのUIアイコンを共通化したい開発に向く

導入前の確認

ブランドロゴの用途には使わない

再配布時はFeather由来アイコンのライセンス表記も確認する

参考にした公式資料

3ステップで試す

React向けパッケージを追加

使うアイコンだけを読み込む

SVGの見た目を調整して表示

成長

開発アクティビティ

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHub Topics

関連情報

あわせて探訪