500+ Free Pure CSS Icons

These days, the trend is to take web designs to a level where they do not need any images at all. Thanks to CSS3, we’re nearly there. With CSS icons, the last monopoly of images has been broken.

Another great thing about these CSS icons is that many of them come animated as well as flat. The animated ones really help to catch attention and they comply with Google’s material design guidelines.

Today I’m sharing a collection of 12 icon packs which in total contains over 500 icons. Needless to say that all of these icon packs are 100% free.

These CSS icons can be made using multiple ways. One of the most common ways is to use a @font-face property in CSS code and use icon font for displaying the icon. I personally this method is here stay for a long time. The other method will soon get outdated.

The other way is being used these days especially for animated icons since fonts don’t contain animated characters at the moment. Fonts can contain animated characters but currently not many fonts are available that contain animated icons so the other method is being used. This includes using an SVG file (which is basically a text file) or a whole graphic made using CSS.

Stay tuned because I am creating a post about the latest icon fonts. It’ll be published some time during next week.

500+ CSS Icons in 12 Icon Packs

<>ne div (One Div)

This icon pack contains lots of animated icons.

One Div free animated CSS icons

Icono Pure CSS icons

This is one of the most popular sets when it comes to pure CSS icons. This is probably because it is one of the first pure CSS icon packs to come out on the internet.

icono pure CSS icons

CSS3 Monochrome Icons

If you are designing a website in high contrast, then this is the icon pack you need.

CSS3 Monochrome Icons

This is the most IE friendly icon set among CSS icons.



Icons of popular files made in CSS.


Arrow Icons

This one includes animated icons.

Arrow Icons


Peculiar is Retina-ready by design, meaning that the same code is used for both regular and Hi-DPI screens.peculiar

GUI Icons

An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML.

pure CSS GUI icons


Licon is a simple, useful and lightness pack-icon that is made with Pure CSS3.


Pure CSS social icons

I found three CSS icon sets exclusively designed with social media buttons and icons. So here they are.

Responsive Social Media Icons

Only a simple @font-face is used for the icons so it is quite easy to customize the icons.

Responsive Social Media Icons

Bootstrap Social Media Icons

The icon set is a combination of the Bootstrap framework, Font Awesome and some custom CSS for the colors, shapes and effects.

Bootstrap Social Icons

CSS3 Social Media Icons

All the icons are Font Awesome based, so you can change them around and add any addition icon you need from their homepage.

CSS Social Media Icons

That’s it for today guys. We’ll meet again tomorrow. Take really good care of yourself. See you.