Every web designer should be able to create great website with good user interface design best and good visuals for the site. Pure CSS icons will allow you to catch the visitor’s attention and beautify your website.

In the previous post, we have CSS button for free. In the today’s post, we present 10 pure CSS icons for your next project.

All of these buttons and icons have actually clean and modern designs, some of them include free PSD files.

See Also: 40+ Free Coming Soon Page Web Templates

15Transformicons Animated SVG icons

transformicons_animated_svg_icons

Transformicons is a set of free CSS animated icons, symbols and buttons using SVG and CSS. Inspired by the content from Sara Soueidan therefore the work of Bennett Feely.

DOWNLOAD

14Weather animated icons CSS

weather_animated_icons_css

Let me reveal a fascinating set of climate animated icons created using pure CSS. A free snippet coded by Fabrizio Bianchi.

DOWNLOAD

13CSS Icon: A set of icons made with pure CSS

css_icon_a_set_of_icons_made_with_pure_css

CSS Icon is a set including 100 free tiny and simple icons made out of pure CSS created and released by Wentin. You just need certainly to grab the CSS codes, include it in your CSS file and also the secret takes place.

DOWNLOAD

12icono Pure CSS icons

icono_pure_css_icons

icono is a CSS icon pack that requires no external resources. Every tags could be an icon created using pure CSS.

DOWNLOAD

11Animated SVG icons

animated_svg_icons

Using SVGs on websites has become more and more simple with great libraries like Snap.svg. The following is another great Codrops tutorial for creating nice animations with SVG icons.

DOWNLOAD

10Pure CSS icon set

pure_css_icon_set

A free minimalist icon set made of pure CSS! Just copy and paste the little bit of rule you need out of this CSS snippet.

DOWNLOAD

9SVG icons ready to be used

svg_icons_ready_to_be_used

The following is a useful website to purchase some simple SVG icons. All you have to complete is choosing an icon and copy & paste the HTML rule.

DOWNLOAD

8Pure CSS3 arrow icons

pure_css3_arrow_icons

Listed here is a useful CSS3 snippet for producing some easy arrow icons and a loader. Code provided by eMaj.

DOWNLOAD

7DC Social Media Icons PSD + CSS

dc_social_media_icons_psd_css

This free social icon set contains 20 icons for popular services like Twitter, Facebook, Google+, YouTube, Flickr, Dribbble and other. Included PSD and ready-coded CSS.

DOWNLOAD

6Simple icon hover effects CSS

simple_icon_hover_effects_css

Today Codrops staff wants to share some simple icon hover effects with you. The theory is always to produce a slight and stylish effect using CSS transitions and animations regarding the anchors and their pseudo-elements.

DOWNLOAD

5Stackicons A colourful icon font

stackicons_a_colourful_icon_font

Stackicons is a totally free colourful icon font for the web. It includes over 60 up-to-date icons for modern social brands, from App.net to Zerply. It utilizes overlapping tints to generate multi-color icons with a contemporary flat appearance. Created by Parker Bennett.

DOWNLOAD

4Animated SVG icon with CSS and Snap.svg

animated_svg_icon_with_css_and_snap_svg

a helpful and step-by-step article explaining how exactly to optimise SVG code and animate an SVG icons using CSS and Snap.svg library. Written by Sebastiano Guerriero.

DOWNLOAD

3Sketched Social Icons Webfont

sketched_social_icons_webfont

Todays freebie on Pixelsdaily is a webfont containing a sketched-style social icons set. They are pretty intriguing and, notably, supplied as a CSS-ready font to help you drop directly into your site.

DOWNLOAD

2Animated 3D opening type effect

animated_3d_opening_type_effect

A tutorial by Codrops on how to produce an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions.

DOWNLOAD

1CSS iOS7 icons

css_ios7_icons

This is actually the very first set of iOS7 made with HTML + CSS. They aren’t pixel perfect and there are many insects, but they’re really funny.

DOWNLOAD

SHARE

LEAVE A REPLY