ウェブデザインで使うアイコンをゲットする

アイコンを程よく使うとデザインのアクセントになるのでうるさくならない程度に少量使っていきたい。

久々にそんなアイコンに関する情報をアップデートしたのでメモ。

Font Awesome

定番のFont Awesome。
アイコンの一覧。すごく多彩。

Font Awesomeもウェブフォントとして読み込むとけっこう重たいので、使うアイコンだけSVGで個別に読み込んだ方がよさげな気がする。よほどたくさんのアイコンを使うのでなければ。
SVGはフリーでダウンロードできるzipファイルに同梱されている。

ところで今はProって言うのがあるんですね。
例えば上記の一覧から「arrow」を検索するとFreeのものが116個でPro Onlyのものが600個。

Proだとバリエーションが増えるので、よりサイトのテイストにあったアイコンを選ぶことができる。
逆に選択肢が増えた分、選ぶのは大変になる。素人は手を出さない方が無難かも。

Octicons

我らがGitHubの提供するアイコン。
アイコンの一覧。

GitHubのデザインシステムで利用しているものを一般公開してくれているもの。

昔はウェブフォントも提供していたが、今はSVG画像のみの提供のようだ。いやPDFでも提供されているけど何に使うのだろう。

Font Awesomeほどの数はないが、逆にこれくらいの数の方が見渡しはいいかもしれない。
Octiconsで済むならOcticonsを使った方が楽そうだ。リロードのアイコンがないなどちょっと足りないかんじあるが。

Material Icons

マテリアルデザインのアイコン。
アイコンの一覧。

マテリアルデザインで作るならこれを選ぶのがいいだろう。

Ionicons

オープンソースのIonicons。
アイコンの一覧。

Octionsより多いけどまだ見渡しやすい数。Octiconsじゃ足りないけどFontAwesome行くほどでもないって時に。

実際使ってみると割とちょうどいいアイコンセットかもしれない。