Skip to content

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

by : 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.

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

Ligature Symbols

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

typicons

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

<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がお勧めです。

Simple Line Icons Webfont


  • 160種類
  • ライセンス
    個人および商用で利用可

名前の通りシンプルな線で描かれたアイコンフォントです。シンプルなので小さな画面から大きな画面(作成者によると1660pxまで)問題なく使用できます。洗練されたシンプルなアイコンを使いたい場合は、こちらと次のStroke Gap Iconがお勧めです。

Stroke Gap Icon


  • 200種類
  • ライセンス
    個人および商用で利用可

こちらもシンプルなアイコンです。Simple Line Icons Webfontと比べると食べ物系のアイコンがやや多いのが特徴です。

42 Weather Icons


  • 42種類
  • ライセンス
    個人および商用で利用可

名前の通り42種類の天気に特化したアイコンです。次に紹介するClimaconsと比較しながら、天気に関するサービスで使われることをお勧めします。

Climacons


  • 75種類
  • ライセンス
    個人・商用利用可

こちらも天気関係に特化したアイコンです。42 Weather Iconsアイコンと比較するとやや数が多く線が太いのが特徴的です。

Themify Icons


  • 320種類
  • 種類
    矢印・方向
    ウェブアプリ
    コントローラ系
    エディタ系
    レイアウト系
    ブランド
  • ライセンス
    GPL

AppleのiOS7のアイコンに影響を受けて作成されたアイコンフォントです。以下のように指定します。

<span class="ti-download"></span>

WordPressの公式プラグインになっていること、IE7対応な点が魅力です。

Linea Free Iconset


  • 730種類以上
  • 種類
    基本
    音楽
    コマース
    ソフトウェア
    推敲系
    矢印
    天気
  • ライセンス
    Creative Commons

シンプルなアイコンです。線で描かれたシンプルなアイコンが各種、満遍なく充実しているところが特徴です。

Feather


  • 130種類
  • ライセンス
    MIT License

UX/UIデザイナーのCole Bemisが作ったシンプルなアイコンです。なお、ダウンロードの際にはメールアドレスの登録が必要です。

Freebie


  • 130種類
  • ライセンス
    MIT License

適度に書き込まれた線描写が特徴的です。昨今はやりのフラットデザインとは少しだけ雰囲気の違ったデザインとなっています。


今回はアイコンフォントについて紹介しました。アイコンはテキストを減らし、ユーザビリティを向上させます(あまり使いすぎるとよくありませんが)最適なウェブフォントを選び、より使いやすいページを作成してください。

hifive – HTML5企業Webシステムのための開発プラットフォーム

banner_02

From → まとめ

現在コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。