アイコンフォントって何種類もあって、最初はどれでもいいかと思っていたんですが、使ってみるといろいろ差があることがわかってきました。今回は実際に試した4つを比べてみます。
使い始めたきっかけはBootstrapでした
もともとBootstrapを使ったプロジェクトで初めてBootstrap Iconsを触ったんですが、最初は「まあBootstrap使ってるしついでに」くらいの気持ちでした。Font Awesomeのほうが有名だし、乗り換える理由もないかなと。
でもしばらく両方を行き来してみて、「あれ、Bootstrap Iconsのほうが見やすくない？」と気づき始めて。そこから他のライブラリも試してみることにしました。
それぞれ使ってみた感想
Bootstrap Icons ── シンプルな線が使いやすい
いちばん気に入っているのは線のシンプルさです。ストロークが細くそろっていて、どのアイコンを組み合わせても「バラバラ感」が出にくい。フォントとして読み込む方法とSVGを直接使う方法が選べるので、案件の規模に合わせて使い分けられるのもよかったです。
CDNで読み込む場合は1行で済むので、小規模な案件でもさっと使えます。
Font Awesome ── 有名だけどv6から少し面倒に
以前はCDNのリンクをコピペするだけでよかったんですが、v6からKitという仕組みに変わって、ドメインの登録が必要になりました。アカウント作って、Kitを作って、ドメイン登録して……と手順が増えていて、小さい案件だと少し手間に感じます。
あとfa-regularやfa-lightといった線系のスタイルが有料プランのみになっているので、無料で使うとソリッドなアイコンが中心になります。
WordPressの場合はプラグインで入れると楽なので、そこはFont Awesomeの強みですね。
Lucide ── Reactと相性がいい
Feather Iconsの後継にあたるライブラリです。lucide-reactをnpmで入れると、コンポーネントとして直接使えるのでReact案件との相性がとてもよかったです。デザインの方向性はBootstrap Iconsに近くて、すっきりしたストローク系のアイコンが揃っています。
完全MIT、商用利用もOKでライセンス面で悩まなくていいのも助かります。
Material Icons ── Googleっぽさが出る
アイコンの種類はいちばん多くて、フォーム部品まわりや管理画面で使いたい系統のアイコンは充実しています。ただ、コーポレートサイトに入れるとどうしてもGoogleのサービスっぽい雰囲気になってしまいます。Material Symbols（新しい版）への移行でフォントの扱い方も変わっていて、それなりに慣れが必要でした。
どう使い分けるか
| 用途 | おすすめ |
|---|---|
| WordPress案件 | Font Awesome（プラグイン導入が楽） |
| React / Next.js | Lucide（lucide-reactで完結） |
| 管理画面・ダッシュボード | Material Icons（システム系アイコンが豊富） |
| LP・コーポレート全般 | Bootstrap Icons（主張が少なくどこにでも合う） |
まとめ
それぞれ一長一短あるので「これだけ使えばOK」とはなかなか言いにくいんですが、自分の場合は非Reactの案件ではBootstrap Icons、ReactならLucideがほぼデフォルトになってきました。
特に理由なくFont Awesomeを使っていた時期が長かったので、一度ちゃんと比べてみてよかったです。皆さんのアイコン選びの参考になれば！
