Neat Social Media Icons in Pure CSS


Icons in Pure CSS uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript.

Neat Social Media Icons in Pure CSS

This experiment starts with a simple list of links, with each link using meaningful text, and then progressively styles each link to take on the appearance of the relevant social media icon. As a result, there should be support for screenreaders or users with CSS disabled.

Neat Social Media Icons in Pure CSS 01

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.
Icons are build with CSS 2.1 and CSS3 that is not supported by Internet Explorer 6 and 7, therefore, you shouldn’t expect it to work in those browsers. CSS is not necessarily the most appropriate tool for this kind of thing either.

by Nicolas Gallagher
View Neat Social Media Icons

Peculiar CSS icon package

They were 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 16x16 pixels size.

Neat Social Media Icons in Pure CSS 02

Endless possibilities are coming with these type of icons. Sizes are not limited to 16x16 pixels, but they go up to 1024x1024 pixels and from there to ∞. They are semantically coded, each shape can be customized to different color. Web designers can now use these icons to create layouts skipping the Photoshop in the process and web developers can speed up their web applications tremendously.

Peculiar is the only icon set which Retina-ready by default, meaning that the same code is used for both regular and Retina displays. If you want to develop web apps for iPhone 4/4S and other iOS devices, this icon set will be your friend.

Browsers supported: Internet Explorer 9, Mozilla Firefox (videocast), Camino, Opera, Apple Safari, Google Chrome or any other Gecko or WebKit powered browser.
Browsers unsupported: Internet Explorer 6-8, but support can be added using CSS3 PIE.

by Lucian Marin
Get Peculiar CSS icon package

Pure CSS GUI icons

The HTML is very simple and it relies on CSS pseudo-elements rather than extraneous HTML elements. The technical aspects of this exercise might be of interest to designers.

Neat Social Media Icons in Pure CSS 03

Tested in: Firefox 3.5+, Chrome 5, and Opera 10.6.

by Nicolas Gallagher
View Pure CSS GUI icons

CSS3 Experiment

Fun with CSS3- Social media icons created in pure CSS.

Neat Social Media Icons in Pure CSS 04

by insicdesigns
View CSS3 Experiment

Round Pure CSS Icons

No extra markup just for styling; No need for a solid back­ground colour for the icons to work

Neat Social Media Icons in Pure CSS 05

by Joshua Hibbert.
Check it on jsfiddle
Get Pure CSS Icons



Please enter your comment!
Please enter your name here