lucide-icons

Lucide Icons

Lucide はフレームワークごとのパッケージを提供します。各アイコンは個別にインポート可能なコンポーネントまたは要素で、インライン SVG を描画します。すべてのパッケージは完全にツリーシェイク可能です。

アイコンの命名規則

• パッケージのエクスポート名は PascalCase です：Camera、ArrowRight、CircleAlert
• CSS／HTML のデータ属性とアイコンフォントのクラス名は kebab-case です：data-lucide="circle-alert"、icon-circle-alert
• アイコン名は lucide.dev/icons で確認できます

共通プロパティ

すべてのフレームワーク用パッケージで、以下の基本プロパティを共通して使用できます。

prop	type	default
size	number	24
color	string	currentColor
strokeWidth	number	2
absoluteStrokeWidth	boolean	false

すべてのパッケージは、任意の SVG プレゼンテーション属性もプロパティとして受け付けます（例：fill、stroke-linejoin）。

ベストプラクティス

• 常にツリーシェイクしてください：使用するアイコンだけをインポートします。本番用バンドルでは * as icons をインポートしないでください。
• アイコンを直接インポートする（例：from 'lucide-react/icons/camera'）と、パッケージのバレルを介さないため、ビルドのパフォーマンスが向上します。
• 名前で動的に指定する：アイコン名が動的なデータ（CMS など）から取得される場合に限り、DynamicIcon（React）または汎用ラッパーを使用します。
• アクセシビリティ：アイコンはデフォルトで aria-hidden="true" になります。アイコンが意味を伝える場合は aria-label を追加してください。

フレームワーク別のリファレンスファイル

使用するフレームワークに対応するリファレンスファイルを参照してください。

Framework / Environment	Package	Reference file
React	lucide-react	references/lucide-react.md
Vue 3	lucide-vue-next	references/lucide-vue-next.md
Svelte 5 (or 4)	@lucide/svelte	references/lucide-svelte.md
SolidJS	lucide-solid	references/lucide-solid.md
Preact	lucide-preact	references/lucide-preact.md
Angular	lucide-angular	references/lucide-angular.md
Astro	@lucide/astro	references/lucide-astro.md
React Native	lucide-react-native	references/lucide-react-native.md
Vanilla JS / HTML	lucide	references/lucide.md
Static / No-framework / Node.js	lucide-static	references/lucide-static.md

Lucide Lab（カスタム／非公式アイコン）

Lucide lab は、メインライブラリには含まれていない追加のアイコンを提供します。すべてのパッケージで、Icon コンポーネントを使って Lab のアイコンを利用できます。

// React example — same pattern works across React, Preact, Solid, Astro, Svelte, Vue
import { Icon } from 'lucide-react';
import { coconut } from '@lucide/lab';

<Icon iconNode={coconut} color="red" size={32} />