Webデザイナーを悩ませる根深い問題の１つに、アイコンデザインがあります。
アイコンを画像のスライスで作成していくのがいいのか、Font AwesomeのようにWebフォントを利用したほうがいいのか、それともCSSスプライトで表示でしたほうがいいのか。
方法論はたくさんありますが、それぞれにメリットとデメリットを含んでいるため、どれが一番よい解決策なのか迷われている方も多いのではないでしょうか。

そこで注目を浴びているのが、SVGを使ったアイコンの表示です。
PNGやGIFで作ったアイコンと違って、SVGアイコンは高解像度でもギザギザにならず、着色も簡単です。
さらに、SVGアイコンを一番簡単に表示させる方法があります。

今回は、SVGアイコンを一番簡単に表示できる「Icongram」の使い方をご紹介します。
4,000以上のアイコンを簡単に表示することができるので、ぜひ取り入れてみてはいかがでしょうか。

SVGアイコンを一番簡単に表示できる「Icongram」

ig.jpg
スクリーンショット：2017年10月

Icongramは、SVGアイコンを非常に簡単に表示させることができるWebサービスです。
アイコン配布サイトの老舗であるIconfinder(アイコンファインダー)のスポンサーも受けており、2017年10月執筆時点で4,000以上のアイコンの中から選んで自分のホームページに簡単に表示することができます。

簡単すぎてごめんなさい！Icongramの使い方とは？

creative.jpeg
画像引用元：pexels.com

Icongramの使い方は、非常に簡単です。
Icongramで用意されている後述の7つのアイコンライブラリーの中からアイコンを選び、それをAPIとして使えるURLにして、IMGタグで呼び出すだけです。

APIのエンドポイントのURLは以下の通りです。

https://icongr.am/{library name}/{icon}.svg?[options]

上記で示されている変数は、以下の通りです。

  • library name：ライブラリの名前。clarity, entypo, feather, fontawesome, material, octicons, simpleの7つの中から選びます。
  • icon：アイコン名を指定します。
  • options：sizeで一辺の大きさをピクセル単位で指定、colorでアイコンの色を16進数の6文字で指定、coloredはsimpleライブラリでのみオリジナルの色をつけるかどうかをboolean値で指定することができます。

例えば、Font Awesomeのライブラリを使って、水色のアイコンを表示したい場合には以下のようにします。

https://icongr.am/fontawesome/heart.svg?color=44dddd

また、Simpleライブラリはオリジナルの色を塗るのに対応しているので、coloredオプションを指定することができます。

https://icongr.am/simple/youtube.svg?colored

もっともシンプルなのは、これらのURLをIMGタグで指定することですが、background-imageでURLを指定しても表示することができます。

7種類のユニークなライブラリ

library.jpeg
画像引用元：pexels.com

Icongramの特徴的なところの一つとして、新しいアイコンライブラリを自前で作るのではなく、人気のアイコンライブラリをAPI経由で利用できるようにしたところです。

かつてから人気の*「Font Awesome」や「Material」*など、ユニークなライブラリが7種類使えます。
また、今後もフォントライブラリは追加される予定になっています。

1. Clarity

1.png
スクリーンショット：2017年10月

Clarityは、Project Clarityと呼ばれるCSSとJavaScriptのコンポーネントの中に搭載されていたアイコンライブラリです。
細めのラインで描かれたリニア風のアイコンが多く、シンプルで近未来的な印象を与えたい時に活躍しそうです。

Clarityのアイコンをすべて見る

2. Entypo

2.png
スクリーンショット：2017年10月

Entypoはダニエル・ブルース氏によって作成された400以上のアイコンです。

Clarifyとは違って、「塗り」のあるアイコンが特徴的なので、大胆で存在感を出したいアプリなどで活用できるでしょう。

Entypoのアイコンをすべて見る

3. Feather

3.png
スクリーンショット：2017年10月

FeatherはClarifyよりも線に太みのある、堅実でまじめな印象のあるアイコンセットです。

四角形を描く時にもやや丸みを帯びたかたちになっており、堅実さのなかにも柔らかさが垣間見られます。

Featherのアイコンをすべて見る

4. Font Awesome

4.png
スクリーンショット：2017年10月

Font Awesomeはアイコンフォントの老舗で、AppleからBitcoin、WordPressからWhatsapp、YouTubeまで、さまざまなアイコンが揃っています。

使えるアイコンの種類は800弱にも及び、痒いところに手がとどくオールラウンドなアイコンライブラリとして評価されています。

Font Awesomeのアイコンをすべて見る

5. Material

5.png
スクリーンショット：2017年10月

Materialはその名の通りマテリアルデザインで使われるアイコンセットです。

のっぺりとした平べったい印象の塗りアイコンが多いですが、その素朴さがかえってわかりやすさや可視性をあげています。
アイコンの数も最も多い2000弱に及び、たいていのアイコンであればこのアイコンセットを参照すれば見つかるほどです。

Materialのアイコンをすべて見る

6. Octicon

6.png
スクリーンショット：2017年10月

Octiconは、Feather以上に剛健で重層的な厚みを持った、GitHubから生まれたアイコンセットです。
塗りのアイコンとラインのみのアイコンはおおよそ1：1の割合のようです。

GitHubから生まれただけに、データベースやダッシュボードなどの各種アイコンがしっかり揃っています。

Octiconsのアイコンをすべて見る

7. Simple

7.png
スクリーンショット：2017年10月

Simpleのアイコンは有名なWebサービスのアイコンだけを集めたアイコンセットです。
特徴的なのは、他のアイコンと違い、各Webサービスのテーマカラーをデフォルト色として指定することができます。

SublimeTextやInkscape、EthereumやWii、PlayStation 4やBaidu、Microsoft Wordといった他のフォントライブラリにはないアイコンも多く収録されています。ブランドのカラーは本家Simple Iconsのホームページで確認することもできます。

Simpleのアイコンをすべてみる

まとめ

一つひとつのSVGデータをダウンロードする必要もなく、そのまま画像のように簡単に利用できる点が非常に便利です。
10月には6つのライブラリにClarityが加わり、今後もますます多くのアイコンが使えるようになる予定です。

ホームページのソーシャルボタンなど、さまざまな用途で使えそうです。
画像の差し替えも簡単なので、ぜひ気軽に利用してみましょう。