Reactアイコンライブラリ比較：react-feather、react-fontawesome、react-icons、react-svg

Reactアプリでアイコンを使うとき、どのパッケージを選ぶべきか迷うことはよくあります。それぞれのアプローチは大きく異なり、バンドルサイズ、柔軟性、メンテナンス性に直接影響します。この記事では、4つの主要な選択肢を実際のコードとともに深く比較し、プロジェクトの要件に応じた最適な判断をサポートします。

📦 パッケージの基本的な役割と設計思想

まず、各パッケージが何を解決しようとしているかを理解しましょう。

react-feather は、Feather Iconsという軽量で一貫性のあるアイコンセットをReactコンポーネントとして提供します。すべてのアイコンが個別のReactコンポーネントとしてエクスポートされており、Tree Shakingによって未使用のアイコンはバンドルに含まれません。

react-fontawesome は、Font Awesomeの公式Reactラッパーです。Font Awesomeは非常に広範なアイコンライブラリであり、Free版とPro版の両方に対応しています。このパッケージは、アイコンをフォントとして扱う従来の方法ではなく、SVGベースのコンポーネントとして提供することで、スタイルやアクセシビリティを改善しています。

react-icons は、複数の人気アイコンセット（Feather、FontAwesome、Material Design Icons、Lucideなど）を1つのパッケージで統合的に利用できるメタライブラリです。必要なアイコンだけをインポートでき、Tree Shakingにも対応しています。

react-svg は、外部SVGファイルをReactコンポーネントとして動的に読み込むためのユーティリティです。アイコンそのものを提供するのではなく、「任意のSVGをReactで扱う仕組み」を提供します。これは、カスタムSVGアセットやデザインシステム固有のアイコンを利用する場合に便利です。

🔧 アイコンの使い方：インポートとレンダリング

react-feather

各アイコンは個別のコンポーネントとして提供されます。必要なものだけをインポートすれば、バンドルサイズを最小限に抑えられます。

import { Camera, Heart } from 'react-feather';

function App() {
  return (
    <div>
      <Camera size={24} color="blue" />
      <Heart fill="red" stroke="none" />
    </div>
  );
}

react-fontawesome

まず、使用するアイコンをライブラリに追加する必要があります（Tree Shakingのため）。その後、FontAwesomeIconコンポーネントでレンダリングします。

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee, faUser } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

library.add(faCoffee, faUser);

function App() {
  return (
    <div>
      <FontAwesomeIcon icon="coffee" size="2x" color="brown" />
      <FontAwesomeIcon icon="user" style={{ color: 'gray' }} />
    </div>
  );
}

react-icons

アイコンセットごとにサブディレクトリがあり、そこから直接インポートします。Tree Shakingが効くため、使わないアイコンはバンドルされません。

import { FaCoffee } from 'react-icons/fa';
import { FiCamera } from 'react-icons/fi';

function App() {
  return (
    <div>
      <FaCoffee size={32} color="saddlebrown" />
      <FiCamera size="1.5em" />
    </div>
  );
}

react-svg

SVGファイルのパスを指定して、非同期で読み込みます。ローディング状態やエラー処理も考慮する必要があります。

import ReactSVG from 'react-svg';

function App() {
  return (
    <div>
      <ReactSVG
        src="/icons/camera.svg"
        wrapper="span"
        className="icon"
        afterInjection={(error, svg) => {
          if (error) console.error(error);
        }}
      />
    </div>
  );
}

📦 バンドルサイズとパフォーマンスへの影響

react-feather と react-icons は、ES Modulesによる個別インポートを前提として設計されており、WebpackやViteなどのモダンなバンドラと組み合わせると、未使用のアイコンは完全にバンドルから除外されます。特に小規模なアプリや、少数のアイコンしか使わないケースでは非常に効率的です。

react-fontawesome も同様にTree Shakingに対応していますが、アイコンをlibrary.add()で明示的に登録する手順が必要です。この手順を忘れると、全アイコンがバンドルに含まれる可能性があります（ただし、最近のバージョンでは直接インポート方式も推奨されています）。

react-svg は、SVGファイルを外部リソースとして扱うため、初期バンドルサイズにはほとんど影響しません。しかし、ランタイムでネットワークリクエストが発生するため、レイアウトシフトやローディング遅延のリスクがあります。また、キャッシュ戦略を自分で考える必要があります。

🎨 スタイルとカスタマイズ性

react-feather のアイコンは、size、color、strokeWidthなどのプロパティで簡単に調整できます。CSSで上書きすることも可能です。

react-fontawesome は、size、color、spin、flipなど豊富なプロパティを提供しており、アニメーションや回転といった高度な操作も簡単に行えます。

react-icons の各アイコンは、共通のインターフェース（size, color, classNameなど）を持ち、スタイルの一貫性を保ちつつ柔軟にカスタマイズできます。

react-svg は、読み込まれたSVG要素に対して直接CSSを適用できるため、最も自由度が高いです。ただし、SVG内のfillやstroke属性がインラインで定義されている場合、CSSで上書きするには!importantやcurrentColorの活用が必要になることがあります。

🛠️ 開発体験（DX）と保守性

• react-feather: シンプルで直感的。アイコン名がコンポーネント名になるため、IDEのオートコンプリートが効きやすい。
• react-fontawesome: 設定ステップが多いが、公式ドキュメントが充実しており、Proアイコンとの連携もスムーズ。
• react-icons: 複数のアイコンセットを横断して使えるため、チーム内で「どのアイコンセットを使うか」の議論を避けたい場合に最適。新しいアイコンを探すのも容易。
• react-svg: カスタムSVGを大量に扱うプロジェクト（例：デザインシステム内製アイコン）に向いているが、型安全性や静的解析が難しい点に注意。

⚠️ 注意点と落とし穴

• react-fontawesome を使う際、library.add()を使わずに直接インポートする方式（Explicit Import）が現在推奨されています。古い方法を使うと不要なコードがバンドルされる可能性があります。

• react-svg は、SVGファイルの内容を信頼できないソースから読み込む場合、XSSのリスクがあるため注意が必要です。また、CSP（Content Security Policy）の設定によっては読み込みがブロックされることもあります。

• react-icons はアイコンセットのバージョンを内部で固定しているため、特定のアイコンセットの最新機能を使いたい場合は、そのアイコンセットの単体パッケージを使う方が良い場合があります。

📌 まとめ：どのパッケージを選ぶべきか？

最終的には、プロジェクトの規模、デザイン要件、チームのワークフローに合わせて選ぶのがベストです。小規模プロジェクトならreact-featherやreact-iconsの一部セットで十分ですが、大規模アプリやデザインシステムではreact-svgによる柔軟なアセット管理が有利になることもあります。