Resources

CSS3 Icons

With this library you have a selection of 200 icons using just CSS3 in one or two HTML elements.

UIPlayGround - CSS 3 Icons

All you have to do is browse the icons you see in this library and click the icon you click. This will then display the HTML and CSS you need to recreate the icon to use in your own website.

Volume Icon

volume

The CSS

<style type="text/css"> 
 
 span{height:40px; width:40px; display:block; position:relative;} 
.demoSpan1{position:relative;}
.demoSpan1:before, .demoSpan1:after, .demoSpan2:before, .demoSpan2:after{content:''; height:10px; width:6px; display:block; background:#333; position:absolute; bottom:0px; left:0px;}
.demoSpan1:before{left:0px;}
.demoSpan1:after{height:20px; left:10px;}
.demoSpan2{position:absolute; bottom:0; left:0;}
.demoSpan2:before{height:30px; left:20px;}
.demoSpan2:after{height:40px; left:30px;}

</style>

The HTML

<span class="demoSpan1">
<span class="demoSpan2">
</span>
</span>

Download Icon

download

The CSS

<style type="text/css"> 
 
 span{height:40px; width:40px; display:block; position:relative;} 
.demoSpan1, .demoSpan2{height:35px;}
.demoSpan1:before{content:''; height:0; width:0; display:block; border:transparent solid; border-width:15px 9px 0 9px; border-top-color:#333; position:absolute; top:13px; left:11px; }
.demoSpan1:after{content:''; height:13px; width:4px; display:block; background:#333; position:absolute; top:0; left:18px;}
.demoSpan2:before{content:''; height:5px; width:30px; display:block; border:5px #333 solid; border-top-width:0; position:absolute; bottom:0px; left:0px; }

</style>

The HTML

<span class="demoSpan1">
<span class="demoSpan2">
</span>
</span>

List Post

list

The CSS

<style type="text/css"> 
 
 span{height:40px; width:40px; display:block; position:relative;} 
.demoSpan1{width:40px; height:40px; background:#333}
.demoSpan1:before{content:''; height:4px; width:20px; background:#fff; display:block; position:absolute; top:10px; left:10px; box-shadow:0 8px #fff, 0 16px #fff;-webkit-box-shadow:0 8px #fff, 0 16px #fff;-moz-box-shadow:0 8px #fff, 0 16px #fff; }

</style>

The HTML

<span class="demoSpan1">
</span>

Graph

graph

The CSS

<style type="text/css"> 
 
 span{height:40px; width:40px; display:block; position:relative;} 
.demoSpan1{width:36px; height:36px; border:#333 solid; border-width:0 0 4px 4px;}
.demoSpan1:before{content:''; height:2px; width:15px; display:block; background:#333; position:absolute; top:24px; left:0; transform:rotate(-28deg);-webkit-transform:rotate(-28deg);-moz-transform:rotate(-28deg);-o-transform:rotate(-28deg);-ms-transform:rotate(-28deg); box-shadow:19px 10px 0 #333;-webkit-box-shadow:19px 10px 0 #333;-moz-box-shadow:19px 10px 0 #333;}
.demoSpan1:after{content:''; height:2px; width:13px; display:block; background:#333; position:absolute; top:24px; left:11px; transform:rotate(36deg);-webkit-transform:rotate(36deg);-moz-transform:rotate(36deg);-o-transform:rotate(36deg);-ms-transform:rotate(36deg);}
.demoSpan2:before{content:''; height:2px; width:18px; display:block; background:#333; z-index:1; position:absolute; top:15px; left:0; transform:rotate(-34deg);-webkit-transform:rotate(-34deg);-moz-transform:rotate(-34deg);-o-transform:rotate(-34deg);-ms-transform:rotate(-34deg); box-shadow:15px 10px 0 #333;-webkit-box-shadow:15px 10px 0 #333;-moz-box-shadow:15px 10px 0 #333;}
.demoSpan2:after{content:''; height:2px; width:10px; display:block; background:#333; z-index:1; position:absolute; top:15px; left:13px; transform:rotate(63deg);-webkit-transform:rotate(63deg);-moz-transform:rotate(63deg);-o-transform:rotate(63deg);-ms-transform:rotate(63deg);}

</style>

The HTML

<span class="demoSpan1">
<span class="demoSpan2">
</span>
</span>

Bottom Right Arrow

bottom-right-arrow

The CSS

<style type="text/css"> 
 
 span{height:40px; width:40px; display:block; position:relative;} 
.demoSpan1{overflow:hidden;}
.demoSpan1:before{content:''; height:0; width:0; display:block; border:20px transparent solid; border-top-width:0; border-right-width:0; border-bottom-color:#333; position:absolute; bottom:0px; right:0;}
.demoSpan1:after{content:''; height:10px; width:30px; display:block; background:#333; transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg); position:absolute; top:15px; left:5px;}

</style>

The HTML

<span class="demoSpan1">
</span>

Lock

lock

The CSS

<style type="text/css"> 
 
 span{height:40px; width:40px; display:block; position:relative;} 
.demoSpan1{width:38px; height:25px; margin-top:40px; background:#333; border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px; border-left:1px dashed #fff; border-right:1px dashed #fff}
.demoSpan1:before{content:''; height:10px; width:16px;display:b; border:5px solid #333; border-bottom:none; border-radius:50px 50px 0 0;-webkit-border-radius:50px 50px 0 0;-moz-border-radius:50px 50px 0 0; position:absolute; top:-15px; left:6px; }
.demoSpan1:after{content:'';width:5px; height:7px; background:#fff; border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px; border:5px; position:absolute; top:8px; left:17px; }

</style>

The HTML

<span class="demoSpan1">
</span>

CSS3 Icons

Back to top

Learn how to code with Treehouse

  • Learn projects with access to 1000+ videos
  • Practice live with our Code Challenge Engine
  • Get help in our members-only forums

Start with a 7 day free trial