未分類

【保存版】Lucide Reactのアイコンを使いこなす〜削除・編集・追加ボタンの実装まで〜

「このアイコン、どこから来てるんだろう?」

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で試してみてください。