Web上でアイコン画像を使う方法は幾つかあります。オーソドックスな画像に加えて、アイコンフォントを使うこともできます。画像はバイナリもあれば、SVGも利用できます。高解像度でもぼやけず、小さな画面でもつぶれないSVGは最近利用が広まっています。 さらに覚えておきたいアイコンがCSSアイコンです。SVG同様に拡大しても綺麗なのが特徴です。今回はそんなCSSアイコンを500種類以上集めたcss.ggを紹介します。

css.ggの使い方

一覧です。黒単色で描かれたアイコンになります。

左側にカテゴリが多数並んでいるのが分かります。

その中の一つです。

CSSも公開されています。これをコピーして貼り付けるだけでCSSアイコンとして利用できます。

css.ggに限りませんが、CSSアイコンの魅力としては外部リソースとして用意する必要がなく、HTMLのインラインですら利用できることでしょう。また、全部のアイコンを適用する必要もなく、使うものだけをピックアップして適用できるのも魅力です。線の色などのカスタマイズも自由に行えます。

css.ggはCSS製のオープンソース・ソフトウェア（MIT License）です。

500+ CSS Icons, Customizable, Retina Ready & API astrit/css.gg: 500+ CSS Icons. Customizable, Retina Ready with API & NPM