React アイコンライブラリの技術的比較：font-awesome、heroicons、material-icons、react-fontawesome、react-icons、remixicon-react

フロントエンド開発でアイコンを扱う際、単に「見栄え」だけでなく、バンドルサイズ、TypeScript サポート、カスタマイズ性、メンテナンス状況など、多くの技術的要素が選定に影響します。この記事では、代表的な6つの npm パッケージについて、実際のコード例を交えながら深く比較します。

⚠️ 非推奨パッケージの確認

まず重要な前提として、font-awesome（npm パッケージ名）と material-icons は、React 向けのコンポーネントライブラリとしては非推奨または用途が異なることに注意が必要です。

• font-awesome: このパッケージは Font Awesome の CSS/フォントファイルを提供するもので、React コンポーネントではありません。公式ドキュメントでも、React での使用には @fortawesome/react-fontawesome を使うよう明記されています。
• material-icons: Google 公式の Material Icons フォントをインストールするためのパッケージであり、SVG コンポーネントではなく Web フォントベースです。そのため、React での柔軟なスタイル制御や SSR 対応に制限があります。

これらのパッケージは、新規 React プロジェクトでは直接使用すべきではありません。代わりに、それぞれ対応する React 専用ラッパー（react-fontawesome や react-icons 内の Material Icons）を利用すべきです。

🧩 コンポーネント形式 vs Web フォント

アイコンライブラリは大きく2種類に分けられます：

1. SVG コンポーネントベース（例: heroicons, react-icons, remixicon-react）

   • アイコンが React コンポーネントとして提供される
   • スタイル（色、サイズなど）を props で自由に変更可能
   • ツリーシェイキングにより未使用アイコンはバンドルに含まれない

2. Web フォントベース（例: font-awesome + CSS, material-icons）

   • <i class="fas fa-user"></i> のような HTML 要素で表示
   • CSS 依存が強く、React の宣言的 UI との親和性が低い
   • 全アイコンがフォントファイルとして読み込まれる（バンドル最適化が難しい）

React プロジェクトでは、SVG コンポーネントベースが圧倒的に推奨されます。

🔌 実装方法の比較

react-fontawesome（Font Awesome の React 専用ラッパー）

Font Awesome のアイコンを React コンポーネントとして使うには、react-fontawesome と個別のアイコンセット（例: @fortawesome/free-solid-svg-icons）を組み合わせます。

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

function App() {
  return <FontAwesomeIcon icon={faUser} size="lg" color="blue" />;
}

• アイコンは JavaScript オブジェクトとして import
• size, color, spin などの props でカスタマイズ可能
• ツリーシェイキング対応（使ったアイコンだけがバンドルされる）

heroicons（Tailwind CSS 公式アイコン）

SVG パスを直接 React コンポーネントとしてエクスポート。シンプルで軽量。

import { UserIcon } from '@heroicons/react/24/outline';

function App() {
  return <UserIcon className="w-6 h-6 text-blue-500" />;
}

• 24/outline, 24/solid, 20/solid など、サイズとスタイルごとにパスが分かれている
• className で Tailwind CSS クラスを直接適用可能
• TypeScript 完全対応、props は標準 SVG 属性のみ

material-icons（Web フォント版 — 非推奨）

Google 公式の Web フォントを使う方法。React では不向き。

// ❌ 非推奨: Web フォント依存、SSR で FOUC 発生の可能性
import 'material-icons/iconfont/material-icons.css';

function App() {
  return <i className="material-icons">account_circle</i>;
}

• アイコン名は文字列で指定（型安全でない）
• 色やサイズは CSS でしか制御できない
• 全アイコンがフォントファイルに含まれる（約100KB+）

✅ 代わりに react-icons 経由で Material Icons を使うのがベストプラクティス（後述）。

react-icons（統合アイコンライブラリ）

複数のアイコンセット（Fa, Io, Md, Ri など）を1つのインターフェースで提供。

import { FaUser, MdAccountCircle, RiUser3Fill } from 'react-icons/all';

function App() {
  return (
    <div>
      <FaUser size="24px" color="red" />
      <MdAccountCircle size={24} className="text-green-500" />
      <RiUser3Fill style={{ width: '24px', height: '24px' }} />
    </div>
  );
}

• 全アイコンが個別に import 可能（ツリーシェイキング対応）
• 共通 props: size, color, className, style
• 1つのプロジェクトで複数のデザインシステムを混在可能

remixicon-react（Remix Icon の React 専用版）

Remix Icon の SVG を React コンポーネント化したもの。

import { User3Fill } from 'remixicon-react';

function App() {
  return <User3Fill size="24" color="#3b82f6" />;
}

• size と color props で基本カスタマイズ
• アイコン名は元の Remix Icon と一致（例: User3Fill）
• TypeScript 定義付き

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

heroicons は Tailwind CSS ユーザー向けに最適化されており、className での制御が自然です。一方、react-icons や react-fontawesome は汎用的な props を提供し、CSS-in-JS や styled-components との相性も良いです。

📦 バンドルサイズとパフォーマンス

• heroicons, remixicon-react, react-fontawesome: 使ったアイコンだけがバンドルされる（tree-shakable）
• react-icons: 同様に tree-shakable。ただし、内部で各アイコンセットをサブディレクトリに分けており、import パスに注意
• font-awesome (CSS版), material-icons (Web font): 全アイコンがフォントファイルとして読み込まれるため、初期ロードが重い

特にモバイル向けやパフォーマンス重視のアプリでは、SVG コンポーネントベースの選択が必須です。

🛠️ 実用的な使用例

ケース1: Tailwind CSS を使ったプロジェクト

heroicons が最も自然に統合できます。

import { BellIcon } from '@heroicons/react/24/outline';

function NotificationButton() {
  return (
    <button className="p-2 rounded-full hover:bg-gray-100">
      <BellIcon className="w-5 h-5 text-gray-700" />
    </button>
  );
}

ケース2: 複数のアイコンセットを混在させたい

react-icons が最適です。

import { FaGithub, FiTwitter, AiFillLinkedin } from 'react-icons/all';

function SocialLinks() {
  return (
    <div className="flex space-x-4">
      <FaGithub size={20} />
      <FiTwitter size={20} />
      <AiFillLinkedin size={20} />
    </div>
  );
}

ケース3: Font Awesome に既に依存している既存プロジェクト

react-fontawesome を使って段階的に移行。

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

function Features() {
  return (
    <div>
      <FontAwesomeIcon icon={faCoffee} className="mr-2" />
      <FontAwesomeIcon icon={faCode} className="ml-2" />
    </div>
  );
}

🚫 避けるべきパターン

• font-awesome パッケージを React で直接使う → CSS ベースのため、SSR やスタイル制御で問題が起きやすい
• material-icons を Web フォントとして使う → アイコン名が文字列のため型安全でなく、バンドルも重い

これらは、必ず react-fontawesome や react-icons 経由で使うべきです。

📊 まとめ：選定ガイド

💡 最終的なアドバイス

• 新規プロジェクトなら、heroicons（Tailwind ユーザー）か react-icons（汎用性重視）が安全牌
• 既存の Font Awesome 依存があるなら、react-fontawesome で移行
• 絶対に避けるべきは、font-awesome や material-icons をそのまま React で使うこと — これらは Web フォント用パッケージであり、React の宣言的 UI モデルと相性が悪い

アイコンは小さなUI要素ですが、選定ミスは長期的な技術的負債になります。パフォーマンス、保守性、開発体験のバランスを考えて、適切なパッケージを選びましょう。