Social Icons Sprites: 35 Ready To Use Icons in PSD, PNG, HTML/CSS

In the last few days I’ve been working on a new “coming soon” page template (maybe premium) that I’m finishing and I’ll publish here soon. As you know, a coming soon page needs some social media links so the users can follow the progress of the new site or service you’re launching. For this, I decided to use the circle social icons set that I released here a few days ago and I modified the icons to match the design of the page.

I’m planning to pack them together with the new template, but today I wanted to make a dedicated post only for these icons.

This because they can save you a lot of time since you can include them in your websites very quickly and easily. I’ve saved them as PNG sprites with 2 states, a size of 24 x 24 pixels and I’ve also coded them in HTML/CSS. So, you only have to include some CSS lines on your stylesheet file and call the classes of the icons you want to use in your HTML. If you need to change the colors or sizes, there’s also a PSD file available in the package.

Preview

How to Use the Icons

The HTML

Below is the HTML code for using these social icons in your projects. As you can see every icon is a simple link with a different class name.

<div class="icons">
	<a class="twitter" href=""></a>
	<a class="dribbble" href=""></a>
	<a class="rss" href=""></a>
	<a class="pinterest" href=""></a>
	<a class="digg" href=""></a>
	<a class="flickr" href=""></a>
	<a class="forrst" href=""></a>
	<a class="vimeo" href=""></a>
	<a class="reddit" href=""></a>
	<a class="linkedin" href=""></a>
	<a class="facebook" href=""></a>
	<a class="paypal" href=""></a>
	<a class="stumbleupon" href=""></a>
	<a class="email" href=""></a>
	<a class="deviantart" href=""></a>
	<a class="netvibes" href=""></a>
	<a class="yahoo" href=""></a>
	<a class="github" href=""></a>
	<a class="addthis" href=""></a>
	<a class="behance" href=""></a>
	<a class="blogger" href=""></a>
	<a class="slashdot" href=""></a>
	<a class="technorati" href=""></a>
	<a class="googleplus" href=""></a>
	<a class="apple" href=""></a>
	<a class="myspace" href=""></a>
	<a class="sharethis" href=""></a>
	<a class="yelp" href=""></a>
	<a class="delicious" href=""></a>
	<a class="lastfm" href=""></a>
	<a class="youtube" href=""></a>
	<a class="skype" href=""></a>
	<a class="tumblr" href=""></a>
	<a class="aim" href=""></a>
	<a class="google" href=""></a>
</div>

The CSS

And here is the CSS code. On hover, we just slide up the icon’s background for changing the color. Note the CSS3 transition for adding a nice animation.

.icons a {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 10px;
	vertical-align: middle;
	-o-transition: all .3s;
	-moz-transition: all .3s;
	-webkit-transition: all .3s;
	-ms-transition: all .3s;
}

.icons a.twitter { background: url(../img/social-icons/twitter.png) left top no-repeat; }
.icons a.dribbble { background: url(../img/social-icons/dribbble.png) left top no-repeat; }
.icons a.rss { background: url(../img/social-icons/rss.png) left top no-repeat; }
.icons a.pinterest { background: url(../img/social-icons/pinterest.png) left top no-repeat; }
.icons a.digg { background: url(../img/social-icons/digg.png) left top no-repeat; }
.icons a.flickr { background: url(../img/social-icons/flickr.png) left top no-repeat; }
.icons a.forrst { background: url(../img/social-icons/forrst.png) left top no-repeat; }
.icons a.vimeo { background: url(../img/social-icons/vimeo.png) left top no-repeat; }
.icons a.reddit { background: url(../img/social-icons/reddit.png) left top no-repeat; }
.icons a.linkedin { background: url(../img/social-icons/linkedin.png) left top no-repeat; }
.icons a.facebook { background: url(../img/social-icons/facebook.png) left top no-repeat; }
.icons a.paypal { background: url(../img/social-icons/paypal.png) left top no-repeat; }
.icons a.stumbleupon { background: url(../img/social-icons/stumbleupon.png) left top no-repeat; }
.icons a.email { background: url(../img/social-icons/email.png) left top no-repeat; }
.icons a.deviantart { background: url(../img/social-icons/deviantart.png) left top no-repeat; }
.icons a.netvibes { background: url(../img/social-icons/netvibes.png) left top no-repeat; }
.icons a.yahoo { background: url(../img/social-icons/yahoo.png) left top no-repeat; }
.icons a.github { background: url(../img/social-icons/github.png) left top no-repeat; }
.icons a.addthis { background: url(../img/social-icons/addthis.png) left top no-repeat; }
.icons a.behance { background: url(../img/social-icons/behance.png) left top no-repeat; }
.icons a.blogger { background: url(../img/social-icons/blogger.png) left top no-repeat; }
.icons a.slashdot { background: url(../img/social-icons/slashdot.png) left top no-repeat; }
.icons a.technorati { background: url(../img/social-icons/technorati.png) left top no-repeat; }
.icons a.googleplus { background: url(../img/social-icons/googleplus.png) left top no-repeat; }
.icons a.apple { background: url(../img/social-icons/apple.png) left top no-repeat; }
.icons a.myspace { background: url(../img/social-icons/myspace.png) left top no-repeat; }
.icons a.sharethis { background: url(../img/social-icons/sharethis.png) left top no-repeat; }
.icons a.yelp { background: url(../img/social-icons/yelp.png) left top no-repeat; }
.icons a.delicious { background: url(../img/social-icons/delicious.png) left top no-repeat; }
.icons a.lastfm { background: url(../img/social-icons/lastfm.png) left top no-repeat; }
.icons a.youtube { background: url(../img/social-icons/youtube.png) left top no-repeat; }
.icons a.skype { background: url(../img/social-icons/skype.png) left top no-repeat; }
.icons a.tumblr { background: url(../img/social-icons/tumblr.png) left top no-repeat; }
.icons a.aim { background: url(../img/social-icons/aim.png) left top no-repeat; }
.icons a.google { background: url(../img/social-icons/google.png) left top no-repeat; }

.icons a:hover { background-position: left -34px; }

Demo, Download and License

VIEW DEMO

DOWNLOAD FILE: Social Icons Sprites (20063 downloads)

LICENSE:

You can use these social icons in personal and commercial projects, but you can’t sell or distribute them directly, “as is”. If you plan to use them, a link to this page or any form of spreading the word will be much appreciated.

Want more?

Take a look at these premium social icon sets below: