Social Sprites Icons is a set of commonly used social icons that transition using CSS ease. This set is super lightweight and could easily be integrated into any website. There are two versions for the icons. One with white background for normal state and a transparent background version. On hover, the icons background color will change to the official color of the social network. All of the icons are in one sprite png that totals 26.1 KB.

How To Use

By default social sprite icons are 40px by 40px. Using the icon set is fairly simple. To integrate it to your website, all you need to do is call out of social sprite un-ordered list. To make it un-intrusive, we named this class “ss“.

<ul class="ss">
   ...
</ul>

The icon of choice is loaded from the class given to the list item. If you like to load a Facebook icon, you would add the class “facebook” (all lowercase) to the <li> tag. Followed by the <a> tag. Please note that any content added inside of the <a> tag will not show.

<li class="facebook">
   <a href="#">Facebook</a>
</li>

Your full code for a social sprites bar with Facebook, Twitter and Google+ icon will look like so:

<ul class="ss">
   <li class="facebook">
      <a href="#">Facebook</a>
   </li>
   <li class="twitter">
      <a href="#">Twitter</a>
   </li>
   <li class="googleplus">
      <a href="#">Google+</a>
   </li>
</ul>

Social Sprites Mini

Social Sprites Mini are the same icons as the general just 30px by 30px small. You use the same method for calling the mini icons with one difference; instead of adding the “ss” class to the <ul> tag, you add “ssm.”

<ul class="ssm">
   ...
</ul>

Your full code for a social sprites bar with Facebook, Twitter and Google+ icon will look like so:

<ul class="ssm">
   <li class="facebook">
      <a href="#">Facebook</a>
   </li>
</ul>

Removing Borders

To help each icon stand out individually, we added borders to the icons that show by default. To remove the borders, add the class “borderless” to the <ul> tag after the “ss” or “ssm” class.

<ul class="ss borderless">
   ...
</ul>

Circle Icons

With the help of CSS3, we took the social sprites icons kit to the next level. You can add now use circle icons on your website. To use circle icons, we add the class “sscircle” to the <ul> tag after the “ss” or “ssm” class.

<ul class="ss sscircle">
   ...
</ul>

When you use circle icons, we recommend you remove the borders by adding the “borderless” class.

<ul class="ssm borderless sscircle">
   ...
</ul>

All Icon Classes

This is a complete list of all the icon classes available for social sprite icons.

  • behance
  • digg
  • doc
  • dribbble
  • facebook
  • foursquare
  • flickr
  • forrst
  • github
  • googleplus
  • html5
  • icloud
  • instagram
  • lastfm
  • linkedin
  • mail
  • myspace
  • paypal
  • picasa
  • pinterest
  • reddit
  • rss
  • share
  • skype
  • star
  • stumbleupon
  • tumblr
  • twitter
  • vimeo
  • wordpress
  • yahoo
  • yelp
  • youtube
  • zerply

Change Log

Update 2.6 – 10/20/2013

  • Update to white icons
  • Added white version of mini icons

Update 2.5 – 10/13/2013

  • Massive clean up of code
  • Stylesheet has been compressed to improve performance
  • All layout stylings have been separated from the icons stylings
  • The icon stylesheet has been renamed to socialsprites.css
  • Prioritized code to prevent theme style interferrance
  • Improvement to transitions
  • Update to Twitter icon
  • Added 3 new icons: star – share – doc
  • Clean up of the sprite
  • Made it easier to edit the path to the sprites

Update 2.4 – 09/12/2013

  • Update to Twitter icon

Update 2.3 – 06/03/2013

  • Update to Twitter icon

Update 2.2 – 12/18/2012

  • Added 7 new icons: Github – Behance – Yelp – Mail – Instagram – Foursquare – Zerply
  • Circle icons option was added. To add circle icons, you just have to add the sscircle class to your
      tag. Furthermore, you no longer have to use a container class as before. You can simply use the borderless class directly into the ul tag.

Update 2.1 – 11/15/2012

  • IE bug fixes (added IE conditional)
  • Edge fix on mini icons (removed blurriness for two icons)

Update 2.0 – 11/09/2012

  • Added Social Sprites Mini (30px by 30px)
  • Clean up of PNG
  • Added extended license for use in commercial themes
  • Added less intrusive watermark on the ‘Live Preview’

Update 1.1 – 11/07/2012

  • Update to the math