CSSのみで作られたアイコンはしばしば見かけることはありますが、それがある程度まとまったものがあったら便利だなと
関連 無料で色編集もできる！フリーのアイコン素材サイトOrion Icon Library
目次
500+ CSS Iconsとは？
500+ CSS Iconsは、CSSのみで作成されたアイコンです。CSSのみで作成されているため軽量で、画面の解像度に依存することがないため綺麗に表示できます。色やサイズを調整することはもちろん、なんと言ってもコピペで使えるのが便利です。
記事執筆時点では、507個のアイコンがMTIライセンスで配布されています。ありがたいですね。
サイトはこちらになります。
https://css.gg/
500+ CSS Iconsの使い方
ざっとですが、使い方を見ていきましょう。
こちらのページにアクセスします。
https://css.gg/app
単独アイコンでの使用
単独アイコンで使用したい場合には、使用したいアイコンをマウスオーバーしてダウンロードアイコンをクリックでCSSファイルがダウンロードできます。
マークアップアイコンをクリックでそのアイコンのクラスが表示されます。自動ではコピーできないので、選択してコピーする必要があります。
複数アイコンでの利用
複数のアイコンを利用したい場合は、チェックアイコンをクリックして複数選択します。
そしたら右上の「Icons selected」をクリックします。
後はタグをコピーして使うか、直接リンク先のURLにアクセスしてデータをコピーして使います。
カスタマイズ
色や大きさをカスタマイズしてからダウンロードもできます。
関連記事
