個人的に役立ったデザイン素材や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サイトの背景に幾何学的なポリゴンアニメーションを簡単に実装できる「particles.js」

WEBサイトの背景に幾何学的なポリゴンアニメーションを簡単に実装できる「particles.js」

流行っているのかどうか定かではありませんが、海外のサイトなどで最近よく見かける幾何学的なポリゴンアニ

記事を読む

ブラウザの閲覧履歴をファビコンで一覧表示するChrome機能拡張

もはやアート?ブラウザの閲覧履歴をファビコンで一覧表示する「Iconic History」

ブラウザの閲覧履歴をファビコンで一覧表示するChromeの機能拡張「Iconic History」を

記事を読む

レスポンシブWEBデザインの確認に最適!スマホ・タブレットでの表示を一度に確認できる「Responsinator」

レスポンシブWEBデザインの確認に最適!スマホ・タブレットでの表示を一度に確認できる「Responsinator」

レスポンシブWEBデザインの確認に最適なツールをご紹介します。 このツールを使えば、スマホやタブレ

記事を読む

写真/画像に3DCGポリゴン風エフェクトをかけてくれる無料/フリージェネレーター5つ

背景に使いたい!美しくカラフルなトライアングルメッシュ画像をSVGとして作成できるjsライブラリー「Trianglify」

最近よく見かける背景画像といえば、美しいボケ味の効いた画像やカラフルなピクセルパターンですが、美しく

記事を読む

無料ホームページなのにプロ並みのデザイン&高機能サイトが瞬時に作れるWix!感想と使い方をご紹介

無料ホームページなのにプロ並みのデザイン&高機能サイトが瞬時に作れるWix!感想と使い方

Wixという無料ホームページがつくれるサービスをご存知でしょうか。 かなり以前からあったサービスで

記事を読む

背景画像をフルスクリーン&レスポンシブ対応にする方法

背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります

記事を読む

Joomla!の無料テンプレート123 レスポンシブWEBデザイン対応もあり

Joomla!(ジュームラ)は高機能で使いやすいと評判のCMSです。 ドメイン、サーバー込みで無料

記事を読む

無料でオリジナルなクイズが作れてしまうツール「QuizGenerator」

無料でオリジナルなクイズが作成できるツール「QuizGenerator」

無料でオリジナルなクイズが、簡単に作成できるツールをご紹介します。 作れるクイズは選択式、穴埋め、

記事を読む

全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121

2013年も気がつけば、もうあとすこしとなりました。 そんななか、無料で利用できるフリーのレスポン

記事を読む

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法をご紹介します。 リボン関連に

記事を読む