アイコンセットはいくらあっても便利です。昔は小さな画像の集まり、その後はCSSスプライト、そして最近ではアイコンフォントを使うパターンが多くなっています。アイコンフォントは便利ですが、読み込みに失敗するとトウフだらけになってしまうのが難点です。 そこで使ってみたいのがCSS ICONです。ピュアなCSSだけで作られたアイコンセットです。

CSS ICONの使い方

一例です。フラット、かつ細い線で書かれたフォントになります。

使い方です。色などは自由に変更できます。

白黒反転版もあります。

CSS ICONはアイコンフォントと同様に線の色を変えられるのが利点と言えそうです。大きさも自由ですし、縦横のサイズを変えることだってできます。回転させたりすることもできますし、CSSならでは他の技術と組み合わせた使い方もできるでしょう。

CSS ICONはCSS製のオープンソース・ソフトウェア(Creative Commons)です。

CSS ICON – project by Wenting Zhang wentin/cssicon: icon set made with pure css code, no dependencies, “grab and go” icons