レスポンシブデザイン・マルチカラー化対応で汎用性の高いSVG形式アイコン「Iconic」

「モダンなウェブのためのインタラクティブアイコンを」ということで作られたのが「Iconic」です。アイコンはSVG形式でも提供されているのでウェブ上でも簡単に利用でき、なおかつ、CSSを使ってアイコンの一部分だけに色をつけたり、マルチカラーで統一したり、変形させたり、レスポンシブにサイズ変更したりということも可能です。

Iconic
https://useiconic.com/

Finally, Iconic is available! — In the kitchen at Iconic
http://blog.useiconic.com/finally-iconic-is-available/

Iconicはもともとは2013年9月から10月にかけてKickstarterで出資を募っていたプロジェクトで、1万5000ドル(約153万円)の出資募集に対してなんと9万2000ドル(約937万円)以上が集まりました。

SVG形式の特徴はXMLで記述されるということ。たとえばこのメールアイコンは画像ではなく……

ソースはこのようなテキストです。

このカメラのアイコンも同様です。パッと見た感じはレンズ部分だけ着色してあるアイコンのように見えますが……

パーツが属性分けされているので、CSSで「.iconic-camera-sir-body」というパラメータを付与すると、ボディ部分のみを選択した状態に。

同じように、レンズのリリースボタンだけを選ぶ、ということもできます。わざわざ画像を編集する必要はありません。

マルチカラーもCSSで対応。このようなカラフルなアイコンを……

たとえば赤で統一する、ということも記述1つで済みます。

パネルスタイルで重宝しそうな形にもできます。

この矢印アイコンは8方向どちらにでも向けることができ、矢尻の部分も変えられます。例えば「data-direction="top"」「data-head="fill"」という2つのパラメータを与えると、方向は上向き、矢尻は二等辺三角形というアイコンに。

この部分を「data-diretion="bottom-right"」「data-head="fill-angled"」に変えると、矢印の方向は右下向きに、矢尻も少し三角形の底辺が斜めになったものになりました。

同様にパラメータを変えるだけで、矢印の向きと矢尻の形をいろいろと変えられます。

アイコンには3つの大きさが用意されています。これは左から16×16ピクセルに最適なSmall、32×32ピクセルに向いたMedium、128×128ピクセル向きのLargeを同サイズとして並べたところ。SVG形式はベクター形式共通の特徴として拡大・縮小しても劣化しないので、どれを使おうと変わりないような気がしますが……

実サイズにしてみると、線の太さによってちょうどバランスの取れたサイズに調整されていたことがわかります。

さらに、レスポンシブルデザインに使ったときにはブラウザのサイズによって変形が可能。

じわじわとブラウザの幅を狭めていくと……

あるところでディテールが粗くなりました。

さらに縮めると、マイクの穴がなくなりました。単純に画像を拡大・縮小しているのではなく、3つのサイズを使い分けられるということです。

タグとして記述する場合、「iconic.js」を使えば、imgタグ内に「iconic」というクラスを追加するだけと、これまた簡単。

アイコンセット一覧はこんな感じ、アイコンの種類は1617。

ファイル形式はSVGのほか、各種ウェブフォント系(WOFF・TTF・OTF・EOT)・PNG・WebPがあります。PNGやWebPはレスポンシブ・マルチカラーなどに非対応だったりするので注意が必要です。

Iconicは、個人用途や非商用なら49ドル(約5000円)、その他商用を含む全ての用途については129ドル(約1万3200円)で利用が可能です。

使う前に一度試しておきたい、という人向けには無料お試し版があるほか、223個のアイコンがセットになってMITライセンスによって無料で使える「Open Iconic」が提供されています。

Open Iconic, a free and open icon set
https://useiconic.com/open/