React アプリケーションにおけるアイコンライブラリの選定ガイド
feather-icons、font-awesome、material-design-icons、react-icons はすべて Web アプリケーションでベクター形式のアイコンを提供するための npm パッケージですが、設計思想や使用方法、統合方法に大きな違いがあります。feather-icons と material-design-icons は特定のデザイン言語（それぞれ Feather と Material Design）に基づいたアイコンセットを提供し、SVG 形式での利用が主です。一方、font-awesome は長年使われてきたフォントベースのアイコンシステムを提供しつつ、近年では SVG と JavaScript によるモダンな実装もサポートしています。react-icons は単一のアイコンセットではなく、複数の人気アイコンライブラリ（Feather Icons、Font Awesome、Material Icons など）を React コンポーネントとして一括で提供するラッパー集です。これらのパッケージは、バンドルサイズ、カスタマイズ性、React との統合度、メンテナンス状況といった観点から慎重に選ぶ必要があります。
npmのダウンロードトレンド
GitHub Starsランキング
統計詳細
React アプリケーションにおけるアイコンライブラリの技術的比較
アイコンは UI の重要な構成要素ですが、React アプリケーションでどのように取り込むかはアーキテクチャに大きく影響します。feather-icons、font-awesome、material-design-icons、react-icons はそれぞれ異なるアプローチを取っており、バンドルサイズ、開発体験、保守性の面で明確なトレードオフがあります。以下では、実際のコード例を交えながら詳細に比較します。
📦 パッケージの性質とメンテナンス状況
feather-icons は MIT ライセンスのオープンソースアイコンセットで、280 個ほどのシンプルな SVG アイコンを提供します。npm パッケージは SVG ファイルと JavaScript ランタイム（ブラウザ向け）を含みますが、React とのネイティブ統合は提供していません。
font-awesome は商用利用可能なアイコンライブラリで、npm 上では @fortawesome/fontawesome-free などのスコープ付きパッケージが主流です。React では専用の @fortawesome/react-fontawesome と組み合わせて使用します。公式が積極的にメンテナンスしており、安定しています。
material-design-icons は Google が提供していた Material Design 向けのアイコン集ですが、npm ページ に明記されている通り、非推奨（deprecated） です。Google は新しい実装として @material-design-icons や @mui/icons-material（Material UI 向け）を推奨しています。新規プロジェクトでこのパッケージを使用するのは避けるべきです。
react-icons はコミュニティ主導の統合パッケージで、複数のアイコンセットを React コンポーネントとして再配布します。各アイコンは独立した ES モジュールとして提供され、ツリーシェイキングと相性が良い設計になっています。
⚠️ 注意:
material-design-iconsは非推奨のため、以下の比較では参考情報として扱いますが、新規プロジェクトでの使用は推奨しません。
🔌 React との統合方法
feather-icons
feather-icons は React 用の公式コンポーネントを提供していないため、自分で SVG をコンポーネント化する必要があります。
// feather-icons を直接使う場合（非推奨）
import { ReactComponent as HeartIcon } from 'feather-icons/dist/icons/heart.svg';
function App() {
return <HeartIcon style={{ width: 24, height: 24, fill: 'none', stroke: 'currentColor' }} />;
}
ただし、多くの開発者は react-icons 経由で Feather アイコンを利用します（後述）。
font-awesome
Font Awesome は React 向けに専用パッケージを提供しています。
// font-awesome + react-fontawesome
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
function App() {
return <FontAwesomeIcon icon={faCoffee} size="2x" />;
}
アイコンは個別にインポートすることで、未使用のアイコンがバンドルに含まれるのを防ぎます。
material-design-icons
非推奨パッケージのため、React で直接使うのは困難です。SVG ファイルを手動で読み込む必要があります。
// material-design-icons（非推奨）
import AccessAlarmIcon from 'material-design-icons/device/svg/production/ic_access_alarm_24px.svg';
function App() {
return <img src={AccessAlarmIcon} alt="alarm" />;
}
この方法はバンドルサイズや型安全性の面で問題があるため、実用的ではありません。
react-icons
react-icons は各アイコンを React コンポーネントとして提供します。
// react-icons
import { FiHeart } from 'react-icons/fi'; // Feather Icons
import { FaCoffee } from 'react-icons/fa'; // Font Awesome
import { MdAccessAlarm } from 'react-icons/md'; // Material Design
function App() {
return (
<div>
<FiHeart size={24} color="red" />
<FaCoffee size="2x" />
<MdAccessAlarm />
</div>
);
}
コンポーネント名のプレフィックス（Fi, Fa, Md など）でアイコンセットを識別でき、props でサイズや色を簡単に制御できます。
📦 バンドルサイズとツリーシェイキング
feather-icons: 全アイコンをインポートすると約 50KB（minified）ですが、個別に SVG をインポートすれば使用分だけになります。ただし、React で直接使うには追加の設定が必要です。font-awesome:@fortawesome/free-solid-svg-icons全体は 1MB 近くありますが、個別アイコン（例:faCoffee）をインポートすれば、そのアイコン分（1–2KB）だけがバンドルされます。material-design-icons: 非推奨パッケージは全ファイルを含むため、バンドルサイズが非常に大きくなります（数百MB）。実用的ではありません。react-icons: 各アイコンが独立モジュールのため、使用した分だけがバンドルされます。たとえばFiHeartだけを使えば、そのアイコンの SVG 文字列（1KB 未満）のみが含まれます。
🎨 スタイリングとカスタマイズ性
feather-icons
SVG ストロークベースのため、stroke、stroke-width でスタイルを調整できます。
.feather-icon {
stroke: currentColor;
stroke-width: 2;
}
font-awesome
SVG 実装では color、font-size（size prop で制御）が使えます。Web フォント方式では CSS の制限がありますが、React 版は SVG のため自由度が高いです。
material-design-icons
SVG なので fill や color でスタイル可能ですが、非推奨のため詳細は割愛します。
react-icons
すべてのアイコンコンポーネントは size、color、className などの props を受け付けます。
<FiHeart size={32} color="#ff4757" className="custom-icon" />
内部で style 属性を適用するため、CSS クラスとの併用も可能です。
🧪 実用的な使用例
シンプルで軽量な UI が必要な場合
Feather のミニマリストなデザインが適しています。react-icons 経由でインポートするのが最も手軽です。
import { FiMenu, FiSearch, FiUser } from 'react-icons/fi';
function Header() {
return (
<header>
<FiMenu />
<FiSearch />
<FiUser />
</header>
);
}
豊富なアイコンとブランド認識が必要な場合
Font Awesome は 2,000 個以上のアイコンを持ち、多くのユーザーに馴染みがあります。
import { FaTwitter, FaGithub, FaLinkedin } from 'react-icons/fa';
function SocialLinks() {
return (
<div>
<FaTwitter />
<FaGithub />
<FaLinkedin />
</div>
);
}
Material Design に厳密に従う必要がある場合
非推奨の material-design-icons ではなく、@mui/icons-material（Material UI 向け）や react-icons の Md セットを使用します。
import { MdHome, MdSettings, MdNotifications } from 'react-icons/md';
function BottomNav() {
return (
<nav>
<MdHome />
<MdSettings />
<MdNotifications />
</nav>
);
}
📌 まとめ：各パッケージの特徴
| パッケージ | React 統合 | バンドル効率 | メンテナンス | 推奨用途 |
|---|---|---|---|---|
feather-icons | 手動設定必要 | 良（個別インポート時） | 活発 | シンプルなラインアイコンが必要な場合 |
font-awesome | 専用パッケージあり | 良（個別インポート時） | 活発 | 豊富なアイコンとブランド力を求める場合 |
material-design-icons | 困難 | 悪（非推奨） | 非推奨 | 新規プロジェクトでは使用しない |
react-icons | 即時利用可能 | 優（ツリーシェイキング対応） | 活発 | 多様なアイコンセットを柔軟に使いたい場合 |
💡 最終的なアドバイス
- 新規 React プロジェクトでは、まず
react-iconsを検討してください。複数のアイコンセットをシームレスに切り替えられ、バンドルサイズも最適化されます。 - Font Awesome に依存する既存デザインがある場合は、
@fortawesome/react-fontawesomeを使ってください。 - Material Design に準拠する必要がある場合は、
material-design-iconsではなくreact-iconsのMdセットか、@mui/icons-materialを使ってください。 material-design-iconsパッケージは非推奨であるため、新規プロジェクトでの使用は避けてください。
アイコンライブラリは見た目の問題だけでなく、アプリケーションのパフォーマンスや保守性にも影響します。上記のポイントを踏まえて、プロジェクトの要件に最も合うものを選んでください。
選び方: feather-icons vs font-awesome vs material-design-icons vs react-icons
- feather-icons:
feather-iconsは軽量で一貫性のあるシンプルなラインアイコンを探している場合に最適です。SVG ストロークベースのデザインで、CSS による色や太さの調整が容易です。ただし、React で直接使うには手動で SVG をコンポーネント化する必要があるため、react-icons経由で利用する方が一般的です。新規プロジェクトで Feather デザインを採用するなら、react-iconsからのインポートを推奨します。 - font-awesome:
font-awesomeは非常に豊富なアイコンセットと高い認知度を持つライブラリです。従来の Web フォント方式に加え、公式の@fortawesome/react-fontawesomeを使えば React 向けの最適化された SVG 実装が可能です。ただし、全アイコンをバンドルするとサイズが大きくなるため、必要なアイコンだけを個別にインポートする必要があります。既存の Font Awesome の知識やデザインガイドラインを活かしたい場合に有効です。 - material-design-icons:
material-design-iconsは Google の Material Design 規範に準拠したアイコンを提供します。npm パッケージ自体は SVG ファイルのコレクションであり、React で直接使うには追加のビルド設定やコンポーネント化が必要です。現在、このパッケージは非推奨（deprecated）となっており、Google は代わりに@material-design-iconsまたは@mui/icons-material（Material UI 向け）の使用を推奨しています。新規プロジェクトではこのパッケージを避けて、代替手段を検討すべきです。 - react-icons:
react-iconsは複数のアイコンライブラリ（Feather、Font Awesome、Material Icons など）を単一の API で利用できる統合パッケージです。各アイコンが独立した React コンポーネントとして提供され、ツリーシェイキングにより使用したアイコンのみがバンドルされます。React 専用の使いやすさ、軽量性、柔軟性を重視するプロジェクトに最適です。特に、複数のアイコンセットを混在させたい場合や、迅速なプロトタイピングが必要な場合に強力な選択肢となります。
人気の比較
feather-icons のREADME
Feather
What is Feather?
Feather is a collection of simply beautiful open-source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility.
npm install feather-icons
Table of contents
Quick start
Start with this CodePen Template to begin prototyping with Feather in the browser.
Or copy and paste the following code snippet into a blank html file.
<!DOCTYPE html>
<html lang="en">
<title></title>
<script src="https://unpkg.com/feather-icons"></script>
<body>
<!-- example icon -->
<i data-feather="circle"></i>
<script>
feather.replace();
</script>
</body>
</html>
Usage
At its core, Feather is a collection of SVG files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. img, background-image, inline, object, embed, iframe). Here's a helpful article detailing the many ways SVGs can be used on the web: SVG on the Web – Implementation Options
The following are additional ways you can use Feather.
Client-side JavaScript
1. Install
[!NOTE] If you intend to use Feather with a CDN, you can skip this installation step.
Install with npm.
npm install feather-icons --save
Or just copy feather.js or feather.min.js into your project directory. You don't need both feather.js and feather.min.js.
2. Include
Include feather.js or feather.min.js with a <script> tag:
<script src="path/to/dist/feather.js"></script>
[!NOTE] >
feather.jsandfeather.min.jsare located in thedistdirectory of the npm package.
Or load the script from a CDN provider:
<!-- choose one -->
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
After including the script, feather will be available as a global variable.
3. Use
To use an icon on your page, add a data-feather attribute with the icon name to an element:
<i data-feather="circle"></i>
See the complete list of icons at feathericons.com.
4. Replace
Call the feather.replace() method:
<script>
feather.replace();
</script>
All elements that have a data-feather attribute will be replaced with SVG markup corresponding to their data-feather attribute value. See the API Reference for more information about feather.replace().
Node
1. Install
Install with npm:
npm install feather-icons --save
2. Require
const feather = require('feather-icons');
3. Use
feather.icons.x;
// {
// name: 'x',
// contents: '<line ... /><line ... />`,
// tags: ['cancel', 'close', 'delete', 'remove'],
// attrs: {
// class: 'feather feather-x',
// xmlns: 'http://www.w3.org/2000/svg',
// width: 24,
// height: 24,
// viewBox: '0 0 24 24',
// fill: 'none',
// stroke: 'currentColor',
// 'stroke-width': 2,
// 'stroke-linecap': 'round',
// 'stroke-linejoin': 'round',
// },
// toSvg: [Function],
// }
feather.icons.x.toSvg();
// <svg class="feather feather-x" ...><line ... /><line ... /></svg>
feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' });
// <svg class="feather feather-x foo bar" stroke-width="1" color="red" ...><line ... /><line ... /></svg>
See the API Reference for more information about the available properties and methods of the feather object.
SVG sprite
1. Install
[!NOTE] If you intend to use Feather with a CDN, you can skip this installation step.
Install with npm.
npm install feather-icons --save
Or just copy feather-sprite.svg into your project directory.
2. Use
Include an icon on your page with the following markup:
<svg
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<use href="path/to/feather-sprite.svg#circle" />
</svg>
[!NOTE] >
circlein the above example can be replaced with any valid icon name. See the complete list of icon names at feathericons.com.
However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:
.feather {
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
<svg class="feather">
<use href="path/to/dist/feather-sprite.svg#circle" />
</svg>
Figma
Feather is available as a Figma component library. To use the components, log in to your Figma account and duplicate the file to your drafts.
API reference
feather.icons
An object with data about every icon.
Usage
feather.icons.x;
// {
// name: 'x',
// contents: '<line ... /><line ... />',
// tags: ['cancel', 'close', 'delete', 'remove'],
// attrs: {
// class: 'feather feather-x',
// xmlns: 'http://www.w3.org/2000/svg',
// width: 24,
// height: 24,
// viewBox: '0 0 24 24',
// fill: 'none',
// stroke: 'currentColor',
// 'stroke-width': 2,
// 'stroke-linecap': 'round',
// 'stroke-linejoin': 'round',
// },
// toSvg: [Function],
// }
feather.icons.x.toString();
// '<line ... /><line ... />'
[!NOTE] >
xin the above example can be replaced with any valid icon name. See the complete list of icon names at feathericons.com. Icons with multi-word names (e.g.arrow-right) cannot be accessed using dot notation (e.g.feather.icons.x). Instead, use bracket notation (e.g.feather.icons['arrow-right']).
feather.icons[name].toSvg([attrs])
Returns an SVG string.
Parameters
| Name | Type | Description |
|---|---|---|
attrs (optional) | Object | Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object. |
[!NOTE] You might find these SVG attributes helpful for manipulating icons:
Usage
feather.icons.circle.toSvg();
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.icons.circle.toSvg({ 'stroke-width': 1 });
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.icons.circle.toSvg({ class: 'foo bar' });
// '<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.replace([attrs])
Replaces all elements that have a data-feather attribute with SVG markup corresponding to the element's data-feather attribute value.
Parameters
| Name | Type | Description |
|---|---|---|
attrs (optional) | Object | Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object. |
Usage
[!IMPORTANT] >
feather.replace()only works in a browser environment.
Simple usage:
<i data-feather="circle"></i>
<!--
<i> will be replaced with:
<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->
<script>
feather.replace();
</script>
You can pass feather.replace() an attrs object:
<i data-feather="circle"></i>
<!--
<i> will be replaced with:
<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->
<script>
feather.replace({ class: 'foo bar', 'stroke-width': 1 });
</script>
All attributes on the placeholder element (i.e. <i>) will be copied to the <svg> tag:
<i data-feather="circle" id="my-circle" class="foo bar" stroke-width="1"></i>
<!--
<i> will be replaced with:
<svg id="my-circle" class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->
<script>
feather.replace();
</script>
feather.toSvg(name, [attrs]) (DEPRECATED)
[!WARNING] >
feather.toSvg()is deprecated. Please usefeather.icons[name].toSvg()instead.
Returns an SVG string.
Parameters
| Name | Type | Description |
|---|---|---|
name | string | Icon name |
attrs (optional) | Object | Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object. |
Usage
feather.toSvg('circle');
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.toSvg('circle', { 'stroke-width': 1 });
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.toSvg('circle', { class: 'foo bar' });
// '<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
Contributing
For more info on how to contribute please see the contribution guidelines.
Caught a mistake or want to contribute to the documentation? Edit this page on Github
Related projects
- feathericons.dev - Feather viewer featuring 30+ brand icons and 40+ payment services icons
- angular-feather - Feather icons for Angular applications
- elm-feather - Feather icons for Elm applications
- react-feather - Feather icons as React components
- sketch-feather - Feather icons as a Sketch library
- vue-feather-icons - Feather icons as Vue components
- php-feather - Feather icons as a PHP Library
- wp-php-feather - Feather icons as a WordPress template tag
- django-feather - Feather icons as Django Template Tag
- svelte-feather-icons - Feather icons as Svelte components
- gulp-feather - Feather icons rendering using gulp
- astro-feather - Feather icons as Astro components
- qwik-feather-icons - Feather icons for Qwik, the Resumable Framework
- figma-feather – Feather icons as a Figma component
- delphi-feather-icons - Feather icons as a Delphi Library
- eleventy-plugin-feathericons - Feather icons as a plugin for 11ty
License
Feather is licensed under the MIT License.