<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/fstgerm/pen/qsxwJ?depth=everything&order=popularity&page=2&q=icon+box&show_forks=false" />
<style class="cp-pen-styles">body {
background: #e6e6e6;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 0;
}
ul li {
width: 64px;
height: 64px;
border: 39px solid white;
background: #FFF;
display: inline-block;
position: relative;
vertical-align: top;
margin: 5px;
/* comment this ↓ to see the middle of the box */
}
ul li:after {
background: rgba(0, 100, 255, 0.1);
width: 2px;
height: 100%;
position: absolute;
left: 50%;
margin-left: -1px;
content: '';
}
ul li:before {
background: rgba(0, 100, 255, 0.1);
height: 2px;
width: 100%;
position: absolute;
top: 50%;
margin-top: -1px;
content: '';
}
ul li:after,
ul li:before {
content: normal;
}
.icon {
position: relative;
display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.icon:after,
.icon:before {
content: '';
position: absolute;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.arrow-previous,
.arrow-next,
.arrow-bottom,
.arrow-top {
width: 100%;
height: 100%;
}
.arrow-previous:before,
.arrow-next:before,
.arrow-bottom:before,
.arrow-top:before,
.arrow-previous:after,
.arrow-next:after,
.arrow-bottom:after,
.arrow-top:after {
width: 39px;
height: 2px;
background: black;
content: '';
position: absolute;
top: 50%;
}
.arrow-previous:before,
.arrow-next:before,
.arrow-bottom:before,
.arrow-top:before {
transform: rotate(-44deg);
-webkit-transform: rotate(-44deg);
-moz-transform: rotate(-44deg);
-ms-transform: rotate(-44deg);
-o-transform: rotate(-44deg);
}
.arrow-previous:after,
.arrow-next:after,
.arrow-bottom:after,
.arrow-top:after {
transform: rotate(44deg);
-webkit-transform: rotate(44deg);
-moz-transform: rotate(44deg);
-ms-transform: rotate(44deg);
-o-transform: rotate(44deg);
}
.arrow-previous:before,
.arrow-previous:after {
left: 25%;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
}
.arrow-next:before,
.arrow-next:after {
right: 25%;
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
}
.arrow-bottom:before,
.arrow-bottom:after {
transform-origin: 50% 0;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
}
.arrow-bottom:before {
left: 0;
transform: rotate(46deg);
-webkit-transform: rotate(46deg);
-moz-transform: rotate(46deg);
-ms-transform: rotate(46deg);
-o-transform: rotate(46deg);
}
.arrow-bottom:after {
right: 0;
transform: rotate(-46deg);
-webkit-transform: rotate(-46deg);
-moz-transform: rotate(-46deg);
-ms-transform: rotate(-46deg);
-o-transform: rotate(-46deg);
}
.arrow-top:before,
.arrow-top:after {
transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
}
.arrow-top:before {
left: 0;
transform: rotate(-46deg);
-webkit-transform: rotate(-46deg);
-moz-transform: rotate(-46deg);
-ms-transform: rotate(-46deg);
-o-transform: rotate(-46deg);
}
.arrow-top:after {
right: 0;
transform: rotate(46deg);
-webkit-transform: rotate(46deg);
-moz-transform: rotate(46deg);
-ms-transform: rotate(46deg);
-o-transform: rotate(46deg);
}
.arrow-right,
.arrow-left {
height: 2px;
width: 55px;
background: black;
position: absolute;
top: 50%;
margin-top: -1px;
}
.arrow-right:after,
.arrow-left:after {
content: '';
position: absolute;
width: 25px;
height: 25px;
bottom: 1px;
border: 2px solid black;
}
.arrow-right:after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
border-left: none;
border-top: none;
right: -1px;
}
.arrow-left:after {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
border-right: none;
border-top: none;
left: -1px;
}
.smart-phone {
width: 28px;
height: 54px;
border: 2px solid black;
border-radius: 4px;
position: absolute;
left: 50%;
top: 50%;
margin: -25px 0 0 -14px;
}
.smart-phone:after {
content: '';
position: absolute;
width: 100%;
top: 4px;
bottom: 5px;
border: 2px solid black;
border-left: 0;
border-right: 0;
}
.smart-phone:before {
position: absolute;
content: '';
left: 50%;
bottom: 1px;
width: 3px;
height: 3px;
margin-left: -1px;
background: black;
border-radius: 100%;
}
.information-button {
width: 56px;
height: 56px;
border: 2px solid black;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
margin: -28px auto auto -28px;
}
.information-button:before {
width: 4px;
height: 4px;
background: black;
border-radius: 100%;
left: 50%;
margin-left: -2px;
top: 10px;
}
.information-button:after {
width: 4px;
height: 25px;
background: black;
border-radius: 10px;
left: 50%;
margin-left: -2px;
bottom: 10px;
}
.speech-bubble {
width: 56px;
height: 40px;
border: 2px solid black;
position: absolute;
top: 50%;
left: 50%;
margin: -20px 0 0 -28px;
box-shadow: inset 10px 0 0 0 white, inset -10px 0 0 0 white, inset 0 13px 0 0 white, inset 0 15px 0 0 black, inset 0 -13px 0 0 white, inset 0 -15px 0 0 black;
}
.speech-bubble--no-text {
box-shadow: none;
}
.speech-bubble:before {
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid black;
bottom: -14px;
left: 10px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.speech-bubble:after {
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid white;
bottom: -9px;
left: 12px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.bullet-list {
width: 6px;
height: 6px;
background: white;
border-radius: 100%;
position: absolute;
top: 50%;
left: 6px;
margin: -3px 0 0 0;
box-shadow: 0 20px 0 0 white, 0 -20px 0 0 white, 0 0 0 2px black, 0 -20px 0 2px black, 0 20px 0 2px black;
}
.bullet-list:after {
background: black;
width: 32px;
height: 2px;
left: 18px;
top: 50%;
margin: -1px 0 0 0;
box-shadow: 0 -20px 0 0 black, 0 20px 0 0 black;
}
.scale {
width: 62px;
height: 18px;
border: 2px solid black;
top: 50%;
left: 50%;
margin: -18px 0 0 -31px;
background: linear-gradient(to right, transparent 66.66%, black 33.33%);
background-size: 3px 6px;
background-repeat: repeat-x;
background-position: bottom left;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.scale:after {
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent 90%, black 10%);
background-size: 15px 8px;
background-repeat: repeat-x;
background-position: bottom left;
}
.credit-card {
width: 56px;
height: 40px;
border: 2px solid black;
position: absolute;
top: 50%;
left: 50%;
margin: -20px 0 0 -28px;
border-radius: 3px;
}
.credit-card:after {
width: 100%;
height: 6px;
top: 7px;
left: 0;
background: black;
}
.credit-card:before {
width: 16px;
height: 5px;
right: 5px;
bottom: 7px;
background: black;
}
.calendar-tick {
width: 54px;
height: 52px;
position: absolute;
top: 50%;
left: 50%;
margin: -26px 0 0 -27px;
border: 2px solid black;
box-shadow: inset 0 9px 0 0 white, inset 0 11px 0 0 black;
}
.calendar-tick:after {
width: 20px;
height: 14px;
border: 2px solid black;
border-top: 0;
border-right: 0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
left: 50%;
top: 50%;
margin: -7px 0 0 -10px;
}
.calendar-tick:before {
width: 2px;
height: 10px;
background: black;
left: 6px;
top: -6px;
box-shadow: 9px 0 0 0 black, 18px 0 0 0 black, 27px 0 0 0 black, 36px 0 0 0 black;
}
.outcoming {
position: absolute;
width: 32px;
height: 46px;
border: 2px solid black;
border-right: 0;
top: 50%;
left: 5px;
margin-top: -23px;
}
.outcoming:after {
width: 46px;
height: 2px;
background: black;
top: 50%;
left: 6px;
margin-top: -1px;
}
.outcoming:before {
width: 20px;
height: 20px;
right: -24px;
top: 50%;
margin-top: -20px;
border: 2px solid black;
border-top: 0;
border-left: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
}
.clock {
width: 56px;
height: 56px;
border: 2px solid black;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
margin: -28px 0 0 -28px;
}
.clock:after {
width: 19px;
height: 21px;
border: 2px solid black;
border-left: 0;
border-top: 0;
bottom: 50%;
right: 50%;
margin: 0 -1px -1px 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.mail {
width: 56px;
height: 36px;
border: 2px solid black;
position: absolute;
left: 50%;
top: 50%;
margin: -18px 0 0 -28px;
}
.mail:before,
.mail:after {
background: black;
width: 33px;
height: 2px;
top: 2px;
}
.mail:before {
transform: rotate(34deg);
-webkit-transform: rotate(34deg);
-moz-transform: rotate(34deg);
-ms-transform: rotate(34deg);
-o-transform: rotate(34deg);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
}
.mail:after {
right: 0;
transform: rotate(-34deg);
-webkit-transform: rotate(-34deg);
-moz-transform: rotate(-34deg);
-ms-transform: rotate(-34deg);
-o-transform: rotate(-34deg);
transform-origin: 100% 0;
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
}
.add {
position: absolute;
left: 50%;
top: 50%;
margin: -28px 0 0 -3px;
}
.add,
.add:before {
background: black;
height: 56px;
width: 6px;
border-radius: 10px;
}
.add:before {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.bookmark {
width: 42px;
height: 56px;
position: absolute;
left: 50%;
top: 50%;
margin: -28px 0 0 -21px;
border: 2px solid black;
border-bottom: 0;
}
.bookmark:after {
width: 30px;
height: 30px;
border: 2px solid black;
border-right: 0;
border-bottom: 0;
top: 100%;
left: 50%;
margin: -15px 0 0 -15px;
box-sizing: border-box;
moz-box-sizing: border-box;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.portfolio {
width: 50px;
height: 34px;
position: absolute;
left: 50%;
top: 50%;
margin: -17px 0 0 -25px;
border: 2px solid black;
box-shadow: inset 0 8px 0 0 white, inset 0 10px 0 0 black;
}
.portfolio:before {
width: 18px;
height: 7px;
border: 2px solid black;
border-bottom: 0;
left: 50%;
top: -9px;
margin: 0 0 0 -9px;
box-sizing: border-box;
moz-box-sizing: border-box;
}
.portfolio:after {
width: 4px;
height: 4px;
background: white;
left: 7px;
top: 10px;
box-shadow: 0 0 0 1px black, 28px 0 0 0 white, 28px 0 0 1px black;
}
.hierarchy {
width: 7px;
height: 7px;
background: white;
position: absolute;
left: 43px;
top: 50%;
margin-top: -4px;
box-shadow: 0 -19px 0 0 white, 0 19px 0 0 white, 0 0 0 2px black, 0 -19px 0 2px black, 0 19px 0 2px black, -28px 0 0 2px white, -28px 0 0 4px black;
}
.hierarchy:before {
width: 10px;
height: 41px;
border: 2px solid black;
border-right: 0;
top: -17px;
left: -12px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.hierarchy:after {
width: 15px;
height: 2px;
background: black;
left: -17px;
top: 50%;
margin-top: -1px;
}
.converging-arrows {
width: 78px;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
margin: -1px 0 0 -39px;
box-shadow: inset 32px 0 0 0 black, inset -32px 0 0 0 black;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
}
.converging-arrows:before,
.converging-arrows:after {
width: 20px;
height: 20px;
border: 2px solid black;
top: 50%;
margin-top: -10px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
}
.converging-arrows:before {
left: 10px;
border-left: 0;
border-bottom: 0;
}
.converging-arrows:after {
right: 10px;
border-right: 0;
border-top: 0;
}
.not-charging {
width: 50px;
height: 24px;
border: 1px solid black;
position: absolute;
top: 50%;
left: 50%;
margin: -12px 0 0 -25px;
}
.not-charging:after {
width: 60px;
height: 1px;
background: black;
left: 50%;
top: 50%;
margin: 0 0 0 -30px;
box-shadow: 0 0 0 1px white;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.not-charging:before {
width: 5px;
height: 10px;
border: 1px solid black;
border-left: 0;
right: -6px;
top: 50%;
margin-top: -5px;
}
.battery {
width: 44px;
height: 24px;
border: 1px solid black;
position: absolute;
top: 50%;
left: 50%;
margin: -12px 0 0 -22px;
}
.battery--two-bars:after,
.battery--three-bars:after,
.battery--four-bars:after {
height: 16px;
width: 5px;
background: white;
left: 3px;
top: 3px;
}
.battery--two-bars:after {
box-shadow: 0 0 0 1px black, 10px 0 0 0 white, 10px 0 0 1px black;
}
.battery--three-bars:after {
box-shadow: 0 0 0 1px black, 10px 0 0 0 white, 10px 0 0 1px black, 20px 0 0 0 white, 20px 0 0 1px black;
}
.battery--four-bars:after {
box-shadow: 0 0 0 1px black, 10px 0 0 0 white, 10px 0 0 1px black, 20px 0 0 0 white, 20px 0 0 1px black, 30px 0 0 0 white, 30px 0 0 1px black;
}
.battery:before {
width: 5px;
height: 10px;
border: 1px solid black;
border-left: 0;
right: -6px;
top: 50%;
margin-top: -5px;
}
.menu-three-lines {
position: absolute;
top: 50%;
left: 50%;
margin: -1px 0 0 -28px;
}
.menu-three-lines,
.menu-three-lines:after,
.menu-three-lines:before {
width: 56px;
height: 2px;
background: black;
}
.menu-three-lines:before {
top: -20px;
}
.menu-three-lines:after {
bottom: -20px;
}
.cross-out-mark {
width: 84px;
height: 2px;
position: absolute;
margin: -1px 0 0 -42px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
}
.cross-out-mark,
.cross-out-mark:after {
background: black;
left: 50%;
top: 50%;
}
.cross-out-mark:after {
height: 84px;
width: 2px;
margin: -42px 0 0 -1px;
}
.arrow-refresh {
position: absolute;
width: 54px;
height: 54px;
border: 2px solid black;
border-radius: 100%;
left: 50%;
top: 50%;
margin: -27px 0 0 -27px;
}
.arrow-refresh:before {
width: 20px;
height: 20px;
background: white;
right: -2px;
bottom: 50%;
}
.arrow-refresh:after {
width: 12px;
height: 12px;
border: 2px solid black;
border-top: 0;
border-left: 0;
top: -6px;
right: 6px;
transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
}
.wrong-sign {
width: 56px;
height: 56px;
position: absolute;
top: 50%;
left: 50%;
margin: -28px 0 0 -28px;
border: 1px solid black;
}
.wrong-sign:before,
.wrong-sign:after {
width: 40px;
height: 1px;
background: black;
top: 50%;
left: 50%;
margin-left: -20px;
}
.wrong-sign:before {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
.wrong-sign:after {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.clapper {
height: 30px;
position: absolute;
left: 50%;
top: 50%;
margin: -4px 0 0 -25px;
}
.clapper,
.clapper:before,
.clapper:after {
width: 50px;
border: 2px solid black;
}
.clapper:before,
.clapper:after {
height: 8px;
left: -2px;
background-position: -8px 0;
background-size: 8px 8px;
background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 7px, black 7px, black 8px);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 7px, black 7px, black 8px);
}
.clapper:before {
top: -8px;
}
.clapper:after {
top: -15px;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
}
.tablet-locked {
width: 36px;
height: 56px;
position: absolute;
left: 50%;
top: 50%;
margin: -28px 0 0 -18px;
border: 2px solid black;
border-radius: 2px;
box-shadow: inset 0 4px 0 0 white, inset 0 6px 0 0 black, inset 0 -6px 0 0 white, inset 0 -8px 0 0 black;
}
.tablet-locked:before {
width: 8px;
height: 8px;
border: 1px solid black;
border-radius: 100%;
left: 50%;
top: 17px;
margin-left: -4px;
box-shadow: 0 28px 0 -2px black;
}
.tablet-locked:after {
width: 12px;
height: 10px;
border-radius: 1px;
top: 22px;
left: 50%;
border: 1px solid black;
background: white;
margin-left: -6px;
}
.storage {
width: 40px;
height: 54px;
border: 2px solid black;
position: absolute;
left: 50%;
top: 50%;
margin: -27px 0 0 -20px;
}
.storage:before {
width: 10px;
height: 2px;
background: black;
left: 50%;
margin-left: -5px;
top: 7px;
box-shadow: 0 16px 0 0 black, 0 32px 0 0 black;
}
.storage:after {
width: 30px;
height: 2px;
background: black;
left: 50%;
margin-left: -15px;
top: 16px;
box-shadow: 0 16px 0 0 black;
}
.card-and-machine {
width: 56px;
height: 14px;
position: absolute;
left: 50%;
top: 50%;
margin: -24px 0 0 -28px;
}
.card-and-machine,
.card-and-machine:before {
border: 2px solid black;
}
.card-and-machine:before,
.card-and-machine:after {
transform: skew(160deg, 0deg);
-webkit-transform: skew(160deg, 0deg);
-moz-transform: skew(160deg, 0deg);
-ms-transform: skew(160deg, 0deg);
-o-transform: skew(160deg, 0deg);
}
.card-and-machine:before {
width: 34px;
height: 40px;
border-radius: 3px;
background: white;
left: 3px;
top: 5px;
background-color: white;
background: linear-gradient(to right, white 55%, black 55%, black 72%, white 72%);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: bottom left;
}
.card-and-machine:after {
width: 4px;
height: 12px;
background: black;
top: 27px;
left: 7px;
}
.aim-target {
width: 40px;
height: 40px;
border: 2px solid black;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
margin: -20px 0 0 -20px;
}
.aim-target:before,
.aim-target:after {
width: 58px;
height: 2px;
box-shadow: inset 17px 0 0 0 black, inset -17px 0 0 0 black;
top: 50%;
left: 50%;
margin: -1px 0 0 -29px;
}
.aim-target:after {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.box {
width: 40px;
height: 40px;
position: absolute;
top: 50%;
left: 50%;
margin: -14px 0 0 -28px;
box-shadow: inset 12px 0 0 0 white, inset -12px 0 0 0 white, inset 0 5px 0 0 white, inset 0 7px 0 0 black;
}
.box,
.box:before,
.box:after {
border: 2px solid black;
background: white;
}
.box,
.box:before {
width: 40px;
}
.box:before {
height: 13px;
border-bottom: 0;
top: -15px;
left: 6px;
box-shadow: inset 17px 0 0 0 white, inset 19px 0 0 0 black;
transform: skew(130deg, 0deg);
-webkit-transform: skew(130deg, 0deg);
-moz-transform: skew(130deg, 0deg);
-ms-transform: skew(130deg, 0deg);
-o-transform: skew(130deg, 0deg);
}
.box:after {
height: 39px;
width: 16px;
border-left: 0;
border-top: 0;
top: -8px;
left: 38px;
transform: skew(0deg, 139deg);
-webkit-transform: skew(0deg, 139deg);
-moz-transform: skew(0deg, 139deg);
-ms-transform: skew(0deg, 139deg);
-o-transform: skew(0deg, 139deg);
}
.window-computer {
width: 58px;
height: 58px;
border: 2px solid black;
position: absolute;
left: 50%;
top: 50%;
background: white;
margin: -29px 0 0 -29px;
box-shadow: inset 0 9px 0 0 white, inset 0 11px 0 0 black;
}
.window-computer:before,
.window-computer:after {
background: black;
height: 3px;
top: 3px;
}
.window-computer:before {
width: 12px;
left: 3px;
}
.window-computer:after {
width: 3px;
right: 3px;
border-radius: 100%;
box-shadow: -6px 0 0 0 black;
}
.circle-of-circles {
width: 6px;
height: 6px;
border-radius: 100%;
background: white;
position: absolute;
left: 50%;
top: 50%;
margin: -28px 0 0 -3px;
box-shadow: 17px 8px 0 0 white, 24px 25px 0 0 white, 17px 42px 0 0 white, 0 48px 0 0 white, -17px 42px 0 0 white, -24px 25px 0 0 white, -17px 8px 0 0 white, 0 0 0 1px black, 17px 8px 0 1px black, 24px 25px 0 1px black, 17px 42px 0 1px black, 0 48px 0 1px black, -17px 42px 0 1px black, -24px 25px 0 1px black, -17px 8px 0 1px black;
}
.window-plus {
width: 38px;
height: 38px;
position: absolute;
top: 50%;
left: 50%;
margin: -12px 0 0 -26px;
border: 2px solid black;
box-shadow: 14px -14px 0 -2px white, 14px -14px 0 0 black;
}
.window-plus:before,
.window-plus:after {
background: black;
left: 50%;
top: 50%;
}
.window-plus:before {
width: 26px;
height: 2px;
margin: -1px 0 0 -13px;
}
.window-plus:after {
width: 2px;
height: 26px;
margin: -13px 0 0 -1px;
}
.stack {
width: 54px;
height: 36px;
position: absolute;
top: 50%;
left: 50%;
margin: -11px 0 0 -27px;
}
.stack,
.stack:before,
.stack:after {
border: 2px solid black;
}
.stack:before,
.stack:after {
border-bottom: 0;
}
.stack:before {
width: 46px;
height: 8px;
left: 2px;
top: -10px;
}
.stack:after {
width: 32px;
height: 5px;
left: 8px;
top: -16px;
}
.bluethooth {
height: 56px;
width: 2px;
background: black;
position: absolute;
left: 50%;
top: 50%;
margin: -28px 0 0 -1px;
}
.bluethooth:before,
.bluethooth:after {
width: 20px;
height: 20px;
left: 2px;
border: 2px solid black;
border-left: 0;
}
.bluethooth:before {
top: 0px;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.bluethooth:after {
bottom: 0;
transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
/* MIXINS */
</style></head><body>
<ul>
<li><div class="icon arrow-previous"></div></li>
<li><div class="icon arrow-right"></div></li>
<li><div class="icon arrow-left"></div></li>
<li><div class="icon arrow-next"></div></li>
<li><div class="icon arrow-bottom"></div></li>
<li><div class="icon arrow-top"></div></li>
<li><div class="icon smart-phone"></div></li>
<li><div class="icon information-button"></div></li>
<li><div class="icon speech-bubble"></div></li>
<li><div class="icon speech-bubble speech-bubble--no-text"></div></li>
<li><div class="icon bullet-list"></div></li>
<li><div class="icon scale"></div></li>
<li><div class="icon credit-card"></div></li>
<li><div class="icon calendar-tick"></div></li>
<li><div class="icon outcoming"></div></li>
<li><div class="icon clock"></div></li>
<li><div class="icon mail"></div></li>
<li><div class="icon add"></div></li>
<li><div class="icon bookmark"></div></li>
<li><div class="icon portfolio"></div></li>
<li><div class="icon hierarchy"></div></li>
<li><div class="icon converging-arrows"></div></li>
<li><div class="icon not-charging"></div></li>
<li><div class="icon battery battery--two-bars"></div></li>
<li><div class="icon battery battery--three-bars"></div></li>
<li><div class="icon battery battery--four-bars"></div></li>
<li><div class="icon menu-three-lines"></div></li>
<li><div class="icon cross-out-mark"></div></li>
<li><div class="icon arrow-refresh"></div></li>
<li><div class="icon wrong-sign"></div></li>
<li><div class="icon clapper"></div></li>
<li><div class="icon tablet-locked"></div></li>
<li><div class="icon storage"></div></li>
<li><div class="icon card-and-machine"></div></li>
<li><div class="icon aim-target"></div></li>
<li><div class="icon box"></div></li>
<li><div class="icon window-computer"></div></li>
<li><div class="icon circle-of-circles"></div></li>
<li><div class="icon window-plus"></div></li>
<li><div class="icon stack"></div></li>
<li><div class="icon bluethooth"></div></li>
</ul>
</body></html>
