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
This icon pack contains lots of animated 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.
If you are designing a website in high contrast, then this is the icon pack you need.
This is the most IE friendly icon set among CSS icons.
Icons of popular files made in CSS.
This one includes animated icons.
Peculiar is Retina-ready by design, meaning that the same code is used for both regular and Hi-DPI screens.
An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML.
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.
Only a simple @font-face is used for the icons so it is quite easy to customize the icons.
The icon set is a combination of the Bootstrap framework, Font Awesome and some custom CSS for the colors, shapes and effects.
All the icons are Font Awesome based, so you can change them around and add any addition icon you need from their homepage.
That’s it for today guys. We’ll meet again tomorrow. Take really good care of yourself. See you.