PureCSS Icons Sets

Monday 16th, Nov, 2020 | #Pure CSS #HTML 5 #UI #CSS



Hi Friends Check this great collection of PureCSS Icons Set that you can use in your webs. You can copy and paste from owr code editor (Press Editor). With Pure CSS and HTML you can create cool and fast icons, without extra Javascript or Icon Font.

 

PureCSS Iconset CSS/HTML code

Pure CSS Icons SET 1

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;
}​

<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>

Pure CSS IOS Animated

.main-container {
  max-width: 885px;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto 50px auto;
}

.container {
  margin: 0 auto;
}

.icon-container {
  margin: 20px auto;
  width: 200px;
  height: 200px;
  border-radius: 20%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: end;
          align-items: flex-end;
  background-color: #ececec;
  position: relative;
}

.bar {
  display: inline-block;
  height: 50px;
  width: 50px;
  background-color: #F7CA18;
  border-radius: 20% 20% 0 0;
  margin-bottom: 20px;
}
.bar-left {
  border-radius: 10px 0 0 10px;
}
.bar-middle {
  height: 100px;
  border-radius: 10px 0 0 0;
  z-index: 1;
}
.bar-right {
  background-color: #F27935;
  height: 150px;
  border-radius: 10px 10px 10px 0;
  overflow: hidden;
}

