CSS only icons

index.html

<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'>

<h1>Pure CSS Icons</h1>
<h2>No extra markup &middot; No solid colour background required</h2>

<a class="folder icon" title="Folder" href="#"></a>
<a class="newDoc icon" title="New Document" href="#"></a>
<a class="mail icon" title="Mail" href="#"></a>
<a class="contacts icon" title="Contacts" href="#"></a>
<a class="calendar icon" title="Calendar" href="#"></a>
<a class="clock icon" title="Clock" href="#"></a>
<a class="chart icon" title="Chart" href="#"></a>
<a class="prev icon" title="Previous" href="#"></a>
<a class="next icon" title="Next" href="#"></a>
<a class="flag icon" title="Flag" href="#"></a>
<a class="add icon" title="Add" href="#"></a>
<a class="subtract icon" title="Subtract" href="#"></a>
<a class="tick icon" title="Tick" href="#"></a>
<a class="cross icon" title="Cross" href="#"></a>
<a class="user icon" title="User" href="#"></a>
<a class="comment icon" title="Comment" href="#"></a>
<a class="heart icon" title="Heart" href="#"></a>
<a class="home icon" title="Home" href="#"></a>
<a class="batFull icon" title="Full Battery" href="#"></a>
<a class="batEmpty icon" title="Empty Battery" href="#"></a>
<a class="play icon" title="Play" href="#"></a>
<a class="pause icon" title="Pause" href="#"></a>
<a class="stop icon" title="Stop" href="#"></a>
<a class="eject icon" title="Eject" href="#"></a>

<p>Created by <a href="http://katieball.me//">Katie Ball</a>.</p>

style.css

body {
    background-color: #f6f6f6;
    background-image: -webkit-radial-gradient(circle, hsla(0,0%,0%,.05) 25%, transparent 25%);
    background-image:    -moz-radial-gradient(circle, hsla(0,0%,0%,.05) 25%, transparent 25%);
    background-image:         radial-gradient(circle, hsla(0,0%,0%,.05) 25%, transparent 25%);
    background-size: 4px 4px;
    margin: 0 auto;
    max-width: 720px;
    padding: 100px 50px 50px;
    text-align: center;
}
h1 {
    color: #f66;
    font: bold 48px/1 Quicksand, sans-serif;
    margin-bottom: 32px;
    text-shadow: 0 1px 0 #f6f6f6,
                 0 3px 0 #ccc;
}
h2 {
    color: #555;
    font: bold 24px/1.8 Quicksand, sans-serif;
    margin-bottom: 36px;
    text-shadow: 0 1px 0 #f6f6f6,
                 0 2px 0 #ccc;
}
p {
    color: #777;
    font: bold 16px/3 Quicksand, sans-serif;
    margin-top: 30px;
}
p a {
    border-bottom: 2px solid #fc6;
    color: #777;
    text-decoration: none;
}
p a:hover {
    border-color: #f66;
}
a.icon {
    margin: 12px;
}

/* Icon Base Styles */

a.icon {
    background-color: #fed;
    border: 2px solid #fc6;
    display: inline-block;
    position: relative;
    vertical-align: top;
}
a.icon:after,
a.icon:before {
    background: #fed;
    border: 2px solid #fc6;
    content: '';
    position: absolute;
}
a.icon:hover,
a.icon:hover:after,
a.icon:hover:before {
    background-color: #ffe;
}

/* New Document Icon */

