A CodePen by mutukrish. Set of Icons made of css

index.html

<div id="bar">

<div class="icon icon-minus">
 <span class="name">Minus</span>
</div>

<div class="icon icon-plus">
 <span class="name">Plus</span>
</div>

<div class="icon icon-disc">
 <span class="name">Disc</span>
</div>



<div class="icon icon-pause">
 <span class="name">Pause</span>
</div>

<div class="icon icon-plasma">>
 <span class="name">Plasma</span>
</div>

<div class="icon icon-bulb">
 <span class="name">Bulb</span>
</div>

<div class="icon icon-iphone">
 <div class="icon-iphone-line"></div>
 <div class="icon-iphone-dot"></div>
 <span class="name">iPhone</span>
</div>

<div class="icon icon-battery">
 <span class="name">Battery</span>
</div>

<div class="icon icon-battery red">
 <span class="name">Empty</span>
</div>

<div class="icon icon-battery green">>
 <span class="name">Full</span>
</div>

<div class="icon icon-video">
 <span class="name">Video</span>
</div>

<div class="icon icon-paper">
 <div class="icon-paper-rectangle"></div>
 <div class="icon-paper-line-1"></div>
 <span class="name">Paper</span>
</div>

<div class="icon icon-smile">
 <div class="icon-smile-line"></div>
 <span class="name">Smile</span>
</div>

<div class="icon icon-picture">
 <div class="icon-picture-dune"></div>
 <span class="name">Picture</span>
</div>

<div class="icon icon-comment">
 <span class="name">Reply</span>
</div>


<div class="icon icon-screens">
 <span class="name">Screens</span>
</div>

<div class="icon icon-play">
 <span class="name">Play</span>
</div>

<div class="icon icon-up">
 <span class="name">Up</span>
</div>

<div class="icon icon-down">
 <span class="name">Down</span>
</div>

<div class="icon icon-back">
 <span class="name">Back</span>
</div>

<div class="icon icon-forward">
 <span class="name">Forward</span>
</div>

<div class="icon icon-camera">
 <span class="name">Camera</span>
</div>



<div class="icon icon-profile">
 <span class="name">Profile</span>
</div>


<div class="icon icon-mic">
 <span class="name">Mic</span>
</div>

<div class="icon icon-home">
 <span class="name">Home</span>
</div>

<div class="icon icon-hd">
 <span class="name">HD</span>
</div>

<div class="icon icon-temp">
 <span class="name">Temp</span>
</div>

<div class="icon icon-off">
 <span class="name">Off</span>
</div>

<div class="icon icon-coffee">
 <span class="name">Coffee</span>
</div>

style.css

#bar {
width: 576px;
height: 24px;
margin: 0 auto;
font-size: 9px;
line-height: 16px;
}
#bar .icon { float: left; }

.icon {
position: relative;
width:16px;
height:16px;
margin: 16px;
}
.icon .name {
width: 32px;
position: absolute;
text-align: center;
top: 18px;
left: -8px;
}

.icon-minus {
background-color: #000;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
width: 16px;
height: 16px;
position: relative;
top:0;
left:0;

}
.icon-minus:after {
background-color: #fff;
width: 8px;
height: 2px;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
position: absolute;
top:7px;
left: 3.5px;
  z-index:4;
   content:"";
}

.icon-plus {
background-color: #000;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
width: 16px;
height: 16px;
position: relative;
top:0;
left:0;
}
.icon-plus:after {
background-color: #fff;
width: 8px;
height: 2px;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
position: absolute;
top:7px;
left: 4px;
  content:"";
}
.icon-plus:before {
background-color: #fff;
width: 2px;
height: 8px;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
position: absolute;
top:4px;
left: 7px;
  content:"";
}

.icon-disc{
background-color: #000;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
width: 16px;
height: 16px;
position: relative;
top:0;
left:0;
}
.icon-disc:after {
background-color: #fff;
border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
width: 4px;
height: 4px;
position: absolute;
top:6px;
left:6px;
 content:"";
}

.icon-pause {
background-color: #000;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
width: 16px;
height: 16px;
position: relative;
top:0;
left:0;
}
.icon-pause:after{
background-color: #fff;
width: 2px;
height: 8px;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
position: absolute;
top: 4px;
left: 5px;
 content: "";
}
.icon-pause:before{
background-color: #fff;
width: 2px;
height: 8px;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
position: absolute;
top: 4px;
left: 9px;
content: "";
}

.icon-plasma {
border: #000 1px solid;
border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
width: 14px;
height: 8px;
position: relative;
top:2px;
left:0;
}
.icon-plasma:after {
background-color: #000;
width: 4px;
height: 1px;
position: absolute;
top:10px;
left:5.5px;
  content: "";
}
.icon-plasma:before {
background-color: #000;
width: 8px;
height: 1px;
position: absolute;
top:11px;
left:3.5px;
 content: "";
}

.icon-bulb {
border:#000 2px solid;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
width: 8px;
height: 8px;
position: relative;
top: 0;
left: 2px;
}
.icon-bulb:after {
background-color: #000;
width: 4px;
height: 3px;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
position: absolute;
top: 9px;
left: 2px;
 content: "";
}
.icon-bulb:before {
background-color: #000;
width: 4px;
height: 2px;
position: absolute;
border-bottom-left-radius: 1px;
border-bottom-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-webkit-border-bottom-right-radius: 1px;
-moz-border-radius: 1px;
top: 13px;
left: 2px;
  content: "";
}

.icon-iphone{
background-color: #000;
border-top-left-radius:2px;
border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-webkit-border-top-right-radius:2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
width: 10px;
height: 3px;
position: relative;
top: 0;
left: -2px;
}
.icon-iphone:after{
border: #000 1px solid;
width: 8px;
height: 9px;
position: absolute;
top: 1px;
left: 0px;
  content: "";
}
.icon-iphone:before {
background-color: #000;
border-bottom-left-radius:2px;
border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-webkit-border-bottom-right-radius:2px;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-bottomright: 2px;
width: 11.5px;
height: 4px;
position: absolute;
top: 12px;
left: 0px;
  content: "";
}
.icon-iphone-line {
background-color: #fff;
width: 12px;
height: 1px;
position: absolute;
top: 4px;
left: 10px;
}
.icon-iphone-dot {
background-color: #fff;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
width: 2px;
height: 2px;
position: absolute;
top: 13px;
left: 3.5px;
}

.icon-battery {
border:#000 1px solid;
width: 12px;
height: 6px;
position: relative;
top: 4px;
left: 0;
border-radius:1px;
-webkit-border-radius:1px;
-moz-border-radius:1px;
}
.icon-battery:after{
background-color: #000;
width: 2px;
height: 4px;
position: absolute;
top: 1px;
left: 13px;
  content: "";
border-radius-top-right:1px;
border-radius-bottom-right:1px;
-webkit-border-radius-top-right:1px;
-webkit-border-radius-bottom-right:1px;
-moz-border-radius-topright: 1px;
-moz-border-radius-bottomright: 1px;
}
.icon-battery:before{
background-color: #000;
width: 10px;
height: 4px;
position: absolute;
top: 1px;
left: 0px;
content: "";
}

.green.icon-battery:before {
background-color: #ad2;
}

.red.icon-battery:before {
background-color: #f00;
width: 2px;
-webkit-transition-property: width, background-color;
-webkit-transition-duration: 0.333s;
-webkit-transition-timing-function: linear;
-moz-transition-property: width, background-color;  
-moz-transition-duration: 0.333s;  
-moz-transition-delay: 0; 
-moz-transition-timing-function: linear;

}

.red:hover.icon-battery:before {
width: 10px;
background-color: #ad2;
}

.icon-video{
background-color: #000;
width: 12px;
height: 10px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
position: relative;
top: 3px;
left: 0;
}
.icon-video:after {
border: 4px solid #000;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
height: 0;
width: 0;
position: absolute;
top: 1px;
right: -5px;
  content: "";
}

.icon-paper{
border: #000 1px solid;
width: 12px;
height: 14px;
position: relative;
top: 0;
left: 1px;
 content: "";
}
.icon-paper:after {
background-color: #000;
width: 4px;
height: 1px;
position: absolute;
top: 2px;
left: 1px;
  content: "";
}
.icon-paper:before {
background-color: #000;
width: 4px;
height: 1px;
position: absolute;
top: 4px;
left: 1px;
content: "";
}
.icon-paper-line-1 {
background-color: #000;
width: 4px;
height: 1px;
position: absolute;
top: 6px;
left: 2px;
}
.icon-paper-line-1:after {
background-color: #000;
width: 5px;
height: 7px;
position: absolute;
top: -5px;
left: 5px;
  content: "";
}
.icon-paper-line-1:before {
background-color: #000;
width: 10px;
height: 4px;
position: absolute;
top: 3px;
left: -1px;
  content: "";
}