h1, h2 {
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

.envelope {
  background-color: #3267D5;
  width: 150px;
  height: 90px;
  margin: 0 auto 20px auto;
  border-top: 2px solid #ECECEC;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.envelope .envelope-left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 135px 85px 0;
  border-color: transparent transparent #2AB6F6 transparent;
  position: absolute;
  left: 0;
  bottom: 0;
}
.envelope .envelope-right {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 85px 135px;
  border-color: transparent transparent #81D2F9 transparent;
  position: absolute;
  right: 0;
  bottom: 0;
}

.envelope-content {
  width: 35px;
  height: 10px;
  background-color: #E0E0E0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  position: absolute;
  left: 75px;
  top: 90px;
  z-index: 1;
  -webkit-animation: display 6s  linear infinite;
          animation: display 6s  linear infinite;
  opacity: 0;
}
.envelope-content::after {
  content: "";
  width: 200%;
  height: 100%;
  background-color: #E0E0E0;
  position: absolute;
  left: -5px;
  bottom: 30px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

@-webkit-keyframes display {
  0%, 20% {
    opacity: 0;
    top: 160px;
  }
  20%,50% {
    opacity: 0;
  }
  55%, 100% {
    opacity: 1;
    top: 90px;
  }
}

@keyframes display {
  0%, 20% {
    opacity: 0;
    top: 160px;
  }
  20%,50% {
    opacity: 0;
  }
  55%, 100% {
    opacity: 1;
    top: 90px;
  }
}
.envelope-top {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 75px 55px 75px;
  border-color: transparent transparent #2A55C5 transparent;
  position: absolute;
  top: 40px;
  -webkit-animation: flip 6s linear infinite;
          animation: flip 6s linear infinite;
  -webkit-perspective: 500px;
          perspective: 500px;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}

@-webkit-keyframes flip {
  0%, 60% {
    -webkit-transform: rotate3d(1, 0, 0, 180deg);
            transform: rotate3d(1, 0, 0, 180deg);
  }
  60%,100% {
    -webkit-transform: rotate3d(1, 0, 0, 0deg);
            transform: rotate3d(1, 0, 0, 0deg);
  }
}

@keyframes flip {
  0%, 60% {
    -webkit-transform: rotate3d(1, 0, 0, 180deg);
            transform: rotate3d(1, 0, 0, 180deg);
  }
  60%,100% {
    -webkit-transform: rotate3d(1, 0, 0, 0deg);
            transform: rotate3d(1, 0, 0, 0deg);
  }
}
.trapezoid {
  height: 40px;
  width: 75px;
}
.trapezoid-yellow {
  background-color: #FFCF61;
  -webkit-transform: rotate(90deg) skewY(-30deg);
          transform: rotate(90deg) skewY(-30deg);
  position: absolute;
  top: 65px;
  left: 85px;
  z-index: 1;
}
.trapezoid-blue {
  background-color: #3777E2;
  -webkit-transform: rotate(30deg) skewY(-30deg);
          transform: rotate(30deg) skewY(-30deg);
  position: absolute;
  bottom: 40px;
  left: 72px;
  z-index: 2;
}
.trapezoid-green {
  background-color: #10A860;
  -webkit-transform: rotate(-30deg) skewY(-30deg);
          transform: rotate(-30deg) skewY(-30deg);
  position: absolute;
  top: 82px;
  left: 31px;
}
.trapezoid-green::after {
  content: "";
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  width: 100%;
  height: 100%;
  z-index: 3;
  position: absolute;
  top: 50px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

.weather {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #008DEA), to(#00F9F9));
  background: linear-gradient(#008DEA 30%, #00F9F9);
}

.sun {
  background-color: #FFD24A;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  position: absolute;
  top: 35px;
  left: 30px;
}

.dots {
  width: 85px;
  height: 75px;
  background-color: #E2F9FE;
  opacity: 0.95;
  border-radius: 50%;
  position: absolute;
  top: 60px;
  left: 65px;
}
.dots::before, .dots::after {
  content: "";
  background-color: #E2F9FE;
  opacity: 0.95;
  position: absolute;
  border-radius: 50%;
}
.dots::before {
  width: 70%;
  height: 70%;
  top: 30px;
  left: -20px;
  border-radius: 50px;
}
.dots::after {
  width: 90%;
  height: 90%;
  top: 15px;
  left: 30px;
  border-radius: 50px;
}

.box {
  width: 50px;
  height: 20px;
  background-color: #E2F9FE;
  opacity: 0.95;
  position: absolute;
  top: 63px;
  left: 10px;
}

.newspaper {
  background-color: #C93BDD;
  width: 100px;
  height: 100px;
  position: absolute;
  left: -10px;
}

.photo-rectangle {
  width: 45px;
  height: 75px;
  border-radius: 50px;
  position: absolute;
  top: 20px;
}
.photo-rectangle.orange {
  background-color: rgba(243, 156, 18, 0.7);
  z-index: 1;
}
.photo-rectangle.yellow {
  background-color: rgba(241, 196, 15, 0.7);
  -webkit-transform-origin: 55% 100%;
          transform-origin: 55% 100%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.photo-rectangle.green {
  background-color: rgba(46, 204, 113, 0.7);
  -webkit-transform-origin: 55% 105%;
          transform-origin: 55% 105%;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.photo-rectangle.lightBlue {
  background-color: rgba(27, 188, 155, 0.7);
  -webkit-transform-origin: 52.5% 105%;
          transform-origin: 52.5% 105%;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
.photo-rectangle.blue {
  background-color: rgba(65, 131, 215, 0.7);
  -webkit-transform-origin: 50% 105%;
          transform-origin: 50% 105%;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.photo-rectangle.purple {
  background-color: rgba(102, 51, 153, 0.7);
  -webkit-transform-origin: 47.5% 105%;
          transform-origin: 47.5% 105%;
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}
.photo-rectangle.violet {
  background-color: rgba(155, 89, 182, 0.7);
  -webkit-transform-origin: 45% 105%;
          transform-origin: 45% 105%;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
.photo-rectangle.red {
  background-color: rgba(242, 38, 19, 0.7);
  -webkit-transform-origin: 45% 102.5%;
          transform-origin: 45% 102.5%;
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
}

.firstRing {
  display: block;
  width: 160px;
  height: 160px;
  background-color: #2F883E;
  border-radius: 50%;
  border: 6px solid black;
  position: absolute;
  top: 15px;
  left: 15px;
  overflow: hidden;
}

.secondRing {
  width: 150px;
  height: 154px;
  background-color: transparent;
  border: 3px solid #44ff4e;
  border-radius: 50%;
  margin: 0 auto;
  vertical-align: middle;
  overflow: hidden;
}

.thirdRing {
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: 3px solid #44ff4e;
  border-radius: 50%;
  margin: 0 auto;
  vertical-align: middle;
  position: absolute;
  top: 30px;
  left: 27.5px;
}

.fourthRing {
  width: 30px;
  height: 30px;
  background-color: transparent;
  border: 3px solid #44ff4e;
  border-radius: 50%;
  margin: 0 auto;
  vertical-align: middle;
  position: absolute;
  top: 32px;
  left: 32px;
}

.scan {
  width: 85px;
  height: 85px;
  margin: 0 auto;
  vertical-align: middle;
  position: absolute;
  top: 15px;
  left: 15px;
  overflow: hidden;
  background: -webkit-gradient(linear, left bottom, left top, from(#44ff4e), color-stop(10%, #44ff4e), to(transparent));
  background: linear-gradient(0deg, #44ff4e, #44ff4e 10%, transparent);
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.podcast {
  background: -webkit-gradient(linear, left top, left bottom, from(#D46DFB), to(#842CC2));
  background: linear-gradient(#D46DFB, #842CC2);
}

.podcast-outerRing {
  border: 10px solid;
  border-color: white white transparent white;
  border-radius: 50%;
  width: 115px;
  height: 115px;
  margin: auto;
  background-color: transparent;
  position: relative;
}

.podcast-innerRing {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 10px solid;
  border-color: white white transparent white;
  margin: 12px auto;
}

.podcast-center {
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  margin: 20px auto;
}

.podcast-rectangle {
  width: 25px;
  height: 60px;
  background-color: white;
  border-radius: 20px;
  position: absolute;
  top: 80px;
  left: 45px;
}

.app-store {
  background: -webkit-gradient(linear, left top, left bottom, from(#00C4F9), to(#0076F0));
  background: linear-gradient(#00C4F9, #0076F0);
}

.app-storeRectangle {
  background-color: white;
  width: 17px;
  height: 135px;
  border-radius: 40px;
}
.app-storeRectangle.left {
  -webkit-transform: translate(75px, -30px) rotate(27.5deg);
          transform: translate(75px, -30px) rotate(27.5deg);
}
.app-storeRectangle.middle {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  margin: 0 auto;
}
.app-storeRectangle.right {
  -webkit-transform: translate(-75px, -30px) rotate(-27.5deg);
          transform: translate(-75px, -30px) rotate(-27.5deg);
}

.adobe {
  background-color: #1B2B38;
}
.adobe.lightroom {
  border: 8px solid #AED4E9;
}
.adobe.spark {
  border: 8px solid #FFDA00;
  position: relative;
}
.adobe.photoshop {
  border: 8px solid #0AC9FF;
  position: relative;
}
.adobe.comp {
  border: 8px solid #988AFA;
}

.light-rectangle {
  background-color: #AED4E9;
  width: 15px;
  height: 100px;
  position: relative;
  margin: auto;
  margin-right: 10px;
}
.light-rectangle::after {
  content: "";
  width: 100%;
  height: 50%;
  background-color: #AED4E9;
  position: absolute;
  -webkit-transform: skewY(-10deg) rotate(100deg) translate(67px, -32px);
          transform: skewY(-10deg) rotate(100deg) translate(67px, -32px);
}

.room-rectangle {
  background-color: #AED4E9;
  width: 15px;
  height: 65px;
  margin: auto;
  -webkit-transform: translate(-15px, 18px);
          transform: translate(-15px, 18px);
}
.room-rectangle::after {
  content: "";
  width: 100%;
  height: 50%;
  background-color: #AED4E9;
  position: absolute;
  -webkit-transform: skewY(-10deg) rotate(90deg) translate(-10px, -10px);
          transform: skewY(-10deg) rotate(90deg) translate(-10px, -10px);
}

.spark-innerRectangle {
  width: 50px;
  height: 50px;
  border: 20px solid #FFDA00;
  margin: auto;
  z-index: 1;
}

.spark-outerRectangle {
  width: 90px;
  height: 90px;
  border: 3px solid #FCF7CC;
}
.spark-outerRectangle.back {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
  position: absolute;
  top: 25%;
}
.spark-outerRectangle.front {
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
  position: absolute;
  top: 25%;
  z-index: 2;
}

.photoshop-circle {
  background-color: #0AC9FF;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: 40px;
  left: 40px;
}

.photoshop-dashed {
  width: 80px;
  height: 80px;
  background-color: transparent;
  border: 5px dashed #0AC9FF;
  border-radius: 50%;
  position: absolute;
  top: 70px;
  left: 70px;
  overflow: hidden;
  z-index: 1;
}

.photoshop-dashed__fill {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #B3F3FF;
  background: repeating-linear-gradient(45deg, #B3F3FF 2px, #B3F3FF 5px, #1B2B38 2px, #1B2B38 13px);
  -webkit-transform: translate(-30px, -30px);
          transform: translate(-30px, -30px);
}

.layer {
  opacity: 1;
  box-sizing: content-box;
  width: 60px;
  height: 55px;
  margin: auto;
  background: repeating-linear-gradient(0deg, #E8DFFD 0px, #E8DFFD 6px, #1B2B38 2px, #1B2B38 12px);
  -webkit-transform: skew(55deg, -35deg) translate(-20px, 20px);
          transform: skew(55deg, -35deg) translate(-20px, 20px);
  position: relative;
}

.layer:before, .layer:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 2px;
}

.layer:before {
  background-color: #988AFA;
  left: 10px;
  top: 10px;
  -webkit-transform: translate3d(10px, -25px, 0px);
          transform: translate3d(10px, -25px, 0px);
}

.layer:after {
  border: 4px solid #E8DFFD;
  background-color: #1B2B38;
  top: 1px;
  -webkit-transform: translate3d(35px, -35px, 0px);
          transform: translate3d(35px, -35px, 0px);
  width: 95%;
  height: 85%;
}

.cross {
  background-color: #E8DFFD;
  width: 5px;
  height: 75px;
  z-index: 2;
  -webkit-transform: rotate(50deg) translate(8px, -78px);
          transform: rotate(50deg) translate(8px, -78px);
  position: relative;
}
.cross::after {
  content: "";
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%;
  background-color: #E8DFFD;
  -webkit-transform: rotate(-100deg);
          transform: rotate(-100deg);
}

.instagram {
  background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(circle farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(circle farthest-corner at 100% 100%, #d9317a, transparent), -webkit-gradient(linear, left top, left bottom, from(#6559ca), color-stop(30%, #bc318f), color-stop(50%, #e33f5f), color-stop(70%, #f77638), to(#fec66d));
  background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(circle farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(circle farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}

.instagram-borderRectangle {
  width: 125px;
  height: 125px;
  border-radius: 25%;
  border: 10px solid white;
  margin: auto;
  position: relative;
}

.instagram-lens {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 10px solid white;
  margin: 30px auto 0 auto;
  z-index: 0;
}

.instagram-flash {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  border: 8px solid white;
  background-color: white;
  position: absolute;
  top: 10px;
  right: 10px;
}

.npr-outerRing {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: auto;
  position: relative;
  overflow: hidden;
}

.npr-rectangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 45px 0 45px 85px;
  border-color: transparent transparent transparent #2A55C5;
  position: absolute;
}
.npr-rectangle.red {
  border-color: transparent transparent transparent #D51800;
  top: 0;
  left: 18px;
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
.npr-rectangle.black {
  border-color: transparent transparent transparent #181818;
  left: 52px;
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
}
.npr-rectangle.grey {
  border-color: transparent transparent transparent #393939;
  top: 33px;
  left: 65px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.npr-rectangle.blue {
  border-color: transparent transparent transparent #3166CC;
  left: 52px;
  bottom: 0;
  -webkit-transform: rotate(240deg);
          transform: rotate(240deg);
}
.npr-rectangle.lightBlue {
  border-color: transparent transparent transparent #83ADEC;
  left: 15px;
  bottom: 0;
  -webkit-transform: rotate(300deg);
          transform: rotate(300deg);
}
.npr-rectangle.orange {
  border-color: transparent transparent transparent #FF3300;
  -webkit-transform: translate(-4px, 29px);
          transform: translate(-4px, 29px);
}

.npr-innerRing {
  width: 80px;
  height: 80px;
  background-color: white;
  border-radius: 50%;
  z-index: 1;
  position: absolute;
  top: 35px;
  left: 35px;
}

.netflix {
  background-color: #000000;
  position: relative;
}

.netflix-rectangle {
  width: 25px;
  height: 135px;
  background-color: #CF0207;
  position: absolute;
  top: 35px;
  left: 60px;
  z-index: 3;
}
.netflix-rectangle::before, .netflix-rectangle::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #FF040D;
}
.netflix-rectangle::before {
  z-index: 2;
  -webkit-transform: skew(20deg);
          transform: skew(20deg);
  position: absolute;
  left: 25px;
  box-shadow: 0px 10px 20px #111;
}
.netflix-rectangle::after {
  z-index: 1;
  -webkit-transform: skew(0deg);
          transform: skew(0deg);
  position: absolute;
  left: 50px;
  background-color: #CF0207;
}

.paypal {
  background: linear-gradient(-45deg, #0098DA, #002A6E);
  position: relative;
}

.letterCircle {
  width: 47.5px;
  height: 75px;
  border-radius: 0 50% 50% 0;
  background-color: white;
  -webkit-transform: skewx(-10deg);
          transform: skewx(-10deg);
  position: absolute;
  top: 40px;
  left: 93px;
}
.letterCircle::after {
  content: "";
  width: 90%;
  height: 90%;
  position: absolute;
  -webkit-transform: translate(36.6px, 35px);
          transform: translate(36.6px, 35px);
  border-radius: 0 50% 50% 0;
  background-color: rgba(173, 206, 227, 0.7);
}

.letterRectangle {
  width: 40px;
  height: 120px;
  background-color: white;
  border-radius: 5% 0 5% 5%;
  -webkit-transform: skew(-10deg);
          transform: skew(-10deg);
  position: absolute;
  top: 40px;
  left: 50px;
}
.letterRectangle::after {
  content: "";
  width: 90%;
  height: 90%;
  position: absolute;
  -webkit-transform: translate(40px, 35px);
          transform: translate(40px, 35px);
  border-radius: 5% 0 5% 5%;
  background-color: rgba(173, 206, 227, 0.7);
}


<div class="main-container">
  <div class="container">
    <div class="icon-container">
      <div class="bar bar-left"></div>
      <div class="bar bar-middle"></div>
      <div class="bar bar-right"></div>
    </div>
    <h2>Analytics	</h2>
  </div>
  <div class="container">
    <div class="icon-container">
      <div class="envelope">
        <div class="envelope-left"></div>
        <div class="envelope-right"></div>
      </div>
      <div class="envelope-content"></div>
      <div class="envelope-top"></div>
    </div>
    <h2>Inbox</h2>
  </div>
  <div class="container">
    <div class="icon-container">
      <div class="trapezoid trapezoid-yellow"></div>
      <div class="trapezoid trapezoid-blue"></div>
      <div class="trapezoid trapezoid-green"></div>
    </div>
    <h2>Drive</h2>
  </div>
  <div class="container">
    <div class="icon-container weather">
      <div class="sun"></div>
      <div class="dots">
        <div class="box"></div>
      </div>
    </div>
    <h2>Weather</h2>
  </div>
  <div class="container">
    <div class="icon-container">
      <div class="photo-rectangle orange"></div>
      <div class="photo-rectangle yellow"></div>
      <div class="photo-rectangle green"></div>
      <div class="photo-rectangle lightBlue"></div>
      <div class="photo-rectangle blue"></div>
      <div class="photo-rectangle purple"></div>
      <div class="photo-rectangle violet"></div>
      <div class="photo-rectangle red"></div>
    </div>
    <h2>Photos</h2>
  </div>
  <div class="container">
    <div class="icon-container">
      <div class="firstRing">
        <div class="secondRing">
          <div class="thirdRing">
            <div class="fourthRing">
              <div class="scan"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <h2>Find iPhone</h2>
  </div>
  <div class="container">
    <div class="icon-container podcast">
      <div class="podcast-outerRing">
        <div class="podcast-innerRing">
          <div class="podcast-center"></div>
          <div class="podcast-rectangle"></div>
        </div>
      </div>
    </div>
    <h2>Podcast</h2>
  </div>
  <div class="container">
    <div class="icon-container app-store">
      <div class="app-storeRectangle left"></div>
      <div class="app-storeRectangle middle"></div>
      <div class="app-storeRectangle right"></div>
    </div>
    <h2>App Store	</h2>
  </div>
  <!--Adobe Apps-->
  <div class="container">
    <div class="icon-container adobe lightroom">
      <div class="light-rectangle"></div>
      <div class="room-rectangle"></div>
    </div>
    <h2>Lightroom</h2>
  </div>
  <div class="container">
    <div class="icon-container adobe spark">
      <div class="spark-innerRectangle"></div>
      <div class="spark-outerRectangle back"></div>
      <div class="spark-outerRectangle front"></div>
    </div>
    <h2>Spark Post</h2>
  </div>
  <div class="container">
    <div class="icon-container adobe photoshop">
      <div class="photoshop-circle"></div>
      <div class="photoshop-dashed">
        <div class="photoshop-dashed__fill"></div>
      </div>
    </div>
    <h2>Photoshop Mix </h2>
  </div>
  <div class="container">
    <div class="icon-container adobe comp">
      <div class="layer">
        <div class="cross"></div>
      </div>
    </div>
    <h2>Adobe Comp CC </h2>
  </div>
  <!--others-->
  <div class="container">
    <div class="icon-container instagram">
      <div class="instagram-borderRectangle">
        <div class="instagram-lens"></div>
        <div class="instagram-flash"></div>
      </div>
    </div>
    <h2>Instagram</h2>
  </div>
  <div class="container">
    <div class="icon-container">
      <div class="npr-outerRing">
        <div class="npr-rectangle red"></div>
        <div class="npr-rectangle black"></div>
        <div class="npr-rectangle grey"></div>
        <div class="npr-rectangle blue"></div>
        <div class="npr-rectangle lightBlue"></div>
        <div class="npr-rectangle orange"></div>
        <div class="npr-innerRing"></div>
      </div>
    </div>
    <h2>NPR One</h2>
  </div>
  <div class="container">
    <div class="icon-container netflix">
      <div class="netflix-rectangle"></div>
    </div>
    <h2>Netflix</h2>
  </div>
  <div class="container">
    <div class="icon-container paypal">
      <div class="letterCircle"></div>
      <div class="letterRectangle"></div>
    </div>
    <h2>PayPal</h2>
  </div>
</div>

Minimal single element icons Set 3

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #333;
  font-size: 62.5%;
}

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

.flex-center {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.flex-column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

h1 {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10;
  margin: 0;
  padding: 1em;
  text-align: center;
  color: #333;
  background-color: white;
}

.container {
  margin-top: 6em;
}

.display {
  max-width: 70em;
}
.display .box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin: 2em;
  min-width: 8em;
}
.display .box label {
  font-size: 1.5em;
  min-width: 4em;
  text-align: center;
  color: white;
  margin-bottom: 0.5em;
  border-bottom: 0.1em solid white;
}
.display .box:hover .custom-icon {
  transform: scale(1.1);
}
.display .box:hover .custom-icon.pencil, .display .box:hover .custom-icon.no-sound, .display .box:hover .custom-icon.tag, .display .box:hover .custom-icon.usb, .display .box:hover .custom-icon.ruler {
  transform: rotate(45deg) scale(1.1);
}
.display .box:hover .custom-icon.refresh {
  transform: rotate(30deg) scale(1.1);
}
.display .box:hover .custom-icon.link, .display .box:hover .custom-icon.paperclip {
  transform: rotate(-45deg) scale(1.1);
}

.custom-icon {
  position: relative;
  font-size: 2em;
}
.custom-icon::before, .custom-icon::after {
  position: absolute;
  content: '';
}
.custom-icon.double {
  position: relative;
  font-size: 1em;
  min-width: 4em;
}
.custom-icon.double .custom-icon {
  position: absolute;
  margin: 0 !important;
}
.custom-icon.calc {
  width: 1.5em;
  height: 2em;
  border: 0.1em solid white;
  border-radius: 0.2em;
}
.custom-icon.calc::before {
  top: 0.2em;
  right: auto;
  bottom: auto;
  left: 0.2em;
  width: 0.9em;
  height: 0.4em;
  border: 0.1em solid white;
  box-shadow: inset 0 0 0.1em rgba(255, 255, 255, 0.5);
}
.custom-icon.calc::after {
  top: 1em;
  right: auto;
  bottom: auto;
  left: 0.15em;
  width: 1em;
  height: 0.5em;
  border-top: 0.1em dashed white;
  border-bottom: 0.1em dashed white;
}
.custom-icon.paperclip {
  width: 0.5em;
  height: 1.5em;
  top: 0.5em;
  right: auto;
  bottom: auto;
  left: auto;
  border: 0.1em solid white;
  border-top-color: transparent;
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 30%;
  transform: rotate(-45deg);
}
.custom-icon.paperclip::before {
  width: 0.8em;
  height: 1.8em;
  top: -0.6em;
  right: auto;
  bottom: auto;
  left: -0.4em;
  border: 0.1em solid white;
  border-bottom-color: transparent;
  border-top-left-radius: 50% 30%;
  border-top-right-radius: 50% 30%;
  border-bottom-left-radius: 15% 15%;
  border-bottom-right-radius: 20% 20%;
}
.custom-icon.paperclip::after {
  width: 1em;
  height: 1.8em;
  top: -0.1em;
  right: auto;
  bottom: auto;
  left: -0.4em;
  border: 0.1em solid white;
  border-top-color: transparent;
  border-bottom-left-radius: 85% 55%;
  border-bottom-right-radius: 85% 55%;
}
.custom-icon.toolbox {
  margin-top: 0.2em;
  width: 2.5em;
  height: 1.8em;
  border: 0.1em solid white;
  border-radius: 0.1em;
}
.custom-icon.toolbox::before {
  top: -0.4em;
  right: auto;
  bottom: auto;
  left: 0.8em;
  width: 0.75em;
  height: 0.4em;
  border: 0.1em solid white;
  border-top-left-radius: 0.2em;
  border-top-right-radius: 0.2em;
}
.custom-icon.toolbox::after {
  top: 0.7em;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  height: auto;
  border-top: 0.1em solid white;
}
.custom-icon.clipboard {
  margin-top: 0.1em;
  width: 1.8em;
  height: 2em;
  border: 0.1em solid white;
  border-radius: 0.1em;
}
.custom-icon.clipboard::before {
  top: -0.1em;
  right: auto;
  bottom: auto;
  left: 0.45em;
  width: 0.75em;
  height: 0.3em;
  border: 0.1em solid white;
  border-bottom-left-radius: 0.15em;
  border-bottom-right-radius: 0.15em;
  background-color: white;
}
.custom-icon.clipboard::after {
  top: -0.3em;
  right: auto;
  bottom: auto;
  left: 0.65em;
  width: 0.35em;
  height: 0.45em;
  border: 0.1em solid white;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  z-index: 2;
  background-color: white;
}
.custom-icon.document {
  width: 1.8em;
  height: 2em;
  border: 0.1em solid white;
  border-radius: 0.1em;
}
.custom-icon.document::before {
  top: 0.2em;
  right: auto;
  bottom: auto;
  left: 20%;
  width: 60%;
  height: 0.7em;
  border-top: 0.2em solid white;
  border-bottom: 0.1em solid white;
}
.custom-icon.document::after {
  top: 1.1em;
  right: auto;
  bottom: auto;
  left: 20%;
  width: 60%;
  height: 0.4em;
  border-top: 0.1em solid white;
  border-bottom: 0.1em solid white;
}
.custom-icon.pinpoint {
  width: 1.2em;
  height: 1.2em;
  background-color: white;
  border-radius: 50%;
}
.custom-icon.pinpoint::before {
  top: 1.1em;
  right: auto;
  bottom: auto;
  left: 0.5em;
  width: 0.2em;
  height: 0.9em;
  background-color: white;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%);
  z-index: 2;
}
.custom-icon.pinpoint::after {
  top: 1.6em;
  right: auto;
  bottom: auto;
  left: 10%;
  width: 80%;
  height: 0.4em;
  border-radius: 50%;
  border: 0.1em solid white;
  opacity: 0.2;
}
.custom-icon.clock {
  width: 2em;
  height: 2em;
  border: 0.1em solid white;
  border-radius: 50%;
}
.custom-icon.clock::before {
  top: 0.3em;
  right: auto;
  bottom: auto;
  left: 1em;
  width: 0.1em;
  height: 0.7em;
  background-color: white;
  -webkit-clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%);
  transform: rotate(3deg);
}
.custom-icon.clock::after {
  top: 0.8em;
  right: auto;
  bottom: auto;
  left: 0.7em;
  width: 0.1em;
  height: 0.7em;
  background-color: white;
  -webkit-clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%);
  transform: rotate(-125deg);
}
.custom-icon.user {
  width: 0.8em;
  height: 0.8em;
  border: 0.1em solid white;
  border-radius: 50%;
}
.custom-icon.user::before {
  top: 0.65em;
  right: auto;
  bottom: auto;
  left: -0.45em;
  width: 1.5em;
  height: 1em;
  border: 0.1em solid white;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
.custom-icon.male {
  margin-top: 0.2em;
  width: 1.5em;
  height: 1.5em;
  border: 0.15em solid white;
  border-radius: 50%;
}
.custom-icon.male::before {
  top: -0.35em;
  right: auto;
  bottom: auto;
  left: 1.3em;
  width: 0.2em;
  height: 0.6em;
  background-color: white;
  transform: rotate(50deg);
}
.custom-icon.male::after {
  top: -0.35em;
  right: auto;
  bottom: auto;
  left: 1.2em;
  width: 0.5em;
  height: 0.5em;
  border: 0.2em solid white;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(5deg);
}
.custom-icon.female {
  width: 1.5em;
  height: 1.5em;
  border: 0.15em solid white;
  border-radius: 50%;
}
.custom-icon.female::before {
  top: 1.3em;
  right: auto;
  bottom: auto;
  left: 0.5em;
  width: 0.2em;
  height: 0.65em;
  background-color: white;
}
.custom-icon.female::after {
  top: 1.6em;
  right: auto;
  bottom: auto;
  left: 0.3em;
  width: 0.6em;
  height: 0.2em;
  background-color: white;
}
.custom-icon.pencil {
  width: 0.5em;
  height: 1.3em;
  border: 0.1em solid white;
  border-top-left-radius: 0.1em;
  border-top-right-radius: 0.1em;
  transform: rotate(45deg);
}
.custom-icon.pencil::before {
  top: -0.6em;
  right: auto;
  bottom: auto;
  left: -0.05em;
  width: 0.4em;
  height: 0.4em;
  border: 0.2em solid white;
  border-left-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
}
.custom-icon.pencil::after {
  top: 1.3em;
  right: auto;
  bottom: auto;
  left: -0.1em;
  width: 0.5em;
  height: 0.2em;
  border: 0.1em solid white;
}
.custom-icon.flag {
  margin-top: 0.1em;
  width: 0.1em;
  height: 1.6em;
  background-color: white;
  left: -0.6em;
}
.custom-icon.flag::before {
  top: 0.1em;
  right: auto;
  bottom: auto;
  left: 0;
  width: 1.3em;
  height: 0.8em;
  background-color: white;
  -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}
.custom-icon.flag::after {
  top: 0;
  right: auto;
  bottom: auto;
  left: -0.1em;
  width: 0.25em;
  height: 0.25em;
  background-color: white;
  border-radius: 50%;
}
.custom-icon.refresh {
  width: 1.8em;
  height: 1.8em;
  border: 0.1em solid white;
  border-radius: 50%;
  transform: rotate(30deg);
}
.custom-icon.refresh::before {
  top: 0.6em;
  right: auto;
  bottom: auto;
  left: 1.3em;
  width: 0.8em;
  height: 0.8em;
  border: 0.4em solid white;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.custom-icon.refresh::after {
  top: 0.2em;
  right: auto;
  bottom: auto;
  left: -0.45em;
  width: 0.8em;
  height: 0.8em;
  border: 0.4em solid white;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
}
.custom-icon.book {
  top: auto;
  right: auto;
  bottom: auto;
  left: -0.55em;
  width: 0.4em;
  height: 1.8em;
  border: 0.1em solid white;
  border-top-left-radius: 0.1em;
  border-bottom-left-radius: 0.1em;
}
.custom-icon.book::before {
  top: -0.1em;
  right: auto;
  bottom: auto;
  left: 0.2em;
  width: 1.3em;
  height: 1.8em;
  border: 0.1em solid white;
  border-top-right-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
}
.custom-icon.book::after {
  top: 0.3em;
  right: auto;
  bottom: auto;
  left: 0.5em;
  width: 0.7em;
  height: 0.5em;
  border-top: 0.15em solid white;
  border-bottom: 0.15em solid white;
}
.custom-icon.bell {
  width: 1.8em;
  height: 1.3em;
  border: 0.1em solid white;
  border-top-left-radius: 50% 80%;
  border-top-right-radius: 50% 80%;
}
.custom-icon.bell::before {
  top: 1.15em;
  right: auto;
  bottom: auto;
  left: -0.3em;
  width: 2.2em;
  height: 0.4em;
  border: 0.1em solid white;
}
.custom-icon.bell::after {
  top: 1.45em;
  right: auto;
  bottom: auto;
  left: 0.45em;
  width: 0.75em;
  height: 0.4em;
  border: 0.1em solid white;
  border-bottom-left-radius: 50% 80%;
  border-bottom-right-radius: 50% 80%;
}
.custom-icon.mail {
  margin-top: 0.1em;
  width: 2.3em;
  height: 1.5em;
  border: 0.1em solid white;
  border-radius: 0.1em;
}
.custom-icon.mail::before {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 1em;
  border: 1em solid white;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.custom-icon.mail::after {
  top: 0.5em;
  right: auto;
  bottom: auto;
  left: 0.25em;
  width: 1.6em;
  height: 1.6em;
  border: 0.1em solid white;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
}
.custom-icon.comment {
  margin-top: 0.1em;
  width: 2.3em;
  height: 1.5em;
  border: 0.1em solid white;
  border-bottom-color: transparent;
}
.custom-icon.comment::before {
  top: 1.3em;
  right: -0.1em;
  bottom: auto;
  left: auto;
  width: 1.9em;
  height: 0.85em;
  background-color: white;
  -webkit-clip-path: polygon(100% 15%, 100% 0, 30% 0, 0 60%, 10% 60%, 35% 15%);
  clip-path: polygon(100% 15%, 100% 0, 30% 0, 0 60%, 10% 60%, 35% 15%);
}
.custom-icon.comment::after {
  top: 1.3em;
  right: auto;
  bottom: auto;
  left: -0.1em;
  border-top: 0.1em solid white;
  border-right: 0.1em solid white;
  width: 0.5em;
  height: 0.5em;
}
.custom-icon.copy {
  margin-top: 0.4em;
  width: 1.6em;
  height: 1.5em;
  border: 0.1em solid white;
}
.custom-icon.copy::before {
  top: -0.4em;
  right: -0.4em;
  bottom: auto;
  left: auto;
  width: 1.6em;
  height: 1.5em;
  border: 0.1em solid white;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 15%, 0 15%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 15%, 0 15%);
}
.custom-icon.trash {
  margin-top: 0.2em;
  width: 1.8em;
  height: 1.6em;
  border: 0.3em solid white;
  border-top-width: 0.1em;
  border-left-width: 0.4em;
  border-right-width: 0.4em;
  border-bottom-width: 0.1em;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 15%, 85% 15%, 85% 100%, 15% 100%, 15% 15%, 0 15%);
  clip-path: polygon(0 0, 100% 0, 100% 15%, 85% 15%, 85% 100%, 15% 100%, 15% 15%, 0 15%);
  border-bottom-left-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
}
.custom-icon.trash::before {
  top: 0.4em;
  right: auto;
  bottom: auto;
  left: 0.3em;
  width: 0.4em;
  height: 0.7em;
  border-left: 0.1em solid white;
  border-right: 0.1em solid white;
}
.custom-icon.trash::after {
  top: -0.3em;
  right: auto;
  bottom: auto;
  left: 0.1em;
  width: 0.8em;
  height: 0.3em;
  border: 0.1em solid white;
  border-bottom-color: transparent;
}
.custom-icon.mobile {
  width: 1.2em;
  height: 1.8em;
  border: 0.1em solid white;
  border-radius: 0.1em;
}
.custom-icon.mobile::before {
  top: 0.2em;
  right: auto;
  bottom: auto;
  left: 0.3em;
  width: 0.4em;
  height: 0.1em;
  background-color: white;
}
.custom-icon.mobile::after {
  top: 1.2em;
  right: auto;
  bottom: auto;
  left: 0.35em;
  width: 0.3em;
  height: 0.3em;
  border: 0.1em solid white;
  border-radius: 50%;
}
.custom-icon.tablet {
  margin-top: 0.1em;
  width: 2.3em;
  height: 1.6em;
  border: 0.3em solid white;
  border-radius: 0.1em;
}
.custom-icon.tablet::before {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 1.7em;
  height: 1em;
  border: 0.1em solid white;
  border-radius: 0.1em;
  opacity: 0.2;
}
.custom-icon.tablet::after {
  top: 0.4em;
  right: -0.25em;
  bottom: auto;
  left: auto;
  width: 0.2em;
  height: 0.2em;
  background-color: #333;
  border-radius: 50%;
}
.custom-icon.desktop {
  width: 2.5em;
  height: 1.5em;
  border: 0.1em solid white;
  border-radius: 0.1em;
}
.custom-icon.desktop::before {
  top: 1.3em;
  right: auto;
  bottom: auto;
  left: 1.1em;
  width: 0.1em;
  height: 0.4em;
  background-color: white;
}
.custom-icon.desktop::after {
  top: 1.6em;
  right: auto;
  bottom: auto;
  left: 0.6em;
  width: 1.1em;
  height: 0.1em;
  background-color: white;
}
.custom-icon.headphones {
  width: 1.6em;
  height: 0.8em;
  border: 0.1em solid white;
  border-bottom-color: transparent;
  border-radius: 50% 50% 0 0;
}
.custom-icon.headphones::before {
  top: 0.6em;
  right: auto;
  bottom: auto;
  left: -0.4em;
  width: 0.6em;
  height: 1.1em;
  border: 0.1em solid white;
  border-top-left-radius: 45%;
  border-bottom-left-radius: 45%;
}
.custom-icon.headphones::after {
  top: 0.6em;
  right: -0.4em;
  bottom: auto;
  left: auto;
  width: 0.6em;
  height: 1.1em;
  border: 0.1em solid white;
  border-top-right-radius: 45%;
  border-bottom-right-radius: 45%;
}
.custom-icon.camera {
  margin-top: 0.2em;
  width: 2em;
  height: 1.4em;
  border: 0.1em solid white;
  border-top-width: 0.2em;
  border-radius: 0.1em;
  -webkit-clip-path: polygon(0 10%, 15% 10%, 15% 0, 35% 0, 35% 10%, 100% 10%, 100% 100%, 0 100%);
  clip-path: polygon(0 10%, 15% 10%, 15% 0, 35% 0, 35% 10%, 100% 10%, 100% 100%, 0 100%);
}
.custom-icon.camera::before {
  top: 0.15em;
  right: auto;
  bottom: auto;
  left: 0.5em;
  width: 0.8em;
  height: 0.8em;
  border: 0.1em solid white;
  border-radius: 50%;
  box-shadow: inset 0 0 0.1em rgba(255, 255, 255, 0.8);
}
.custom-icon.camera::after {
  top: 0.3em;
  right: auto;
  bottom: auto;
  left: 0.65em;
  width: 0.5em;
  height: 0.5em;
  border: 0.1em solid white;
  border-radius: 50%;
  opacity: 0.5;
}
.custom-icon.levels {
  margin-top: 0.1em;
  width: 0.8em;
  height: 1.5em;
  border: 0.1em solid white;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 0.1em;
}
.custom-icon.levels::before {
  top: 0.2em;
  right: auto;
  bottom: auto;
  left: -0.3em;
  width: 0.5em;
  height: 0.5em;
  border: 0.1em solid white;
  background-color: #333;
  border-radius: 50%;
}
.custom-icon.levels::after {
  top: 0.6em;
  right: auto;
  bottom: auto;
  left: 0.4em;
  width: 0.5em;
  height: 0.5em;
  border: 0.1em solid white;
  background-color: #333;
  border-radius: 50%;
}
.custom-icon.download {
  margin-top: 0.1em;
  width: 0.4em;
  height: 0.8em;
  background-color: white;
  border-radius: 0.1em;
}
.custom-icon.download::before {
  top: 0.7em;
  right: auto;
  bottom: auto;
  left: -0.3em;
  width: 0.5em;
  height: 0.5em;
  border: 0.5em solid white;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
}
.custom-icon.download::after {
  top: 1em;
  right: auto;
  bottom: auto;
  left: -0.7em;
  width: 1.8em;
  height: 0.5em;
  border: 0.2em solid white;
  border-top-width: 0;
}
.custom-icon.upload {
  width: 0.4em;
  height: 0.8em;
  top: 0.5em;
  right: auto;
  bottom: auto;
  left: auto;
  background-color: white;
  border-radius: 0.1em;
}
.custom-icon.upload::before {
  top: -0.9em;
  right: auto;
  bottom: auto;
  left: -0.3em;
  width: 0.5em;
  height: 0.5em;
  border: 0.5em solid white;
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
}
.custom-icon.upload::after {
  top: 0.6em;
  right: auto;
  bottom: auto;
  left: -0.7em;
  width: 1.8em;
  height: 0.5em;
  border: 0.2em solid white;
  border-top-width: 0;
}
.custom-icon.link {
  top: 0.4em;
  right: auto;
  bottom: auto;
  left: auto;
  width: 0.2em;
  height: 0.8em;
  background-color: white;
  border-radius: 0.1em;
  transform: rotate(-45deg);
}
.custom-icon.link::before, .custom-icon.link::after {
  width: 0.6em;
  height: 0.8em;
  background-color: white;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 25% 0, 25% 65%, 75% 65%, 75% 0);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 25% 0, 25% 65%, 75% 65%, 75% 0);
  border-bottom-left-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
}
.custom-icon.link::before {
  top: 0.5em;
  right: auto;
  bottom: auto;
  left: -0.2em;
}
.custom-icon.link::after {
  top: -0.5em;
  right: auto;
  bottom: auto;
  left: -0.2em;
  transform: rotate(180deg);
}
.custom-icon.hourglass {
  width: 1em;
  height: 0.1em;
  top: 0.1em;
  right: auto;
  bottom: auto;
  left: auto;
  background-color: white;
  border-radius: 50%;
}
.custom-icon.hourglass::before {
  top: 0.1em;
  right: auto;
  bottom: auto;
  left: auto;
  width: 1em;
  height: 1em;
  border: 0.5em solid white;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 50% 90%, 0 100%, 0 0, 50% 20%);
  clip-path: polygon(100% 0, 100% 100%, 50% 90%, 0 100%, 0 0, 50% 20%);
}
.custom-icon.hourglass::after {
  top: 1.1em;
  right: auto;
  bottom: auto;
  left: auto;
  width: 1em;
  height: 0.1em;
  background-color: white;
  border-radius: 50%;
}
.custom-icon.stats {
  margin-top: 0.2em;
  width: 1.7em;
  height: 1.2em;
  border: 0.1em solid white;
  border-top-color: transparent;
  border-right-color: transparent;
}
.custom-icon.stats::before {
  width: 0.9em;
  height: 0.5em;
  top: 0.3em;
  right: auto;
  bottom: auto;
  left: 0.1em;
  border: 0.1em solid white;
  border-bottom-color: transparent;
  border-left-color: transparent;
  transform: rotate(-30deg);
}
.custom-icon.stats::after {
  top: 0.3em;
  right: auto;
  bottom: auto;
  left: 0.9em;
  width: 0.6em;
  height: 0.1em;
  background-color: white;
  transform: rotate(-40deg);
}
.custom-icon.peace {
  margin-top: 0.2em;
  width: 1.5em;
  height: 1.5em;
  border: 0.1em solid white;
  border-radius: 50%;
  overflow: hidden;
}
.custom-icon.peace::before {
  width: 0.1em;
  height: 1.5em;
  top: 0em;
  right: auto;
  bottom: auto;
  left: 0.6em;
  background-color: white;
}
.custom-icon.peace::after {
  top: 0.7em;
  right: auto;
  bottom: auto;
  left: 0.25em;
  width: 0.8em;
  height: 0.8em;
  border: 0.1em solid white;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
}
.custom-icon.sound {
  width: 0.5em;
  height: 0.1em;
  top: 0.6em;
  right: auto;
  bottom: auto;
  left: 0.7em;
  background-color: white;
}
.custom-icon.sound::before {
  width: 0.8em;
  height: 1.5em;
  top: -0.7em;
  right: auto;
  bottom: auto;
  left: -0.9em;
  background-color: white;
  -webkit-clip-path: polygon(0 25%, 45% 25%, 90% 0, 90% 100%, 45% 75%, 0 75%);
  clip-path: polygon(0 25%, 45% 25%, 90% 0, 90% 100%, 45% 75%, 0 75%);
}
.custom-icon.sound::after {
  top: -0.45em;
  right: auto;
  bottom: auto;
  left: -0.1em;
  width: 1em;
  height: 1em;
  border: 0.1em solid white;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
  -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%, 0 40%);
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%, 0 40%);
}
.custom-icon.no-sound {
  width: 0.1em;
  height: 1.8em;
  top: -0.2em;
  right: auto;
  bottom: auto;
  left: 0em;
  background-color: white;
  transform: rotate(45deg);
  z-index: 2;
  opacity: 1;
}
.custom-icon.no-sound::before {
  width: 0.4em;
  height: 0.75em;
  top: 0.7em;
  right: auto;
  bottom: auto;
  left: -0.3em;
  background-color: white;
  transform: rotate(-45deg);
  opacity: 0.5;
}
.custom-icon.no-sound::after {
  width: 1.1em;
  height: 1.5em;
  top: 0.3em;
  right: auto;
  bottom: auto;
  left: -0.6em;
  border: 0.4em solid white;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  transform: rotate(-45deg);
  opacity: 0.5;
}
.custom-icon.microphone {
  width: 0.7em;
  height: 1.2em;
  border: 0.1em solid white;
  border-top-left-radius: 50% 30%;
  border-top-right-radius: 50% 30%;
  border-bottom-left-radius: 50% 30%;
  border-bottom-right-radius: 50% 30%;
}
.custom-icon.microphone::before {
  top: 0.4em;
  right: auto;
  bottom: auto;
  left: -0.2em;
  width: 0.9em;
  height: 0.9em;
  border: 0.1em solid white;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(45deg);
}
.custom-icon.microphone::after {
  top: 1.1em;
  right: auto;
  bottom: auto;
  left: 0em;
  width: 0.5em;
  height: 0.5em;
  background-color: white;
  -webkit-clip-path: polygon(0 100%, 0 75%, 35% 75%, 35% 0, 65% 0, 65% 75%, 100% 75%, 100% 100%);
  clip-path: polygon(0 100%, 0 75%, 35% 75%, 35% 0, 65% 0, 65% 75%, 100% 75%, 100% 100%);
}
.custom-icon.rss {
  width: 0.5em;
  height: 0.5em;
  top: 1em;
  right: auto;
  bottom: auto;
  left: -0.4em;
  background-color: white;
  border-radius: 50%;
}
.custom-icon.rss::before {
  top: -0.5em;
  right: auto;
  bottom: auto;
  left: -1em;
  width: 2em;
  height: 2em;
  border: 0.3em solid white;
  border-radius: 50%;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
}
.custom-icon.rss::after {
  top: -1em;
  right: auto;
  bottom: auto;
  left: -1.5em;
  width: 3em;
  height: 3em;
  border: 0.3em solid white;
  border-radius: 50%;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
}
.custom-icon.bargraph {
  width: 0.5em;
  height: 1.5em;
  top: 0em;
  right: auto;
  bottom: auto;
  left: -0.6em;
  border: 0.1em solid white;
}
.custom-icon.bargraph::before {
  width: 0.5em;
  height: 0.7em;
  top: 0.7em;
  right: auto;
  bottom: auto;
  left: 0.5em;
  border: 0.1em solid white;
}
.custom-icon.bargraph::after {
  width: 0.5em;
  height: 1.1em;
  top: 0.3em;
  right: auto;
  bottom: auto;
  left: 1.1em;
  border: 0.1em solid white;
}
.custom-icon.lightbulb {
  width: 1.3em;
  height: 1.5em;
  top: 0em;
  right: auto;
  bottom: auto;
  left: auto;
  border: 0.1em solid white;
  border-top-left-radius: 90% 90%;
  border-top-right-radius: 90% 90%;
  border-bottom-left-radius: 70% 100%;
  border-bottom-right-radius: 70% 100%;
}
.custom-icon.lightbulb::before {
  width: 0.7em;
  height: 0.5em;
  top: 1.3em;
  right: auto;
  bottom: auto;
  left: 0.2em;
  border: 0.1em solid white;
  border-top-width: 0.2em;
  border-bottom-color: transparent;
}
.custom-icon.lightbulb::after {
  width: 0.7em;
  height: 0.3em;
  top: 1.6em;
  right: auto;
  bottom: auto;
  left: 0.2em;
  border: 0.1em solid white;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.custom-icon.globe {
  width: 1.5em;
  height: 1.5em;
  border: 0.1em solid white;
  border-radius: 50%;
}
.custom-icon.globe::before {
  width: 1.9em;
  height: 1.9em;
  top: -0.3em;
  right: auto;
  bottom: auto;
  left: -0.3em;
  border: 0.1em solid white;
  border-radius: 50%;
  border-left-color: transparent;
  border-top-color: transparent;
  transform: rotate(90deg);
}
.custom-icon.globe::after {
  top: 1.6em;
  right: auto;
  bottom: auto;
  left: 0.4em;
  width: 0.5em;
  height: 0.3em;
  background-color: white;
  -webkit-clip-path: polygon(0 100%, 0 75%, 35% 75%, 35% 0, 65% 0, 65% 75%, 100% 75%, 100% 100%);
  clip-path: polygon(0 100%, 0 75%, 35% 75%, 35% 0, 65% 0, 65% 75%, 100% 75%, 100% 100%);
}
.custom-icon.search {
  width: 1.2em;
  height: 1.2em;
  top: 0.2em;
  right: auto;
  bottom: auto;
  left: auto;
  border: 0.1em solid white;
  border-radius: 50%;
}
.custom-icon.search::before {
  width: 0.5em;
  height: 0.3em;
  top: 1.1em;
  right: auto;
  bottom: auto;
  left: 0.8em;
  background-color: white;
  transform: rotate(50deg);
  border-top-right-radius: 0.1em;
  border-bottom-right-radius: 0.1em;
}
.custom-icon.dollar {
  width: 0.2em;
  height: 1.9em;
  top: 0em;
  right: auto;
  bottom: auto;
  left: 0.1em;
  border: 0.2em solid white;
  border-left-width: 0;
  border-right-width: 0;
}
.custom-icon.dollar::before {
  width: 0.8em;
  height: 0.8em;
  top: 0em;
  right: auto;
  bottom: auto;
  left: -0.3em;
  border: 0.2em solid white;
  border-bottom-color: transparent;
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  transform: rotate(-60deg);
}
.custom-icon.dollar::after {
  width: 0.8em;
  height: 0.8em;
  top: 0.7em;
  right: auto;
  bottom: auto;
  left: -0.3em;
  border: 0.2em solid white;
  border-bottom-color: transparent;
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  transform: rotate(120deg);
}
.custom-icon.home {
  width: 1.7em;
  height: 0.8em;
  top: 0.8em;
  right: auto;
  bottom: auto;
  left: 0.1em;
  border: 0.6em solid white;
  border-bottom-width: 0;
  border-top-width: 0;
}
.custom-icon.home::before {
  width: 1.9em;
  height: 1.9em;
  top: -1.9em;
  right: auto;
  bottom: auto;
  left: -0.75em;
  border: 1em solid white;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
}
.custom-icon.lock {
  width: 1.5em;
  height: 0.5em;
  top: 1.1em;
  right: auto;
  bottom: auto;
  left: 0.1em;
  border: 0.2em solid white;
  border-top-width: 0;
  border-left-width: 0.7em;
  border-right-width: 0.7em;
  border-bottom-left-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
}
.custom-icon.lock::before {
  width: 1.5em;
  height: 0.6em;
  top: -0.5em;
  right: auto;
  bottom: auto;
  left: -0.7em;
  border: 0.2em solid white;
  border-bottom-width: 0;
  border-left-width: 0.6em;
  border-right-width: 0.6em;
}
.custom-icon.lock::after {
  width: 1.4em;
  height: 0.9em;
  top: -1.2em;
  right: auto;
  bottom: auto;
  left: -0.65em;
  border: 0.2em solid white;
  border-bottom-color: transparent;
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50%;
}
.custom-icon.unlock {
  width: 1.5em;
  height: 0.5em;
  top: 1.1em;
  right: auto;
  bottom: auto;
  left: 0.55em;
  border: 0.2em solid white;
  border-top-width: 0;
  border-left-width: 0.7em;
  border-right-width: 0.7em;
  border-bottom-left-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
}
.custom-icon.unlock::before {
  width: 1.5em;
  height: 0.6em;
  top: -0.5em;
  right: auto;
  bottom: auto;
  left: -0.7em;
  border: 0.2em solid white;
  border-bottom-width: 0;
  border-left-width: 0.6em;
  border-right-width: 0.6em;
}
.custom-icon.unlock::after {
  width: 1.4em;
  height: 0.9em;
  top: -1.2em;
  right: auto;
  bottom: auto;
  left: -1.65em;
  border: 0.2em solid white;
  border-bottom-width: 0;
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50%;
}
.custom-icon.usb {
  width: 1.4em;
  height: 0.8em;
  top: 0.8em;
  right: auto;
  bottom: auto;
  left: 0.4em;
  background-color: white;
  border-top-right-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
  transform: rotate(45deg);
}
.custom-icon.usb::before {
  width: 0.7em;
  height: 0.7em;
  top: 0.05em;
  right: auto;
  bottom: auto;
  left: -0.8em;
  background-color: white;
}
.custom-icon.usb::after {
  width: 0.2em;
  height: 0.4em;
  top: 0.2em;
  right: auto;
  bottom: auto;
  left: -0.65em;
  border: 0.1em solid #333;
  border-left-width: 0;
  border-right-width: 0;
}
.custom-icon.music {
  width: 1.2em;
  height: 0.8em;
  top: 0.8em;
  right: auto;
  bottom: auto;
  left: -0.1em;
  background-color: white;
  border-radius: 50%;
}
.custom-icon.music::before {
  width: 0.2em;
  height: 1.2em;
  top: -0.8em;
  right: auto;
  bottom: auto;
  left: 0.75em;
  background-color: white;
  transform: rotate(-25deg);
}
.custom-icon.music::after {
  width: 1em;
  height: 0.4em;
  top: -0.9em;
  right: auto;
  bottom: auto;
  left: 0.5em;
  background-color: white;
  transform: skewX(25deg);
}
.custom-icon.tag {
  width: 1.2em;
  height: 0.8em;
  top: 0.4em;
  right: auto;
  bottom: auto;
  left: 0.2em;
  background-color: white;
  transform: rotate(45deg);
}
.custom-icon.tag::before {
  width: 1em;
  height: 0.8em;
  top: 0em;
  right: auto;
  bottom: auto;
  left: -1em;
  border: 0.4em solid white;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.custom-icon.tag::after {
  width: 0.2em;
  height: 0.2em;
  top: 0.3em;
  right: auto;
  bottom: auto;
  left: -0.1em;
  background-color: #333;
  border-radius: 50%;
}
.custom-icon.mug {
  width: 1.5em;
  height: 1.3em;
  top: 0em;
  right: auto;
  bottom: auto;
  left: 0em;
  background-color: white;
  border-bottom-left-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
}
.custom-icon.mug::before {
  width: 0.6em;
  height: 1em;
  top: 0.15em;
  right: auto;
  bottom: auto;
  left: 1.3em;
  border: 0.2em solid white;
  border-left-width: 0;
  border-top-right-radius: 0.2em;
  border-bottom-right-radius: 0.2em;
}
.custom-icon.mug::after {
  width: 1.8em;
  height: 0.2em;
  top: 1.4em;
  right: auto;
  bottom: auto;
  left: -0.1em;
  background-color: white;
  border-bottom-left-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
}
.custom-icon.ruler {
  width: 1.9em;
  height: 0.8em;
  top: 0.4em;
  right: auto;
  bottom: auto;
  left: 0em;
  background-color: white;
  transform: rotate(45deg);
}
.custom-icon.ruler::before {
  width: 0.9em;
  height: 0.5em;
  top: 0.3em;
  right: auto;
  bottom: auto;
  left: 0.3em;
  border: 0.1em solid #333;
  border-top-width: 0;
  border-bottom-width: 0;
}
.custom-icon.ruler::after {
  width: 0.9em;
  height: 0.3em;
  top: 0.5em;
  right: auto;
  bottom: auto;
  left: 0.7em;
  border: 0.1em solid #333;
  border-top-width: 0;
  border-bottom-width: 0;
}
.custom-icon.shield {
  width: 1.5em;
  height: 1.6em;
  top: 0em;
  right: auto;
  bottom: auto;
  left: 0em;
  background-color: white;
  border-top-left-radius: 50% 20%;
  border-top-right-radius: 50% 20%;
  border-bottom-left-radius: 50% 80%;
  border-bottom-right-radius: 50% 80%;
}
.custom-icon.shield::before {
  width: 1.3em;
  height: 1.4em;
  top: 0.1em;
  right: auto;
  bottom: auto;
  left: 0.1em;
  background-color: #333;
  border-top-left-radius: 50% 20%;
  border-top-right-radius: 50% 20%;
  border-bottom-left-radius: 50% 80%;
  border-bottom-right-radius: 50% 80%;
}
.custom-icon.shield::after {
  width: 1.1em;
  height: 1.2em;
  top: 0.2em;
  right: auto;
  bottom: auto;
  left: 0.2em;
  background-color: white;
  border-top-left-radius: 50% 20%;
  border-top-right-radius: 50% 20%;
  border-bottom-left-radius: 50% 80%;
  border-bottom-right-radius: 50% 80%;
}
.custom-icon.credit-card {
  width: 1.9em;
  height: 1.3em;
  top: 0em;
  right: auto;
  bottom: auto;
  left: 0em;
  background-color: white;
  border-radius: 0.2em;
}
.custom-icon.credit-card::before {
  width: 2.05em;
  height: 0.3em;
  top: 0.2em;
  right: auto;
  bottom: auto;
  left: -0.1em;
  background-color: #333;
}
.custom-icon.credit-card::after {
  width: 0.6em;
  height: 0.1em;
  top: 1em;
  right: auto;
  bottom: auto;
  left: 1.1em;
  background-color: #333;
}
.custom-icon.mortarboard {
  width: 1.3em;
  height: 0.9em;
  top: 0.9em;
  right: auto;
  bottom: auto;
  left: 0em;
  border: 0.1em solid white;
  border-top-width: 0;
  border-bottom-left-radius: 50% 30%;
  border-bottom-right-radius: 50% 30%;
}
.custom-icon.mortarboard::before {
  width: 1.3em;
  height: 1.3em;
  top: -0.9em;
  right: auto;
  bottom: auto;
  left: -0.1em;
  border: 0.1em solid white;
  transform: scaleX(1.2) scaleY(0.8) rotate(45deg);
}
.custom-icon.mortarboard::after {
  width: 0.1em;
  height: 0.6em;
  top: -0.2em;
  right: auto;
  bottom: auto;
  left: 1.5em;
  background-color: white;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
<section class="container flex-center">
  <div class="display flex-center">
    <div class="box">
      <label>Calculator</label>
      <div class="custom-icon calc"></div>
    </div>
    <div class="box">
      <label>Paperclip</label>
      <div class="custom-icon paperclip"></div>
    </div>
    <div class="box">
      <label>Clipboard</label>
      <div class="custom-icon clipboard"></div>
    </div>
    <div class="box">
      <label>Document</label>
      <div class="custom-icon document"></div>
    </div>
    <div class="box">
      <label>Pinpoint</label>
      <div class="custom-icon pinpoint"></div>
    </div>
    <div class="box">
      <label>Clock</label>
      <div class="custom-icon clock"></div>
    </div>
    <div class="box">
      <label>User</label>
      <div class="custom-icon user"></div>
    </div>
    <div class="box">
      <label>Male</label>
      <div class="custom-icon male"></div>
    </div>
    <div class="box">
      <label>Female</label>
      <div class="custom-icon female"></div>
    </div>
    <div class="box">
      <label>Transgender</label>
      <!-- this one technically isn't a single element,-->
      <!-- it's two single element icons on top of one-->
      <!-- another :/-->
      <div class="custom-icon double">
        <div class="custom-icon male"></div>
        <div class="custom-icon female"></div>
      </div>
    </div>
    <div class="box">
      <label>Pencil</label>
      <div class="custom-icon pencil"></div>
    </div>
    <div class="box">
      <label>Flag</label>
      <div class="custom-icon flag"></div>
    </div>
    <div class="box">
      <label>Refresh</label>
      <div class="custom-icon refresh"></div>
    </div>
    <div class="box">
      <label>Book</label>
      <div class="custom-icon book"></div>
    </div>
    <div class="box">
      <label>Toolbox</label>
      <div class="custom-icon toolbox"></div>
    </div>
    <div class="box">
      <label>Mail</label>
      <div class="custom-icon mail"></div>
    </div>
    <div class="box">
      <label>Comment</label>
      <div class="custom-icon comment"></div>
    </div>
    <div class="box">
      <label>Copy</label>
      <div class="custom-icon copy"></div>
    </div>
    <div class="box">
      <label>Trash</label>
      <div class="custom-icon trash"></div>
    </div>
    <div class="box">
      <label>Mobile</label>
      <div class="custom-icon mobile"></div>
    </div>
    <div class="box">
      <label>Tablet</label>
      <div class="custom-icon tablet"></div>
    </div>
    <div class="box">
      <label>Desktop</label>
      <div class="custom-icon desktop"></div>
    </div>
    <div class="box">
      <label>Headphones</label>
      <div class="custom-icon headphones"></div>
    </div>
    <div class="box">
      <label>Camera</label>
      <div class="custom-icon camera"></div>
    </div>
    <div class="box">
      <label>Levels</label>
      <div class="custom-icon levels"></div>
    </div>
    <div class="box">
      <label>Download</label>
      <div class="custom-icon download"></div>
    </div>
    <div class="box">
      <label>Upload</label>
      <div class="custom-icon upload"></div>
    </div>
    <div class="box">
      <label>Link</label>
      <div class="custom-icon link"></div>
    </div>
    <div class="box">
      <label>Hourglass</label>
      <div class="custom-icon hourglass"></div>
    </div>
    <div class="box">
      <label>Stats</label>
      <div class="custom-icon stats"></div>
    </div>
    <div class="box">
      <label>Peace</label>
      <div class="custom-icon peace"></div>
    </div>
    <div class="box">
      <label>Sound</label>
      <div class="custom-icon sound"></div>
    </div>
    <div class="box">
      <label>No Sound</label>
      <div class="custom-icon no-sound"></div>
    </div>
    <div class="box">
      <label>Microphone</label>
      <div class="custom-icon microphone"></div>
    </div>
    <div class="box">
      <label>RSS</label>
      <div class="custom-icon rss"></div>
    </div>
    <div class="box">
      <label>Bar Graph</label>
      <div class="custom-icon bargraph"></div>
    </div>
    <div class="box">
      <label>Bell</label>
      <div class="custom-icon bell"></div>
    </div>
    <div class="box">
      <label>Lightbulb</label>
      <div class="custom-icon lightbulb"></div>
    </div>
    <div class="box">
      <label>Globe</label>
      <div class="custom-icon globe"></div>
    </div>
    <div class="box">
      <label>Search</label>
      <div class="custom-icon search"></div>
    </div>
    <div class="box">
      <label>Dollar</label>
      <div class="custom-icon dollar"></div>
    </div>
    <div class="box">
      <label>Home</label>
      <div class="custom-icon home"></div>
    </div>
    <div class="box">
      <label>Lock</label>
      <div class="custom-icon lock"></div>
    </div>
    <div class="box">
      <label>Unlock</label>
      <div class="custom-icon unlock"></div>
    </div>
    <div class="box">
      <label>USB</label>
      <div class="custom-icon usb"></div>
    </div>
    <div class="box">
      <label>Music</label>
      <div class="custom-icon music"></div>
    </div>
    <div class="box">
      <label>Tag</label>
      <div class="custom-icon tag"></div>
    </div>
    <div class="box">
      <label>Mug</label>
      <div class="custom-icon mug"></div>
    </div>
    <div class="box">
      <label>Ruler</label>
      <div class="custom-icon ruler"></div>
    </div>
    <div class="box">
      <label>Shield</label>
      <div class="custom-icon shield"></div>
    </div>
    <div class="box">
      <label>Credit Card</label>
      <div class="custom-icon credit-card"></div>
    </div>
    <div class="box">
      <label>Mortarboard</label>
      <div class="custom-icon mortarboard"></div>
    </div>
  </div>
</section>

84 GUI Icons with Pure CSS

html, body {
  padding: 0;
  margin: 0;
  font: 1em/1.4 Cambria, Georgia, sans-serif;
  color: #333;
  background: #fff;
}

header, hgroup {
  display: block;
}

a:link, a:visited {
  border-bottom: 1px solid #c55500;
  color: #c55500;
  text-decoration: none;
}

a:visited {
  border-bottom: 1px solid #730800;
  color: #730800;
}

a:hover, a:focus, a:active {
  border: 0;
  color: #fff;
  background: #c55500;
}

.container {
  width: 540px;
  overflow: hidden;
  padding: 0 0 10px;
  margin: 0 auto 40px;
}

.header {
  border-bottom: 1px solid #ddd;
}

.footer {
  padding: 0 0 30px;
  margin-top: 20px;
  margin-bottom: 0;
  text-align: center;
}

.section {
  float: left;
  width: 30%;
  margin-left: 4.9%;
}

h2 + .section {
  margin-left: 0;
}

h1 {
  margin: 1em 0 0;
  font-size: 2.5em;
  font-weight: normal;
  line-height: 1.2;
  text-align: center;
}

h2 {
  margin: 0.5em 0 1.5em;
  font-size: 1.25em;
  font-weight: normal;
  font-style: italic;
  text-align: center;
}

p {
  margin: 1em 0;
  line-height: 1.4em;
}

pre {
  margin: 1.4em 0;
  font-size: 12px;
  line-height: 1.4em;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.follow {
  clear: both;
  margin-top: 1em;
}

.follow span {
  font-weight: bold;
}

/* ----------------------------------------------------------------------------------------------------------------------------
== ICONS STYLES
** ---------------------------------------------------------------------------------------------------------------------------- */
ul {
  padding: 0;
  margin: 0;
}

li {
  position: relative;
  z-index: 1;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0 0 0.25em;
}

li a:link, li a:visited {
  display: block;
  border: 0;
  padding-left: 28px;
  color: #c55500;
}

li a:hover, li a:focus, li a:active {
  color: #730800;
  background: transparent;
}

li:before, li:after, li a:before, li a:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
}

li a:before, li a:after {
  margin: -8px 0 0;
  background: #c55500;
}

li a:hover:before, li a:focus:before, li a:active:before {
  background: #730800;
}

/* Not links */
.player,
.headphones,
.ribbon,
.views,
.location,
.info,
.help,
.pie,
.success,
.success-alt,
.warning,
.denied {
  padding-left: 28px;
}

/* ----------------------------------------------------------------------------------------------------------------------------
== USER INTERACTIONS
** ---------------------------------------------------------------------------------------------------------------------------- */
/* SEARCH
------------------------------------------------------------------------------------------------------------------------------- */
.search a:before {
  width: 6px;
  height: 6px;
  border: 3px solid #c55500;
  background: transparent;
  /* css3 */
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

.search a:after {
  left: 10px;
  width: 3px;
  height: 7px;
  margin-top: 0;
  /* css3 */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.search a:hover:before, .search a:focus:before, .search a:active:before {
  border-color: #730800;
  background: transparent;
}

.search a:hover:after, .search a:focus:after, .search a:active:after {
  background: #730800;
}

/* ADD
------------------------------------------------------------------------------------------------------------------------------- */
.add a:before {
  width: 16px;
  height: 16px;
  /* css3 */
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.add a:after {
  left: 3px;
  width: 10px;
  height: 2px;
  margin-top: -1px;
  background: #fff;
}

.add:before {
  z-index: 10;
  left: 7px;
  width: 2px;
  height: 10px;
  margin-top: -5px;
  background: #fff;
}

/* Alternative style */
.add-alt a:before {
  left: 6px;
  width: 5px;
  height: 15px;
  margin-top: -7px;
  background: #c55500;
}

.add-alt a:after {
  left: 1px;
  width: 15px;
  height: 5px;
  margin-top: -2px;
  background: #c55500;
}

.add-alt a:hover:after, .add-alt a:focus:after, .add-alt a:active:after {
  background: #730800;
}

/* REMOVE
------------------------------------------------------------------------------------------------------------------------------- */
.remove a:before {
  width: 16px;
  height: 16px;
  /* css3 */
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.remove a:after {
  left: 3px;
  width: 10px;
  height: 2px;
  margin-top: -1px;
  background: #fff;
}

/* Alternative style */
.remove-alt a:before {
  left: 1px;
  width: 15px;
  height: 5px;
  margin-top: -2px;
  background: #c55500;
}

/* DELETE
------------------------------------------------------------------------------------------------------------------------------- */
.delete a:before {
  width: 16px;
  height: 16px;
  /* css3 */
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.delete a:after {
  left: 3px;
  width: 10px;
  height: 2px;
  margin-top: -1px;
  background: #fff;
  /* css3 */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.delete:before {
  z-index: 10;
  left: 7px;
  width: 2px;
  height: 10px;
  margin-top: -5px;
  background: #fff;
  /* css3 */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Alternative style */
.delete-alt a:before, .delete-alt a:after {
  left: 6px;
  width: 5px;
  height: 15px;
  margin-top: -7px;
  background: #c55500;
  /* css3 */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.delete-alt a:after {
  left: 1px;
  width: 15px;
  height: 5px;
  margin-top: -2px;
}

.delete-alt a:hover:after,
.delete-alt a:focus:after,
.delete-alt a:active:after {
  background: #730800;
}

/* REPORT
------------------------------------------------------------------------------------------------------------------------------- */
.report a:before {
  left: 3px;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-width: 7px 0 0 2px;
  border-style: solid;
  border-color: #c55500;
  background: transparent;
  /* css3 */
  -webkit-transform: skewY(-8deg);
  -moz-transform: skewY(-8deg);
  -ms-transform: skewY(-8deg);
  -o-transform: skewY(-8deg);
  transform: skewY(-8deg);
}

.report a:after {
  left: 9px;
  width: 6px;
  height: 7px;
  margin-top: -3px;
  background: #c55500;
  /* css3 */
  -webkit-transform: skewY(-6deg);
  -moz-transform: skewY(-6deg);
  -ms-transform: skewY(-6deg);
  -o-transform: skewY(-6deg);
  transform: skewY(-6deg);
}

.report a:hover:before, .report a:focus:before, .report a:active:before {
  border-color: #730800;
  background: transparent;
}

.report a:hover:after, .report a:focus:after, .report a:active:after {
  background: #730800;
}

/* TRASH
------------------------------------------------------------------------------------------------------------------------------- */
.trash:after {
  left: 6px;
  width: 1px;
  height: 7px;
  border-right: 3px double #c55500;
  border-left: 1px solid #c55500;
  margin-top: -2px;
}

.trash a:before {
  left: 2px;
  width: 9px;
  height: 11px;
  margin-top: -6px;
  border: 2px solid #c55500;
  background: transparent;
}

.trash a:after {
  left: 5px;
  width: 3px;
  height: 2px;
  margin-top: -9px;
  border: 2px solid #c55500;
  border-bottom: 0;
  background: transparent;
  /* css3 */
  -webkit-border-top-left-radius: 2px;
  -webkit-border-top-right-radius: 2px;
  -moz-border-radius: 2px 2px 0 0;
  border-radius: 2px 2px 0 0;
}

.trash:hover:after,
.trash a:hover:before,
.trash a:focus:before,
.trash a:active:before,
.trash a:hover:after,
.trash a:focus:after,
.trash a:active:after {
  border-color: #730800;
  background: transparent;
}

/* LOCK / UNLOCK
------------------------------------------------------------------------------------------------------------------------------- */
.lock:before, .lock:after, .unlock:before, .unlock:after {
  z-index: 10;
  left: 8px;
  width: 3px;
  height: 3px;
  margin-top: -2px;
  background: #fff;
  /* css3 */
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.lock:before, .unlock:before {
  left: 9px;
  width: 1px;
  height: 4px;
  margin-top: 0px;
}

.lock a:before, .unlock a:before {
  left: 3px;
  width: 13px;
  height: 10px;
  margin-top: -4px;
}

.lock a:after, .unlock a:after {
  left: 5px;
  width: 5px;
  height: 5px;
  border: 2px solid #c55500;
  border-bottom: 0;
  margin-top: -11px;
  background: transparent;
  /* css3 */
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}

.unlock a:after {
  left: 12px;
}

.lock a:hover:after,
.lock a:focus:after,
.lock a:active:after,
.unlock a:hover:after,
.unlock a:focus:after,
.unlock a:active:after {
  border-color: #730800;
}

/* UPDATE STATUS
------------------------------------------------------------------------------------------------------------------------------- */
.update:before {
  left: 10px;
  border-width: 2px 0 2px 2px;
  border-style: solid;
  border-color: transparent #c55500;
  margin-top: -1px;
}

.update a:before {
  left: 4px;
  width: 10px;
  height: 10px;
  border: 2px solid #c55500;
  margin-top: -6px;
  background: transparent;
  /* css3 */
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.update a:after {
  left: 10px;
  width: 10px;
  height: 3px;
  border: 1px solid #fff;
  margin-top: -6px;
  /* css3 */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.update:hover:before {
  border-left-color: #730800;
}

.update a:hover:before, .update a:focus:before, .update a:active:before {
  border-color: #730800;
  background: transparent;
}

.update a:hover:after, .update a:focus:after, .update a:active:after {
  background: #730800;
}

/* RETWEET
------------------------------------------------------------------------------------------------------------------------------- */
.retweet:before, .retweet a:before {
  border-style: solid;
  border-color: transparent;
  background: transparent;
}

.retweet:before {
  z-index: -1;
  left: 12px;
  margin-top: 2px;
  border-width: 5px 5px 0;
  border-left-color: #fff;
  border-top-color: #c55500;
}

.retweet a:before {
  left: -1px;
  margin-top: -7px;
  border-width: 0 5px 5px;
  border-right-color: #fff;
  border-bottom-color: #c55500;
}

.retweet a:after {
  z-index: -2;
  left: 3px;
  width: 10px;
  height: 6px;
  margin-top: -6px;
  border: 3px solid #c55500;
  background: transparent;
}

.retweet:hover:before {
  border-top-color: #730800;
}

.retweet a:hover:before, .retweet a:focus:before, .retweet a:active:before {
  border-bottom-color: #730800;
  background: transparent;
}

.retweet a:hover:after, .retweet a:focus:after, .retweet a:active:after {
  border-color: #730800;
}

/* SAVE
------------------------------------------------------------------------------------------------------------------------------- */
.save:before, .save a:before {
  left: 6px;
  border-width: 10px 0 10px 8px;
  border-style: solid;
  border-color: transparent #c55500;
  margin-top: -9px;
  background: transparent;
  /* css3 */
  -webkit-transform: rotate(22.5deg);
  -moz-transform: rotate(22.5deg);
  -ms-transform: rotate(22.5deg);
  -o-transform: rotate(22.5deg);
  transform: rotate(22.5deg);
}

.save a:before {
  left: 6px;
  /* css3 */
  -webkit-transform: rotate(157.5deg);
  -moz-transform: rotate(157.5deg);
  -ms-transform: rotate(157.5deg);
  -o-transform: rotate(157.5deg);
  transform: rotate(157.5deg);
}

.save a:after {
  border-width: 8px 10px 0;
  border-style: solid;
  border-color: #c55500 transparent;
  margin-top: -3px;
  background: transparent;
}

.save:hover:before,
.save:focus:before,
.save:active:before,
.save a:hover:before,
.save a:focus:before,
.save a:active:before {
  border-left-color: #730800;
  background: transparent;
}

.save a:hover:after, .save a:focus:after, .save a:active:after {
  border-top-color: #730800;
  background: transparent;
}

/* EDIT
------------------------------------------------------------------------------------------------------------------------------- */
.edit a:before {
  left: 3px;
  width: 5px;
  height: 5px;
  margin-top: 2px;
  background: #c55500;
  -webkit-transform: skew(-10deg, -10deg);
  -moz-transform: skew(-10deg, -10deg);
  -ms-transform: skew(-10deg, -10deg);
  -o-transform: skew(-10deg, -10deg);
  transform: skew(-10deg, -10deg);
}

.edit a:after {
  left: 3px;
  width: 13px;
  height: 6px;
  border-left: 1px solid #fff;
  margin-top: -3px;
  /* css3 */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.edit a:hover:before,
.edit a:focus:before,
.edit a:active:before,
.edit a:hover:after,
.edit a:focus:after,
.edit a:active:after {
  background: #730800;
}

/* DOWNLOAD
------------------------------------------------------------------------------------------------------------------------------- */
.download a:before {
  width: 14px;
  height: 8px;
  border: 3px solid #c55500;
  border-top: 0;
  margin-top: -5px;
  background: transparent;
}

.download a:after {
  left: 5px;
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: #c55500 transparent;
  margin-top: -5px;
  background: transparent;
}

.download a:hover:before, .download a:focus:before, .download a:active:before {
  border-color: #730800;
  background: transparent;
}

.download a:hover:after, .download a:focus:after, .download a:active:after {
  border-color: #730800 transparent;
}

/* ARROWS (up/down/back/forward)
------------------------------------------------------------------------------------------------------------------------------- */
.arrow a:before {
  width: 16px;
  height: 16px;
  /* css3 */
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.arrow a:after {
  left: 8px;
  border-width: 5px 0 5px 6px;
  border-style: solid;
  border-color: transparent #fff;
  margin-top: -5px;
  background: transparent;
}

.arrow:before {
  z-index: 10;
  left: 3px;
  width: 5px;
  height: 4px;
  margin-top: -2px;
  background: #fff;
}

.arrow.back a:after {
  left: 2px;
  border-width: 5px 6px 5px 0;
}

.arrow.back:before {
  left: 8px;
}

.arrow.up a:after, .arrow.down a:after {
  left: 3px;
  border-width: 0 5px 6px;
  border-color: #fff transparent;
  margin-top: -6px;
}

.arrow.up:before, .arrow.down:before {
  left: 6px;
  width: 4px;
  height: 5px;
  margin-top: 0;
}

.arrow.down a:after {
  border-width: 6px 5px 0;
  margin-top: 0;
}

.arrow.down:before {
  margin-top: -5px;
}

/* Alternative style */
.arrow-alt a:before {
  left: 8px;
  border-width: 7px 0 7px 8px;
  border-style: solid;
  border-color: transparent #c55500;
  margin-top: -7px;
  background: transparent;
}

.arrow-alt a:after {
  left: 0;
  width: 8px;
  height: 6px;
  margin-top: -3px;
  background: #c55500;
}

.arrow-alt a:hover:before,
.arrow-alt a:focus:before,
.arrow-alt a:active:before {
  border-color: transparent #730800;
  background: transparent;
}

.arrow-alt a:hover:after, .arrow-alt a:focus:after, .arrow-alt a:active:after {
  background: #730800;
}

.arrow-alt.back a:before {
  left: 0;
  border-width: 7px 8px 7px 0;
}

.arrow-alt.back a:after {
  left: 8px;
}

.arrow-alt.up a:before, .arrow-alt.down a:before {
  left: 1px;
  margin-top: -8px;
  border-width: 0 7px 8px;
  border-color: #c55500 transparent;
}

.arrow-alt.up a:after, .arrow-alt.down a:after {
  left: 5px;
  width: 6px;
  height: 8px;
  margin-top: 0;
}

.arrow-alt.down a:before {
  left: 1px;
  margin-top: 0;
  border-width: 8px 7px 0;
}

.arrow-alt.down a:after {
  margin-top: -8px;
}

.arrow-alt.up a:hover:before,
.arrow-alt.up a:focus:before,
.arrow-alt.up a:active:before,
.arrow-alt.down a:hover:before,
.arrow-alt.down a:focus:before,
.arrow-alt.down a:active:before {
  border-color: #730800 transparent;
}

/* Alternative style 2 */
.arrow-alt2 a:before {
  left: 8px;
  width: 7px;
  height: 7px;
  border-width: 0 3px 3px 0;
  border-style: solid;
  border-color: #c55500;
  margin-top: -5px;
  background: transparent;
  /* css3 */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.arrow-alt2 a:after {
  left: 3px;
  width: 13px;
  height: 4px;
  margin-top: -2px;
  background: #c55500;
}

.arrow-alt2 a:hover:before,
.arrow-alt2 a:focus:before,
.arrow-alt2 a:active:before {
  border-color: #730800;
  background: transparent;
}

.arrow-alt2 a:hover:after,
.arrow-alt2 a:focus:after,
.arrow-alt2 a:active:after {
  background: #730800;
}

.arrow-alt2.back a:before {
  left: 4px;
  border-width: 0 0 3px 3px;
  /* css3 */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow-alt2.back a:after {
  left: 5px;
}

.arrow-alt2.back a:hover:before,
.arrow-alt2.back a:focus:before,
.arrow-alt2.back a:active:before {
  border-right-color: #730800;
}

.arrow-alt2.up a:before {
  left: 4px;
  border-width: 3px 0 0 3px;
  /* css3 */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow-alt2.up a:after, .arrow-alt2.down a:after {
  left: 7px;
  width: 4px;
  height: 13px;
  margin-top: -4px;
}

.arrow-alt2.down a:before {
  left: 4px;
  border-width: 0 0 3px 3px;
  /* css3 */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.arrow-alt2.down a:after {
  margin-top: -8px;
}

/* COMMENT
------------------------------------------------------------------------------------------------------------------------------- */
.comment a:before {
  width: 16px;
  height: 10px;
  margin-top: -8px;
  /* css3 */
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.comment a:after {
  left: 8px;
  border: 2px solid transparent;
  border-top-color: #c55500;
  border-left-color: #c55500;
  margin-top: 2px;
  background: transparent;
}

.comment a:hover:after, .comment a:focus:after, .comment a:active:after {
  border-top-color: #730800;
  border-left-color: #730800;
}

/* LIKE
------------------------------------------------------------------------------------------------------------------------------- */
.like a:before, .like a:after {
  width: 14px;
  height: 9px;
  margin-top: -6px;
  background: #c55500;
  /* css3 */
  -webkit-border-top-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius: 6px 0 0 6px;
  border-radius: 6px 0 0 6px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.like a:after {
  left: 4px;
  /* css3 */
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.like a:hover:after, .like a:focus:after, .like a:active:after {
  background: #730800;
}

/* ----------------------------------------------------------------------------------------------------------------------------
== MISC
** ---------------------------------------------------------------------------------------------------------------------------- */
/* HOME
------------------------------------------------------------------------------------------------------------------------------- */
.home a:before {
  left: 1px;
  border-style: solid;
  border-color: transparent;
  border-width: 8px 7px;
  border-bottom-color: #c55500;
  margin-top: -16px;
  background: transparent;
}

.home a:after {
  left: 3px;
  width: 2px;
  height: 4px;
  border-style: solid;
  border-color: #c55500 #c55500 transparent;
  border-width: 3px 4px 0;
  margin-top: 0;
  background: transparent;
}

.home a:hover:before, .home a:focus:before, .home a:active:before {
  border-bottom-color: #730800;
  background: transparent;
}

.home a:hover:after, .home a:focus:after, .home a:active:after {
  border-color: #730800 #730800 transparent;
}

/* PHOTO
------------------------------------------------------------------------------------------------------------------------------- */
.photo a:before {
  left: 2px;
  width: 16px;
  height: 12px;
  margin-top: -6px;
}

.photo a:after {
  left: 6px;
  width: 8px;
  height: 2px;
  margin-top: -8px;
}

.photo:after {
  left: 6px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #fff;
  /* css3 */
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

.photo a:hover:after, .photo a:focus:after, .photo a:active:after {
  background: #730800;
}

/* VIDEO
------------------------------------------------------------------------------------------------------------------------------- */
.video a:before {
  left: 2px;
  width: 14px;
  height: 12px;
  margin-top: -6px;
  /* css3 */
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.video a:after {
  left: 14px;
  border-style: solid;
  border-width: 5px 6px 5px 0;
  border-color: transparent;
  border-right-color: #c55500;
  margin-top: -5px;
  background: transparent;
}

.video a:hover:after, .video a:focus:after, .video a:active:after {
  border-right-color: #730800;
}

/* MUSIC
------------------------------------------------------------------------------------------------------------------------------- */
.music a:before {
  left: 8px;
  width: 6px;
  height: 10px;
  border-width: 2px 1px 0 2px;
  border-style: solid;
  border-color: #c55500 transparent transparent #c55500;
  background: transparent;
  -webkit-border-radius: 0 10px 0 0;
  -moz-border-radius: 0 10px 0 0;
  border-radius: 0 10px 0 0;
}

.music a:after {
  left: 3px;
  width: 7px;
  height: 6px;
  margin-top: 0;
  background: #c55500;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.music a:hover:before, .music a:focus:before, .music a:active:before {
  border-color: #730800 transparent transparent #730800;
  background: transparent;
}

.music a:hover:after, .music a:focus:after, .music a:active:after {
  background: #730800;
}

/* CALL
------------------------------------------------------------------------------------------------------------------------------- */
.call a:before {
  left: 5px;
  width: 4px;
  height: 8px;
  border-width: 5px 0 5px 2px;
  border-style: solid;
  border-color: #c55500;
  background: transparent;
  /* css3 */
  -webkit-border-top-left-radius: 3px 5px;
  -webkit-border-bottom-left-radius: 3px 5px;
  -moz-border-radius-topleft: 3px 5px;
  -moz-border-radius-bottomleft: 3px 5px;
  border-top-left-radius: 3px 5px;
  border-bottom-left-radius: 3px 5px;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.call-on a:after {
  left: 10px;
  width: 6px;
  height: 6px;
  margin-top: -8px;
  border: 4px double #c55500;
  border-width: 4px 4px 0 0;
  background: transparent;
  /* css3 */
  -webkit-border-radius: 0 15px 0 0;
  -moz-border-radius: 0 15px 0 0;
  border-radius: 0 15px 0 0;
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  transform: rotate(15deg);
}

.call a:hover:before,
.call a:focus:before,
.call a:active:before,
.call a:hover:after,
.call a:focus:after,
.call a:active:after {
  border-color: #730800;
  background: transparent;
}

/* TAGS
------------------------------------------------------------------------------------------------------------------------------- */
.tags a:before {
  left: 6px;
  width: 9px;
  height: 15px;
  margin-top: -8px;
  background: #c55500;
  /* css3 */
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 5px 5px 0 0;
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  -o-transform: rotate(-40deg);
  transform: rotate(-40deg);
}

.tags a:after {
  left: 7px;
  width: 3px;
  height: 3px;
  margin-top: -4px;
  background: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

/* RSS
------------------------------------------------------------------------------------------------------------------------------- */
.rss a:before {
  left: 3px;
  width: 5px;
  height: 5px;
  margin-top: 0;
  /* css3 */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.rss a:after {
  left: 3px;
  width: 8px;
  height: 8px;
  border-width: 5px 5px 0 0;
  border-style: double;
  border-color: #c55500;
  background: transparent;
  /* css3 */
  -webkit-border-top-right-radius: 25px;
  -moz-border-radius: 0 25px 0 0;
  border-radius: 0 25px 0 0;
}

.rss a:hover:after, .rss a:focus:after, .rss a:active:after {
  border-color: #730800;
}

/* EMAIL
------------------------------------------------------------------------------------------------------------------------------- */
.email:before {
  z-index: 10;
  left: 6px;
  width: 12px;
  height: 12px;
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: #fff;
  margin-top: -13px;
  background: transparent;
  /* css3 */
  -webkit-transform: rotate(39deg) skew(-12deg);
  -moz-transform: rotate(39deg) skew(-12deg);
  -ms-transform: rotate(39deg) skew(-12deg);
  -o-transform: rotate(39deg) skew(-12deg);
  transform: rotate(39deg) skew(-12deg);
}

.email a:before {
  left: 3px;
  width: 6px;
  border-width: 6px;
  border-style: solid;
  border-color: #c55500 #c55500 transparent;
  margin-top: -7px;
  background: transparent;
}

.email a:after {
  left: 4px;
  border-width: 0 8px 9px;
  border-style: solid;
  border-color: #c55500 transparent;
  margin-top: -3px;
  background: transparent;
}

.email a:hover:before, .email a:focus:before, .email a:active:before {
  border-color: #730800 #730800 transparent;
  background: transparent;
}

.email a:hover:after, .email a:focus:after, .email a:active:after {
  border-bottom-color: #730800;
}

/* PROFILE
------------------------------------------------------------------------------------------------------------------------------- */
.profile a:before {
  left: 4px;
  width: 16px;
  height: 5px;
  margin-top: 1px;
  /* css3 */
  -webkit-border-top-right-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}

.profile a:after {
  left: 9px;
  width: 6px;
  height: 10px;
  margin-top: -7px;
  /* css3 */
  -webkit-border-top-right-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px 10px;
  -webkit-border-bottom-left-radius: 5px 10px;
  -moz-border-radius: 5px 5px 5px 5px / 5px 5px 10px 10px;
  border-radius: 5px 5px 5px 5px / 5px 5px 10px 10px;
}

.profile a:hover:after, .profile a:focus:after, .profile a:active:after {
  background: #730800;
}

/* FILE
------------------------------------------------------------------------------------------------------------------------------- */
.file a:before {
  left: 5px;
  width: 8px;
  height: 12px;
  border: 2px solid #c55500;
  background: transparent;
}

.file a:after {
  left: 4px;
  border-width: 3px;
  border-style: solid;
  border-color: #fff #c55500 #c55500 #fff;
  margin-top: -9px;
  background: transparent;
}

.file a:hover:before, .file a:focus:before, .file a:active:before {
  border-color: #730800;
  background: transparent;
}

.file a:hover:after, .file a:focus:after, .file a:active:after {
  border-color: #fff #730800 #730800 #fff;
}

/* FOLDER
------------------------------------------------------------------------------------------------------------------------------- */
.folder a:before {
  left: 4px;
  width: 16px;
  height: 12px;
  margin-top: -6px;
  /* css3 */
  -webkit-border-bottom-right-radius: 1px;
  -webkit-border-bottom-left-radius: 1px;
  -moz-border-radius: 0 0 1px 1px;
  border-radius: 0 0 1px 1px;
}

.folder a:after {
  left: 6px;
  width: 6px;
  height: 2px;
  margin-top: -8px;
  background: #c55500;
  /* css3 */
  -webkit-border-top-right-radius: 1px;
  -webkit-border-top-left-radius: 1px;
  -moz-border-radius: 1px 1px 0 0;
  border-radius: 1px 1px 0 0;
}

.folder a:hover:after, .folder a:focus:after, .folder a:active:after {
  background: #730800;
}

/* LIST VIEW
------------------------------------------------------------------------------------------------------------------------------- */
.list a:before, .list a:after {
  left: 8px;
  width: 12px;
  height: 2px;
  border-width: 6px 0;
  border-style: double;
  border-color: #c55500;
  background: transparent;
}

.list a:after {
  left: 4px;
  width: 2px;
}

.list a:hover:before,
.list a:focus:before,
.list a:active:before,
.list a:hover:after,
.list a:focus:after,
.list a:active:after {
  border-color: #730800;
  background: transparent;
}

/* PERMALINK
------------------------------------------------------------------------------------------------------------------------------- */
.permalink a:before, .permalink a:after, .permalink:after {
  left: 4px;
  width: 6px;
  height: 4px;
  border: 2px solid #c55500;
  background: transparent;
  /* css3 */
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.permalink a:after {
  left: 12px;
  margin-top: -0px;
}

.permalink:after {
  left: 7px;
  width: 10px;
  height: 2px;
  border: 1px solid #fff;
  margin-top: -2px;
  background: #c55500;
}

.permalink a:hover:before,
.permalink a:focus:before,
.permalink a:active:before,
.permalink a:hover:after,
.permalink a:focus:after,
.permalink a:active:after {
  border-color: #730800;
  background: transparent;
}

.permalink:hover:after {
  background: #730800;
}

/* HISTORY
------------------------------------------------------------------------------------------------------------------------------- */
.history a:before, .history a:after {
  left: 2px;
  width: 13px;
  height: 13px;
  border: 2px solid #c55500;
  margin-top: -8px;
  background: transparent;
}

.history a:before {
  /* css3 */
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  border-radius: 18px;
}

.history a:after {
  left: 10px;
  width: 4px;
  height: 5px;
  border-width: 0 0 2px 2px;
  margin-top: -5px;
  background: transparent;
}

.history a:hover:before,
.history a:focus:before,
.history a:active:before,
.history a:hover:after,
.history a:focus:after,
.history a:active:after {
  border-color: #730800;
  background: transparent;
}

/* TOOLS
------------------------------------------------------------------------------------------------------------------------------- */
.tools:after {
  left: 13px;
  width: 3px;
  height: 5px;
  margin-top: -8px;
  background: #fff;
  /* css3 */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.tools a:before {
  left: 6px;
  width: 4px;
  height: 15px;
  margin-top: -7px;
  background: #c55500;
  /* css3 */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.tools a:after {
  left: 8px;
  width: 9px;
  height: 9px;
  background: #c55500;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

.tools a:hover:after, .tools a:focus:after, .tools a:active:after {
  background: #730800;
}

/* MP3 PLAYER
------------------------------------------------------------------------------------------------------------------------------- */
.player:before {
  left: 3px;
  width: 9px;
  height: 6px;
  border-width: 2px 2px 11px;
  border-style: solid;
  border-color: #555;
  margin-top: -10px;
  /* css3 */
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.player:after {
  left: 6px;
  width: 3px;
  height: 3px;
  border: 2px solid #fff;
  /* css3 */
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

/* HEADPHONES
------------------------------------------------------------------------------------------------------------------------------- */
.headphones:before {
  left: 2px;
  width: 12px;
  height: 10px;
  border-width: 2px 2px 0;
  border-style: solid;
  border-color: #555;
  margin: -8px 0 0;
  /* css3 */
  -webkit-border-top-left-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius: 20px 20px 0 0;
  border-radius: 20px 20px 0 0;
}

.headphones:after {
  left: 5px;
  width: 4px;
  height: 6px;
  border-width: 0 3px;
  border-style: solid;
  border-color: #555;
}

/* RIBBON
------------------------------------------------------------------------------------------------------------------------------- */
.ribbon:before {
  left: 6px;
  border-width: 10px 5px 6px;
  border-style: solid;
  border-color: #F0A1D1 #F0A1D1 transparent;
  margin: -8px 0 0;
}

/* VIEWS
------------------------------------------------------------------------------------------------------------------------------- */
.views:before {
  left: 3px;
  width: 14px;
  height: 14px;
  margin-top: -8px;
  background: #555;
  -webkit-border-top-left-radius: 12px;
  -webkit-border-bottom-right-radius: 12px;
  -moz-border-radius: 12px 0 12px 0;
  border-radius: 12px 0 12px 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.views:after {
  left: 6px;
  width: 4px;
  height: 4px;
  border: 2px solid #fff;
  margin-top: -5px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

/* LOCATION
------------------------------------------------------------------------------------------------------------------------------- */
.location:before {
  left: 6px;
  width: 2px;
  height: 2px;
  border: 3px solid #555;
  border-bottom: 0;
  margin-top: -9px;
  background: #fff;
  -webkit-border-top-left-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius: 8px 8px 0 0;
  border-radius: 8px 8px 0 0;
}

.location:after {
  left: 6px;
  border-width: 12px 4px 0;
  border-style: solid;
  border-color: #555 transparent;
  margin-top: -4px;
}

/* INFO
------------------------------------------------------------------------------------------------------------------------------- */
.info {
  color: #2385BA;
}

.info:before {
  content: "i";
  left: 3px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  line-height: 15px;
  text-align: center;
  color: #fff;
  background: #2385BA;
  /* css3 */
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

/* HELP
------------------------------------------------------------------------------------------------------------------------------- */
.help {
  color: #2385BA;
}

.help:before {
  content: "?";
  left: 3px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  font-size: 14px;
  font-weight: bold;
  line-height: 15px;
  text-align: center;
  color: #fff;
  background: #2385BA;
  /* css3 */
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

/* PIE CHART
------------------------------------------------------------------------------------------------------------------------------- */
.pie {
  color: #9D2CA3;
}

.pie:before {
  left: 3px;
  border: 8px solid #9D2CA3;
  margin-top: -7px;
  /* css3 */
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.pie:after {
  left: 11px;
  width: 8px;
  height: 8px;
  border-width: 0 0 2px 2px;
  border-style: solid;
  border-color: #fff;
  margin-top: -8px;
  background: #9D2CA3;
  /* css3 */
  -webkit-border-top-right-radius: 16px;
  -moz-border-radius: 0 16px 0 0;
  border-radius: 0 16px 0 0;
}

/* SUCCESS
------------------------------------------------------------------------------------------------------------------------------- */
.success {
  color: #7F913C;
}

.success:before {
  left: 3px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  /* css3 */
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  background: #7F913C;
}

.success:after {
  left: 8px;
  width: 3px;
  height: 8px;
  border-width: 0 2px 2px 0;
  border-style: solid;
  border-color: #fff;
  margin-top: -6px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Alternative style */
.success-alt {
  color: #7F913C;
}

.success-alt:before {
  left: 6px;
  width: 5px;
  height: 12px;
  border-width: 0 5px 5px 0;
  border-style: solid;
  border-color: #7F913C;
  margin-top: -11px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* WARNING
------------------------------------------------------------------------------------------------------------------------------- */
.warning:before {
  content: "!";
  z-index: 2;
  left: 8px;
  margin-top: -8px;
  font-size: 14px;
  font-weight: bold;
  color: #000;
}

.warning:after {
  z-index: 1;
  border-width: 0 11px 18px;
  border-style: solid;
  border-color: #F8D201 transparent;
  margin-top: -10px;
  background: transparent;
}

/* DENIED
------------------------------------------------------------------------------------------------------------------------------- */
.denied {
  color: #C00000;
}

.denied:before {
  left: 3px;
  width: 10px;
  height: 10px;
  border: 3px solid #C00000;
  margin-top: -8px;
  background: transparent;
  /* css3 */
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.denied:after {
  left: 6px;
  width: 11px;
  height: 3px;
  margin-top: -2px;
  background: #C00000;
  /* css3 */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* ----------------------------------------------------------------------------------------------------------------------------
== MEDIA CONTROLS
** ---------------------------------------------------------------------------------------------------------------------------- */
/* POWER
------------------------------------------------------------------------------------------------------------------------------- */
.power a:before {
  left: 1px;
  width: 10px;
  height: 10px;
  border: 2px solid #c55500;
  margin-top: -6px;
  background: transparent;
  /* css3 */
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.power a:after {
  left: 6px;
  width: 2px;
  height: 7px;
  border: 1px solid #fff;
  margin: -8px 0 0;
  background: #c55500;
}

.power a:hover:before, .power a:focus:before, .power a:active:before {
  border-color: #730800;
  background: transparent;
}

.power a:hover:after, .power a:focus:after, .power a:active:after {
  background: #730800;
}

/* PLAY
------------------------------------------------------------------------------------------------------------------------------- */
.play a:before {
  width: 16px;
  height: 16px;
  /* css3 */
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.play a:after {
  left: 7px;
  border: 4px solid transparent;
  border-left-color: #fff;
  margin-top: -4px;
  background: transparent;
}

/* Alternative style */
.play-alt a:before {
  left: 2px;
  border: 8px solid transparent;
  border-width: 8px 12px;
  border-left-color: #c55500;
  margin-top: -8px;
  background: transparent;
}

.play-alt a:hover:before, .play-alt a:focus:before, .play-alt a:active:before {
  border-left-color: #730800;
  background: transparent;
}

/* STOP
------------------------------------------------------------------------------------------------------------------------------- */
.stop a:before {
  width: 16px;
  height: 16px;
  /* css3 */
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.stop a:after {
  left: 5px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: #fff;
}

/* Alternative style */
.stop-alt a:before {
  left: 1px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
}

/* PAUSE
------------------------------------------------------------------------------------------------------------------------------- */
.pause a:before {
  width: 16px;
  height: 16px;
  /* css3 */
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.pause a:after {
  left: 5px;
  width: 2px;
  height: 8px;
  border: 2px solid #fff;
  border-width: 0 2px;
  margin-top: -4px;
  background: transparent;
}

/* Alternative style */
.pause-alt a:before {
  left: 2px;
  width: 4px;
  height: 14px;
  border: 4px solid #c55500;
  border-width: 0 4px;
  margin-top: -7px;
  background: transparent;
}

.pause-alt a:hover:before,
.pause-alt a:focus:before,
.pause-alt a:active:before {
  border-color: #730800;
  background: transparent;
}

/* VOLUME
------------------------------------------------------------------------------------------------------------------------------- */
.volume a:before {
  left: -2px;
  border: 7px solid transparent;
  border-right-color: #c55500;
  margin-top: -7px;
  background: transparent;
}

.volume a:after {
  left: 4px;
  width: 4px;
  height: 6px;
  margin-top: -3px;
}

.volume a:hover:before, .volume a:focus:before, .volume a:active:before {
  border-right-color: #730800;
  background: transparent;
}

.volume a:hover:after, .volume a:focus:after, .volume a:active:after {
  background: #730800;
}

/* Volume on */
.volume-on:before {
  left: 12px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border: 4px double #c55500;
  border-width: 4px 4px 0 0;
  /* css3 */
  -webkit-border-radius: 0 15px 0 0;
  -moz-border-radius: 0 15px 0 0;
  border-radius: 0 15px 0 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.volume-on:hover:before {
  border-color: #730800;
}

/* Mute */
.mute:before {
  width: 16px;
  height: 16px;
  border: 1px solid #c55500;
  margin-top: -9px;
  /* css3 */
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.mute:after {
  width: 18px;
  border-top: 1px solid #c55500;
  /* css3 */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.mute:hover:before, .mute:hover:after {
  border-color: #730800;
}

/* Volume up/down */
.volume-up:before {
  left: 16px;
  width: 2px;
  height: 8px;
  margin-top: -4px;
  background: #c55500;
}

.volume-up:after, .volume-down:after {
  left: 13px;
  width: 8px;
  height: 2px;
  margin-top: -1px;
  background: #c55500;
}

.volume-up:hover:before, .volume-up:hover:after, .volume-down:hover:after {
  background: #730800;
}

/* MIC
------------------------------------------------------------------------------------------------------------------------------- */
.mic a:before {
  left: 6px;
  width: 7px;
  height: 12px;
  margin-top: -9px;
  /* css3 */
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.mic a:after {
  left: 4px;
  width: 9px;
  height: 6px;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: #c55500;
  margin-top: -2px;
  background: transparent;
  /* css3 */
  -webkit-border-bottom-right-radius: 11px;
  -webkit-border-bottom-left-radius: 11px;
  -moz-border-radius: 0 0 11px 11px;
  border-radius: 0 0 11px 11px;
}

.mic:before, .mic:after {
  left: 9px;
  width: 1px;
  height: 4px;
  margin-top: 4px;
  background: #c55500;
}

.mic:after {
  left: 6px;
  width: 7px;
  height: 1px;
  margin-top: 7px;
}

.mic a:hover:after, .mic a:focus:after, .mic a:active:after {
  border-color: #730800;
}

.mic:hover:before, .mic:hover:after {
  background: #730800;
}

/* FAST FORWARD
------------------------------------------------------------------------------------------------------------------------------- */
.fforward a:before {
  left: 1px;
  border: 5px solid transparent;
  border-width: 5px 7px;
  border-left-color: #c55500;
  margin-top: -4px;
  background: transparent;
}

.fforward a:after {
  left: 7px;
  border: 5px solid transparent;
  border-width: 5px 7px;
  border-left-color: #c55500;
  margin-top: -4px;
  background: transparent;
}

.fforward a:hover:before, .fforward a:focus:before, .fforward a:active:before {
  border-left-color: #730800;
  background: transparent;
}

.fforward a:hover:after, .fforward a:focus:after, .fforward a:active:after {
  border-left-color: #730800;
}

/* FAST REWIND
------------------------------------------------------------------------------------------------------------------------------- */
.frewind a:before {
  left: -6px;
  border: 5px solid transparent;
  border-width: 5px 7px;
  border-right-color: #c55500;
  margin-top: -4px;
  background: transparent;
}

.frewind a:after {
  border: 5px solid transparent;
  border-width: 5px 7px;
  border-right-color: #c55500;
  margin-top: -4px;
  background: transparent;
}

.frewind a:hover:before, .frewind a:focus:before, .frewind a:active:before {
  border-right-color: #730800;
  background: transparent;
}

.frewind a:hover:after, .frewind a:focus:after, .frewind a:active:after {
  border-right-color: #730800;
}

/* JUMP FORWARD
------------------------------------------------------------------------------------------------------------------------------- */
.next a:before {
  left: 9px;
  width: 2px;
  height: 10px;
  margin-top: -4px;
}

.next a:after {
  left: 2px;
  border: 5px solid transparent;
  border-width: 5px 7px;
  border-left-color: #c55500;
  margin-top: -4px;
  background: transparent;
}

.next a:hover:after, .next a:focus:after, .next a:active:after {
  border-left-color: #730800;
}

/* JUMP REWIND
------------------------------------------------------------------------------------------------------------------------------- */
.prev a:before {
  left: 2px;
  width: 2px;
  height: 10px;
  margin-top: -4px;
}

.prev a:after {
  left: -3px;
  border: 5px solid transparent;
  border-width: 5px 7px;
  border-right-color: #c55500;
  margin-top: -4px;
  background: transparent;
}

.prev a:hover:after, .prev a:focus:after, .prev a:active:after {
  border-right-color: #730800;
}

/* POP-OUT WINDOW
------------------------------------------------------------------------------------------------------------------------------- */
.pop a:before, .pop a:after {
  width: 12px;
  height: 8px;
  border: 1px solid #c55500;
  margin-top: -4px;
  background: #fff;
}

.pop a:after {
  left: 3px;
  margin-top: -7px;
}

.pop a:hover:before,
.pop a:focus:before,
.pop a:active:before,
.pop a:hover:after,
.pop a:focus:after,
.pop a:active:after {
  border-color: #730800;
  background: #fff;
}

/* ENLARGE
------------------------------------------------------------------------------------------------------------------------------- */
.enlarge a:before {
  width: 16px;
  height: 14px;
  margin-top: -7px;
}

.enlarge a:after {
  left: 1px;
  width: 7px;
  height: 6px;
  margin-top: -6px;
  background: #fff;
}

/* REPEAT
------------------------------------------------------------------------------------------------------------------------------- */
.repeat a:before {
  left: 1px;
  width: 9px;
  height: 9px;
  border: 3px solid #c55500;
  margin-top: -6px;
  background: transparent;
  /* css3 */
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.repeat a:after {
  left: 9px;
  border: 4px solid #fff;
  border-width: 5px 2px 5px 5px;
  border-left-color: #c55500;
  margin: -9px 0 0;
  background: transparent;
}

.repeat a:hover:before, .repeat a:focus:before, .repeat a:active:before {
  border-color: #730800;
  background: transparent;
}

.repeat a:hover:after, .repeat a:focus:after, .repeat a:active:after {
  border-left-color: #730800;
}

/* EXPAND
------------------------------------------------------------------------------------------------------------------------------- */
.expand a:before {
  z-index: -2;
  left: 1px;
  width: 5px;
  height: 0;
  border-width: 7px 7px 0;
  border-style: solid;
  border-color: transparent #c55500;
  margin-top: -4px;
  background: transparent;
  /* css3 */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.expand a:after {
  left: 5px;
  width: 8px;
  height: 8px;
  border: 3px solid #c55500;
  border-width: 3px 0 0 3px;
  margin-top: -6px;
  background: transparent;
}

.expand a:hover:before, .expand a:focus:before, .expand a:active:before {
  border-color: transparent #730800;
  background: transparent;
}

.expand a:hover:after, .expand a:focus:after, .expand a:active:after {
  border-color: #730800;
}

/* SHRINK
------------------------------------------------------------------------------------------------------------------------------- */
.shrink a:before {
  z-index: -2;
  left: 1px;
  width: 5px;
  height: 0;
  border-width: 0 7px 7px;
  border-style: solid;
  border-color: transparent #c55500;
  margin-top: -4px;
  background: transparent;
  /* css3 */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.shrink a:after {
  left: 5px;
  width: 8px;
  height: 8px;
  border: 3px solid #c55500;
  border-width: 0 3px 3px 0;
  margin-top: -6px;
  background: transparent;
}

.shrink a:hover:before, .shrink a:focus:before, .shrink a:active:before {
  border-color: transparent #730800;
  background: transparent;
}

.shrink a:hover:after, .shrink a:focus:after, .shrink a:active:after {
  border-color: #730800;
}

/* TOGGLE SIZE
------------------------------------------------------------------------------------------------------------------------------- */
.toggle-size a:before {
  left: 2px;
  border-width: 6px;
  border-style: solid;
  border-color: #c55500 transparent transparent #c55500;
  background: transparent;
  margin-top: -7px;
}

.toggle-size a:after {
  left: 7px;
  border-width: 4px;
  border-style: solid;
  border-color: transparent #c55500 #c55500 transparent;
  margin-top: -2px;
  background: transparent;
}

.toggle-size a:hover:before,
.toggle-size a:focus:before,
.toggle-size a:active:before {
  border-color: #730800 transparent transparent #730800;
  background: transparent;
}

.toggle-size a:hover:after,
.toggle-size a:focus:after,
.toggle-size a:active:after {
  border-color: transparent #730800 #730800 transparent;
}

/* FULL SCREEN
------------------------------------------------------------------------------------------------------------------------------- */
.full:before, .full:after {
  z-index: 1;
  left: 8px;
  width: 3px;
  height: 8px;
  border: 5px solid #c55500;
  border-width: 5px 0;
  margin-top: -8px;
  /* css3 */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.full:after {
  /* css3 */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.full:hover:before, .full:hover:after {
  border-color: #730800;
}

.full a:before, .full a:after {
  z-index: 10;
  width: 4px;
  height: 0;
  border-width: 0 7px 7px;
  border-style: solid;
  border-color: transparent #c55500;
  margin-top: -8px;
  background: transparent;
}

.full a:after {
  border-width: 7px 7px 0;
  margin-top: 3px;
}

.full a:hover:before,
.full a:focus:before,
.full a:active:before,
.full a:hover:after,
.full a:focus:after,
.full a:active:after {
  border-color: transparent #730800;
  background: transparent;
}

/* SHRINK
------------------------------------------------------------------------------------------------------------------------------- */
.exit:before, .exit:after {
  z-index: 1;
  top: 50%;
  left: 8px;
  width: 3px;
  height: 14px;
  border: 5px solid #c55500;
  border-width: 5px 0;
  margin-top: -12px;
  /* css3 */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.exit:after {
  /* css3 */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.exit:hover:before, .exit:hover:after {
  border-color: #730800;
}

.exit a:before, .exit a:after {
  z-index: 10;
  left: 2px;
  width: 6px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #c55500;
  margin-top: -5px;
  background: transparent;
  /* css3 */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.exit a:after {
  /* css3 */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.exit a:hover:before,
.exit a:focus:before,
.exit a:active:before,
.exit a:hover:after,
.exit a:focus:after,
.exit a:active:after {
  border-color: transparent #730800;
  background: transparent;
}

/* EJECT
------------------------------------------------------------------------------------------------------------------------------- */
.eject a:before {
  left: 1px;
  width: 14px;
  height: 2px;
  margin-top: 4px;
}

.eject a:after {
  left: 1px;
  border: 8px solid transparent;
  border-width: 8px 7px;
  border-bottom-color: #c55500;
  margin-top: -13px;
  background: transparent;
}

.eject a:hover:after, .eject a:focus:after, .eject a:active:after {
  border-bottom-color: #730800;
}
<div id="icons" class="container">
    <h2><strong>84 GUI icons</strong> created from semantic HTML.</h2>

    <div class="section">
        <h3>User interaction</h3>
        <ul>
            <li class="search"><a href="#non">Search</a></li>
         
            <li class="add"><a href="#non">Add</a></li>
            <li class="remove"><a href="#non">Remove</a></li>
            <li class="delete"><a href="#non">Delete</a></li>
            <li class="add-alt"><a href="#non">Add</a></li>
            <li class="remove-alt"><a href="#non">Remove</a></li>
            <li class="delete-alt"><a href="#non">Delete</a></li>
            <li class="report"><a href="#non">Report</a></li>
            <li class="trash"><a href="#non">Trash</a></li>
            <li class="lock"><a href="#non">Lock</a></li>
            <li class="unlock"><a href="#non">Unlock</a></li>
            <li class="update"><a href="#non">Edit</a></li>
            <li class="save"><a href="#non">Save</a></li>
            <li class="edit"><a href="#non">Edit</a></li>
            <li class="download"><a href="#non">Download</a></li>
            <li class="arrow forward"><a href="#non">Forward</a></li>
            <li class="arrow back"><a href="#non">Back</a></li>
            <li class="arrow up"><a href="#non">Up</a></li>
            <li class="arrow down"><a href="#non">Down</a></li>
            <li class="arrow-alt forward"><a href="#non">Forward</a></li>
            <li class="arrow-alt back"><a href="#non">Back</a></li>
            <li class="arrow-alt up"><a href="#non">Up</a></li>
            <li class="arrow-alt down"><a href="#non">Down</a></li>
            <li class="arrow-alt2 forward"><a href="#non">Forward</a></li>
            <li class="arrow-alt2 back"><a href="#non">Back</a></li>
            <li class="arrow-alt2 up"><a href="#non">Up</a></li>
            <li class="arrow-alt2 down"><a href="#non">Down</a></li>
   <li class="comment"><a href="#non">Comment</a></li>
            <li class="like"><a href="#non">Like</a></li>

            <li class="retweet"><a href="#non">Retweet</a></li>
        </ul>
    </div>

    <div class="section">
        <h3>Miscellaneous</h3>
        <ul>
            <li class="home"><a href="#non">Home</a></li>
            <li class="photo"><a href="#non">Photo</a></li>
            <li class="video"><a href="#non">Video</a></li>
            <li class="music"><a href="#non">Music</a></li>
            <li class="call"><a href="#non">Call</a></li>
            <li class="call call-on"><a href="#non">Call in progress</a></li>
            <li class="tags"><a href="#non">Tags</a></li>
            <li class="rss"><a href="#non">RSS</a></li>
            <li class="email"><a href="#non">Email</a></li>
            <li class="profile"><a href="#non">Profile</a></li>
            <li class="file"><a href="#non">File</a></li>
            <li class="folder"><a href="#non">Folder</a></li>
            <li class="list"><a href="#non">List view</a></li>
            <li class="permalink"><a href="#non">Permalink</a></li>
            <li class="history"><a href="#non">History</a></li>
            <li class="tools"><a href="#non">Tools</a></li>
            <li class="player">MP3 Player</li>
            <li class="headphones">Headphones</li>
            <li class="ribbon">Ribbon</li>
            <li class="views">Views</li>
            <li class="location">Location</li>
            <li class="info">Info</li>
            <li class="help">Help</li>
            <li class="pie">Pie chart</li>
            <li class="success">Success</li>
            <li class="success-alt">Success (alt)</li>
            <li class="warning">Warning</li>
            <li class="denied">Denied</li>
        </ul>
    </div>

    <div class="section">
        <h3>Media controls</h3>
        <ul>
            <li class="power"><a href="#non">Power</a></li>
            <li class="play"><a href="#non">Play</a></li>
            <li class="stop"><a href="#non">Stop</a></li>
            <li class="pause"><a href="#non">Pause</a></li>
            <li class="play-alt"><a href="#non">Play</a></li>
            <li class="stop-alt"><a href="#non">Stop</a></li>
            <li class="pause-alt"><a href="#non">Pause</a></li>
            <li class="volume"><a href="#non">Volume</a></li>
            <li class="volume volume-on"><a href="#non">Volume on</a></li>
            <li class="volume mute"><a href="#non">Mute</a></li>
            <li class="volume volume-up"><a href="#non">Volume up</a></li>
            <li class="volume volume-down"><a href="#non">Volume down</a></li>
            <li class="mic"><a href="#non">Mic</a></li>
            <li class="fforward"><a href="#non">Fast forward</a></li>
            <li class="frewind"><a href="#non">Fast rewind</a></li>
            <li class="next"><a href="#non">Next track</a></li>
            <li class="prev"><a href="#non">Previous track</a></li>
            <li class="repeat"><a href="#non">Repeat</a></li>
            <li class="expand"><a href="#non">Expand</a></li>
            <li class="shrink"><a href="#non">Shrink</a></li>
            <li class="toggle-size"><a href="#non">Toggle video size</a></li>
            <li class="pop"><a href="#non">Pop out</a></li>
            <li class="enlarge"><a href="#non">Enlarge</a></li>
            <li class="full"><a href="#non">Full-screen</a></li>
            <li class="exit"><a href="#non">Exit full-screen</a></li>
            <li class="eject"><a href="#non">Eject</a></li>
        </ul>
    </div>
</div>

Square Pure CSS Icon SET

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.container > div {
  margin: 5px;
}
.base {
  font-size: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  height: 1em;
  width: 1em;
  color: #333;
  border: 1px solid currentColor;
}
.search:before {
  content: '';
  height: 0.25em;
  width: 0.25em;
  position: absolute;
  left: 0.25em;
  border: 0.06em solid #666;
  border-radius: 50%;
}
.search:after {
  content: '';
  height: 0.25em;
  width: 0.075em;
  background: #666;
  position: absolute;
  transform: rotate(-50deg);
  top: 0.53em;
  left: 0.6em;
  border-radius: 30%;
}
.search:hover:before {
  border-color: #e91e63;
}
.search:hover:after {
  background: #e91e63;
}
.cross:before {
  content: '';
  height: 0.5em;
  width: 0.075em;
  background: #666;
  position: absolute;
  transform: rotate(-45deg);
}
.cross:after {
  content: '';
  height: 0.5em;
  width: 0.075em;
  background: #666;
  position: absolute;
  transform: rotate(45deg);
}
.cross:hover:before,
.cross:hover:after {
  background: #e91e63;
}
.tick:before {
  content: '';
  height: 0.44em;
  width: 0.075em;
  background: #666;
  position: absolute;
  top: 0.28em;
  left: 0.56em;
  transform: rotate(45deg);
}
.tick:after {
  content: '';
  height: 0.25em;
  width: 0.075em;
  background: #666;
  position: absolute;
  top: 0.44em;
  left: 0.35em;
  transform: rotate(-45deg);
}
.tick:hover:before,
.tick:hover:after {
  background: #e91e63;
}
.menu:before {
  content: '';
  box-shadow: 0px 0.065em 0px 0px #666, 0px 0.18em 0 0 #666, 0px 0.3em 0 0 #666;
  height: 0.065em;
  width: 0.45em;
  position: absolute;
  top: 0.3em;
}
.menu:hover:before {
  box-shadow: 0px 0.065em 0px 0px #e91e63, 0px 0.18em 0 0 #e91e63, 0px 0.3em 0 0 #e91e63;
}
.phone:after {
  content: '';
  height: 0.2em;
  width: 0.18em;
  border-radius: 40%;
  box-shadow: 0.3em 0.08em 0 0 #666, 0.21em 0.42em 0 0 #666;
  position: absolute;
  transform: rotate(-53deg);
  top: 0.45em;
  left: 0.06em;
}
.phone:before {
  content: '';
  height: 0.46em;
  width: 0.08em;
  position: absolute;
  background-color: #666;
  top: 0.32em;
  left: 0.42em;
  transform: rotate(-42deg);
  border-radius: 40%;
}
.phone:hover:before {
  background-color: #e91e63;
}
.phone:hover:after {
  box-shadow: 0.3em 0.08em 0 0 #e91e63, 0.21em 0.42em 0 0 #e91e63;
}
.lock:before {
  content: '';
  height: 0.38em;
  width: 0.48em;
  background: #666;
  position: absolute;
  top: 0.4em;
  border-radius: 12%;
}
.lock:after {
  content: '';
  height: 0.15em;
  width: 0.15em;
  border: 0.06em solid #666;
  border-bottom: 0;
  position: absolute;
  top: 0.2em;
  left: 0.36em;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
.lock i.part {
  height: 0.12em;
  width: 0.12em;
  background: #fff;
  z-index: 2;
  border-radius: 50%;
  position: absolute;
  top: 0.5em;
}
.lock:hover:before {
  background: #e91e63;
}
.lock:hover:after {
  border-color: #e91e63;
}
.lock.lock-open:after {
  transform: rotate(20deg);
  left: 0.4em;
  top: 0.19em;
}
.home:before {
  content: '';
  width: 0;
  height: 0;
  border-left: 0.38em solid transparent;
  border-right: 0.38em solid transparent;
  border-bottom: 0.26em solid #666;
  position: absolute;
  top: 0.25em;
}
.home:after {
  content: '';
  height: 0.18em;
  width: 0.1em;
  background: #fff;
  position: absolute;
  border-top: 0.1em solid #666;
  border-right: 0.2em solid #666;
  border-left: 0.2em solid #666;
  border-bottom: 0;
  top: 0.51em;
}
.home:hover:before {
  border-bottom: 0.26em solid #e91e63;
}
.home:hover:after {
  border-top: 0.1em solid #e91e63;
  border-right: 0.2em solid #e91e63;
  border-left: 0.2em solid #e91e63;
}
.logout:before {
  content: '';
  height: 0.32em;
  width: 0.07em;
  border-right-width: 0.09em;
  border-left-width: 0.09em;
  border-bottom: 0;
  border-top: 0;
  border-style: solid;
  border-color: #fff;
  position: absolute;
  top: 0.3em;
  left: 0.37em;
  background: #666;
  z-index: 2;
}
.logout:after {
  content: '';
  height: 0.35em;
  width: 0.35em;
  position: absolute;
  border: 0.064em solid #666;
  border-radius: 50%;
  top: 0.35em;
}
.logout:hover:before {
  background: #e91e63;
}
.logout:hover:after {
  border-color: #e91e63;
}
.edit:before {
  content: '';
  height: 0.4em;
  width: 0.15em;
  background: transparent;
  position: absolute;
  top: -0.09em;
  left: 0.85em;
  box-shadow: 0 0.57em 0 0 #666, 0 0.13em 0 0 #666;
  transform: rotate(45deg);
}
.edit:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 0.09em solid transparent;
  border-right: 0.12em solid #666666;
  border-bottom: 0.09em solid transparent;
  border-radius: 2em;
  position: absolute;
  left: 0.25em;
  transform: rotate(315deg);
  top: 0.64em;
}
.edit:hover:after {
  border-right: 0.12em solid #e91e63;
}
.edit:hover:before {
  box-shadow: 0 0.57em 0 0 #e91e63, 0 0.13em 0 0 #e91e63;
}
.mail_outline:before {
  content: '';
  height: 0.35em;
  width: 0.45em;
  border: 0.05em solid #666;
  border-radius: 0.08em;
}
.mail_outline:after {
  content: '';
  position: absolute;
  border: solid #666;
  border-width: 0 0.05em 0.05em 0;
  display: inline-block;
  padding: 0.15em;
  top: 0.17em;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border-radius: 0.08em;
}
.mail_outline:hover:before {
  border: 0.05em solid #e91e63;
}
.mail_outline:hover:after {
  border-color: #e91e63;
}
.mail:before {
  content: '';
  height: 0.35em;
  width: 0.45em;
  border: 0.05em solid #666;
  border-radius: 0.08em;
  background: #666;
}
.mail:after {
  content: '';
  position: absolute;
  border: solid #fff;
  border-width: 0 0.05em 0.05em 0;
  display: inline-block;
  padding: 0.15em;
  top: 0.17em;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border-radius: 0.08em;
}
.mail:hover:before {
  border: 0.05em solid #e91e63;
  background: #e91e63;
}
.bell_outline:before {
  content: '';
  position: absolute;
  top: 0.3em;
  height: 0.38em;
  width: 0.3em;
  border: 0.05em solid #666;
  border-bottom: none;
  border-top-right-radius: 0.2em;
  border-top-left-radius: 0.2em;
  z-index: 2;
}
.bell_outline:after {
  content: '';
  position: absolute;
  height: 0em;
  width: 0.45em;
  border: 0.029em solid #666;
  border-top-right-radius: 0.1em;
  border-top-left-radius: 0.1em;
  top: 0.71em;
  z-index: 0;
}
.bell_outline i.part:before {
  content: '';
  position: absolute;
  top: 0.23em;
  left: 0.43em;
  height: 0.1em;
  width: 0.12em;
  background: #666;
  border-radius: 0.1em;
}
.bell_outline i.part:after {
  content: '';
  position: absolute;
  top: 0.78em;
  left: 0.44em;
  height: 0.08em;
  width: 0.14em;
  background: #666;
  border-bottom-right-radius: 0.1em;
  border-bottom-left-radius: 0.1em;
}
.bell_outline:hover:after {
  border-color: #e91e63;
}
.bell_outline:hover:before {
  border-color: #e91e63;
}
.bell_outline:hover .part:after {
  background: #e91e63;
}
.bell_outline:hover .part:before {
  background: #e91e63;
}
.bell:before {
  content: '';
  position: absolute;
  top: 0.3em;
  height: 0.38em;
  width: 0.3em;
  background: #666;
  border: 0.05em solid #666;
  border-bottom: none;
  border-top-right-radius: 0.2em;
  border-top-left-radius: 0.2em;
  z-index: 2;
}
.bell:after {
  content: '';
  position: absolute;
  height: 0em;
  width: 0.45em;
  border: 0.029em solid #666;
  border-top-right-radius: 0.1em;
  border-top-left-radius: 0.1em;
  top: 0.71em;
  z-index: 0;
}
.bell i.part:before {
  content: '';
  position: absolute;
  top: 0.23em;
  left: 0.43em;
  height: 0.1em;
  width: 0.12em;
  background: #666;
  border-radius: 0.1em;
}
.bell i.part:after {
  content: '';
  position: absolute;
  top: 0.78em;
  left: 0.44em;
  height: 0.08em;
  width: 0.14em;
  background: #666;
  border-bottom-right-radius: 0.1em;
  border-bottom-left-radius: 0.1em;
}
.bell:hover:after {
  border-color: #e91e63;
}
.bell:hover:before {
  background: #e91e63;
  border-color: #e91e63;
}
.bell:hover .part:after {
  background: #e91e63;
}
.bell:hover .part:before {
  background: #e91e63;
}
.trash_outline:before {
  content: '';
  position: absolute;
  top: 0.2em;
  border: 0.05em solid #fff;
  border-bottom-width: 0.01em;
  border-top-left-radius: 0.9em;
  border-top-right-radius: 0.9em;
  height: 0.07em;
  background: #666;
  width: 0.3em;
  box-shadow: 0px 0.05em 0px 0px #666;
}
.trash_outline:after {
  content: '';
  width: 0.25em;
  height: 0.4em;
  border: 0.05em solid #666;
  border-bottom-left-radius: 0.08em;
  border-bottom-right-radius: 0.08em;
}
.trash_outline:hover:before {
  background: #e91e63;
  box-shadow: 0px 0.05em 0px 0px #e91e63;
}
.trash_outline:hover:after {
  border-color: #e91e63;
}
.trash:before {
  content: '';
  position: absolute;
  top: 0.2em;
  border: 0.05em solid #fff;
  border-bottom-width: 0.01em;
  border-top-left-radius: 0.9em;
  border-top-right-radius: 0.9em;
  height: 0.07em;
  background: #666;
  width: 0.3em;
  box-shadow: 0px 0.05em 0px 0px #666;
}
.trash:after {
  content: '';
  width: 0.25em;
  height: 0.4em;
  border: 0.05em solid #666;
  background: #666;
  border-bottom-left-radius: 0.08em;
  border-bottom-right-radius: 0.08em;
}
.trash:hover:before {
  background: #e91e63;
  box-shadow: 0px 0.05em 0px 0px #e91e63;
}
.trash:hover:after {
  border-color: #e91e63;
  background: #e91e63;
}
.eye:before {
  content: '';
  height: 0.3em;
  width: 0.3em;
  border: 0.041em solid #666;
  border-radius: 0.02em 75%;
  transform: rotate(135deg);
}
.eye:after {
  content: '';
  height: 0.095em;
  width: 0.095em;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 0.4em;
  left: 0.42em;
  box-shadow: 0.03em 0.04em 0 0.06em #666;
}
.eye:hover:before {
  border-color: #e91e63;
}
.eye:hover:after {
  box-shadow: 0.03em 0.04em 0 0.06em #e91e63;
}
.eye_slash:before {
  content: '';
  height: 0.3em;
  width: 0.3em;
  border: 0.041em solid #666;
  border-radius: 0.02em 75%;
  transform: rotate(135deg);
}
.eye_slash:after {
  content: '';
  height: 0.095em;
  width: 0.095em;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 0.4em;
  left: 0.49em;
  box-shadow: -0.03em 0.04em 0 0.06em #666;
}
.eye_slash:hover:before {
  border-color: #e91e63;
}
.eye_slash:hover:after {
  box-shadow: -0.03em 0.04em 0 0.06em #e91e63;
}
.eye_slash .part {
  position: absolute;
  left: 0.52em;
  top: 0.23em;
  height: 0.5em;
  width: 0.02em;
  border-right: 0.04em solid #666;
  transform: rotate(145deg);
  box-shadow: 0.03em 0.01em 0 0.01em #fff;
  z-index: 2;
}
.eye_slash:hover .part {
  border-right: 0.04em solid #e91e63;
}
.error_outline:before {
  content: '';
  height: 0.38em;
  width: 0.38em;
  position: absolute;
  border: 0.05em solid #666;
  border-radius: 50%;
  top: 0.3em;
}
.error_outline:after {
  content: 'i';
  height: 0.2em;
  width: 0.06em;
  font-size: 0.35em;
  background: transparent;
  position: absolute;
  font-weight: bold;
  top: 1.89em;
  left: 1.49em;
  color: #666;
  font-family: Roboto;
  transform: rotate(180deg);
}
.error_outline:hover:before {
  border-color: #e91e63;
}
.error_outline:hover:after {
  color: #e91e63;
}
.error:before {
  content: '';
  height: 0.38em;
  width: 0.38em;
  position: absolute;
  border: 0.05em solid #666;
  background: #666;
  border-radius: 50%;
  top: 0.3em;
}
.error:after {
  content: 'i';
  height: 0.2em;
  width: 0.06em;
  font-size: 0.35em;
  background: transparent;
  position: absolute;
  font-weight: bold;
  top: 1.89em;
  left: 1.49em;
  color: #fff;
  font-family: Roboto;
  transform: rotate(180deg);
}
.error:hover:before {
  border-color: #e91e63;
  background: #e91e63;
}
.settings:before {
  content: '';
  height: 0.5em;
  width: 0.15em;
  background: #666;
  position: absolute;
  transform: rotate(-60deg);
  border-radius: 0.06em;
}
.settings:after {
  content: '';
  height: 0.5em;
  width: 0.15em;
  background: #666;
  position: absolute;
  transform: rotate(60deg);
  border-radius: 0.06em;
}
.settings .part {
  height: 0.5em;
  width: 0.15em;
  border-radius: 0.06em;
  background: #666;
  border: none;
  position: absolute;
}
.settings .part:before {
  content: '';
  height: 0.13em;
  width: 0.13em;
  position: absolute;
  border: 0.12em solid #666;
  background: #fff;
  border-radius: 50%;
  top: 0.076em;
  left: -0.11em;
  z-index: 2;
}
.settings:hover:before,
.settings:hover:after {
  background: #e91e63;
}
.settings:hover .part {
  background: #e91e63;
}
.settings:hover .part:before {
  border-color: #e91e63;
}
.avatar_outline:before {
  content: '';
  height: 0.16em;
  width: 0.16em;
  position: absolute;
  border: 0.05em solid #666;
  border-radius: 50%;
  top: 0.18em;
  z-index: 2;
}
.avatar_outline:after {
  content: '';
  height: 0.15em;
  width: 0.38em;
  position: absolute;
  border: 0.05em solid #666;
  border-radius: 50% 50% 0 0;
  top: 0.45em;
  z-index: -1;
}
.avatar_outline:hover:before,
.avatar_outline:hover:after {
  border-color: #e91e63;
}
.avatar:before {
  content: '';
  height: 0.16em;
  width: 0.16em;
  position: absolute;
  border: 0.05em solid #666;
  background: #666;
  border-radius: 50%;
  top: 0.18em;
  z-index: 2;
}
.avatar:after {
  content: '';
  height: 0.15em;
  width: 0.38em;
  position: absolute;
  border: 0.05em solid #666;
  background: #666;
  border-radius: 50% 50% 0 0;
  top: 0.45em;
  z-index: -1;
}
.avatar:hover:before,
.avatar:hover:after {
  border-color: #e91e63;
  background: #e91e63;
}
.chat_outline:before {
  content: '';
  height: 0.31em;
  width: 0.41em;
  border: 0.042em solid #666;
  position: absolute;
  top: 0.2em;
  border-radius: 12%;
}
.chat_outline:after {
  content: 'v';
  font-family: sans-serif;
  font-size: 0.35em;
  font-weight: bold;
  color: #666;
  position: absolute;
  left: 0.6em;
  transform: rotate(20deg);
  top: 1.12em;
  z-index: -1;
}
.chat_outline .part:before {
  content: '';
  box-shadow: 0px 0.04em 0px 0px #666, -1px 0.14em 0px -1px #666, -1px 0.23em 0px -1px #666;
  height: 0.065em;
  width: 0.3em;
  position: absolute;
  top: 0.22em;
  left: 0.36em;
}
.chat_outline:hover:before {
  border-color: #e91e63;
}
.chat_outline:hover:after {
  color: #e91e63;
}
.chat_outline:hover .part:before {
  box-shadow: 0px 0.04em 0px 0px #e91e63, -1px 0.14em 0px -1px #e91e63, -1px 0.23em 0px -1px #e91e63;
}
.chat:before {
  content: '';
  height: 0.4em;
  width: 0.5em;
  background: #666;
  position: absolute;
  top: 0.2em;
  border-radius: 12%;
}
.chat:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 0.12em solid transparent;
  border-left: 0.16em solid #666;
  border-bottom: 0.16em solid transparent;
  border-radius: 0.2em;
  position: absolute;
  left: 0.25em;
  top: 0.47em;
  z-index: -1;
}
.chat .part:before {
  content: '';
  box-shadow: 0px 0.04em 0px 0px #fff, -1px 0.14em 0px -1px #fff, -1px 0.23em 0px -1px #fff;
  height: 0.065em;
  width: 0.3em;
  position: absolute;
  top: 0.22em;
  left: 0.36em;
}
.chat:hover:before {
  background: #e91e63;
}
.chat:hover:after {
  border-left-color: #e91e63;
}
.filter:before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: 0.25em;
  border-left: 0.24em solid transparent;
  border-right: 0.24em solid transparent;
  border-top: 0.28em solid #666;
  border-radius: 2em;
}
.filter:after {
  content: '';
  width: 0.34em;
  height: 0.09em;
  transform: rotate(90deg) skew(35deg);
  background: #666;
  z-index: -1;
}
.filter:hover:before {
  border-top-color: #e91e63;
}
.filter:hover:after {
  background: #e91e63;
}
.map_marker:before {
  content: '';
  width: 0.4em;
  height: 0.4em;
  background: #666;
  position: absolute;
  border-radius: 60% 50% 60% 0;
  transform: rotate(-45deg);
  top: 0.2em;
}
.map_marker:after {
  content: '';
  width: 0.15em;
  height: 0.15em;
  background: #fff;
  z-index: 2;
  position: absolute;
  top: 0.32em;
  border-radius: 50%;
}
.map_marker:hover:before {
  background: #e91e63;
}
.play:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 0.2em solid transparent;
  border-left: 0.3em solid #666;
  border-bottom: 0.2em solid transparent;
}
.play:hover:before {
  border-left-color: #e91e63;
}
.pause:before {
  content: '';
  box-shadow: 0px 0.15em 0px 0px #666, 0px 0.3em 0 0 #666;
  height: 0.1em;
  width: 0.35em;
  position: absolute;
  left: 0.53em;
  transform: rotate(90deg);
}
.pause:hover:before {
  box-shadow: 0px 0.15em 0px 0px #e91e63, 0px 0.3em 0 0 #e91e63;
}
.stop:before {
  content: '';
  height: 0.3em;
  width: 0.3em;
  background: #666;
}
.stop:hover:before {
  background: #e91e63;
}
.fast_forward:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 0.14em solid transparent;
  border-left: 0.24em solid #666;
  border-bottom: 0.14em solid transparent;
}
.fast_forward:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 0.14em solid transparent;
  border-left: 0.24em solid #666;
  border-bottom: 0.14em solid transparent;
}
.fast_forward:hover:before,
.fast_forward:hover:after {
  border-left-color: #e91e63;
}
.fast_forward_back:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 0.14em solid transparent;
  border-right: 0.24em solid #666;
  border-bottom: 0.14em solid transparent;
}
.fast_forward_back:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 0.14em solid transparent;
  border-right: 0.24em solid #666;
  border-bottom: 0.14em solid transparent;
}
.fast_forward_back:hover:before,
.fast_forward_back:hover:after {
  border-right-color: #e91e63;
}
.skip_next:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 0.14em solid transparent;
  border-left: 0.24em solid #666;
  border-bottom: 0.14em solid transparent;
}
.skip_next:after {
  content: '';
  width: 0.05em;
  height: 0.25em;
  background: #666;
  margin-left: 0.025em;
}
.skip_next:hover:before {
  border-left-color: #e91e63;
}
.skip_next:hover:after {
  background: #e91e63;
}
.skip_prev:before {
  content: '';
  width: 0.05em;
  height: 0.25em;
  background: #666;
  margin-right: 0.025em;
}
.skip_prev:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 0.14em solid transparent;
  border-right: 0.24em solid #666;
  border-bottom: 0.14em solid transparent;
}
.skip_prev:hover:before {
  background: #e91e63;
}
.skip_prev:hover:after {
  border-right-color: #e91e63;
}
.arrow_left:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 0.14em solid transparent;
  border-right: 0.24em solid #666;
  border-bottom: 0.14em solid transparent;
}
.arrow_left:hover:before {
  border-right-color: #e91e63;
}
.arrow_right:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 0.14em solid transparent;
  border-left: 0.24em solid #666;
  border-bottom: 0.14em solid transparent;
}
.arrow_right:hover:before {
  border-left-color: #e91e63;
}
.arrow_up:before {
  content: '';
  width: 0;
  height: 0;
  border-right: 0.14em solid transparent;
  border-bottom: 0.24em solid #666;
  border-left: 0.14em solid transparent;
}
.arrow_up:hover:before {
  border-bottom-color: #e91e63;
}
.arrow_down:before {
  content: '';
  width: 0;
  height: 0;
  border-right: 0.14em solid transparent;
  border-top: 0.24em solid #666;
  border-left: 0.14em solid transparent;
}
.arrow_down:hover:before {
  border-top-color: #e91e63;
}
.plus:before {
  content: '';
  height: 0.3em;
  width: 0.065em;
  background: #666;
  position: absolute;
}
.plus:after {
  content: '';
  height: 0.3em;
  width: 0.065em;
  background: #666;
  position: absolute;
  transform: rotate(90deg);
}
.plus:hover:before,
.plus:hover:after {
  background: #e91e63;
}
.minus:before {
  content: '';
  height: 0.065em;
  width: 0.3em;
  background: #666;
  position: absolute;
}
.minus:hover:before {
  background: #e91e63;
}
.bookmark_outline:before {
  content: '';
  height: 0.4em;
  width: 0.3em;
  border: 0.03em solid #666;
  border-bottom: 0;
  position: absolute;
  top: 0.25em;
  border-radius: 12%;
}
.bookmark_outline:after {
  content: '';
  height: 0.22em;
  width: 0.22em;
  border: 0.03em solid #666;
  border-bottom: 0;
  border-right: 0;
  transform: rotate(45deg);
  position: absolute;
  top: 0.53em;
}
.bookmark_outline:hover:before,
.bookmark_outline:hover:after {
  border-color: #e91e63;
}
.bookmark:before {
  content: '';
  height: 0.4em;
  width: 0.3em;
  border: 0.03em solid #666;
  background: #666;
  border-bottom: 0;
  position: absolute;
  top: 0.25em;
  border-radius: 12%;
}
.bookmark:after {
  content: '';
  height: 0.22em;
  width: 0.22em;
  border: 0.03em solid #666;
  background: #fff;
  border-bottom: 0;
  border-right: 0;
  transform: rotate(45deg);
  position: absolute;
  top: 0.53em;
}
.bookmark:hover:before {
  border-color: #e91e63;
  background: #e91e63;
}
.bookmark:hover:after {
  border-color: #e91e63;
}
.cloud_outline:before {
  content: '';
  height: 0.25em;
  width: 0.6em;
  border: 0.05em solid #666;
  border-top: 0;
  border-radius: 39%;
  position: absolute;
  top: 0.4em;
}
.cloud_outline:after {
  content: '';
  height: 0.2em;
  width: 0.2em;
  border: 0.05em solid #666;
  background: #fff;
  border-bottom: 0;
  border-right: 0;
  position: absolute;
  border-radius: 50%;
  left: 0.24em;
  top: 0.27em;
  transform: rotate(20deg);
}
.cloud_outline .part:before {
  content: '';
  height: 0.32em;
  width: 0.32em;
  border: 0.05em solid #666;
  background: #fff;
  border-bottom: 0;
  border-left: 0;
  position: absolute;
  border-radius: 50%;
  left: 0.41em;
  top: 0.18em;
  transform: rotate(-25deg);
}
.cloud_outline:hover:before,
.cloud_outline:hover:after,
.cloud_outline:hover .part:before {
  border-color: #e91e63;
}
.cloud:before {
  content: '';
  height: 0.25em;
  width: 0.6em;
  border: 0.05em solid #666;
  background: #666;
  border-top: 0;
  border-radius: 39%;
  position: absolute;
  top: 0.4em;
}
.cloud:after {
  content: '';
  height: 0.2em;
  width: 0.2em;
  border: 0.05em solid #666;
  background: #666;
  border-bottom: 0;
  border-right: 0;
  position: absolute;
  border-radius: 50%;
  left: 0.24em;
  top: 0.27em;
  transform: rotate(20deg);
}
.cloud .part:before {
  content: '';
  height: 0.32em;
  width: 0.32em;
  border: 0.05em solid #666;
  background: #666;
  border-bottom: 0;
  border-left: 0;
  position: absolute;
  border-radius: 50%;
  left: 0.41em;
  top: 0.18em;
  transform: rotate(-25deg);
}
.cloud:hover:before,
.cloud:hover:after,
.cloud:hover .part:before {
  border-color: #e91e63;
  background: #e91e63;
}
.heart_outline:before {
  content: '';
  height: 0.25em;
  width: 0.25em;
  border: 0.04em solid #666;
  border-radius: 50%;
  border-bottom: 0;
  border-right: 0;
  position: absolute;
  top: 0.25em;
  left: 0.2em;
}
.heart_outline:after {
  content: '';
  height: 0.25em;
  width: 0.25em;
  border: 0.04em solid #666;
  border-radius: 50%;
  border-bottom: 0;
  border-left: 0;
  position: absolute;
  top: 0.25em;
  left: 0.46em;
}
.heart_outline .part {
  height: 0.31em;
  width: 0.3em;
  border: 0.04em solid #666;
  border-left: 0;
  border-top: 0;
  transform: rotate(45deg);
  position: absolute;
  left: 0.31em;
  top: 0.32em;
}
.heart_outline:hover:before {
  border-color: #e91e63;
}
.heart_outline:hover:after {
  border-color: #e91e63;
}
.heart_outline:hover .part {
  border-color: #e91e63;
}
.heart:before {
  content: '';
  height: 0.25em;
  width: 0.25em;
  border: 0.04em solid #666;
  background: #666;
  border-radius: 50%;
  border-bottom: 0;
  border-right: 0;
  position: absolute;
  top: 0.25em;
  left: 0.2em;
}
.heart:after {
  content: '';
  height: 0.25em;
  width: 0.25em;
  border: 0.04em solid #666;
  background: #666;
  border-radius: 50%;
  border-bottom: 0;
  border-left: 0;
  position: absolute;
  top: 0.25em;
  left: 0.46em;
}
.heart .part {
  height: 0.3em;
  width: 0.33em;
  border: 0;
  border-left: 0;
  border-top: 0;
  transform: rotate(45deg);
  position: absolute;
  left: 0.3em;
  top: 0.36em;
  background: #666;
}
.heart:hover:before {
  border-color: #e91e63;
  background: #e91e63;
}
.heart:hover:after {
  border-color: #e91e63;
  background: #e91e63;
}
.heart:hover .part {
  background: #e91e63;
}
.shopping_cart:before {
  content: '';
  border-top: 0.25em solid #666;
  border-left: 0.1em solid transparent;
  border-right: 0.1em solid transparent;
  height: 0;
  width: 0.3em;
  border-top-right-radius: 0.06em;
  border-bottom-right-radius: 0.05em;
}
.shopping_cart:after {
  content: '';
  position: absolute;
  height: 0.3em;
  width: 0.06em;
  border: 0.05em solid #666;
  border-top: 0;
  border-right: 0;
  transform: rotate(156deg);
  left: 0.2em;
  top: 0.3em;
}
.shopping_cart i.part {
  height: 0.05em;
  width: 0.3em;
  border: 0.04em solid #666;
  border-right: 0;
  border-top: 0;
  position: absolute;
  left: 0.34em;
  top: 0.61em;
}
.shopping_cart i.part:before {
  content: '';
  height: 0.1em;
  width: 0.1em;
  background: #666;
  border-radius: 50%;
  position: absolute;
  top: 0.12em;
}
.shopping_cart i.part:after {
  content: '';
  height: 0.1em;
  width: 0.1em;
  background: #666;
  border-radius: 50%;
  position: absolute;
  top: 0.12em;
  left: 0.2em;
}
.shopping_cart:hover:before {
  border-top-color: #e91e63;
}
.shopping_cart:hover:after {
  border-color: #e91e63;
}
.shopping_cart:hover .part {
  border-color: #e91e63;
}
.shopping_cart:hover .part:before {
  background: #e91e63;
}
.shopping_cart:hover .part:after {
  background: #e91e63;
}
<div class="container">
  <div class="base search"></div>
  <div class="base cross"></div>
  <div class="base tick"></div>
  <div class="base menu"></div>
  <div class="base phone"></div>
  <div class="base lock"><i class="part"></i></div>
  <div class="base lock lock-open"><i class="part"></i></div>
  <div class="base home"></div>
  <div class="base logout"></div>
  <div class="base edit"></div>
  <div class="base mail_outline"></div>
  <div class="base mail"></div>
  <div class="base bell_outline"><i class="part"></i></div>
  <div class="base bell"><i class="part"></i></div>
  <div class="base trash_outline"></div>
  <div class="base trash"></div>
  <div class="base eye"></div>
  <div class="base eye_slash"><i class="part"></i></div>
  <div class="base error_outline"></div>
  <div class="base error"></div>
  <div class="base settings"><i class="part"></i></div>
  <div class="base avatar_outline"></div> 
  <div class="base avatar"></div> 
  <div class="base chat_outline"><i class="part"></i></div>
  <div class="base chat"><i class="part"></i></div>
  <div class="base filter"></div>
  <div class="base map_marker"></div>
  <div class="base play"></div>
  <div class="base pause"></div> 
  <div class="base stop"></div> 
  <div class="base fast_forward"></div> 
  <div class="base fast_forward_back"></div> 
  <div class="base skip_next"></div> 
  <div class="base skip_prev"></div> 
  <div class="base arrow_left"></div> 
  <div class="base arrow_right"></div> 
  <div class="base arrow_up"></div> 
  <div class="base arrow_down"></div> 
  <div class="base plus"></div>
  <div class="base minus"></div>
  <div class="base bookmark_outline"></div>
  <div class="base bookmark"></div>
  <div class="base cloud_outline"><i class="part"></i></div>
  <div class="base cloud"><i class="part"></i></div>
  <div class="base heart_outline"><i class="part"></i></div>
  <div class="base heart"><i class="part"></i></div>
  <div class="base shopping_cart"><i class="part"></i></div>
  <!-- TBD -->
<!--
<div class="base timer"></div>
<div class="base timer_off"></div>-->
</div>