個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+

CSSだけ作られたアイコン(ピュアアイコン)をご紹介します。
アイコン制作手法も様変わりを見せており、CSSだけ作成されたピュアCSSアイコンが次々に公開されています。
CSSであれば利用するのもとっても楽!
古いブラウザによって制限があるのは確かですが、レスポンシブへの対応や色の変更など、利便性を考えれば使わない手はないと思います。
今後も、ピュアCSSアイコンはどんどん増えていくのではないでしょうか。
そこで今回は、CSSだけで制作されたアイコンのうち無料のものをコレクションしてみました。
CSSでつくられたアイコンを利用してみたいという方のご参考になれば幸いです。

<>ne div (One Div)

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+
アニメーションエフェクトが施されたアイコンなどがあるほか、対応するブラウザ表示なされているなど、配慮も細やかです。
<>ne div (One Div)

Icono Pure CSS icons

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+
アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」という記事でもご紹介したCSSアイコンセットサービスです。
Icono Pure CSS icons

CSS3 Monochrome Icons

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+
現在までに85以上のアイコンが公開されています。
アイコンは少しづつ増えていくようです。
CSS3 Monochrome Icons

CIKONSS

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+
うれしいことに、IEフレンドリーなアイコンだそうです。
CIKONSS

Fileicon.css

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+
ファイルをテーマにしたアイコンセット。
Fileicon.css

Arrow Icons

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+
矢印をテーマにしたアイコン。
Arrow Icons

Peculiar

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+
現在までに45のアイコンが公開されています。
Peculiar

GUI Icons

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+
84のGUIアイコンが揃っています。
GUI Icons

Licon

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+
LESSやSASSにも対応したCSSアイコン。
Licon

Pure CSS3 Responsive Social Media Flat Icons

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+
ソーシャル系をテーマにしたアイコンセット。
Pure CSS3 Responsive Social Media Flat Icons

Bootstrap Social Icons: Pure CSS Icons and Buttons

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+
Bootstrap用のソーシャルアイコン。
ボタンも含まれています。
Bootstrap Social Icons: Pure CSS Icons and Buttons

CSS3 Social Media Icons

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+
こちらもソーシャル系のアイコンセットです。
CSS3 Social Media Icons

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 2
  • 8

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ

記事を読む

月額約400円でWindowsリモートデスクトップが使えるVirmach:MT4もサクサク

Windowsリモートデスクトップが月額400円のVirmach:MT4もサクサクだ!

普段はMacをメインに使っており、Windowsが必要なときにはBootCampでWindowsを使

記事を読む

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

CSSだけでつくられたアイコンセットのご紹介です。 近年のアイコンというと、アイコンフォントかSV

記事を読む

よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル

よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル

初心者のためのCSS3 transition(トランジション)とtransform(トランスフォーム

記事を読む

WEBサイトの必要な部分だけを印刷したいならコレが超便利!ブックマークレット「The Printliminator」

WEBサイトの必要な部分だけを印刷したいならコレが超便利!ブックマークレット「The Printliminator」

WEBサイトの必要な部分だけを印刷したい場合に大変便利なブックマークレットをご紹介。 このブックマ

記事を読む

文字をカラフルに!CSSとjQueryでテキストを2〜3色で表現してしまう「HalfStyle」

CSS3やWEBフォントの登場でテキスト回りの装飾がお手軽になってきましたが、1文字をだけを2〜3色

記事を読む

使える!2015年時点で最高の無料HTMLフリーテンプレート50+

使える!2015年時点で最高の無料レスポンシブ用フリーテンプレート50+

2015年時点で最高の無料レスポンシブ用フリーテンプレートをご紹介します。 今回ご紹介する無料のH

記事を読む

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

簡単・無料で利用できるこポリゴン画像生成ジェネレーターをご紹介。 背景画像などによく使われているポ

記事を読む

初心者のためのCSSアニメーションチュートリアル

よくわかる 初心者のためのCSSアニメーションチュートリアル

初心者のためのCSSアニメーションチュートリアルです。 海外の有名ブログでわかりやすいチュートリア

記事を読む

無料のファイル転送ツールの決定版?容量無制限・件数無制限・ハイスピードの「Infinit」

ファイルを転送するとき、どんなツールを利用していますか? DropBoxやFireStorageな

記事を読む