目次
CSSのみアイコンのメリット
ウェブサイトを作るときにアイコンを表示するための方法はたくさんあります。 その中でもCSSとSVGのアイコンのメリットは多く、アイコンを表示するベストな方法ではないかと思います。
CSSアイコンやSVGアイコンのメリット
- 拡大しても美しい
- CSSでサイズや色などの装飾ができる
- 外部ライブラリなどに頼らない
- 軽い
デメリットとしては、サイト全体のアイコンデザインの統一性を出しにくいことかと思います。 それでもメリットのほうが強いと思うのでアイコンはCSSやSVGで作りたいです。
サンプルコード集
CSSのみのアイコンのサンプルコードを別ページにまとめました。
コピペで使える参考サイト
基本は下のサイト 700+ CSS Icons からCSSソースコードをコピーしてきて、疑似要素などに組み込むと使いやすいです。
css.gg
700+ CSS Icons, Customizable, Retina Ready & API
Pure CSS icons library, Customizable & Retina-Ready built 100% in pure CSS, SVG, SVG Sprite, styled-components, Figma and Adobe XD. Easy integration: Embed, NPM…
700+ CSS Iconsの使い方は以下の記事にまとめています。
あわせて読みたい
700種類以上のCSSだけのアイコンとSVGもコピペできるサイト 700+ CSS Icons の使い方
【700+ CSS Iconsとは】 CSSだけで作るアイコンのソースを、無料でコピーできるサイト 700種類以上のCSSのみで作られたアイコンのCSSコードを無料提供しているサイトで…
