「このアイコン、どこから来てるんだろう?」
Reactのコードを読んでいると、<Trash2 />や<Pencil />といったコンポーネントが出てきて、最初は何のことかわかりませんでした。
調べてみると Lucide React というライブラリで、使い方を覚えたら思ったよりずっとシンプルでした。私なりに整理したので、同じように「なんとなく使っていた」方の参考になれば嬉しいです。
Lucide Reactとは
Lucide Reactは、SVGアイコンをReactコンポーネントとして提供するオープンソースのライブラリです。
特徴を整理するとこんな感じです。
- 1000以上のアイコンが収録されている
- シンプルで一貫したデザイン(線が細くて洗練された見た目)
- サイズや色をpropsで直感的に変えられる
- TailwindのclassNameにも対応している
アイコンを画像ファイルとして管理する必要がなく、コンポーネントとして扱えるのが大きな利点です。
基本的な使い方
まずインポートから始めます。使いたいアイコンを名前付きインポートするだけです。
import { Trash2, Heart, Star, User } from 'lucide-react';
sizeでピクセルサイズを指定する
<Trash2 size={14} />
デフォルトは24pxです。数値を渡すだけでサイズが変わります。小さいUIにはsize={14}やsize={16}がよく使われます。
colorで色を指定する
<Trash2 size={20} color="red" />
CSSの色指定がそのまま使えます。"red"のような色名でも、"#ef4444"のような16進数でも動きます。
strokeWidthで線の太さを変える
<Trash2 size={24} strokeWidth={1.5} />
デフォルトは2です。1.5にすると線が細くなり、よりすっきりした印象になります。UIのトーンに合わせて調整するのがポイントです。
classNameでTailwindを使う
<Trash2 className="text-red-500 w-4 h-4" />
Tailwindのユーティリティクラスも使えます。text-{color}でアイコンの色を指定でき、w-とh-でサイズも制御できます。Tailwindで統一したい場合はこちらが便利です。
Trash2について
Trash2はゴミ箱アイコン(蓋付き)で、削除ボタンのUIによく使われます。
Lucide Reactには似た名前のアイコンが2種類あります。
| アイコン | 見た目 |
|---|---|
Trash | シンプルなゴミ箱 |
Trash2 | 蓋付きゴミ箱 |
実際のコードでは削除ボタンのアイコンとしてTrash2が使われることが多いです。蓋付きのデザインの方が「削除」のイメージが直感的に伝わりやすいからだと思います。
よく使われる主なアイコン
フォームやリストUIで頻出するアイコンをまとめておきます。
| コンポーネント | 見た目・用途 |
|---|---|
Trash2 | ゴミ箱(削除) |
Pencil | ペン(編集) |
Plus | +(追加) |
Check | チェックマーク(確認・完了) |
X | ✕(閉じる・キャンセル) |
ChevronDown | ▼(アコーディオン展開) |
この6つを覚えておくだけで、よくあるCRUDのUIは大体まかなえます。
実際の使用例:削除ボタン
削除ボタンとしての典型的な実装例です。
import { Trash2 } from 'lucide-react';
<button
onClick={() => handleDelete(item.id)}
className="rounded p-1 text-zinc-400 hover:text-red-500 transition-colors"
>
<Trash2 size={14} />
</button>
ここでのポイントは2つです。
1つ目はアイコンサイズを小さめにすること。削除ボタンはあくまでサブアクションなので、size={14}で控えめに配置するのがバランスよく見えます。
2つ目はホバー時に色を変えること。hover:text-red-500でマウスを乗せたときだけ赤くすることで、「危険な操作」であることを自然に伝えられます。普段はtext-zinc-400(グレー)で目立たせすぎないのもポイントです。
まとめ
Lucide Reactは、4つのpropsを覚えるだけで使いこなせます。
size:ピクセル数でサイズ指定(デフォルト24)color:色名や16進数で色指定strokeWidth:線の太さ(デフォルト2)className:TailwindなどCSSクラスで指定
最初は「なんとなくコピペしていたアイコン」でも、propsの意味を知ると「ここはもう少し小さくしよう」「ホバーで色を変えよう」という判断が自然にできるようになります。ぜひ実際のUIで試してみてください。