.icon-smile {
background-color: #000;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
width: 16px;
height: 16px;
position: relative;
top:0;
left:0;
}
.icon-smile:after {
background-color: #fff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
width: 2px;
height: 3px;
position: absolute;
top: 4px;
left: 4px;
  content: "";
}
.icon-smile:before {
background-color: #fff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
width: 2px;
height: 3px;
position: absolute;
top: 4px;
left: 10px;
  content: "";
}
.icon-smile-line {
background-color: #fff;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
-moz-border-radius-bottomright: 8px;
width: 8px;
height: 3px;
position: absolute;
top: 9px;
left: 4px;
}

.icon-smile .icon-smile-line {
-webkit-transition-property: -webkit-border-bottom-left-radius, -webkit-border-bottom-right-radius, -webkit-border-top-left-radius, -webkit-border-top-right-radius;
-webkit-transition-duration: 0.333s;
-webkit-transition-timing-function: linear;
-moz-transition-property: -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topleft, -moz-border-radius-topright;  
-moz-transition-duration: 0.333s;  
-moz-transition-delay: 0; 
-moz-transition-timing-function: linear;
}
.icon-smile:hover .icon-smile-line {
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
}

.icon-picture {
border: #000 1px solid;
width: 14px;
height: 10px;
position: relative;
top: 2px;
left: 0;
}
.icon-picture:after {
background-color: #000;
width: 2px;
height: 2px;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
position: absolute;
top: 3px;
left: 3px;
  content: "";
}
.icon-picture:before {
background-color: #000;
width: 4px;
height: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
position: absolute;
top: 8px;
left: 2px;
  content: "";
}
.icon-picture-dune {
background-color: #000;
width: 8px;
height: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
position: absolute;
top: 6px;
left: 6px;
}

.icon-comment {
background-color: #000;
width: 16px;
height: 10px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
position: relative;
top: 2px;
left: 0;
}
.icon-comment:after {
border: 4px solid #000;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
height: 0;
width: 0;
position: absolute;
top: 6px;
right: 0;
 content: "";
}


.icon-screens {
background-color: #fff;
border:#000 1px solid;
width: 11px;
height: 7px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
position: relative;
top: 2px;
right: 0;
}
.icon-screens:after {
background-color: #fff;
border:#000 1px solid;
width: 11px;
height: 7px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
position: absolute;
bottom: -4px;
left: 0;
  content: "";
}

.icon-play{
background-color: #000;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
width: 16px;
height: 16px;
position: relative;
top:0;
left:0;
}
.icon-play:after {
border: 5px solid #fff;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
height: 0;
width: 0;
position: absolute;
top: 3px;
left: 6px;
content: "";
}

.icon-up {
background-color: #000;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
width: 16px;
height: 16px;
position: relative;
top:0;
left:0;
}
.icon-up:after {
border: 4px solid #fff;
border-right-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
height: 0;
width: 0;
position: absolute;
top: 0px;
left: 4px;
  content: "";
}
.icon-up:before {
background-color: #fff;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
width: 2px;
height: 6px;
position: absolute;
top:6px;
left:7px;
  content: "";
}

.icon-down {
background-color: #000;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
width: 16px;
height: 16px;
position: relative;
top:0;
left:0;
}
.icon-down:after {
border: 4px solid #fff;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
height: 0;
width: 0;
position: absolute;
bottom: 0px;
left: 4px;
content: "";
}
.icon-down:before {
background-color: #fff;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
width: 2px;
height: 6px;
position: absolute;
bottom:6px;
left:7px;
  content: "";
}

.icon-back:after{
border: 6px solid #000;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
height: 0;
width: 0;
position: absolute;
top: -2px;
right: 9px;
content: "";
}

.icon-back {
background-color: #000;
border-radius:1px;
-webkit-border-radius:1px;
-moz-border-radius:1px;
width: 12px;
height: 4px;
position: relative;
top:6px;
right:1px;
}

.icon-forward:after {
border: 6px solid #000;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
height: 0;
width: 0;
position: absolute;
top: -2px;
left: 9px;
content: "";
}

