これは便利!コピペで使えるCSSのみで作られたアイコン500+ CSS Icons

これは便利!コピペで使えるCSSのみで作られたアイコン500+ CSS Icons

  • このエントリーをはてなブックマークに追加

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の大きさや色をカスタマイズ

関連記事

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

SONICMOOVでは、Webデザイナー、コーダーの経験を経て、Webディレクターに。様々なWeb制作・アプリ開発に関わり、その後、便利な用務員に。

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation