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ファイルがダウンロードできます。 CSSアイコン500 CSS Iconsのダウンロード マークアップアイコンをクリックでそのアイコンのクラスが表示されます。自動ではコピーできないので、選択してコピーする必要があります。 CSSアイコンCSS Iconsのクラス

複数アイコンでの利用

複数のアイコンを利用したい場合は、チェックアイコンをクリックして複数選択します。 CSSアイコンCSS Iconsで複数のアイコンを選択 そしたら右上の「Icons selected」をクリックします。 CSS IconsでIcons selectedをクリック 後はタグをコピーして使うか、直接リンク先のURLにアクセスしてデータをコピーして使います。 CSS Iconsのタグをコピー

カスタマイズ

色や大きさをカスタマイズしてからダウンロードもできます。 CSS Iconsの大きさや色をカスタマイズ 関連記事

あわせて読みたい記事