Line25

20 Free Pure CSS Icon Sets

Read the full post

Add to Flipboard Magazine.

Nowadays, using img tags to display icons on a site is a terrible web design technique. All designers and web developers have started to use pure CSS icon sets instead, which assures them that the icons will display consistently all over the website.

With CSS icons, adding animations is extremely easy. Animated CSS icons will help you catch the visitor’s attention and make your site stand out.

To help you start using CSS icons on your website designs instead of simply images, here are 20 free pure CSS icons sets you can download and start using today.

Here they are!

 Icono Pure CSS icons

One tag, one icon. These pure CSS icons are no font or SVG. You can load Icono from CDN, as well.

icono-_-pure-css-icons

CIKONSS

Cikonss are pure CSS, responsive and cross-browser usable. CSS2 was used, which leads to limited shapes (and icons) available.

cikonss

Pure CSS GUI icons

This set contains 84 GUI icons created from semantic HTML. Check them out!

pure-css-gui-icons-experimental

Fileicon.css

These are some cool pure CSS file icons which will help you create file icons with pure CSS codes (eg. doc, pdf, png, zip, etc).

fileicon-css-demo

One Div

One div shows you the potential of CSS3 through a library of single element logos. All icons displayed on the website are created  pure CSS with only one HTML div.

one-div-the-single-element-html_css-icon-database

Arrow Icons

These icons are responsive and animated. Also, they can be scaled to any size without losing quality.

pure-css3-arrow-icons

Font Awesome

Font Awesome gives you scalable icons that can be customized to any needed size, color, drop shadow, etc. only with CSS.

font-awesome-icons

Responsive Social Media Icons

These icons are simple, yet very customizable.  You can change both color and background with just CSS.

pure-css3-responsive-social-media-flat-icons-

Pure CSS Icons

These icons are pure CSS, with no use of images. You can customize these icons easily from the CSS code.

pure-css-icons-

Bootstrap Social Media Icons

This icon set is a combination of the Bootstrap framework and Font Awesome. They can be customized with CSS to modify the colors, shapes and effects.

bootstrap-social-icons_-pure-css-icons-and-buttons

CSS3 Monochrome Icon Set

This is a set of 85+ icons / glyphs created entirely in CSS3 that you can start using in your projects for free.

-css3-monochrome-icon-set

CSS3 Social Media Icons

Here are a few icons set with rollover effects, that come in various styles, colors, and size. All the icons are Font Awesome based.

css-social-media-icons-flat-color-

Social Media Icons

These are some experimental social media icons created using CSS and semantic HTML. They use progressive enhancement without the use of images or JavaScript.

pure-css-social-media-icons

Icons – Materialize

Here is a huge icons library with 740 Material Design Icons, ideal for Material-inspired web design projects.

icons-materialize

Metro Icon Font

The Metro Icon Font gives you scalable icons that can instantly be customized to any  size, color, drop shadow, and more, all with the power of CSS. It includes over 400 icons.

metro-icon-font

IcoMoon

IcoMoon is a package of vector icons and a web app for making custom icon fonts or SVG sprites.

icon-packs

Pictos

Pictos is a new set of interface icons, compatible with the Redux framework. The icons come in three variations: Line, Solid & Color.

pictos free pure CSS icons sets

Pure CSS Icons

This is how these icons look like on supported browsers – Firefox and Webkit.

pure-css-icons-

CSS Icons 2

These pure CSS Icons were created by Joshua Hibbert. These icons are very well crafted and you can start using them today.

pure-css-icons-

Super semantic multicolor font icons in pure CSS

Font icons are easy to implement, well supported, and infinitely scalable. Check these out!

super-semantic-multicolor-font-icons-in-pure-css-


  • 187
100 HD Blurred Backgrounds

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of 100 HD Blurred Backgrounds + bonus 10 realistic web shadows.

100 HD Blurred Backgrounds

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. You can follow Iggy on Twitter.

2 Comments

  1. Paul Clapp says:

    The Fileicon.css ones are nice, simple is always best.

  2. Matt says:

    Great article, I think Font Awesome are our favs at the moment, very versatile.

Leave a response