レスポンシブデザインが普及した流れから、近年多くのホームページで「アイコンフォント」を見かけるようになりました。

ちなみにアイコンフォントとは、その名のとおり、フォントに文字ではなくアイコンを割り当てたもののことです。一からアイコンを作成する手間が省けるということで、既に使っている方、ご興味をお持ちの方も多いのではないでしょうか。

様々なメリットを持つアイコンフォントですので、どんどん取り入れていきましょう。

そこで今回は、便利なアイコンフォントを配布しているホームページを複数ピックアップしてご紹介します。
アイコンフォントをお探しの方は、ぜひご覧ください。

※各ページの掲載数などの情報は、2017年2月12日時点でのものです。今後変更となる可能性があります
  

便利なアイコンフォントセット21個

1. Foundation Icon Fonts 3

Foundation Icon Fonts 3
http://zurb.com/playground/foundation-icon-fonts-3

CSSフレームワーク Foundationを提供していることでお馴染みの、ZURBのアイコンフォントです。

一般的なデザインを中心に、ページアイコン、矢印アイコン、人物アイコンなど、全283種類のアイコンを使うことができます。
Apple、behance、amazonといった有名企業・サービスのアイコンもあります。
  

2. Font Awesome

Font Awesome
http://fontawesome.io/icons/

アイコンフォントといえばココ!というくらい知名度の高いホームページです。全675種類ものデザインが揃っており、とにかく数が多いのが魅力的です。

ジャンルも多彩で、使用頻度の高いデザインはもちろん、アクセシビリティ、交通、ファイルタイプのアイコンも使用可能です。
  

3. Tonicons

Tonicons
https://www.tonicons.com/outline-icon-free-font/

象のアイコンが可愛いToniconsでは、アウトラインだけでデザインされたミニマルなアイコンが使用できます。
  

4. Entypo

Entypo
http://www.entypo.com/

こちらのページには、エレガントで綺麗な印象のアイコンフォントが揃っています。
個数はさほど多くはないものの、洗練されており、ぜひとも使いたいフォントです。

デザインとしては、矢印や人物、フォルダ、ベル、設定ボタン、再生ボタンといった、サービスでよく使うものが揃っています。
  

5. linea

linea
http://linea.io/

730個以上のアイコンフォントを公開しているホームページです。アウトラインだけデザインされたシンプルなアイコンを、カテゴリごとに掲載しています。

EC、音楽、天気、ソフトウェアなどのカテゴリがあり、全てのアイコンを一括ダウンロードすることもできますが、欲しいカテゴリのものだけダウンロードすることも可能です。デザインはあまり丸みがなく、すっきりとした印象です。
  

6. fontello

fontello
http://fontello.com/

fontelloは、使いたいアイコンを選択するとダウンロードできる、アイコンフォントジェネレーターです。サービス自体もわかりやすく美しいデザインで、フォントも高品質なものが豊富に揃っています。

デザイン数も多くありますで、好みのものが見つかるのではないでしょうか。
  

7. Typicons

Typicons
http://www.typicons.com/

Typiconsには、丸みの強い可愛い雰囲気のアイコンフォントが揃っています。ポップなデザインに合わせるなら、こちらがオススメです。

ページにはアイコンが一覧表示してありますが、下に検索窓があり、キーワードを入れると絞り込むことが可能です。
  

8. Ionicons

Ionicons
http://ionicons.com/

IoniconsのアイコンフォントはMITライセンスで提供しており、100%無料で使えます。
ベーシックなデザインが一通り揃っていますので、基本のアイコンが欲しい場合はこちらで充分に揃えることができます。

デザインは、ややはっきりとした黒色と丸みのない角で、しっかりとした印象です。
  

9. Simple Line Icons Webfont | GraphicBurger

fo9.png
http://graphicburger.com/simple-line-icons-webfont/

様々なクリエイティブ関連の素材を配布する、GraphicBurgerが掲載しているアイコンフォントです。
シンプルな線で表現した、ラインアイコン160個をダウンロードすることができます。
  

10. Feather

Feather
http://colebemis.com/feather/

Featherは、シンプルで美しいアイコンフォント130個のコレクションで、丸みと優しいグレーが洗練されていて素敵です。
Webフォント以外に、pdf、svg、csh形式を利用することができます。
  

11. Stroke Icons 7

Stroke Icons 7
http://themes-pixeden.com/font-demos/7-stroke/

