React でアイコンを使いたいときに、よく使われるのが React Icons(npm のパッケージ名は react-icons)です。

Font Awesome や Material Design などのアイコンを、<FaHeart /> のようにコンポーネントとして書けます。

この記事では、入れ方から、サイズと色の変え方、まとめて指定する IconContext、文字と並べたときのずれまで、順番に見ていきます。

コードは、2026年11月に Docker の node:22 のコンテナで実際に動かし、画面と出力を確かめたものです。

確かめた環境は次の通りです。

• Node.js 22.23.5・npm 10.9.9
• Vite 8.3.8・React 19.3.1
• react-icons 5.7.0
• 画面の確認は Chromium 156

React のプロジェクトの作り方は、React入門チュートリアル:ViteでToDoアプリを作って使い方を覚えるにまとめています。

react-icons をインストールする

Vite で作った React のプロジェクトに、npm で入れます。

npm install react-icons

2026年11月13日に入れたところ、入ったのは 5.7.0 でした。

$ npm ls react react-icons
[email protected] /work/app
+-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
| `-- [email protected] deduped
+-- [email protected]

React 19.3.1 のプロジェクトにも、そのまま入りました。

package.json の peerDependencies は "react": "*" で、React の版を選ばない指定になっています。

npm には 6.0.0-beta.0(2026年8月12日)も出ていますが、npm view react-icons version で返る最新版は 5.7.0 でした。

アイコンを import して表示する

アイコンは、アイコンセットごとのフォルダから名前を指定して import します。

import { FaReact, FaGithub } from "react-icons/fa";
import { MdHome, MdSettings } from "react-icons/md";
import { FiSearch } from "react-icons/fi";

function App() {
  return (
    <p>
      <FaReact /> <FaGithub /> <MdHome /> <MdSettings /> <FiSearch />
    </p>
  );
}

react-icons/fa は Font Awesome、react-icons/md は Material Design、react-icons/fi は Feather です。

アイコン名の頭の2文字(Fa・Md・Fi)が、読み込むフォルダと対応しています。

5.7.0 の node_modules/react-icons の中には、次のフォルダがありました。

ai  bi  bs  cg  ci  di  fa  fa6  fc  fi  gi  go  gr  hi  hi2  im
io  io5  lia  lu  md  pi  ri  rx  si  sl  tb  tfi  ti  vsc  wi

fa と fa6(Font Awesome 6)、hi と hi2(Heroicons 2)のように、同じセットの新しい版が別のフォルダになっているものもあります。

使いたいアイコンの名前は、公式サイト(react-icons.github.io/react-icons)で検索して探せます。

フォルダを間違えるとビルドが止まる

アイコン名とフォルダが合っていないと、ビルドのときにエラーになります。

Font Awesome の FaHome を、間違えて react-icons/md から読もうとすると、次のように止まりました。

import { FaHome } from "react-icons/md"; // fa のアイコンを md から読もうとした

$ npx vite build
✗ Build failed in 100ms
error during build:
Build failed with 1 error:

[MISSING_EXPORT] "FaHome" is not exported by "node_modules/react-icons/md/index.mjs".

is not exported by と出たら、アイコン名の頭の文字と import のフォルダが合っているかを見てください。

size と color でアイコンを変える

アイコンには size と color を渡せます。

<FaHeart />
<FaHeart size={32} />
<FaHeart size="3em" color="crimson" />
<span style={{ color: "royalblue", fontSize: 40 }}>
  <FaHeart />
</span>

画面では次のようになりました(上から2段目が size と color の例です)。

何も指定しないと、アイコンは周りの文字と同じ大きさ・同じ色になります。

4つ目のハートは、親の span の色(royalblue)と文字の大きさ(40px)をそのまま受け継いでいます。

どうしてそうなるのかは、出力される HTML を見ると分かります。

renderToString で <FaHeart /> を HTML にすると、次のようになりました(path の中身は省いています)。

<svg stroke="currentColor" fill="currentColor" stroke-width="0"
  viewBox="0 0 512 512" height="1em" width="1em"
  xmlns="http://www.w3.org/2000/svg"><path d="..."></path></svg>

大きさは 1em(周りの文字の大きさ)、色は currentColor(周りの文字の色)になっています。

なので、アイコンの色や大きさは、CSS の color と font-size でも変えられます!

size={32} color="crimson" を渡したときは、次のようになりました。

<svg stroke="currentColor" fill="currentColor" stroke-width="0"
  viewBox="0 0 512 512" color="crimson" style="color:crimson"
  height="32" width="32" xmlns="http://www.w3.org/2000/svg">...</svg>

size は数字なら px、"3em" のように文字列なら CSS の単位つきの大きさになります。

className と title も渡せる

className を渡すと、svg の class になりました。

<!-- <FaHeart className="icon" /> -->
<svg ... class="icon" height="1em" width="1em" ...>...</svg>

CSS でまとめて見た目を変えたいときは、こちらのほうが書きやすいです。

title を渡すと、svg の中に <title> が入りました。

<!-- <FaHeart title="お気に入り" /> -->
<svg ... height="1em" width="1em" ...><title>お気に入り</title><path d="..."></path></svg>

アイコンだけのボタンのように、文字がない場所で意味を伝えたいときに使えます。

IconContext でまとめて指定する

アイコンが多いと、1つずつ size や color を書くのは大変ですよね。

IconContext.Provider で囲むと、中のアイコンにまとめて指定できます。

import { IconContext } from "react-icons";

<IconContext.Provider value={{ size: "2em", color: "seagreen" }}>
  <p>
    <FaReact /> <FaGithub /> <MdHome />
    <MdSettings color="orange" />
  </p>
</IconContext.Provider>

上の画像の3段目がこの例で、中のアイコンが緑色・2倍の大きさになりました。

MdSettings のように、アイコンに直接 color を書いたものは、そちらが優先されてオレンジ色になっています。

className も試したところ、Context の値とアイコンの値は上書きではなく、両方が付きました。

<IconContext.Provider value={{ size: "2em", color: "seagreen", className: "ctx" }}>
  <FaHeart />
  <FaHeart color="orange" className="mine" />
</IconContext.Provider>

<svg ... class="ctx" style="color:seagreen" height="2em" width="2em" ...>...</svg>
<svg ... color="orange" class="ctx mine" style="color:orange" height="2em" width="2em" ...>...</svg>

まとめると、color と size はアイコンの指定が優先され、className は両方が並びます。

ボタンの文字とアイコンの高さがずれるとき

アイコンを文字と並べると、アイコンが文字より上に浮いて見えることがあります。

上の画像の一番下、拡大すると次の2つのボタンです。

左は、ボタンの中にそのまま <FiSearch size={28} /> 検索 と書いたものです。

svg は文字の下の線(ベースライン)にそろうので、アイコンが大きいと文字が下にずれて見えます。

右は、ボタンに次の CSS を足したものです。

.btn-fixed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

inline-flex と align-items: center で、アイコンと文字の高さの中心がそろいました!

ボタンを1つずつ直さずに、アイコンの側でそろえたいときは、IconContext の style で verticalAlign を渡す方法もあります。

<IconContext.Provider value={{ style: { verticalAlign: "middle" } }}>
  <FaHeart />
</IconContext.Provider>

<svg ... style="vertical-align:middle" height="1em" width="1em" ...>...</svg>

公式の README によると、vertical-align: middle はバージョン3から自動では付かなくなったので、必要なら IconContext の className か style で付けてください、とのことです(react-icons の README)。

使ったアイコンだけがビルドに入る

アイコンをたくさん入れたらアプリが重くならないか、気になりますよね？

アイコンなし・1つだけ import・import * as Fa の3通りでビルドし、出力された JS の大きさを比べました。

// 1つだけ import
import { FaHeart } from "react-icons/fa";

// まとめて import して、名前で選ぶ
import * as Fa from "react-icons/fa";
const Icon = Fa[name];

1つだけ import したときに増えたのは、約3.3KB でした。

import * as Fa で名前を文字列で選ぶ書き方にすると、どのアイコンを使うかビルドの時点で決まらないので、Font Awesome のアイコンがまるごと入り、約1.3MB 増えました(Vite も Some chunks are larger than 500 kB after minification. という警告を出しました)。

アイコンは、使うものを名前で1つずつ import するのがおすすめです(^^)

参考:Gatsby などで使う @react-icons/all-files

公式の README によると、Meteor や Gatsby などで使う場合のために、アイコンを1つずつのファイルで読み込める @react-icons/all-files というパッケージもあるとのことです。

import { FaBeer } from "@react-icons/all-files/fa/FaBeer";

ただ、インストールに時間がかかることと、しばらく新しい版が出ていないことも README に書かれています(react-icons の README)。

この記事の Vite の環境では、react-icons のままで、使ったアイコンだけがビルドに入りました。

まとめ

• npm install react-icons で入れ、import { FaHeart } from "react-icons/fa" のようにフォルダとアイコン名を指定して使う
• 何も指定しないと、大きさは 1em、色は currentColor で、周りの文字に合わせて変わる
• size・color・className・title を渡せる
• IconContext.Provider でまとめて指定でき、アイコンに直接書いた color・size が優先される
• 文字とずれるときは、親を inline-flex + align-items: center にする
• import * as で名前を選ぶとアイコンがまるごとビルドに入るので、使うものだけ import する

React のページの切り替えはReact Routerの使い方、React そのものの説明はReactとは?にまとめています。