icon-design

アイコンデザイン

用途に合ったアイコンを選びましょう。3 つの最新ライブラリのアイコンにコンセプトを対応付け、すぐに使えるテンプレートを用意し、ツリーシェイキングの失敗やスタイルの不統一といったよくあるミスを防ぎます。

クイックリファレンス

コンセプト	Lucide	Heroicons	Phosphor
受賞／品質	Trophy	trophy	Trophy
価格／価値	Tag	tag	Tag
場所	MapPin	map-pin	MapPin
専門知識	GraduationCap	academic-cap	GraduationCap
サポート	MessageCircle	chat-bubble-left-right	ChatCircle
セキュリティ	Shield	shield-check	Shield
速度	Zap	bolt	Lightning
電話	Phone	phone	Phone
メール	Mail	envelope	Envelope
ユーザー／プロフィール	User	user	User
チーム	Users	user-group	Users
設定	Settings	cog-6-tooth	Gear
ホーム	Home	home	House
検索	Search	magnifying-glass	MagnifyingGlass
チェック／成功	Check	check	Check
閉じる／キャンセル	X	x-mark	X
メニュー	Menu	bars-3	List
カレンダー	Calendar	calendar	Calendar
時計／時間	Clock	clock	Clock
ハート／お気に入り	Heart	heart	Heart

ライブラリの選択

ライブラリ	最適な用途	パッケージ
Lucide	一般用途、React プロジェクト	lucide-react
Heroicons	Tailwind プロジェクト、ミニマルなスタイル	@heroicons/react
Phosphor	太さのバリエーションが必要な場合	@phosphor-icons/react

デフォルトの推奨は Lucide です（1,600 以上のアイコン、優れた React 連携、lucide-react/dynamic による動的読み込み）。

選択手順

1. コンセプトを特定する -- ラベル／タイトルは何を伝えていますか？
2. 意味上の対応を確認する -- references/semantic-mapping.md を参照してください
3. ライブラリを選ぶ -- Lucide（デフォルト）、Heroicons（Tailwind）、Phosphor（太さ）
4. テンプレートを適用する -- references/icon-templates.md を参照してください
5. 一貫性を確認する -- 各セクション内でスタイルとサイズを統一してください

アイコンのスタイルルール

ルール	詳細
スタイルを混在させない	1 つのセクションではアウトラインかソリッドのどちらかに統一します
絵文字を使わない	適切なアイコンコンポーネントを使います（ツリーシェイキング可能）
currentColor を使う	アイコンは stroke="currentColor" を介してテキストの色を継承します
セマンティックカラー	text-blue-500 ではなく text-primary を使います
サイズを統一する	インラインは w-4 h-4、カードは w-8 h-8、ヒーローは w-10 h-10
ツリーシェイキングに対応	明示的な名前付きインポートとアイコンマップを使い、import * は使いません
アクセシビリティ	装飾用アイコンには aria-hidden="true" を、ボタンには aria-label を追加します

よくある間違い

間違い	正しいパターン
import * as Icons ですべてのアイコンをインポートし、ツリーシェイキングを妨げる	名前付きインポートを明示的に使用し、静的なアイコンマップを作成する
同じセクション内でアウトラインとソリッドのアイコンスタイルを混在させる	セクションごとにスタイルを1つ選び、一貫して適用する
適切なアイコンコンポーネントの代わりに絵文字を使用する	Lucide、Heroicons、Phosphor のツリーシェイキング可能なアイコンコンポーネントを必ず使用する
アイコンに text-blue-500 のような色をハードコードする	text-primary のようなセマンティックカラーを使用し、アイコンにテーマの変更を反映させる
セマンティックな意味ではなく見た目の良さでアイコンを選ぶ	まずセマンティックマッピングのリファレンスで概念を対応付けてから、アイコンを選ぶ
アイコンのみのボタンに aria-label がない	アイコンのみを含むボタンに aria-label="Description" を追加する
サイズプレフィックスなしで古い Heroicons のインポートパスを使用する	サイズプレフィックスを付けて @heroicons/react/24/outline を使用する

委任

• 既存のアイコン使用状況を監査し、一貫性とツリーシェイキングの問題を確認する：Explore エージェントを使用してインポートを調査し、スタイルの混在やワイルドカードインポートを特定します
• Font Awesome または Material から最新のライブラリへアイコンを移行する：移行ガイドのリファレンスとともに Task エージェントを使用します
• デザインシステムのアイコンシステムのアーキテクチャを計画する：Plan エージェントを使用して、ライブラリを選び、サイズの規則を定め、セマンティックマッピングを確立します

リファレンス

• semantic-mapping.md -- カテゴリ別の概念とアイコンの対応表（品質、価格、場所、業種別、ナビゲーション、ステータス）
• icon-templates.md -- Tailwind を使った React/HTML のパターン（機能カード、ボタン、入力欄、ナビゲーション、ステータスバッジ）
• library-comparison.md -- Lucide、Heroicons、Phosphor の比較（機能、バンドルサイズ、インポートパターン）
• migration-guide.md -- Font Awesome、Material Icons、Feather、絵文字から最新の代替手段への移行
• accessibility.md -- 装飾用アイコンと意味のあるアイコン、aria 属性、スクリーンリーダーのパターン