TrueType Fontが配布されているアイコンフォントまとめ

by moongift : 2016/10/25

Webサービス内でアイコンを挿入する際に、アイコンフォントが使われることの多くなってきました。アイコンフォントとはWebFontのアイコン版のことです。

アイコンフォントを使用することにより、

ベースラインを合わせるのが容易
CSSで拡大縮小・色の変更を容易にできる
iPhoneなどの解像度の高いデバイスでもぼやけることなく表示可能

といったメリットがあります。

そんなアイコンフォントには様々な種類があります。今回は巷に出回っているアイコンフォントについて、特にTrueType Fontが配布されているものを網羅的に紹介したいと思います。なお、紹介したアイコンフォントに関する情報はブログ執筆時のものです。最新の情報についてはリンクしてあるページからご確認ください。

Font Awsome

数
634種類
種類
Webアプリケーション
アクセシビリティ
手
交通機関
性別
ファイルタイプ
回転系
フォームコントローラ
支払系
グラフ系
通貨
エディタ系
方向系
プレイヤー系
ブランド
医療系
ライセンス
原則はMIT License。詳細はこちら

もっとも知名度が高いといっても差し支えないアイコンフォントです。一般的なアイコンからブランド、医療系まで634種類と様々なバリエーションがあります。

フォントの挿入方法は、

<i class="fa fa-camera-retro"></i>

というスタンダードな記載方法で挿入できます。

またサイズ変更は、

<i class="fa fa-camera-retro fa-lg"></i>

とクラスにfa-lgを加えるだけでCSSを触ることなく簡単に変更できます。

そしてダウンロードせずともCDNで利用できるのも魅力です。

アイコンの数、柔軟な変更機能やその知名度や日本語のドキュメントも豊富なことから、使い慣れてない方ならばFont Awsomeがオススメです。

WebHostingHub Glyphs

数
1000種類以上
種類
ビジネス
コミュニケーション
PCおよび携帯
デザイン・ライティング
開発
エンターテイメント
食べ物
ホスティング
メニュー
マルチメディア
スポーツ
ゲーム
シンボル
時間
場所関係
その他
ライセンス
Creative Commons Attribution 3.0

数の面で圧倒的に他に勝っているアイコンフォントです。公式サイトの使い方のページによると、Bootstrapで使うことを勧めています。

<i class="icon-filter"></i>

という風に記載するだけで簡単に挿入できます。Bootstrapを用いたページを作成する際にはお勧めです。

Batch.

数
343種類
ライセンス
2次販売などしなければ自由に使って問題ない

数は厳選されていますので、実際のアイコンを確認しつつ作成するページのイメージに合っているか確認する必要があるでしょう。アイコンは角のない優しいデザインとなっています。

Ligature Symbols

数
239種類
種類
カテゴリーなしか、ロゴ
ライセンス
the SIL Open Font License

製作者がsymbolsetに影響を受けて、Ligature機能を使ったSymbol Web Fontを自作しようという試みの元に作成されたフォントです。意味ある合字（リガチャ）で表示できるように設計してあります。そのため、意味不明な文字や空の文字を使うことで生じるSEO面でのデメリットを回避することができます。作者が日本人ということもあって日本語の環境に対応しています。日本語のドキュメントがあるので海外製のアイコンフォンを避けていた方にオススメです。

typicons

数
336種類
ライセンス
the SIL Open Font License

角のない可愛らしいアイコンが特徴的です。

<span class="typcn typcn-arrow-left"></span>

という風に、クラス名の頭に「typcn-」を指定することでアイコンを挿入することができます。線が太めの分かりやすいデザインなので、小さめな表示で多数のアイコンを使いたい時に使えそうです。

Foundation Icon Fonts 3

数
283種類
種類
一般的
ページ系
矢印
人型
デバイス
エディタ
メディア系
コーマス系
アクセシビリティ
ソーシャル・ブランド系
その他
ライセンス
MIT License

デザインフレームワークの有名なものの一つにFoundationがありますが、Foundationを提供しているZURBによるアイコンフォントになります。

数は他に比べると多くないですが、ソーシャルネットワーク系のブランドアイコンが多いのが特徴的です。Foundationを使う際にはFoundation Icon Fonts 3を使用すると良いでしょう。

Genericons

数
145種類
ライセンス
GPL

WordPressのデフォルトテンプレート「TwentyFourteen」にも使用されているアイコンフォントです。数は145種類とあまり多くないですが、WordPressのデフォルトテンプレート内で使用されていることもあり、TwentyFourteenを使って統一感のあるページを作りたいならば、Genericonsがお勧めです。