1. ホーム
  2. テック
おすすめのReact用アイコンライブラリの絵文字

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

2022-05-12

2022-05-12

目次（タップして移動）
  1. # はじめに
  2. # おすすめの React 用アイコンライブラリ
  3. # React Icons
  4. # Material icons
  5. # Heroicons
  6. # Ant Design
  7. # Supercons
  8. # Chakra UI
  9. # Radix UI
  10. # その他のライブラリ
  11. # おわりに

はじめに

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

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

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

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

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

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

以上 3 点をまとめます。

React Icons

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

メリット

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

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

デメリット

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

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

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

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

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

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

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

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

Material icons

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

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

メリット

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

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

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

デメリット

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

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

Heroicons

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

メリット

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

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

デメリット

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

https://heroicons.com/

Ant Design

特徴
  • MIT ライセンス
  • React 専用

メリット

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

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

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

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

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

デメリット

見つかりません。

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

Supercons

特徴

メリット

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

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

デメリット

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

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

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

Chakra UI

特徴
  • 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

Radix UI

特徴
  • 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/

その他のライブラリ

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

おわりに

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

アバター

こふ

著者について

共有する