a.newDoc {
    border-top: 2px solid #fc6;
    box-shadow: inset 0 0 0 2px #fed;
    height: 15px;
    top: 10px;
    width: 20px;
}
a.newDoc:hover {
    box-shadow: inset 0 0 0 2px #ffe;
}
a.newDoc:after {
    height: 10px;
    right: 1px;
    top: -9px;
    width: 10px;
    z-index: -1;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
a.newDoc:before {
    border-bottom: none;
    border-right: 2px solid #fc6;
    height: 10px;
    left: -2px;
    top: -12px;
    width: 11px;
}

/* Previous Icon */

a.prev {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.prev:after,
a.prev:before {
    border-radius: 2px;
    height: 0;
    left: 5px;
    width: 9px;
}
a.prev:after {
    bottom: 8px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
a.prev:before {
    top: 8px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

/* Next Icon */

a.next {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.next:after,
a.next:before {
    border-radius: 2px;
    height: 0;
    right: 5px;
    width: 9px;
}
a.next:after {
    top: 8px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
a.next:before {
    bottom: 8px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

/* Mail Icon */

a.mail {
    height: 20px;
    top: 4px;
    width: 28px;
}
a.mail:after,
a.mail:before {
    border-top: none;
    top: 6px;
    width: 13px;
}
a.mail:after {
    left: -2px;
    -webkit-transform: rotate(25deg);
       -moz-transform: rotate(25deg);
        -ms-transform: rotate(25deg);
         -o-transform: rotate(25deg);
            transform: rotate(25deg);
}
a.mail:before {
    right: -2px;
    -webkit-transform: rotate(-25deg);
       -moz-transform: rotate(-25deg);
        -ms-transform: rotate(-25deg);
         -o-transform: rotate(-25deg);
            transform: rotate(-25deg);
}

/* Contacts Icon */

a.contacts {
    border-left-width: 6px;
    color: #fc6;
    font: bold 12px/1 sans-serif;
    height: 25px;
    text-decoration: none;
    width: 18px;
}
a.contacts:after,
a.contacts:before {
    border: none;
}
a.contacts:after {
    content: '@';
    right: 3px;
    top: 5px;
}

/* Chart Icon */

a.chart {
    height: 20px;
    margin-right: 30px;
    top:5px;
    width: 4px;
}
a.chart:after,
a.chart:before {
    bottom: -2px;
    width: 4px;
}
a.chart:after {
    height: 25px;
    left: 8px;
}
a.chart:before {
    height: 15px;
    left: 18px;
}

/* Clock Icon */

a.clock {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.clock:after,
a.clock:before {
    border-left: none;
    width: 0;
}
a.clock:after {
    height: 9px;
    left: 12px;
    top: 3px;
}
a.clock:before {
    height: 4px;
    left: 15px;
    top: 8px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

/* Calendar Icon */

a.calendar {
    height: 23px;
    top: 2px;
    width: 27px;
}
a.calendar:after {
    bottom: 19px;
    left: -2px;
    right: -2px;
    top: -2px;
}
a.calendar:before {
    background: none;
    border-bottom: none;
    border-top: none;
    border-width: 4px;
    bottom: 23px;
    left: 2px;
    right: 2px;
    top: -4px;
}
a.calendar:hover:before {
    background: none;
}

/* Folder Icon */

a.folder {
    height: 18px;
    top: 6px;
    width: 27px;
}
a.folder:after {
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    height: 3px;
    left: 1px;
    top: -5px;
    width: 10px;
}
a.folder:before {
    border: none;
}

/* Add Icon */

a.add {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.add:after {
    height: 16px;
    left: 11px;
    top: 3px;
    width: 0;
}
a.add:before {
    height: 0;
    left: 3px;
    top: 11px;
    width: 16px;
}

/* Subtract Icon */

a.subtract {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.subtract:after {
    height: 0;
    left: 3px;
    top: 11px;
    width: 16px;
}
a.subtract:before {
    border: none;
}

/* Full Battery Icon */

a.batFull {
    height: 22px;
    margin-left: 18px;
    margin-right: 18px;
    top: 3px;
    width: 8px;
}
a.batFull:after {
    bottom: 2px;
    left: 2px;
    right: 2px;
    top: 2px;
}
a.batFull:before {
    height: 0;
    left: 1px;
    right: 1px;
    top: -4px;
}

/* Empty Battery Icon */

a.batEmpty {
    height: 22px;
    margin-left: 18px;
    margin-right: 18px;
    top: 3px;
    width: 8px;
}
a.batEmpty:after {
    bottom: 2px;
    left: 2px;
    right: 2px;
    top: 16px;
}
a.batEmpty:before {
    height: 0;
    left: 1px;
    right: 1px;
    top: -4px;
}

/* Tick Icon */

a.tick {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.tick:after {
    height: 14px;
    left: 13px;
    top: 5px;
    width: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    
}
a.tick:before {
    height: 0;
    left: 4px;
    top: 14px;
    width: 2px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

/* Cross Icon */

a.cross {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.cross:after {
    height: 0;
    left: 3px;
    top: 11px;
    width: 16px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
a.cross:before {
    height: 0;
    left: 3px;
    top: 11px;
    width: 16px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

/* Eject Icon */

a.eject {
    height: 4px;
    top: 20px;
    width: 26px;
}
a.eject:after,
a.eject:before,
a.eject:hover:after,
a.eject:hover:before {
    background: none;
}
a.eject:after {
    border-bottom: 15px solid #fc6;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid transparent;
    height: 0;
    left: -2px;
    top: -35px;
    width: 0;
}
a.eject:before {
    border-bottom: 10px solid #fed;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid transparent;
    height: 0;
    left: 3px;
    top: -27px;
    width: 0;
    z-index: 1;
}
a.eject:hover:before {
    border-bottom-color: #ffe;
}

/* User Icon */

a.user {
    border-radius: 10px 10px 0 0;
    height: 6px;
    top: 19px;
    width: 26px;
}
a.user:after {
    border-radius: 10px;
    height: 17px;
    left: 4px;
    top: -20px;
    width: 14px;
}
a.user:before {
    border: none;
    height: 10px;
    left: 9px;
    top: -9px;
    width: 8px;
    z-index: 1;
}

/* Heart Icon */

a.heart {
    border-radius: 100%;
    height: 15px;
    margin-right: 24px;
    width: 15px;
}
a.heart:after {
    border-radius: 100%;
    height: 15px;
    left: 11px;
    top: -2px;
    width: 15px;
    z-index: -1;
}
a.heart:before {
    border-left: none;
    border-top: none;
    height: 16px;
    left: 5px;
    top: 6px;
    width: 16px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}


/* Play Icon */

a.play {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.play:after,
a.play:before,
a.play:hover:after,
a.play:hover:before {
    background: none;
}
a.play:after {
    border-bottom: 8px solid transparent;
    border-left: 13px solid #fc6;
    border-right: 13px solid transparent;
    border-top: 8px solid transparent;
    height: 0;
    left: 8px;
    top: 5px;
    width: 0;
}
a.play:before {
    border: none;
}

/* Pause Icon */

a.pause {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.pause:after,
a.pause:before {
    height: 10px;
    top: 6px;
    width: 0;
}
a.pause:after {
    left: 7px;
}
a.pause:before {
    left: 15px;
}

/* Stop Icon */

a.stop {
    border-radius: 100%;
    height: 26px;
    width: 26px;
}
a.stop:after {
    background: #fc6;
    height: 9px;
    left: 7px;
    top: 7px;
    width: 8px;
}
a.stop:hover:after {
    background: #fc6;
}
a.stop:before {
    border: none;
}

/* Flag Icon */

a.flag {
    height: 25px;
    margin-right: 35px;
    width: 0;
}
a.flag:after,
a.flag:before {
    height: 8px;
    left: 0;
    top: -2px;
    width: 10px;
}
a.flag:before {
    left: 6px;
    top: 2px;
}

/* Home Icon */

a.home {
    height: 10px;
    top: 14px;
    width: 20px;
}
a.home:after,
a.home:before,
a.home:hover:after,
a.home:hover:before {
    background: none;
}
a.home:after {
    border-bottom: 15px solid #fc6;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 15px solid transparent;
    height: 0;
    left: -6px;
    top: -29px;
    width: 0;
}
a.home:before {
    border-bottom: 10px solid #fed;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 10px solid transparent;
    height: 0;
    left: -1px;
    top: -21px;
    width: 0;
    z-index: 1;
}
a.home:hover:before {
    border-bottom-color: #ffe;
}

/* Comment Icon */

a.comment {
    border-radius: 4px;
    height: 18px;
    width: 26px;
}
a.comment:after,
a.comment:before {
    background: none;
    border-bottom: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fc6;
    bottom: -14px;
    height: 0;
    left: 7px;
    width: 0;
}
a.comment:before {
    border-top-color: #fed;
    bottom: -11px;
    z-index: 1;
}
a.comment:hover:after {
    background: none;
}
a.comment:hover:before {
    background: none;
    border-top-color: #ffe;
}