6 Pure CSS Icon Sets

Displaying icons consistently across your website can be a mind-numbing task. Using img tags is a terrible way to do it, and creating complex CSS with background images is a pain. So here 6 awesome icon sets made of pure CSS!


Peculiar is a free icon package made only in CSS. It was created for sites and web applications that depend on fewer HTTP requests as possible or don’t need to use any image at all. The package contains 45 pictograms that are available in 16² pixels size. More icons are about to come in the future.


Pure CSS GUI icons

An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set.


One Div

One div aims to highlight the potential of CSS3 through a library of single element logos.All icons displayed on the website are realised in pure css with only one html div.


Pure CSS Icons

These icons are just an exper­i­ment; they degrade ter­ribly in older browsers. Feel free to poke around the source code, play with, rep­lic­ate, and learn from them, but I wouldn’t recom­mend using them on a web­site.


CSS3 Monochrome Icon Set

A set of 85+ icons / glyphs created purely in CSS3 that you can use in your projects freely.


Social Media Icons

This is an experiment that creates social media icons using CSS and semantic HTML. It uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript.



Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.