icon-design

アイコンデザイン

用途に適したアイコンを選びます。コンセプトをアイコンに対応付け、テンプレートを提供し、よくある間違いを防ぎます。

クイックリファレンス（主要な20のコンセプト）

コンセプト	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,400 個以上のアイコン、優れた React 連携）

詳しい比較については、references/library-comparison.md を参照してください。

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

サイズ

コンテキスト	Tailwind クラス	ピクセル
テキストとインライン	w-4 h-4 または w-5 h-5	16-20px
フィーチャーカード	w-8 h-8	32px
ヒーローセクション	w-10 h-10 または w-12 h-12	40-48px
大きな装飾要素	w-16 h-16	64px

一貫性のルール

1. スタイルを混在させない - セクション内では、すべてアウトライン、またはすべて塗りつぶしを使用します
2. 絵文字を使わない - 適切なアイコンコンポーネント（ツリーシェイキング可能）を使用します
3. currentColor を使用する - stroke="currentColor" により、アイコンはテキストの色を継承します
4. セマンティックな色を使う - text-blue-500 ではなく text-primary を使用します

ツリーシェイキング（重要）

動的なアイコン選択はツリーシェイキングを妨げます。明示的なマップを使用してください。

// BAD - all icons bundled
import * as Icons from 'lucide-react'
const Icon = Icons[iconName]  // Tree-shaken away!

// GOOD - explicit map
import { Home, Users, Settings, type LucideIcon } from 'lucide-react'
const ICON_MAP: Record<string, LucideIcon> = { Home, Users, Settings }
const Icon = ICON_MAP[iconName]

選択手順

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

判断フローチャート

どのアイコンを使うか迷った場合：

Is it about recognition/awards? → Trophy, Star, Award
Is it about money/price? → Tag, DollarSign, CreditCard
Is it about location? → MapPin, Globe, Map
Is it about people/team? → Users, UserGroup, User
Is it about communication? → MessageCircle, Phone, Mail
Is it about safety/trust? → Shield, Lock, ShieldCheck
Is it about speed/time? → Zap, Clock, Timer
Is it trade-specific? → Check semantic-mapping.md
Still unsure? → CheckCircle (generic positive) or Sparkles (generic feature)

リソース

• references/semantic-mapping.md - カテゴリ別のコンセプト→アイコン対応表
• references/icon-templates.md - Tailwind を使った React／HTML パターン
• references/library-comparison.md - Lucide、Heroicons、Phosphor の比較
• references/migration-guide.md - FA／Material から最新の代替アイコンへの移行
• rules/icon-design.md - プロジェクト向けの修正ルール