おすすめのReact用アイコンライブラリ

こんにちは、よもぎ茶美味しいこふです。

主に React 向けのアイコンライブラリを紹介します。

当然ですが、他のフロントエンドライブラリ向けのものも用意されていることが多いです。

アイコンはサイトの雰囲気を決める大きな要素なので、たくさん探して合うものを探すべきです。

• 特徴
• メリット
• デメリット

以上 3 点をまとめます。

• Github：https://github.com/react-icons/react-icons
• Link：https://react-icons.github.io/react-icons/search

• MIT ライセンス
• 全部入り
• React 専用

全部入りなので、特殊なアイコン（Mac Mini のアイコンなど）でなければ見つかります。

検索サイトも用意されているため、便利です。こんなページ。

全部入りとは言いましたが、テーマごとに分類されています。

Ant Design のものや、Font Awesome などです。以下のように、単語一つでもさまざまなタイプのアイコンがあることが分かるでしょう。

つまり、それらを適当に選ぶとサイト内のアイコンの雰囲気の統一が難しくなります。

統一感を要求するなら、結局は特定のアイコンのテーマを使うしかありません。

となると、使う意味があるのか？と疑問に思うはずで、自分は今後は使わないようにしたいと思います。

また、全部入りであるため、パッケージ自体のサイズは大きくなります。

例えば、必要なアイコンだけを SVG 形式で配置することと比べると、開発時に重くなる可能性は十分にあります。

https://react-icons.github.io/react-icons/search

• Github：https://github.com/mui/material-ui
• Link：https://mui.com/components/material-icons/

マテリアルデザインの MUI 専用とも言えるアイコンです。

• MIT ライセンス
• React 専用
• Figma/AdobeXD/Sketch で使える

Material Design な開発では相性抜群です。

サイトの雰囲気を整えられるでしょう。

Web デザインを作るツールとセットで用いられる点は非常に便利です。

Material UI を用いないなら、使う理由は見当たりません。

https://mui.com/components/material-icons/

• Github：https://github.com/tailwindlabs/heroicons
• Link：https://heroicons.com/

• MIT ライセンス
• React と Vue 専用
• tailwindlab のもの（前は違ったような）
• Figma で使える

他のどのアイコンよりも美しく、洗練されていると僕は感じました。

そのため、サイトを高品質に保ちたいなら、Heroicons で済ませるのがベストだと判断しました。

いくら美しく、洗練されていても、種類は多くはないです。しかし、一般的に用いられる汎用的なアイコンはひと通り揃っているので、通常の開発であれば問題ないです。

https://heroicons.com/

• Github：https://github.com/ant-design/ant-design/
• Link：https://ant.design/components/icon/

• MIT ライセンス
• React 専用

Ant Desgin のコンポーネントの一つとして作られていますが、インストールすれば Ant Design を使わずとも使えます。

また、通常のアイコンであれば、枠線・塗りつぶしのアイコンの２種類が用意されていますが、これは Two Tone という２色使われたアイコンも用意されています。

正直にいうと、CSS を駆使すれば枠線のものを Two Tone にすることは可能です。

多少は手間がかかるので、企業で使うのでなければ非常に便利に利用できるはず。

また、ブランドのロゴも用意されている点は高評価です。積極的に使いたいところ。（今後使おう）

見つかりません。

https://ant.design/components/icon/

• Github：https://github.com/lachlanjc/supercons
• Link：https://supercons.vercel.app/

• BSD-3-Clause license ライセンス
• React 専用

角が丸まったデザインのアイコンで、非常にかわいいです。

サイト・アプリケーションの対象ユーザーが若い年代の女性の場合、有効に使えると思います。

ライセンスは真面目に読んで利用しましょう。

1999 年 7 月 22 日に発表されたもので、四条項 BSD ライセンスから第三条を削除し、宣伝媒体への謝辞掲載が不要となりました。修正 BSD ライセンスとも呼ばれます。BSD 系でもっともよく利用されるライセンスです。

