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
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 experiment; they degrade terribly in older browsers. Feel free to poke around the source code, play with, replicate, and learn from them, but I wouldn’t recommend using them on a website.
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.
0 Comments