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

Published on: Nov 06 2012 by Anli

35 Social Icons Sprites

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

Social Icons Sprites

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 (18140)

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:

Ultimate Flat Social Icon Set

Complete Social Icon Set

Flat Social Icon Set

18 Comments So Far

  1. Kate says:

    The icons are lovely and the effect is awesome, thanks for sharing.

  2. Sun says:

    thanks, it was very nice and helpful..

  3. This is excelent. I have made a little different implementation by using the whole image as sprite for better performance. You can use all icons by mapping the coors.

    /* CSS */
    .icons a {
    background: url(“http://farm9.staticflickr.com/8121/8627278242_cb3da02781_b.jpg”);
    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-position: 359px 598px; }
    .icons a.rss { background-position: 208px 598px; }
    .icons a.pinterest { background-position: 133px 598px; }
    .icons a.facebook { background-position: 359px 420px; }
    .icons a.email { background-position: 133px 420px; }
    .icons a.youtube { background-position: 359px 62px; }

    .icons a.twitter:hover { background-position: 359px 632px; }
    .icons a.rss:hover { background-position: 208px 632px; }
    .icons a.pinterest:hover { background-position: 133px 632px; }
    .icons a.facebook:hover { background-position: 359px 454px; }
    .icons a.email:hover { background-position: 133px 454px; }
    .icons a.youtube:hover { background-position: 359px 96px; }

  4. Awesome and very helpful. Thanks.

  5. Stefanie says:

    Do you know how to install this using WebPlus x6? I’m having a hell of a time trying to get this to work. It’s beautiful BTW.

  6. Sabry says:

    Hiya!

    I love the icons! Thanks for them, and great work!!

    I’d like to ask a bit of a noobish question. I can’t seem to get my head around it. With the CSS you’ve provided, the sprites transition from top to bottom. I’d like to do the opposite from ‘bottom’ to ‘top’ (so that it goes from gray to color).

    I’ve played around with the css, and I’ve found how to get the ‘grey’ part showing, but not how to make it transition upwards.

    again, thanks for the awesome icons

    • Anli says:

      Hi,
      You can do this by changing the background position. For example:

      The twitter icon:
      .icons a.twitter { background: url(../img/social-icons/twitter.png) left top no-repeat; }

      Change it like this:
      .icons a.twitter { background: url(../img/social-icons/twitter.png) left bottom no-repeat; }

      And then, to make it transition from bottom to top, change the background position of the hover state:

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

      • Sabry says:

        Heya Anil,

        Thanks for the tip!
        Btw, I really do love these icons, pretty class if you ask me.

        All the best

  7. Polia says:

    This might seem like a task… but I’m using Dreamweaver CS6, with the CSS you’ve provided, I’n not sure where to insert it.
    Noob… I know, I’m sorry!

    Great work though!

    Cheers! 🙂

  8. nht2007 says:

    So cool man.
    I downloaded and modify with black color first 🙂
    Thank you so much 🙂

  9. Very nice! Just what i was looking for. Thank you!

  10. Anonymous says:

    No GitHub icon 🙁

  11. salih says:

    beautiful
    witch code need to insert this to wordpress blog?

  12. Smart Tuning says:

    Thanks! Very nice Social Media Icons!

  13. Robin Kidder says:

    Hi, I like these, and chance you can add an instagram one? Otherwise I won’t be able to use them 🙁

    thanks!

Sorry, the comment form is closed at this time.