Reactにアイコンを追加する方法：lucide-react、react-icons、インラインSVG、スプライトの比較、実測したバンドルサイズ、currentColor でのサイズと色の指定、アクセシビリティ、Next.js での設定。
lucide-react や react-icons などのアイコンパッケージをインストールし、各アイコンを名前でインポートします。たとえば import { Camera } from "lucide-react" のように書きます。名前付きインポートは ツリーシェイキング されるため、使ったアイコンだけがバンドルに含まれます。サイズは プロパティ か 1em で指定し、色はcurrentColorで付け、装飾用のアイコンは aria-hidden で隠しましょう。
すぐに選ぶなら
このガイドでは、Reactのコードにアイコンを組み込む方法を扱います。どの無料アイコンセットを選ぶか、そのライセンスについては、おすすめの無料アイコンライブラリ一覧をご覧ください。ここでのサイズの数値は、使用したツールと設定を明記したうえで、私たち自身がビルドして計測したものです。
私たちのテストでは、名前付きインポート1つならどちらも小さく、前者のアイコン1つで 圧縮後874バイト、後者のアイコン1つで約1.3 KBでした。後者には小さな共通ラッパーが加わるためです。どちらも、アイコンを1つ増やすごとに数百バイトしか増えません。
ほとんどのReactアイコンコンポーネントは現在の文字色で描画されるため、アイコンまたは親要素にCSSの color を設定します。たとえば文字色のクラスを使います。lucide-react と react-icons は color プロパティ も受け付けます。
アイコンだけが意味を伝えている場合に限り必要です。その場合は role="img" と aria-label を付けるか、アイコンを含むボタンにラベルを付けます。表示されたテキストの横にあるアイコンは aria-hidden="true" で隠しましょう。
はい。lucide-react と react-icons のどちらのコンポーネントも状態を持たないSVGなので、サーバーで描画されます。"use client" が必要なのは、状態やイベントハンドラーを使うコンポーネントだけです。
同じアイコンが何度も表示される場合や、Reactではないページで使う場合です。各 <use> は、HTML内で完全なパスデータを繰り返す代わりに、キャッシュされた1つのファイルを短く参照するだけです。
Reactアプリにアイコンを入れる4つの方法
各アイコンは名前付きエクスポートです。size、color、strokeWidth は プロパティ で、それ以外のプロパティ は SVG要素に渡されます。
ファミリー専用のパス（fa、md、lu、fi など）からインポートします。IconContext.Provider で、その内側のすべてのアイコンのデフォルト値を設定できます。
パスデータを一度貼り付ければ、ほかのコンポーネントと同じように再利用できます。width と height を 1em にすると、文字サイズに追従します。
アイコン1つをインポートしたコードを esbuild の本番モードでバンドルし、結果を圧縮しました。どちらのパッケージも名前付きインポートなら小さいままですが、名前空間インポートではセット全体が読み込まれます。React 本体は含めていません。
アイコンのインポートで増えるサイズの実測値（縮小後に gzip -9 で圧縮、React は含まない）
各アイコンを <symbol> として一度定義し、<use> でどこにでも描画します。パスの色が親要素の文字色を参照しているので、ラッパーの色を変えると両方のアイコンが追従します。
シンボルを /icons.svg として配信し、各アイコンでその中の id を指定します。ブラウザーはファイルを一度だけダウンロードしてキャッシュします。外部スプライトは同じオリジンに置く必要があります。
currentColor を使うアイコンは親要素の文字色を引き継ぐため、ホバーやダークモードのスタイルにアイコン専用のCSSは不要です。色の値を変えると、両方のアイコンが追従するのを確認できます。
表示されたテキストの横にあるアイコンは装飾なので隠します。ボタンの唯一の中身がアイコンである場合は、ボタンに名前が必要です。
このページで紹介している2つのアイコンパッケージのコンポーネントは、どちらも状態を持たない単純なSVGなので、Server Components で問題なく描画されます。"use client" が必要なのは、クリックを処理するコンポーネントだけです。
Next.js は、lucide-react や react-icons を含むよく使われるアイコンパッケージのリストについて、すでにインポートを最適化しています。それ以外のアイコンパッケージを使う場合はここに追加すると、開発ビルドを高速に保てます。
まずセットを選びたい場合はこちら：
おすすめの無料アイコンライブラリ
無料で始める · クレジットカード不要