https://www.tohoho-web.com/ex/license.html#bsd-3より引用しました。

• Github：https://github.com/chakra-ui/chakra-ui
• Link：https://chakra-ui.com/docs/components/media-and-icons/icon

• MIT ライセンス
• React 専用

Chakura UI と利用するのは以下のように書けるため便利です。

コピー
1import { PhoneIcon, AddIcon, WarningIcon } from '@chakra-ui/icons'
2
3// Use the `color` prop to change the icon color
4;<WarningIcon w={8} h={8} color="red.500" />

Chakura UI 公式のアイコンは非常に少ないです。つまり、他のアイコンライブラリからインポートして Chakura UI の Icon コンポーネントに渡すこととなり、使う理由がわかりません。

https://chakra-ui.com/docs/components/media-and-icons/icon

• Github：https://github.com/radix-ui/icons
• Link：https://icons.modulz.app/

• MIT ライセンス
• 15px * 15px のアイコン
• 何にでも使える

何にでも使えます。というのも SVG として使うからです。

サイトから使いたいアイコンをコピーすると、以下のように値をもらえます。

ライブラリを React 環境下でインストールすると、以下のようにも使うことが可能です。

コピー
1import { FaceIcon, ImageIcon, SunIcon } from '@radix-ui/react-icons'

コピー
1<svg
2  width="15"
3  height="15"
4  viewBox="0 0 15 15"
5  fill="none"
6  xmlns="http://www.w3.org/2000/svg"
7>
8  <path
9    d="M11 1.5C11 1.22386 10.7761 1 10.5 1C10.2239 1 10 1.22386 10 1.5V4H5V1.5C5 1.22386 4.77614 1 4.5 1C4.22386 1 4 1.22386 4 1.5V4H1.5C1.22386 4 1 4.22386 1 4.5C1 4.77614 1.22386 5 1.5 5H4V10H1.5C1.22386 10 1 10.2239 1 10.5C1 10.7761 1.22386 11 1.5 11H4V13.5C4 13.7761 4.22386 14 4.5 14C4.77614 14 5 13.7761 5 13.5V11H10V13.5C10 13.7761 10.2239 14 10.5 14C10.7761 14 11 13.7761 11 13.5V11H13.5C13.7761 11 14 10.7761 14 10.5C14 10.2239 13.7761 10 13.5 10H11V5H13.5C13.7761 5 14 4.77614 14 4.5C14 4.22386 13.7761 4 13.5 4H11V1.5ZM10 10V5H5V10H10Z"
10    fill="currentColor"
11    fill-rule="evenodd"
12    clip-rule="evenodd"
13  ></path>
14</svg>

特にありません。

https://icons.modulz.app/

探していた際に見つけただけですが、掲載します。随時、使って感想を書こうと思います。

• https://feathericons.com/
• [https://jaketrent.github.io/react-social-icons/](https://jaketrent.github.io/react-social-icons/]
• https://fontawesome.com/
• https://react-md.dev/packages/icon/demos
• https://icons.getbootstrap.com/
• https://icons.modulz.app/
• https://iconic.app/
• https://semantic-ui.com/elements/icon.html
• https://oblador.github.io/react-native-vector-icons/
• https://styled-icons.dev/
• https://icons.grommet.io/
• https://react-icons-kit.vercel.app/
• https://github.com/jxnblk/react-geomicons
• https://github.com/saulhoward/react-evil-icons
• https://github.com/Kilian/react-bytesize-icons
• https://github.com/digiaonline/react-foundation
• https://github.com/telerik/kendo-reacts
• https://github.com/miukimiu/react-kawaii
• https://github.com/coreui/coreui-icons
• https://github.com/adobe/react-spectrum
• https://github.com/iconify/iconify
• https://github.com/palantir/blueprint
• https://github.com/carbon-design-system/carbon
• https://github.com/patternfly/patternfly-react
• https://github.com/microsoft/fluentui

アイコンを活用して統一感のある、ユーザーにとって使い方がわかりやすいサイトを作りましょう。