Pure CSS GUI icons is An experimental 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.

The technique behind this experiment is an expansion of the basic shape-creation that was used to make Pure CSS speech bubbles. Some of these GUI icons can only be created in browsers that support CSS3 transforms.

The demo page contains a full set of user interaction and media player control icons, as well as other common icons. For now, several icons actually require more than one element as CSS 2.1 only specifies 2 pseudo-elements per element that can contain generated content. The CSS3 Generated and Replaced Content Module allows for an unlimited number of pseudo-elements but has yet to be fully implemented in any modern browser.

Requirements: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+.
Demo: http://nicolasgallagher.com/pure-css-gui-icons/demo/
License: Free License

Incoming search terms for the article:

• pure CSS Gui icons
• cc icons
• cc icon
• CSS GUI icons
• ccicons
• talk bubble web design
• css3 shape generator
• css icons spritesheet
• pure-css-gui-icons
• sprite sheets css system icons