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

CSSだけ作られたアイコン(ピュアアイコン)をご紹介します。
アイコン制作手法も様変わりを見せており、CSSだけ作成されたピュアCSSアイコンが次々に公開されています。
CSSであれば利用するのもとっても楽!
古いブラウザによって制限があるのは確かですが、レスポンシブへの対応や色の変更など、利便性を考えれば使わない手はないと思います。
今後も、ピュアCSSアイコンはどんどん増えていくのではないでしょうか。
そこで今回は、CSSだけで制作されたアイコンのうち無料のものをコレクションしてみました。
CSSでつくられたアイコンを利用してみたいという方のご参考になれば幸いです。
<>ne div (One Div)
アニメーションエフェクトが施されたアイコンなどがあるほか、対応するブラウザ表示なされているなど、配慮も細やかです。
<>ne div (One Div)
Icono Pure CSS icons
アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」という記事でもご紹介したCSSアイコンセットサービスです。
Icono Pure CSS icons
CSS3 Monochrome Icons
現在までに85以上のアイコンが公開されています。
アイコンは少しづつ増えていくようです。
CSS3 Monochrome Icons
CIKONSS
うれしいことに、IEフレンドリーなアイコンだそうです。
CIKONSS
Fileicon.css
ファイルをテーマにしたアイコンセット。
Fileicon.css
Arrow Icons
矢印をテーマにしたアイコン。
Arrow Icons
Peculiar
現在までに45のアイコンが公開されています。
Peculiar
GUI Icons
84のGUIアイコンが揃っています。
GUI Icons
Licon
LESSやSASSにも対応したCSSアイコン。
Licon
Pure CSS3 Responsive Social Media Flat Icons
ソーシャル系をテーマにしたアイコンセット。
Pure CSS3 Responsive Social Media Flat Icons
Bootstrap Social Icons: Pure CSS Icons and Buttons
Bootstrap用のソーシャルアイコン。
ボタンも含まれています。
Bootstrap Social Icons: Pure CSS Icons and Buttons
CSS3 Social Media Icons
こちらもソーシャル系のアイコンセットです。
CSS3 Social Media Icons
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」
ズボラな自分に最適なCSSグラデーション作成ツールがあったので、ご紹介します。 グラデーションを自
-
-
セキュリティー/プライバシーにすぐれたブラウザ6選
IE、Chrome、Safari、Firefoxといったメジャーブラウザ以外にもたくさんのブラウザが
-
-
クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」
CSSだけで作られた無料のボタンがコレクションされている便利なサイトをご紹介します。 Photos
-
-
今この瞬間もサイバー攻撃が行われている!DDoS攻撃を可視化する「Digital Attack Map」に戦慄
戦慄を覚えるマップです。 サービス自体は1年前に公開されていましたが、海外で再び注目され、私自身が
-
-
コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider」
イメージスライダーは限られたスペースに多くの視覚的情報を盛り込めるので、ショップなどでは非常によく利
-
-
2014年登場のCSSツール・サービスはこれ!2014ベストCSSツール・サービス50
2014年に登場したCSS関係のツール、サービスをご紹介します。 CSS3の登場で、CSS関連のツ
-
-
無料のファイル転送ツールの決定版?容量無制限・件数無制限・ハイスピードの「Infinit」
ファイルを転送するとき、どんなツールを利用していますか? DropBoxやFireStorageな
-
-
CSSアニメーションを簡単・思いのままに作成できてしまう「Bounce.js」
最近のサイトではCSSアニメーションを使って、ユーザーに効果的な見せ方をしているサイトも増えてきまし
-
-
レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」
Apple Watchがいよいよ発売になります。 ところで、あなたのレスポンシブ対応済みのサイトは
-
-
Gmailを無料で便利に!「開封確認」「スケジュール送信」ができる機能拡張「myHero Toolbox」
Gmailを利用しています。 本当に便利なGmailですが、できるなら「既読通知/開封確認」「スケ