Webサイトを作る際に、気軽にアイコンフォントを導入したいときがあるかと思います。
そういったとき、最近はPhosphor Iconsを気にって使っているのですが、
誰も話題に挙げていないので、他のアイコンフォントと比較しながら推していきたいと思います。
Font Awesomeじゃダメな理由
有料だから です。
無料部分もありますが、検索して「これ使いたい！」と思ったものが有料アイコンだったときにとても悔しい思いをします。
もちろん予算があるなら種類も豊富なのでぜひ買ってあげてほしいですが、気軽に使うには向きません。
Google Material Iconsじゃダメな理由
Google Material Iconsは素晴らしいです。僕もよくお世話になっています。
しかし、アイコンの豊富さで言うとそれほど多くなく（約3000）、 欲しいものが無い ということがよくあります。
「矢印」といったようなWeb UIで定番で必要となるものが中心であれば、足りると思います。
Phosphor Iconsが良い理由
無料かつ種類が豊富（約7500） だからです。
MITライセンスで、商用利用も可能だそうです。
Phosphor Iconsの使い方
head内で以下を読み込み、
<script src="https://unpkg.com/@phosphor-icons/web"></script>
使いたい場所でclass名でアイコンを指定して使う。だけです。
<i class="ph-bold ph-guitar"></i>
-
guitarの部分がアイコン名となります。 -
ph-boldのようなスタイル指定を省略するとアイコンが表示されないため注意してください。