スマートフォンはどんどん高解像度化しており、画像リソースはどんどん大きくなっています。それだけアプリが肥大化してしまうと利用するユーザもダウンロード待ちに疲れてしまうでしょう。
そこで代替手段になりえるのがWeb FontやSVGアイコン、そしてCSSフォントです。ベクターベースのアイコンであればどれだけ拡大しても綺麗ですし、一種類用意すれば全てのデバイスで使えます。特にWeb技術であればハイブリッドアプリ開発に使えるMonacaとの親和性も高いのでお勧めです。CSSアイコンはCSS3を使うことでアニメーションもサポートしているものもあります。
今回はそんなWeb FontやSVGアイコン、CSSアイコンを配布しているサイトを紹介します。
Googleの提唱しているマテリアルデザインに使えるWeb Fontで、SVGフォーマットでも提供されています。単色になっていますので、CSSでカラー指定を行えるようになっています。
Material icons guide - Google design
カラフルなアイコンをSVGフォーマットで提供しています。アイコンは実に300種類を越えています。
Flat Color Icons | Icons8
CSS3で作られており、アニメーションもサポートしています。旗や決済用のアイコンも提供されています。
littlebox
PNG画像は90pxまでですが、SVGやEPSファイルがありますので自由にサイズを変更してアイコンを出力できます。ただし全てが1ファイルになっていますのでスプライトしたり、別ファイルに切り出す必要がありそうです。
mariuszostrowski/subway
CSSで作られたアイコンです。単色ですが汎用的に色々な場面で使えそうです。ソーシャルサービス系のアイコンも提供されています。
icono | Pure CSS icons
主にWebサービス、特に各種フレームワークと組み合わせて使うことが想定されているSVGアイコンパックです。線が細いのが特徴です。ローディング系のアニメーションも用意されています。
Evil Icons
マテリアルデザイン用のWeb Fontで、数百種類のパターンが用意されています。アプリ開発で使うととても捗りそうです。
Material Design Fonticons
CSSで作られたアイコンです。特徴はアイコンがアニメーションしながら別なアイコンに変化するのをサポートしていることです。ユーザアクションでアイコンを変える時に役立ちそうです。
Marka - Beautiful transformable icons
pplogというサービスの中で使われているWeb Fontアイコンになります。使いどころは限定的になるかも知れませんが、こうやってまとめておくことで再利用性が良くなるメリットがありそうです。
inuicon
CSSアニメーションによるローディングアイコンだけを提供しています。わざわざアニメーションGIFを用意することなく、簡単にローディングアイコンが実現します。
Loaders Kit - By Viduthalai
とても数多くのSVGアイコンを提供しています。主にWeb向けではありますが、MonacaのようなWebViewを使っている場合にも使えて便利ですね。
iconmelon
SVGのアイコンセットを提供しています。ソーシャルサービスもあります。はてなブックマークやGitHub、Gruntのアイコンもあり、主に技術者向けかも知れません。
Drawic
Bootstrapと親和性の高い有名なWebFontです。最新の4.3.0では519アイコンが提供されています。これだけあれば大抵の用途に事足りそうです。
Font Awesome, the iconic font and CSS toolkit
今はフラットデザインが流行なのでアイコンは強調しすぎずシンプルな1色ないし2色程度のものが使われます。そのためWebFont、SVG、CSSアイコンとはとても相性が良いのではないでしょうか。
主にWebサイト向けに使われますが、ハイブリッドアプリの中、例えばタブバーであったりメニューなどで使うとアプリがとても分かりやすくなるのではないでしょうか。ぜひお使いください！