様々なデザイン素材を配布している、pixedenのアイコンフォントで、全部で202個のデザインを掲載しています。
ページ右端のボタンをクリックすると背景色・アイコン色を変更することができ、黒い背景に配置した場合が確認できます。

デザインはアウトラインだけで表現しており、線も細いので、スタイリッシュな雰囲気があります。
  

12. Batch

Batch
http://adamwhitcroft.com/batch/

Batchは、343個のアイコンフォントをまとめたコレクションです。

線がかなり太く丸みのあるデザインで、今っぽい印象を与えます。数も多く、定番のものは揃っていますので、持っておくと便利なのではないでしょうか。形式は、eot,ttf,woff、png、psd、svgに対応しています。
  

13. Evil Icons

Evil Icons
http://evil-icons.io/

Evil Iconsは、シンプルでクリーンなデザインが素敵なアイコンフォントです。
セット内容は基本のデザインが揃っており、オールマイティーに使える見た目で便利です。

また、ホームページ自体が凝っており、時間が経つごとに色が変化していきます。
  

14. IcoMoon

IcoMoon
https://icomoon.io/app/#/select

IcoMoonは、先にご紹介したFontelloと同じような感覚で使えるアイコンフォントジェネレーターです。
公開してあるフォントデータを使用することができるほか、自作データをインポートしてアイコンフォントデータを作ることができます。
  

15. Themify Icons

Themify Icons
http://themify.me/themify-icons

Themify Iconsでは、320個以上のアイコンフォントを利用することができます。カテゴリはWebアプリレイアウトテキストエディタを含む全6個で、定番からちょっと変わった物も揃っています。

ブランドアイコンも豊富で、pinterest、Twitter、githubなど人気サービスが揃い、小さいサイズでも見やすく、美しく表示することができるデザインです。
  

16. WebHostingHub Glyphs

WebHostingHub Glyphs
http://www.webhostinghub.com/glyphs/

WebHostingHub Glyphsは、大量のアイコンフォントを掲載しているホームページです。
コミュニケーション、スポーツ&ゲームなど全14のカテゴリに分類してあるため、数が多くとも欲しいアイコンがすぐに見つかります。
豚の貯金箱、シュレッダー、人物の表情…と、他のサービスでは見つからないようなデザインも豊富です。

とにかく数が欲しい、他にないアイコンが必要、という方はぜひチェックしてみてはいかがでしょうか。
  

17. Freebie: Helium Icon Set (AI, EPS, SVG, Icon Font) | Codrops

Freebie: Helium Icon Set (AI, EPS, SVG, Icon Font) | Codrops
https://tympanus.net/codrops/2014/10/10/freebie-helium-icon-set/

Heliumは、100個以上の便利なアイコンをセットにしたもので、アイコンフォント以外にAI、EPS、SVG形式でも使うことができます。
デザインは風船の光沢をイメージしており、太い線と丸み、光沢が印象的です。

ほかのデザインにはない特徴的なデザインが目を引きます。
  

18. genericons

genericons
http://genericons.com/#close-alt

genericonsは、シンプルなホームページブログに適したアイコンフォントで、線は比較的太めですが、小さくても見やすいデザインです。
好きなデザインをクリックすると、コードが手軽にコピーできるのがとても便利です。
  

19. Octicons

Octicons
https://octicons.github.com/

こちらも、使いやすいデザインのアイコンフォントが揃うページです。
アイコンを選択すると個別ページリンクし、サイズを小さくした場合や、背景色が違う場合の表示をサンプルとして見ることができます。
  

20. flaticon

flaticon
http://www.flaticon.com/

魅力的なデザインの素材が多数揃うサービスで、アイコンフォントも使用可能です。
フリー素材サービスということもあって、使えるファイル形式が豊富です。
  

21. Ligature Symbols

Ligature Symbols
http://kudakurage.com/ligature_symbols/

国産のアイコンフォントです。
ほかのサービスにはない、gree、モバゲー、hatena、mixiといった国産ならではのアイコンも揃っています。
  

まとめ

いかがでしたでしょうか。アイコンフォントには、Retinaディスプレイでも綺麗に表示できたり、画像よりも軽量だったり、作る手間が省けたりとたくさんのメリットがあります。

また、セット内に含まれるものをまとめて使用することで、統一感のあるデザインにすることが可能です。

アイコンフォントといっても様々なものがありますので、選ぶもの次第で随分と雰囲気が変わってきます。用途に応じて、合いそうなデザインのものを選んでみてください。

なお、利用する際には必ず配布ページを確認し、利用条件などを守りましょう。