.icon-forward {
background-color: #000;
border-radius:1px;
-webkit-border-radius:1px;
-moz-border-radius:1px;
width: 12px;
height: 4px;
position: relative;
top:6px;
left:1px;
}

.icon-camera {
background-color: #000;
width: 16px;
height: 10px;
position: relative;
top: 4px;
left: 0;
border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
}
.icon-camera:after {
background-color: #000;
border: #fff 2px solid;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
width: 4px;
height: 4px;
position: absolute;
top: 2px;
left: 5px;
  content: "";
}
.icon-camera:before {
background-color: #000;
width: 4px;
height: 4px;
position: absolute;
top: -2px;
left: 3px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
  content: "";
}

.icon-profile{
background-color: #000;
width: 6px;
height: 6px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
position: relative;
top: 1px;
left: 5px;
}
.icon-profile:after {
background-color: #000;
width: 10px;
height: 7px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-bottomright: 2px;
position: absolute;
bottom: -7px;
left: -1px;
content: "";
}


.icon-mic {
border: #000 2px solid;
border-top: transparent;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
width: 8px;
height: 16px;
position: relative;
left: 2px;
bottom: 2px;
}
.icon-mic:after {
background-color: #000;
width: 4px;
height: 10px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
position: absolute;
top: 0;
left: 2px;
  content: "";
}
.icon-mic:before {
background-color: #000;
width: 2px;
height: 2px;
border-bottom-left-radius: 1px;
border-bottom-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-webkit-border-bottom-right-radius: 1px;
-moz-border-radius-bottomleft: 1px;
-moz-border-radius-bottomright: 1px;
position: absolute;
bottom: -4px;
left: 3px;
  content: "";
}

.icon-home:after{
border: 8px solid #000;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
height: 16px;
width: 0;
position: absolute;
top: -31px;
left: 0;
 content: "";
}
.icon-home {
background-color: #000;
width: 15px;
height: 10px;
border-bottom-left-radius: 1px;
border-bottom-right-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-webkit-border-bottom-right-radius: 1px;
-moz-border-radius-bottomleft: 1px;
-moz-border-radius-bottomright: 1px;
position: relative;
bottom: 1px;
left: 3px;
}
.icon-home:before {
background-color: #000;
width: 2px;
height: 5px;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
position: absolute;
top: -6px;
left: 1px;
content: "";
}



.icon-hd {
background-color: #000;
width: 19px;
height: 16px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
position: relative;
top: -3px;
left: 0;
}
.icon-hd:after {
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
position: absolute;
top: -1px;
left: 1px;
  content: "H";
  color:#fff;
}
.icon-hd:before{
  content: "D";
 position:absolute;
  top:-1px;
  left:8px;
  color:#fff;
  font-size:10px;
  
}


.icon-temp:after{
background-color: #000;
width: 6px;
height: 6px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
position: absolute;
bottom: -6px;
left: -1px;
  content: "";
}
.icon-temp {
border: #000 1px solid;
width: 3px;
height: 10px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 3px;
position: relative;
top: -2px;
left: 0px;
}

.icon-off {
border: #000 2px solid;
width: 8px;
height: 8px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
position: relative;
bottom: 1px;
left: 2px;
}
.icon-off:after {
background-color: #000;
border: #fff 1px solid;
width: 2px;
height: 6px;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
position: absolute;
top: -3px;
left: 2px;
content: "";
}

.icon-coffee:after {
background-color: #000;
width: 14px;
height: 2px;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
position: absolute;
bottom: -4px;
left: -4px;
  content: "";
}
.icon-coffee {
border: #000 2px solid;
width: 6px;
height: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
position: relative;
top: 2px;
left: 3px;
}
.icon-coffee:before{
background-color: #000;
width: 4px;
height: 4px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
position: absolute;
top: 0px;
right: -4px;
content: "";
}

.icon-eye-triangle-1 {
border: 4px solid #000;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
height: 0;
width: 0;
position: absolute;
top: 4px;
right: 11px;
}
.icon-eye-triangle-2 {
border: 4px solid #000;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
height: 0;
width: 0;
position: absolute;
top: 4px;
left: 11px;
}
.icon-eye-circle-1 {
border: #000 2px solid;
width: 6px;
height: 6px;
border-radius: 6px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
position: absolute;
top: 3px;
left: 3px;
}
.icon-eye-circle-2 {
background-color: #000;
width: 2px;
height: 2px;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
position: absolute;
top: 7px;
left: 7px;
}