in 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

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To The Weekly Newsletter

Get weekly updates to your email