Web制作や開発で役にたつアイコンサイト6選

アイコンはWebサービスを作る上で欠かせない要素です。しかし、エンジニアがアイコンを作るのは非効率です。
そこで豊富なアイコンを提供しているサイトを使うことで、開発効率を上げることができます。

この記事では僕がWebサービスを作る上でよく使っているアイコンサイトを紹介します！

Lucide

ReactやVueはもちろん、SvelteやAngular,Solid用のコンポーネントも提供されているアイコンセットです。
メンテナも多く、とても活発なプロジェクトで、Figma用のプラグインも用意されているのでデザイナーとの連携もしやすいです。

最近人気のTailwindを使ったReactのコンポーネント集であるshadcn/uiでも採用されています！

Simple Icons

各WebサービスのロゴがSVGとして提供されているサイトです。エンジニアにはお馴染みのGitHubやnpm,Dockerなどのアイコンが揃っています。
ブランドのロゴを探すにはこのサイトが一番使いやすいと思います。

heroicons

TailwindCSSの作者が作ったアイコンセットです。シンプルで使いやすいアイコンが揃っています。
また、ReactやVue用のコンポーネントも提供されているので開発効率が上がります。
僕はよくこのサイトでアイコンを探して、その場でJSXとしてコピーして使っています。

コピーしたいアイコンにホバーするとJSXのコピー用のボタンが表示されるので、それをクリックすると簡単にコピーできます。

Boxicons

1600以上のアイコンが無料で使えるサイトです。アイコンの種類も豊富で、デザインもシンプルで使いやすいです。
sushiやjoystickなど、他のサイトにはないニッチなアイコンもあるので、探してみると面白いかもしれません。
最近は開発がとまってしまっていて、新しいアイコンが追加されていないのが残念です。

Google Fonts Icons

Google Fontsにはアイコンフォントも提供されています。Google FontsはWebフォントを提供しているサイトですが、その中にはアイコンフォントも含まれています。
サイトに導入したいアイコンをクリックすると画面右側に導入方法が表示されるので初心者でも簡単に導入できます。

flaticon

こちらは上記のアイコンとは毛色が違い、カラフルなフラットデザインのアイコンが多いサイトです！
僕の知る限り最もアイコンの種類が豊富なサイトです。たとえば「man」で検索するだけで269,746件ものアイコンがヒットしました！
僕もmosyaの制作でよく使っています！

ただし、有料プランでないと1日のダウンロード数に制限があるので、頻繁に使う場合は有料プランを検討した方がいいかもしれません。