個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

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

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

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

記事を読む

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

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

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

記事を読む

レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+

サイトのコンテンツをリッチに見せるだけでなく、省スペースで数多くのコンテンツを効率的・効果的に表示で

記事を読む

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS shakeを使ってみた すでにお気づき

記事を読む

CSS3の色名147色(RGB、HEX16進カラーコード併記)

CSS3の色名147色(RGB、HEX16進カラーコード併記)

CSS3になって、色名についても大幅に選択肢が増えたのをご存知でしょうか。 私は知りませんでした。

記事を読む

オリジナルなアイコンフォントの作り方・使い方

いまさら聞けない無料でオリジナルなアイコンフォントを作る方法・利用する方法

アイコンフォントは便利だ、という声をあちこちで耳します。 遅ればせながら私も使ってみましたが、本当

記事を読む

コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider.com」

コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider」

イメージスライダーは限られたスペースに多くの視覚的情報を盛り込めるので、ショップなどでは非常によく利

記事を読む

UIのインスピレーションに最適な「UXPorn」

UIデザインのインスピレーションで溢れてる「UXPorn」

サイトやWEBサービスをつくるときにどのようなUIデザインにするかは悩むところですよね。 UIをつ

記事を読む

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

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

記事を読む

波打つようなクリックエフェクトを実装できる「Waves」

今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹

記事を読む