50 Free CSS-Only Icons for Website Graphics

by Jake Rocheleau

May 22, 2014 in Graphic Design

Modern CSS trends have blown up so quickly that it can be difficult to keep up with all the new stuff. Online projects which most surprise me involve pure CSS designs for layouts, animations, and icons. There is still plenty of use for icon sprite sheets in the right context. But why not try out modern trends for the users who have upgraded from legacy browsers?

This gallery includes fifty examples of my favorite CSS-based icon designs. Some are animated while others are static interface pieces. These range from general purpose icon sets to character designs created purely within HTML/CSS code. The latter doesn’t have much practical use but it’s definitely a way of showing off your skillset.

Iconex Flat Icons

css iconex flat icons design open source

Pure CSS Cloud

pure css cloud icon design

Map Marker Icon

css animated map marker pure css design

Tech Devices

iphone ipad macbook computer device icons

Animated Compass

animated compass icon design css open source

Full NES Console

nintendo entertainment system css icon open source

Pure CSS MacBook

pure css icon macbook computer laptop

Tweetbot Icon

ios7 tweetbot app icon design css

Computing Devices

computer laptop monitor device icons css

Hanging Picture Frames

hanging picture frame icons css

Animated Trash Icon

css only animated trash can icon

Mail Icon

blue mail envelope icon css only

Hamburger Menu Icon

pure css menu icon hamburger design

Pure CSS Ribbon

pure css ribbon open source code

Google Browser Icons

icons browser google chrome chromium canary

Opera Logo Icon

red opera logo design icon vector css

CSS Microphone

css mic microphone icon open source

Pure-CSS Owl

pure css owl icon design website ui

Animated Clock

animated clock interface ui css open source

Taj Mahal

pure css open source taj mahal icon

Squirrel

squirrel css pure open source icon animal

Pure CSS3 Arrows

pure css3 arrow icons animated open source

Google Logos

flat google icons youtube drive gmail css

Santa Icon

pure css flat santa icon open source

Peeling Sticky

pure css sticky peel effect animation icon

CSS3-Only Animals

css3 animal vector icons open source

Minions in Pure CSS

open source css minions icons

RSS Feed Icon

pure css icon design rss feed icon

Credit Card

css open source credit card icon

Flat Camera

flat camera icon css open source

CSS3 Calendar

css3 calendar open source icon code

Burger App Icon

burger app icon flat css open source

Currency Icon

currency icon pure css open source

Flat Gift Icon

flat gift icon open source freebie

WordPress Icon

open source wordpress css icon responsive

Passcode Locks

passcode icon animated effect css3

Stewie Griffin

stewie griffin icon pure css

Eric Cartman

eric cartman open source css icon

Pure CSS Folders

pure css folders open source code icon

Google Voice Search

google voice search icon design animated

Envelope Transition

envelope letter css icon transition effect

iOS7 Icons

ios7 icons css pure open source

iOS6 Camera Icon

ios6 camera icon open source css code

Animated Printer

animated printer icon pure css open source

CSS3 Preloader

css3 preloader open source icon animated

Color Picker

pure animated css color picker icon

Checklist Icon

pure css open source checklist icon

CSS Smileys

smiley open source icon css code

Apple Mice

icons apple computer mice css only code

CSS Circle Logo

pure blue css circle logo open source

Powered by Shutterstock

About Jake Rocheleau

Jake is a digital researcher and writer on many popular design magazines. He frequently writes on topics including web design, user experience, mobile apps, and project management. You can find him all throughout Google and tweeting @jakerocheleau. Connect with Jake on google+

It's pretty quiet on this post. Why not share your thoughts?

Leave a Comment

Your email address will not be published. Required fields are marked *