Social Icons

Add social buttons to your webpage. Just copy and paste codes!

CSS/JS files (add code to <HEAD> section):


<!-- DC Social Icons CSS -->
<link rel="stylesheet" type="text/css" href="dreamcodes/social_icons/tsc_social_icons.css" />

          

Square - 32px

L1: skype twitter rss linkedin blog blog youtube vimeo pinterest google+ google+ flickr instagram tumblr 500px add this
L2: amazon appstore appstore bebo behance blip blogger coroflot daytum delicious deviantart dribbble dopplr dreamtemplate drupal ember feedburner
L3: forrst foursquare friendfeed friendster github gowalla grooveshark itunes lastfm meetup metacafe mixx mobileme myspace netvibes star heart newsvine
L4: ebay paypal photobucket picasa podcast reddit digg retweet scribd sharethis slideshare soundcloud spotify squidoo stumbleupon technorati stackoverflow viddler
L5: virb w3 wiki apple windows xing quora gtalk aim icq msn yahoo bing google yelp
L6: blue green lightblue orange red white yellow

View code:


L1: 
<a class="email_square32 tsc_social_square32" title="email" href="#">email</a>
<a class="skype_square32 tsc_social_square32" title="skype" href="#">skype</a>
<a class="facebook_square32 tsc_social_square32" title="facebook" href="#">facebook</a>
<a class="twitter2_square32 tsc_social_square32" title="twitter" href="#">twitter</a>
<a class="rss_square32 tsc_social_square32" title="rss" href="#">rss</a>
<a class="linkedin_square32 tsc_social_square32" title="linkedin" href="#">linkedin</a>
<a class="wordpress_square32 tsc_social_square32" title="blog" href="#">blog</a>
<a class="wordpress2_square32 tsc_social_square32" title="blog" href="#">blog</a>
<a class="youtube_square32 tsc_social_square32" title="youtube" href="#">youtube</a>
<a class="vimeo_square32 tsc_social_square32" title="vimeo" href="#">vimeo</a>
<a class="pinterest_square32 tsc_social_square32" title="pinterest" href="#">pinterest</a>
<a class="googleplus_square32 tsc_social_square32" title="google+" href="#">google+</a>
<a class="googleplus2_square32 tsc_social_square32" title="google+" href="#">google+</a>
<a class="flickr_square32 tsc_social_square32" title="flickr" href="#">flickr</a>
<a class="instagram_square32 tsc_social_square32" title="instagram" href="#">instagram</a>
<a class="tumblr_square32 tsc_social_square32" title="tumblr" href="#">tumblr</a>
<a class="fivehundredpx_square32 tsc_social_square32" title="500px" href="#">500px</a>
<a class="addthis_square32 tsc_social_square32" title="add this" href="#">add this</a>

L2:
<a class="amazon_square32 tsc_social_square32" title="amazon" href="#">amazon</a>
<a class="appstore_square32 tsc_social_square32" title="appstore" href="#">appstore</a>
<a class="appstore2_square32 tsc_social_square32" title="appstore" href="#">appstore</a>
<a class="bebo_square32 tsc_social_square32" title="bebo" href="#">bebo</a>
<a class="behance_square32 tsc_social_square32" title="behance" href="#">behance</a>
<a class="blip_square32 tsc_social_square32" title="blip" href="#">blip</a>
<a class="blogger_square32 tsc_social_square32" title="blogger" href="#">blogger</a>
<a class="twitter_square32 tsc_social_square32" title="twitter" href="#">twitter</a>
<a class="coroflot_square32 tsc_social_square32" title="coroflot" href="#">coroflot</a>
<a class="daytum_square32 tsc_social_square32" title="daytum" href="#">daytum</a>
<a class="delicious_square32 tsc_social_square32" title="delicious" href="#">delicious</a>
<a class="deviantart_square32 tsc_social_square32" title="deviantart" href="#">deviantart</a>
<a class="dribbble_square32 tsc_social_square32" title="dribbble" href="#">dribbble</a>
<a class="dopplr_square32 tsc_social_square32" title="dopplr" href="#">dopplr</a>
<a class="dreamtemplate_square32 tsc_social_square32" title="dreamtemplate" href="#">dreamtemplate</a>
<a class="drupal_square32 tsc_social_square32" title="drupal" href="#">drupal</a>
<a class="ember_square32 tsc_social_square32" title="ember" href="#">ember</a>
<a class="feedburner_square32 tsc_social_square32" title="feedburner" href="#">feedburner</a>

L3:
<a class="forrst_square32 tsc_social_square32" title="forrst" href="#">forrst</a>
<a class="foursquare_square32 tsc_social_square32" title="foursquare" href="#">foursquare</a>
<a class="friendfeed_square32 tsc_social_square32" title="friendfeed" href="#">friendfeed</a>
<a class="friendster_square32 tsc_social_square32" title="friendster" href="#">friendster</a>
<a class="github_square32 tsc_social_square32" title="github" href="#">github</a>
<a class="gowalla_square32 tsc_social_square32" title="gowalla" href="#">gowalla</a>
<a class="grooveshark_square32 tsc_social_square32" title="grooveshark" href="#">grooveshark</a>
<a class="itune_square32 tsc_social_square32" title="itunes" href="#">itunes</a>
<a class="lastfm_square32 tsc_social_square32" title="lastfm" href="#">lastfm</a>
<a class="meetup_square32 tsc_social_square32" title="meetup" href="#">meetup</a>
<a class="metacafe_square32 tsc_social_square32" title="metacafe" href="#">metacafe</a>
<a class="mixx_square32 tsc_social_square32" title="mixx" href="#">mixx</a>
<a class="mobileme_square32 tsc_social_square32" title="mobileme" href="#">mobileme</a>
<a class="myspace_square32 tsc_social_square32" title="myspace" href="#">myspace</a>
<a class="netvibes_square32 tsc_social_square32" title="netvibes" href="#">netvibes</a>
<a class="star_square32 tsc_social_square32" title="star" href="#">star</a>
<a class="heart_square32 tsc_social_square32" title="heart" href="#">heart</a>
<a class="newsvine_square32 tsc_social_square32" title="newsvine" href="#">newsvine</a>

L4:
<a class="ebay_square32 tsc_social_square32" title="ebay" href="#">ebay</a>
<a class="paypal_square32 tsc_social_square32" title="paypal" href="#">paypal</a>
<a class="photobucket_square32 tsc_social_square32" title="photobucket" href="#">photobucket</a>
<a class="picasa_square32 tsc_social_square32" title="picasa" href="#">picasa</a>
<a class="podcast_square32 tsc_social_square32" title="podcast" href="#">podcast</a>
<a class="reddit_square32 tsc_social_square32" title="reddit" href="#">reddit</a>
<a class="digg_square32 tsc_social_square32" title="digg" href="#">digg</a>
<a class="retweet_square32 tsc_social_square32" title="retweet" href="#">retweet</a>
<a class="scribd_square32 tsc_social_square32" title="scribd" href="#">scribd</a>
<a class="sharethis_square32 tsc_social_square32" title="sharethis" href="#">sharethis</a>
<a class="slideshare_square32 tsc_social_square32" title="slideshare" href="#">slideshare</a>
<a class="soundcloud_square32 tsc_social_square32" title="soundcloud" href="#">soundcloud</a>
<a class="spotify_square32 tsc_social_square32" title="spotify" href="#">spotify</a>
<a class="squidoo_square32 tsc_social_square32" title="squidoo" href="#">squidoo</a>
<a class="stumbleupon_square32 tsc_social_square32" title="stumbleupon" href="#">stumbleupon</a>
<a class="technorati_square32 tsc_social_square32" title="technorati" href="#">technorati</a>
<a class="stackoverflow_square32 tsc_social_square32" title="stackoverflow" href="#">stackoverflow</a>
<a class="viddler_square32 tsc_social_square32" title="viddler" href="#">viddler</a>

L5:
<a class="virb_square32 tsc_social_square32" title="virb" href="#">virb</a>
<a class="w3_square32 tsc_social_square32" title="w3" href="#">w3</a>
<a class="wiki_square32 tsc_social_square32" title="wiki" href="#">wiki</a>
<a class="apple_square32 tsc_social_square32" title="apple" href="#">apple</a>
<a class="windows_square32 tsc_social_square32" title="windows" href="#">windows</a>
<a class="xing_square32 tsc_social_square32" title="xing" href="#">xing</a>
<a class="quora_square32 tsc_social_square32" title="quora" href="#">quora</a>
<a class="googletalk_square32 tsc_social_square32" title="gtalk" href="#">gtalk</a>
<a class="aim_square32 tsc_social_square32" title="aim" href="#">aim</a>
<a class="icq_square32 tsc_social_square32" title="icq" href="#">icq</a>
<a class="msn_square32 tsc_social_square32" title="msn" href="#">msn</a>
<a class="yahoo_square32 tsc_social_square32" title="yahoo" href="#">yahoo</a>
<a class="bing_square32 tsc_social_square32" title="bing" href="#">bing</a>
<a class="google_square32 tsc_social_square32" title="google" href="#">google</a>
<a class="yelp_square32 tsc_social_square32" title="yelp" href="#">yelp</a>

L6:
<a class="buttonblue_square32 tsc_social_square32" title="blue" href="#">blue</a>
<a class="buttongreen_square32 tsc_social_square32" title="green" href="#">green</a>
<a class="buttonlightblue_square32 tsc_social_square32" title="lightblue" href="#">lightblue</a>
<a class="buttonorange_square32 tsc_social_square32" title="orange" href="#">orange</a>
<a class="buttonred_square32 tsc_social_square32" title="red" href="#">red</a>
<a class="buttonwhite_square32 tsc_social_square32" title="white" href="#">white</a>
<a class="buttonyellow_square32 tsc_social_square32" title="yellow" href="#">yellow</a>

          

Square - 24px

L1: skype twitter rss linkedin blog blog youtube vimeo pinterest google+ google+ flickr instagram tumblr 500px add this
L2: amazon appstore appstore bebo behance blip blogger coroflot daytum delicious deviantart dribbble dopplr dreamtemplate drupal ember feedburner
L3: forrst foursquare friendfeed friendster github gowalla grooveshark itunes lastfm meetup metacafe mixx mobileme myspace netvibes star heart newsvine
L4: ebay paypal photobucket picasa podcast reddit digg retweet scribd sharethis slideshare soundcloud spotify squidoo stumbleupon technorati stackoverflow viddler
L5: virb w3 wiki apple windows xing quora gtalk aim icq msn yahoo bing google yelp
L6: blue green lightblue orange red white yellow

View code:


L1: 
<a class="email_square24 tsc_social_square24" title="email" href="#">email</a>
<a class="skype_square24 tsc_social_square24" title="skype" href="#">skype</a>
<a class="facebook_square24 tsc_social_square24" title="facebook" href="#">facebook</a>
<a class="twitter2_square24 tsc_social_square24" title="twitter" href="#">twitter</a>
<a class="rss_square24 tsc_social_square24" title="rss" href="#">rss</a>
<a class="linkedin_square24 tsc_social_square24" title="linkedin" href="#">linkedin</a>
<a class="wordpress_square24 tsc_social_square24" title="blog" href="#">blog</a>
<a class="wordpress2_square24 tsc_social_square24" title="blog" href="#">blog</a>
<a class="youtube_square24 tsc_social_square24" title="youtube" href="#">youtube</a>
<a class="vimeo_square24 tsc_social_square24" title="vimeo" href="#">vimeo</a>
<a class="pinterest_square24 tsc_social_square24" title="pinterest" href="#">pinterest</a>
<a class="googleplus_square24 tsc_social_square24" title="google+" href="#">google+</a>
<a class="googleplus2_square24 tsc_social_square24" title="google+" href="#">google+</a>
<a class="flickr_square24 tsc_social_square24" title="flickr" href="#">flickr</a>
<a class="instagram_square24 tsc_social_square24" title="instagram" href="#">instagram</a>
<a class="tumblr_square24 tsc_social_square24" title="tumblr" href="#">tumblr</a>
<a class="fivehundredpx_square24 tsc_social_square24" title="500px" href="#">500px</a>
<a class="addthis_square24 tsc_social_square24" title="add this" href="#">add this</a>

L2:
<a class="amazon_square24 tsc_social_square24" title="amazon" href="#">amazon</a>
<a class="appstore_square24 tsc_social_square24" title="appstore" href="#">appstore</a>
<a class="appstore2_square24 tsc_social_square24" title="appstore" href="#">appstore</a>
<a class="bebo_square24 tsc_social_square24" title="bebo" href="#">bebo</a>
<a class="behance_square24 tsc_social_square24" title="behance" href="#">behance</a>
<a class="blip_square24 tsc_social_square24" title="blip" href="#">blip</a>
<a class="blogger_square24 tsc_social_square24" title="blogger" href="#">blogger</a>
<a class="twitter_square24 tsc_social_square24" title="twitter" href="#">twitter</a>
<a class="coroflot_square24 tsc_social_square24" title="coroflot" href="#">coroflot</a>
<a class="daytum_square24 tsc_social_square24" title="daytum" href="#">daytum</a>
<a class="delicious_square24 tsc_social_square24" title="delicious" href="#">delicious</a>
<a class="deviantart_square24 tsc_social_square24" title="deviantart" href="#">deviantart</a>
<a class="dribbble_square24 tsc_social_square24" title="dribbble" href="#">dribbble</a>
<a class="dopplr_square24 tsc_social_square24" title="dopplr" href="#">dopplr</a>
<a class="dreamtemplate_square24 tsc_social_square24" title="dreamtemplate" href="#">dreamtemplate</a>
<a class="drupal_square24 tsc_social_square24" title="drupal" href="#">drupal</a>
<a class="ember_square24 tsc_social_square24" title="ember" href="#">ember</a>
<a class="feedburner_square24 tsc_social_square24" title="feedburner" href="#">feedburner</a>

L3:
<a class="forrst_square24 tsc_social_square24" title="forrst" href="#">forrst</a>
<a class="foursquare_square24 tsc_social_square24" title="foursquare" href="#">foursquare</a>
<a class="friendfeed_square24 tsc_social_square24" title="friendfeed" href="#">friendfeed</a>
<a class="friendster_square24 tsc_social_square24" title="friendster" href="#">friendster</a>
<a class="github_square24 tsc_social_square24" title="github" href="#">github</a>
<a class="gowalla_square24 tsc_social_square24" title="gowalla" href="#">gowalla</a>
<a class="grooveshark_square24 tsc_social_square24" title="grooveshark" href="#">grooveshark</a>
<a class="itune_square24 tsc_social_square24" title="itunes" href="#">itunes</a>
<a class="lastfm_square24 tsc_social_square24" title="lastfm" href="#">lastfm</a>
<a class="meetup_square24 tsc_social_square24" title="meetup" href="#">meetup</a>
<a class="metacafe_square24 tsc_social_square24" title="metacafe" href="#">metacafe</a>
<a class="mixx_square24 tsc_social_square24" title="mixx" href="#">mixx</a>
<a class="mobileme_square24 tsc_social_square24" title="mobileme" href="#">mobileme</a>
<a class="myspace_square24 tsc_social_square24" title="myspace" href="#">myspace</a>
<a class="netvibes_square24 tsc_social_square24" title="netvibes" href="#">netvibes</a>
<a class="star_square24 tsc_social_square24" title="star" href="#">star</a>
<a class="heart_square24 tsc_social_square24" title="heart" href="#">heart</a>
<a class="newsvine_square24 tsc_social_square24" title="newsvine" href="#">newsvine</a>

L4:
<a class="ebay_square24 tsc_social_square24" title="ebay" href="#">ebay</a>
<a class="paypal_square24 tsc_social_square24" title="paypal" href="#">paypal</a>
<a class="photobucket_square24 tsc_social_square24" title="photobucket" href="#">photobucket</a>
<a class="picasa_square24 tsc_social_square24" title="picasa" href="#">picasa</a>
<a class="podcast_square24 tsc_social_square24" title="podcast" href="#">podcast</a>
<a class="reddit_square24 tsc_social_square24" title="reddit" href="#">reddit</a>
<a class="digg_square24 tsc_social_square24" title="digg" href="#">digg</a>
<a class="retweet_square24 tsc_social_square24" title="retweet" href="#">retweet</a>
<a class="scribd_square24 tsc_social_square24" title="scribd" href="#">scribd</a>
<a class="sharethis_square24 tsc_social_square24" title="sharethis" href="#">sharethis</a>
<a class="slideshare_square24 tsc_social_square24" title="slideshare" href="#">slideshare</a>
<a class="soundcloud_square24 tsc_social_square24" title="soundcloud" href="#">soundcloud</a>
<a class="spotify_square24 tsc_social_square24" title="spotify" href="#">spotify</a>
<a class="squidoo_square24 tsc_social_square24" title="squidoo" href="#">squidoo</a>
<a class="stumbleupon_square24 tsc_social_square24" title="stumbleupon" href="#">stumbleupon</a>
<a class="technorati_square24 tsc_social_square24" title="technorati" href="#">technorati</a>
<a class="stackoverflow_square24 tsc_social_square24" title="stackoverflow" href="#">stackoverflow</a>
<a class="viddler_square24 tsc_social_square24" title="viddler" href="#">viddler</a>

L5:
<a class="virb_square24 tsc_social_square24" title="virb" href="#">virb</a>
<a class="w3_square24 tsc_social_square24" title="w3" href="#">w3</a>
<a class="wiki_square24 tsc_social_square24" title="wiki" href="#">wiki</a>
<a class="apple_square24 tsc_social_square24" title="apple" href="#">apple</a>
<a class="windows_square24 tsc_social_square24" title="windows" href="#">windows</a>
<a class="xing_square24 tsc_social_square24" title="xing" href="#">xing</a>
<a class="quora_square24 tsc_social_square24" title="quora" href="#">quora</a>
<a class="googletalk_square24 tsc_social_square24" title="gtalk" href="#">gtalk</a>
<a class="aim_square24 tsc_social_square24" title="aim" href="#">aim</a>
<a class="icq_square24 tsc_social_square24" title="icq" href="#">icq</a>
<a class="msn_square24 tsc_social_square24" title="msn" href="#">msn</a>
<a class="yahoo_square24 tsc_social_square24" title="yahoo" href="#">yahoo</a>
<a class="bing_square24 tsc_social_square24" title="bing" href="#">bing</a>
<a class="google_square24 tsc_social_square24" title="google" href="#">google</a>
<a class="yelp_square24 tsc_social_square24" title="yelp" href="#">yelp</a>

L6:
<a class="buttonblue_square24 tsc_social_square24" title="blue" href="#">blue</a>
<a class="buttongreen_square24 tsc_social_square24" title="green" href="#">green</a>
<a class="buttonlightblue_square24 tsc_social_square24" title="lightblue" href="#">lightblue</a>
<a class="buttonorange_square24 tsc_social_square24" title="orange" href="#">orange</a>
<a class="buttonred_square24 tsc_social_square24" title="red" href="#">red</a>
<a class="buttonwhite_square24 tsc_social_square24" title="white" href="#">white</a>
<a class="buttonyellow_square24 tsc_social_square24" title="yellow" href="#">yellow</a>

          

Cube - 64px

L1: mail skype in google rss flickr blog
L2: vcard youtube vimeo google buzz delicious digg fff itunes last fm
L3: myspace openid orkut picasa stumbleupon technocrati tumbrl upcoming
L4: wiki aim msn yahoo

View code:


L1:
<a class="mail_cube3d tsc_social_cube64" title="mail" href="#">mail</a>
<a class="skype_cube3d tsc_social_cube64" title="skype" href="#">skype</a>
<a class="facebook_cube3d tsc_social_cube64" title="facebook" href="#">facebook</a>
<a class="twitter_cube3d tsc_social_cube64" title="twitter" href="#">twitter</a>
<a class="in_cube3d tsc_social_cube64" title="linkedin" href="#">in</a>
<a class="google_cube3d tsc_social_cube64" title="google" href="#">google</a>
<a class="feed_cube3d tsc_social_cube64" title="rss" href="#">rss</a>
<a class="flickr_cube3d tsc_social_cube64" title="flickr" href="#">flickr</a>
<a class="blog_cube3d tsc_social_cube64" title="blog" href="#">blog</a>

L2:
<a class="vcard_cube3d tsc_social_cube64" title="vcard" href="#">vcard</a>
<a class="youtube_cube3d tsc_social_cube64" title="youtube" href="#">youtube</a>
<a class="vimeo_cube3d tsc_social_cube64" title="vimeo" href="#">vimeo</a>
<a class="buzz_cube3d tsc_social_cube64" title="google buzz" href="#">google buzz</a>
<a class="delicious_cube3d tsc_social_cube64" title="delicious" href="#">delicious</a>
<a class="digg_cube3d tsc_social_cube64" title="digg" href="#">digg</a>
<a class="fff_cube3d tsc_social_cube64" title="fff" href="#">fff</a>
<a class="itunes_cube3d tsc_social_cube64" title="itunes" href="#">itunes</a>
<a class="lastfm_cube3d tsc_social_cube64" title="last fm" href="#">last fm</a>

L3:
<a class="myspace_cube3d tsc_social_cube64" title="myspace" href="#">myspace</a>
<a class="openid_cube3d tsc_social_cube64" title="openid" href="#">openid</a>
<a class="orkut_cube3d tsc_social_cube64" title="orkut" href="#">orkut</a>
<a class="picasa_cube3d tsc_social_cube64" title="picasa" href="#">picasa</a>
<a class="share_cube3d tsc_social_cube64" title="share" href="#">share</a>
<a class="stumbleupon_cube3d tsc_social_cube64" title="stumbleupon" href="#">stumbleupon</a>
<a class="technocrati_cube3d tsc_social_cube64" title="technocrati" href="#">technocrati</a>
<a class="tumbrl_cube3d tsc_social_cube64" title="tumbrl" href="#">tumbrl</a>
<a class="upcoming_cube3d tsc_social_cube64" title="upcoming" href="#">upcoming</a>

L4:
<a class="wiki_cube3d tsc_social_cube64" title="wiki" href="#">wiki</a>
<a class="aim_cube3d tsc_social_cube64" title="aim" href="#">aim</a>
<a class="msn_cube3d tsc_social_cube64" title="msn" href="#">msn</a>
<a class="yahoo_cube3d tsc_social_cube64" title="yahoo" href="#">yahoo</a>

          

Cubes - Patterns


View code:


<!-- design 1 -->
<div class="iconabsolute1_cube3d">
<a class="facebook_cube3d tsc_social_cube64 icon_one" title="facebook" href="#">facebook</a>
<a class="twitter_cube3d tsc_social_cube64 icon_two" title="twitter" href="#">twitter</a>
<a class="feed_cube3d tsc_social_cube64 icon_three" title="rss" href="#">rss</a>
<a class="flickr_cube3d tsc_social_cube64 icon_four" title="flickr" href="#">flickr</a>
<a class="vimeo_cube3d tsc_social_cube64 icon_five" title="vimeo" href="#">vimeo</a>
<a class="youtube_cube3d tsc_social_cube64 icon_six" title="youtube" href="#">youtube</a>
<a class="in_cube3d tsc_social_cube64 icon_seven" title="linkedin" href="#">linkedin</a>
<a class="skype_cube3d tsc_social_cube64 icon_eight" title="skype" href="#">skype</a>
<a class="mail_cube3d tsc_social_cube64 icon_nine" title="mail" href="#">mail</a>
</div>
<div class="clear"></div>

<!-- design 2 -->
<div class="iconabsolute1_cube3d">
<a class="facebook_cube3d tsc_social_cube64 icon_one" title="facebook" href="#">facebook</a>
<a class="twitter_cube3d tsc_social_cube64 icon_two" title="twitter" href="#">twitter</a>
<a class="mail_cube3d tsc_social_cube64 icon_three" title="mail" href="#">mail</a>
</div>
<div class="clear"></div>

          

View code:


<!-- design 1 -->          	
<div class="iconabsolute2_cube3d">
<a class="facebook_cube3d tsc_social_cube64 icon_one" title="facebook" href="#">facebook</a>
<a class="twitter_cube3d tsc_social_cube64 icon_two" title="twitter" href="#">twitter</a>
<a class="feed_cube3d tsc_social_cube64 icon_three" title="rss" href="#">rss</a>
<a class="flickr_cube3d tsc_social_cube64 icon_four" title="flickr" href="#">flickr</a>
<a class="vimeo_cube3d tsc_social_cube64 icon_five" title="vimeo" href="#">vimeo</a>
<a class="youtube_cube3d tsc_social_cube64 icon_six" title="youtube" href="#">youtube</a>
<a class="in_cube3d tsc_social_cube64 icon_seven" title="linkedin" href="#">linkedin</a>
<a class="mail_cube3d tsc_social_cube64 icon_eight" title="mail" href="#">mail</a>
<a class="skype_cube3d tsc_social_cube64 icon_nine" title="skype" href="#">skype</a>
</div>
<div class="clear"></div>

<!-- design 2 -->
<div class="iconabsolute2_cube3d">
<a class="facebook_cube3d tsc_social_cube64 icon_one" title="facebook" href="#">facebook</a>
<a class="feed_cube3d tsc_social_cube64 icon_three" title="rss" href="#">rss</a>
<a class="mail_cube3d tsc_social_cube64 icon_five" title="mail" href="#">mail</a>
<a class="in_cube3d tsc_social_cube64 icon_seven" title="linkedin" href="#">linkedin</a>
<a class="twitter_cube3d tsc_social_cube64 icon_nine" title="twitter" href="#">twitter</a>
</div>
<div class="clear"></div>

<!-- design 3 -->
<div class="iconabsolute2_cube3d">
<a class="twitter_cube3d tsc_social_cube64 icon_two" title="twitter" href="#">twitter</a>
<a class="flickr_cube3d tsc_social_cube64 icon_four" title="flickr" href="#">flickr</a>
<a class="mail_cube3d tsc_social_cube64 icon_five" title="mail" href="#">mail</a>
<a class="facebook_cube3d tsc_social_cube64 icon_six" title="facebook" href="#">facebook</a>
<a class="skype_cube3d tsc_social_cube64 icon_eight" title="skype" href="#">skype</a>
</div>
<div class="clear"></div>

          

Flat 3D - 47px

L1: skype linkedin google+ rss blog flickr cloud lastfm
L2: yahoo aim myspace dribbble vimeo deviantart sharethis

View code:


L1:
<a class="facebook_flat3d tsc_social_flat3d" title="facebook" href="#">facebook</a>
<a class="skype_flat3d tsc_social_flat3d" title="skype" href="#">skype</a>
<a class="twitter_flat3d tsc_social_flat3d" title="twitter" href="#">twitter</a>
<a class="linkedin_flat3d tsc_social_flat3d" title="linkedin" href="#">linkedin</a>
<a class="googleplus_flat3d tsc_social_flat3d" title="google+" href="#">google+</a>
<a class="rss_flat3d tsc_social_flat3d" title="rss" href="#">rss</a>
<a class="blog_flat3d tsc_social_flat3d" title="blog" href="#">blog</a>
<a class="flickr_flat3d tsc_social_flat3d" title="flickr" href="#">flickr</a>
<a class="cloud_flat3d tsc_social_flat3d" title="cloud" href="#">cloud</a>
<a class="lastfm_flat3d tsc_social_flat3d" title="lastfm" href="#">lastfm</a>
L2:
<a class="yahoo_flat3d tsc_social_flat3d" title="yahoo" href="#">yahoo</a>
<a class="aim_flat3d tsc_social_flat3d" title="aim" href="#">aim</a>
<a class="myspace_flat3d tsc_social_flat3d" title="myspace" href="#">myspace</a>
<a class="dribbble_flat3d tsc_social_flat3d" title="dribbble" href="#">dribbble</a> 	
<a class="vimeo_flat3d tsc_social_flat3d" title="vimeo" href="#">vimeo</a>
<a class="deviantart_flat3d tsc_social_flat3d" title="deviantart" href="#">deviantart</a> 	
<a class="sharethis_flat3d tsc_social_flat3d" title="sharethis" href="#">sharethis</a>

          

Glossy - 64px

skype google rss flickr
youtube vimeo lastfm tumblr deviantart

View code:


<a class="email_glossy64 tsc_glossy_64" title="email" href="#">email</a>
<a class="skype_glossy64 tsc_glossy_64" title="skype" href="#">skype</a>
<a class="facebook_glossy64 tsc_glossy_64" title="facebook" href="#">facebook</a>
<a class="twitter_glossy64 tsc_glossy_64" title="twitter" href="#">twitter</a>
<a class="google_glossy64 tsc_glossy_64" title="google" href="#">google</a>
<a class="rss_glossy64 tsc_glossy_64" title="rss" href="#">rss</a>
<a class="flickr_glossy64 tsc_glossy_64" title="flickr" href="#">flickr</a>
<a class="youtube_glossy64 tsc_glossy_64" title="youtube" href="#">youtube</a>
<a class="vimeo_glossy64 tsc_glossy_64" title="vimeo" href="#">vimeo</a>
<a class="lastfm_glossy64 tsc_glossy_64" title="lastfm" href="#">lastfm</a>
<a class="tumblr_glossy64 tsc_glossy_64" title="tumblr" href="#">tumblr</a>
<a class="deviantart_glossy64 tsc_glossy_64" title="deviantart" href="#">deviantart</a>

          

Toony - 32px

google+ rss youtube sharethis myspace bebo cargo digg dribbble forrst grooveshark mobileme tumblr yahoo! aim

View code:


<a class="facebook_toony tsc_social_toony" title="facebook" href="#">facebook</a>
<a class="twitter_toony tsc_social_toony" title="twitter" href="#">twitter</a>
<a class="googleplus_toony tsc_social_toony" title="google+" href="#">google+</a>
<a class="rss_toony tsc_social_toony" title="rss" href="#">rss</a>
<a class="youtube_toony tsc_social_toony" title="youtube" href="#">youtube</a>
<a class="sharethis_toony tsc_social_toony" title="sharethis" href="#">sharethis</a>
<a class="myspace_toony tsc_social_toony" title="myspace" href="#">myspace</a>
<a class="bebo_toony tsc_social_toony" title="bebo" href="#">bebo</a>
<a class="cargo_toony tsc_social_toony" title="cargo" href="#">cargo</a>
<a class="digg_toony tsc_social_toony" title="digg" href="#">digg</a>
<a class="dribbble_toony tsc_social_toony" title="dribbble" href="#">dribbble</a>
<a class="forrst_toony tsc_social_toony" title="forrst" href="#">forrst</a>
<a class="grooveshark_toony tsc_social_toony" title="grooveshark" href="#">grooveshark</a>
<a class="mobileme_toony tsc_social_toony" title="mobileme" href="#">mobileme</a>
<a class="tumblr_toony tsc_social_toony" title="tumblr" href="#">tumblr</a>
<a class="yahoo_toony tsc_social_toony" title="yahoo!" href="#">yahoo!</a>
<a class="aim_toony tsc_social_toony" title="aim" href="#">aim</a>

          

Focused Large - 32px

L1: mail skype linkedin google+ rss blog flickr youtube vimeo instagram 500px add this tumblr
L2: delicious deviantart dopplr dribbble_ evernote forrst github grooveshark lastfm_ myspace path paypal picasa digg reddit
L3: sharethis behance stumbleupon virb windows

View code:


L1:
<a class="mail_focused tsc_social_focused" title="mail" href="#">mail</a>
<a class="skype_focused tsc_social_focused" title="skype" href="#">skype</a>
<a class="facebook_focused tsc_social_focused" title="facebook" href="#">facebook</a>
<a class="twitter_focused tsc_social_focused" title="twitter" href="#">twitter</a>
<a class="linkedin_focused tsc_social_focused" title="linkedin" href="#">linkedin</a>
<a class="googleplus_focused tsc_social_focused" title="google+" href="#">google+</a>
<a class="rss_focused tsc_social_focused" title="rss" href="#">rss</a>
<a class="wordpress_focused tsc_social_focused" title="blog" href="#">blog</a>
<a class="flickr_focused tsc_social_focused" title="flickr" href="#">flickr</a>
<a class="youtube_focused tsc_social_focused" title="youtube" href="#">youtube</a>
<a class="vimeo_focused tsc_social_focused" title="vimeo" href="#">vimeo</a>
<a class="instagram_focused tsc_social_focused" title="instagram" href="#">instagram</a>
<a class="fivehundredpx tsc_social_focused" title="500px" href="#">500px</a>
<a class="addthis_focused tsc_social_focused" title="add this" href="#">add this</a>
<a class="tumblr_focused tsc_social_focused" title="tumblr" href="#">tumblr</a>
L2:
<a class="delicious_focused tsc_social_focused" title="delicious" href="#">delicious</a>
<a class="deviantart_focused tsc_social_focused" title="deviantart" href="#">deviantart</a>
<a class="dopplr_focused tsc_social_focused" title="dopplr" href="#">dopplr</a>
<a class="dribbble_focused tsc_social_focused" title="dribbble_" href="#">dribbble_</a>
<a class="evernote_focused tsc_social_focused" title="evernote" href="#">evernote</a>
<a class="forrst_focused tsc_social_focused" title="forrst" href="#">forrst</a>
<a class="github_focused tsc_social_focused" title="github" href="#">github</a>
<a class="grooveshark_focused tsc_social_focused" title="grooveshark" href="#">grooveshark</a>
<a class="lastfm_focused tsc_social_focused" title="lastfm_" href="#">lastfm_</a>
<a class="myspace_focused tsc_social_focused" title="myspace" href="#">myspace</a>
<a class="path_focused tsc_social_focused" title="path" href="#">path</a>
<a class="paypal_focused tsc_social_focused" title="paypal" href="#">paypal</a>
<a class="picasa_focused tsc_social_focused" title="picasa" href="#">picasa</a>
<a class="digg_focused tsc_social_focused" title="digg" href="#">digg</a>
<a class="reddit_focused tsc_social_focused" title="reddit" href="#">reddit</a>
L3:
<a class="sharethis_focused tsc_social_focused" title="sharethis" href="#">sharethis</a>
<a class="behance_focused tsc_social_focused" title="behance" href="#">behance</a>
<a class="stumbleupon_focused tsc_social_focused" title="stumbleupon" href="#">stumbleupon</a>
<a class="virb_focused tsc_social_focused" title="virb" href="#">virb</a>
<a class="windows_focused tsc_social_focused" title="windows" href="#">windows</a>

          

Dice - 32px

L1: skype google+ linkedin feed location pinterest wordpress youtube vimeo link flickr
L2: 500px behance delicious reddit digg dropbox formspring github dribbble deviantart icloud instagram itunes
L3: lastfm myspace ebay paypal retweet technorati tumblr apple windows aim yahoo yelp

View code:


L1:
<a class="email_dice tsc_social_dice" title="email" href="#">email</a>
<a class="skype_dice tsc_social_dice" title="skype" href="#">skype</a>
<a class="facebook_dice tsc_social_dice" title="facebook" href="#">facebook</a>
<a class="twitter_dice tsc_social_dice" title="twitter" href="#">twitter</a>
<a class="google_plus_dice tsc_social_dice" title="google+" href="#">google+</a>
<a class="linkedin_dice tsc_social_dice" title="linkedin" href="#">linkedin</a>
<a class="feed_dice tsc_social_dice" title="feed" href="#">feed</a>
<a class="location_dice tsc_social_dice" title="location" href="#">location</a>
<a class="pinterest_dice tsc_social_dice" title="pinterest" href="#">pinterest</a>
<a class="wordpress_dice tsc_social_dice" title="wordpress" href="#">wordpress</a>
<a class="youtube_dice tsc_social_dice" title="youtube" href="#">youtube</a>
<a class="vimeo_dice tsc_social_dice" title="vimeo" href="#">vimeo</a>
<a class="linked_dice tsc_social_dice" title="linked" href="#">link</a>
<a class="flickr_dice tsc_social_dice" title="flickr" href="#">flickr</a>

L2:
<a class="twitter_alt_dice tsc_social_dice" title="twitter" href="#">twitter_alt</a>
<a class="fivehundredpx_dice tsc_social_dice" title="500px" href="#">500px</a>
<a class="behance_dice tsc_social_dice" title="behance" href="#">behance</a>
<a class="delicious_dice tsc_social_dice" title="delicious" href="#">delicious</a>
<a class="reddit_dice tsc_social_dice" title="reddit" href="#">reddit</a>
<a class="digg_dice tsc_social_dice" title="digg" href="#">digg</a>
<a class="dropbox_dice tsc_social_dice" title="dropbox" href="#">dropbox</a>
<a class="formspring_dice tsc_social_dice" title="formspring" href="#">formspring</a>
<a class="github_dice tsc_social_dice" title="github" href="#">github</a>
<a class="dribbble_dice tsc_social_dice" title="dribbble" href="#">dribbble</a>
<a class="deviantart_dice tsc_social_dice" title="deviantart" href="#">deviantart</a>
<a class="icloud_dice tsc_social_dice" title="icloud" href="#">icloud</a>
<a class="instagram_dice tsc_social_dice" title="instagram" href="#">instagram</a>
<a class="itunes_dice tsc_social_dice" title="itunes" href="#">itunes</a>

L3:
<a class="lastfm_dice tsc_social_dice" title="lastfm" href="#">lastfm</a>
<a class="myspace_dice tsc_social_dice" title="myspace" href="#">myspace</a>
<a class="ebay_dice tsc_social_dice" title="ebay" href="#">ebay</a>
<a class="paypal_dice tsc_social_dice" title="paypal" href="#">paypal</a>
<a class="retweet_dice tsc_social_dice" title="retweet" href="#">retweet</a>
<a class="technorati_dice tsc_social_dice" title="technorati" href="#">technorati</a>
<a class="tumblr_dice tsc_social_dice" title="tumblr" href="#">tumblr</a>
<a class="apple_dice tsc_social_dice" title="apple" href="#">apple</a>
<a class="windows_dice tsc_social_dice" title="windows" href="#">windows</a>
<a class="aim_dice tsc_social_dice" title="aim" href="#">aim</a>
<a class="yahoo_dice tsc_social_dice" title="yahoo" href="#">yahoo</a>
<a class="yelp_dice tsc_social_dice" title="yelp" href="#">yelp</a>

          

Metro - 32px

L1: skype google+ linkedin feed location pinterest wordpress youtube vimeo link flickr
L2: 500px behance delicious reddit digg dropbox formspring github dribbble deviantart icloud instagram itunes
L3: lastfm myspace ebay paypal retweet technorati tumblr apple windows aim yahoo yelp

View code:


L1:
<a class="email_metro tsc_social_metro" title="email" href="#">email</a>
<a class="skype_metro tsc_social_metro" title="skype" href="#">skype</a>
<a class="facebook_metro tsc_social_metro" title="facebook" href="#">facebook</a>
<a class="twitter_metro tsc_social_metro" title="twitter" href="#">twitter</a>
<a class="google_plus_metro tsc_social_metro" title="google+" href="#">google+</a>
<a class="linkedin_metro tsc_social_metro" title="linkedin" href="#">linkedin</a>
<a class="feed_metro tsc_social_metro" title="feed" href="#">feed</a>
<a class="location_metro tsc_social_metro" title="location" href="#">location</a>
<a class="pinterest_metro tsc_social_metro" title="pinterest" href="#">pinterest</a>
<a class="wordpress_metro tsc_social_metro" title="wordpress" href="#">wordpress</a>
<a class="youtube_metro tsc_social_metro" title="youtube" href="#">youtube</a>
<a class="vimeo_metro tsc_social_metro" title="vimeo" href="#">vimeo</a>
<a class="linked_metro tsc_social_metro" title="linked" href="#">link</a>
<a class="flickr_metro tsc_social_metro" title="flickr" href="#">flickr</a>

L2:
<a class="twitter_alt_metro tsc_social_metro" title="twitter" href="#">twitter_alt</a>
<a class="fivehundredpx_metro tsc_social_metro" title="500px" href="#">500px</a>
<a class="behance_metro tsc_social_metro" title="behance" href="#">behance</a>
<a class="delicious_metro tsc_social_metro" title="delicious" href="#">delicious</a>
<a class="reddit_metro tsc_social_metro" title="reddit" href="#">reddit</a>
<a class="digg_metro tsc_social_metro" title="digg" href="#">digg</a>
<a class="dropbox_metro tsc_social_metro" title="dropbox" href="#">dropbox</a>
<a class="formspring_metro tsc_social_metro" title="formspring" href="#">formspring</a>
<a class="github_metro tsc_social_metro" title="github" href="#">github</a>
<a class="dribbble_metro tsc_social_metro" title="dribbble" href="#">dribbble</a>
<a class="deviantart_metro tsc_social_metro" title="deviantart" href="#">deviantart</a>
<a class="icloud_metro tsc_social_metro" title="icloud" href="#">icloud</a>
<a class="instagram_metro tsc_social_metro" title="instagram" href="#">instagram</a>
<a class="itunes_metro tsc_social_metro" title="itunes" href="#">itunes</a>

L3:
<a class="lastfm_metro tsc_social_metro" title="lastfm" href="#">lastfm</a>
<a class="myspace_metro tsc_social_metro" title="myspace" href="#">myspace</a>
<a class="ebay_metro tsc_social_metro" title="ebay" href="#">ebay</a>
<a class="paypal_metro tsc_social_metro" title="paypal" href="#">paypal</a>
<a class="retweet_metro tsc_social_metro" title="retweet" href="#">retweet</a>
<a class="technorati_metro tsc_social_metro" title="technorati" href="#">technorati</a>
<a class="tumblr_metro tsc_social_metro" title="tumblr" href="#">tumblr</a>
<a class="apple_metro tsc_social_metro" title="apple" href="#">apple</a>
<a class="windows_metro tsc_social_metro" title="windows" href="#">windows</a>
<a class="aim_metro tsc_social_metro" title="aim" href="#">aim</a>
<a class="yahoo_metro tsc_social_metro" title="yahoo" href="#">yahoo</a>
<a class="yelp_metro tsc_social_metro" title="yelp" href="#">yelp</a>

Round Colors - 32px

L1: skype google+ linkedin feed location pinterest wordpress youtube vimeo link flickr
L2: 500px behance delicious reddit digg dropbox formspring github dribbble deviantart icloud instagram itunes
L3: lastfm myspace ebay paypal retweet technorati tumblr apple windows aim yahoo yelp

View code:


L1:
<a class="email_round tsc_social_round" title="email" href="#">email</a>
<a class="skype_round tsc_social_round" title="skype" href="#">skype</a>
<a class="facebook_round tsc_social_round" title="facebook" href="#">facebook</a>
<a class="twitter_round tsc_social_round" title="twitter" href="#">twitter</a>
<a class="google_plus_round tsc_social_round" title="google+" href="#">google+</a>
<a class="linkedin_round tsc_social_round" title="linkedin" href="#">linkedin</a>
<a class="feed_round tsc_social_round" title="feed" href="#">feed</a>
<a class="location_round tsc_social_round" title="location" href="#">location</a>
<a class="pinterest_round tsc_social_round" title="pinterest" href="#">pinterest</a>
<a class="wordpress_round tsc_social_round" title="wordpress" href="#">wordpress</a>
<a class="youtube_round tsc_social_round" title="youtube" href="#">youtube</a>
<a class="vimeo_round tsc_social_round" title="vimeo" href="#">vimeo</a>
<a class="linked_round tsc_social_round" title="linked" href="#">link</a>
<a class="flickr_round tsc_social_round" title="flickr" href="#">flickr</a>

L2:
<a class="twitter_alt_round tsc_social_round" title="twitter" href="#">twitter_alt</a>
<a class="fivehundredpx_round tsc_social_round" title="500px" href="#">500px</a>
<a class="behance_round tsc_social_round" title="behance" href="#">behance</a>
<a class="delicious_round tsc_social_round" title="delicious" href="#">delicious</a>
<a class="reddit_round tsc_social_round" title="reddit" href="#">reddit</a>
<a class="digg_round tsc_social_round" title="digg" href="#">digg</a>
<a class="dropbox_round tsc_social_round" title="dropbox" href="#">dropbox</a>
<a class="formspring_round tsc_social_round" title="formspring" href="#">formspring</a>
<a class="github_round tsc_social_round" title="github" href="#">github</a>
<a class="dribbble_round tsc_social_round" title="dribbble" href="#">dribbble</a>
<a class="deviantart_round tsc_social_round" title="deviantart" href="#">deviantart</a>
<a class="icloud_round tsc_social_round" title="icloud" href="#">icloud</a>
<a class="instagram_round tsc_social_round" title="instagram" href="#">instagram</a>
<a class="itunes_round tsc_social_round" title="itunes" href="#">itunes</a>

L3:
<a class="lastfm_round tsc_social_round" title="lastfm" href="#">lastfm</a>
<a class="myspace_round tsc_social_round" title="myspace" href="#">myspace</a>
<a class="ebay_round tsc_social_round" title="ebay" href="#">ebay</a>
<a class="paypal_round tsc_social_round" title="paypal" href="#">paypal</a>
<a class="retweet_round tsc_social_round" title="retweet" href="#">retweet</a>
<a class="technorati_round tsc_social_round" title="technorati" href="#">technorati</a>
<a class="tumblr_round tsc_social_round" title="tumblr" href="#">tumblr</a>
<a class="apple_round tsc_social_round" title="apple" href="#">apple</a>
<a class="windows_round tsc_social_round" title="windows" href="#">windows</a>
<a class="aim_round tsc_social_round" title="aim" href="#">aim</a>
<a class="yahoo_round tsc_social_round" title="yahoo" href="#">yahoo</a>
<a class="yelp_round tsc_social_round" title="yelp" href="#">yelp</a>

Round Gray - 32px

L1: phone skype twitter google linkedin rss location flickr pinterest avatar profile
L2: bookmark chat creative commons deviantart dt film music ebay paypal msn aim yahoo google bing
L2: love youtube vimeo apple windows plus

View code:


L1:
<a class="email_round_gray_32 tsc_social_round_gray_32" title="email" href="#">email</a>
<a class="phone_round_gray_32 tsc_social_round_gray_32" title="phone" href="#">phone</a>
<a class="skype_round_gray_32 tsc_social_round_gray_32" title="skype" href="#">skype</a>
<a class="facebook_round_gray_32 tsc_social_round_gray_32" title="facebook" href="#">facebook</a>
<a class="twitter2_round_gray_32 tsc_social_round_gray_32" title="twitter" href="#">twitter</a>
<a class="google_round_gray_32 tsc_social_round_gray_32" title="google" href="#">google</a>
<a class="linkedin_round_gray_32 tsc_social_round_gray_32" title="linkedin" href="#">linkedin</a>
<a class="rss_round_gray_32 tsc_social_round_gray_32" title="rss" href="#">rss</a>
<a class="location_round_gray_32 tsc_social_round_gray_32" title="location" href="#">location</a>
<a class="flickr_round_gray_32 tsc_social_round_gray_32" title="flickr" href="#">flickr</a>
<a class="pinterest_round_gray_32 tsc_social_round_gray_32" title="pinterest" href="#">pinterest</a>
<a class="twitter_round_gray_32 tsc_social_round_gray_32" title="twitter" href="#">twitter</a>
<a class="avatar_round_gray_32 tsc_social_round_gray_32" title="avatar" href="#">avatar</a>
<a class="profile_round_gray_32 tsc_social_round_gray_32" title="profile" href="#">profile</a>

L2:
<a class="bookmark_round_gray_32 tsc_social_round_gray_32" title="bookmark" href="#">bookmark</a>
<a class="chat_round_gray_32 tsc_social_round_gray_32" title="chat" href="#">chat</a>
<a class="creativecommons_round_gray_32 tsc_social_round_gray_32" title="creative commons" href="#">creative commons</a>
<a class="deviantart_round_gray_32 tsc_social_round_gray_32" title="deviantart" href="#">deviantart</a>
<a class="dreamtemplate_round_gray_32 tsc_social_round_gray_32" title="dt" href="#">dt</a>
<a class="film_round_gray_32 tsc_social_round_gray_32" title="film" href="#">film</a>
<a class="music_round_gray_32 tsc_social_round_gray_32" title="music" href="#">music</a>
<a class="ebay_round_gray_32 tsc_social_round_gray_32" title="ebay" href="#">ebay</a>
<a class="paypal_round_gray_32 tsc_social_round_gray_32" title="paypal" href="#">paypal</a>
<a class="msn_round_gray_32 tsc_social_round_gray_32" title="msn" href="#">msn</a>
<a class="aim_round_gray_32 tsc_social_round_gray_32" title="aim" href="#">aim</a>
<a class="yahoo_round_gray_32 tsc_social_round_gray_32" title="yahoo" href="#">yahoo</a>
<a class="google2_round_gray_32 tsc_social_round_gray_32" title="google" href="#">google</a>
<a class="bing_round_gray_32 tsc_social_round_gray_32" title="bing" href="#">bing</a>

L2:
<a class="love_round_gray_32 tsc_social_round_gray_32" title="love" href="#">love</a>
<a class="youtube_round_gray_32 tsc_social_round_gray_32" title="youtube" href="#">youtube</a>
<a class="vimeo_round_gray_32 tsc_social_round_gray_32" title="vimeo" href="#">vimeo</a>
<a class="apple_round_gray_32 tsc_social_round_gray_32" title="apple" href="#">apple</a>
<a class="windows_round_gray_32 tsc_social_round_gray_32" title="windows" href="#">windows</a>
<a class="plus_round_gray_32 tsc_social_round_gray_32" title="plus" href="#">plus</a>

Round Gray - 24px

L1: phone skype twitter google linkedin rss location flickr pinterest avatar profile
L2: bookmark chat creative commons deviantart dt film music ebay paypal msn aim yahoo google bing
L2: love youtube vimeo apple windows plus

View code:


L1:
<a class="email_round_gray_24 tsc_social_round_gray_24" title="email" href="#">email</a>
<a class="phone_round_gray_24 tsc_social_round_gray_24" title="phone" href="#">phone</a>
<a class="skype_round_gray_24 tsc_social_round_gray_24" title="skype" href="#">skype</a>
<a class="facebook_round_gray_24 tsc_social_round_gray_24" title="facebook" href="#">facebook</a>
<a class="twitter2_round_gray_24 tsc_social_round_gray_24" title="twitter" href="#">twitter</a>
<a class="google_round_gray_24 tsc_social_round_gray_24" title="google" href="#">google</a>
<a class="linkedin_round_gray_24 tsc_social_round_gray_24" title="linkedin" href="#">linkedin</a>
<a class="rss_round_gray_24 tsc_social_round_gray_24" title="rss" href="#">rss</a>
<a class="location_round_gray_24 tsc_social_round_gray_24" title="location" href="#">location</a>
<a class="flickr_round_gray_24 tsc_social_round_gray_24" title="flickr" href="#">flickr</a>
<a class="pinterest_round_gray_24 tsc_social_round_gray_24" title="pinterest" href="#">pinterest</a>
<a class="twitter_round_gray_24 tsc_social_round_gray_24" title="twitter" href="#">twitter</a>
<a class="avatar_round_gray_24 tsc_social_round_gray_24" title="avatar" href="#">avatar</a>
<a class="profile_round_gray_24 tsc_social_round_gray_24" title="profile" href="#">profile</a>

L2:
<a class="bookmark_round_gray_24 tsc_social_round_gray_24" title="bookmark" href="#">bookmark</a>
<a class="chat_round_gray_24 tsc_social_round_gray_24" title="chat" href="#">chat</a>
<a class="creativecommons_round_gray_24 tsc_social_round_gray_24" title="creative commons" href="#">creative commons</a>
<a class="deviantart_round_gray_24 tsc_social_round_gray_24" title="deviantart" href="#">deviantart</a>
<a class="dreamtemplate_round_gray_24 tsc_social_round_gray_24" title="dt" href="#">dt</a>
<a class="film_round_gray_24 tsc_social_round_gray_24" title="film" href="#">film</a>
<a class="music_round_gray_24 tsc_social_round_gray_24" title="music" href="#">music</a>
<a class="ebay_round_gray_24 tsc_social_round_gray_24" title="ebay" href="#">ebay</a>
<a class="paypal_round_gray_24 tsc_social_round_gray_24" title="paypal" href="#">paypal</a>
<a class="msn_round_gray_24 tsc_social_round_gray_24" title="msn" href="#">msn</a>
<a class="aim_round_gray_24 tsc_social_round_gray_24" title="aim" href="#">aim</a>
<a class="yahoo_round_gray_24 tsc_social_round_gray_24" title="yahoo" href="#">yahoo</a>
<a class="google2_round_gray_24 tsc_social_round_gray_24" title="google" href="#">google</a>
<a class="bing_round_gray_24 tsc_social_round_gray_24" title="bing" href="#">bing</a>

L2:
<a class="love_round_gray_24 tsc_social_round_gray_24" title="love" href="#">love</a>
<a class="youtube_round_gray_24 tsc_social_round_gray_24" title="youtube" href="#">youtube</a>
<a class="vimeo_round_gray_24 tsc_social_round_gray_24" title="vimeo" href="#">vimeo</a>
<a class="apple_round_gray_24 tsc_social_round_gray_24" title="apple" href="#">apple</a>
<a class="windows_round_gray_24 tsc_social_round_gray_24" title="windows" href="#">windows</a>
<a class="plus_round_gray_24 tsc_social_round_gray_24" title="plus" href="#">plus</a>

Circle - 32px

L1: skype google rss location wordpress flickr youtube vimeo addthis behance blogger
L2: delicious deviantart reddit digg dribbble github tumblr yahoo aim msn myspace paypal stumbleupon technorati
L3: apple windows

View code:


L1:
<a class="email_circle tsc_social_circle" title="email" href="#">email</a>
<a class="skype_circle tsc_social_circle" title="skype" href="#">skype</a>
<a class="facebook_circle tsc_social_circle" title="facebook" href="#">facebook</a>
<a class="twitter_circle tsc_social_circle" title="twitter" href="#">twitter</a>
<a class="google_circle tsc_social_circle" title="google" href="#">google</a>
<a class="rss_circle tsc_social_circle" title="rss" href="#">rss</a>
<a class="location_circle tsc_social_circle" title="location" href="#">location</a>
<a class="wordpress_circle tsc_social_circle" title="wordpress" href="#">wordpress</a>
<a class="flickr_circle tsc_social_circle" title="flickr" href="#">flickr</a>
<a class="youtube_circle tsc_social_circle" title="youtube" href="#">youtube</a>
<a class="vimeo_circle tsc_social_circle" title="vimeo" href="#">vimeo</a>
<a class="addthis_circle tsc_social_circle" title="addthis" href="#">addthis</a>
<a class="behance_circle tsc_social_circle" title="behance" href="#">behance</a>
<a class="blogger_circle tsc_social_circle" title="blogger" href="#">blogger</a>

L2:
<a class="delicious_circle tsc_social_circle" title="delicious" href="#">delicious</a>
<a class="deviantart_circle tsc_social_circle" title="deviantart" href="#">deviantart</a>
<a class="reddit_circle tsc_social_circle" title="reddit" href="#">reddit</a>
<a class="digg_circle tsc_social_circle" title="digg" href="#">digg</a>
<a class="dribbble_circle tsc_social_circle" title="dribbble" href="#">dribbble</a>
<a class="github_circle tsc_social_circle" title="github" href="#">github</a>
<a class="tumblr_circle tsc_social_circle" title="tumblr" href="#">tumblr</a>
<a class="yahoo_circle tsc_social_circle" title="yahoo" href="#">yahoo</a>
<a class="aim_circle tsc_social_circle" title="aim" href="#">aim</a>
<a class="msn_circle tsc_social_circle" title="msn" href="#">msn</a>
<a class="myspace_circle tsc_social_circle" title="myspace" href="#">myspace</a>
<a class="paypal_circle tsc_social_circle" title="paypal" href="#">paypal</a>
<a class="stumbleupon_circle tsc_social_circle" title="stumbleupon" href="#">stumbleupon</a>
<a class="technorati_circle tsc_social_circle" title="technorati" href="#">technorati</a>
L3:
<a class="apple_circle tsc_social_circle" title="apple" href="#">apple</a>
<a class="windows_circle tsc_social_circle" title="windows" href="#">windows</a>

Glossy - 32px

skype google rss flickr youtube vimeo lastfm tumblr deviantart

View code:


<a class="email_glossy32 tsc_glossy_32" title="email" href="#">email</a>
<a class="skype_glossy32 tsc_glossy_32" title="skype" href="#">skype</a>
<a class="facebook_glossy32 tsc_glossy_32" title="facebook" href="#">facebook</a>
<a class="twitter_glossy32 tsc_glossy_32" title="twitter" href="#">twitter</a>
<a class="google_glossy32 tsc_glossy_32" title="google" href="#">google</a>
<a class="rss_glossy32 tsc_glossy_32" title="rss" href="#">rss</a>
<a class="flickr_glossy32 tsc_glossy_32" title="flickr" href="#">flickr</a>
<a class="youtube_glossy32 tsc_glossy_32" title="youtube" href="#">youtube</a>
<a class="vimeo_glossy32 tsc_glossy_32" title="vimeo" href="#">vimeo</a>
<a class="lastfm_glossy32 tsc_glossy_32" title="lastfm" href="#">lastfm</a>
<a class="tumblr_glossy32 tsc_glossy_32" title="tumblr" href="#">tumblr</a>
<a class="deviantart_glossy32 tsc_glossy_32" title="deviantart" href="#">deviantart</a>

Glossy - 24px

skype google rss flickr youtube vimeo lastfm tumblr deviantart

View code:


<a class="email_glossy24 tsc_glossy_24" title="email" href="#">email</a>
<a class="skype_glossy24 tsc_glossy_24" title="skype" href="#">skype</a>
<a class="facebook_glossy24 tsc_glossy_24" title="facebook" href="#">facebook</a>
<a class="twitter_glossy24 tsc_glossy_24" title="twitter" href="#">twitter</a>
<a class="google_glossy24 tsc_glossy_24" title="google" href="#">google</a>
<a class="rss_glossy24 tsc_glossy_24" title="rss" href="#">rss</a>
<a class="flickr_glossy24 tsc_glossy_24" title="flickr" href="#">flickr</a>
<a class="youtube_glossy24 tsc_glossy_24" title="youtube" href="#">youtube</a>
<a class="vimeo_glossy24 tsc_glossy_24" title="vimeo" href="#">vimeo</a>
<a class="lastfm_glossy24 tsc_glossy_24" title="lastfm" href="#">lastfm</a>
<a class="tumblr_glossy24 tsc_glossy_24" title="tumblr" href="#">tumblr</a>
<a class="deviantart_glossy24 tsc_glossy_24" title="deviantart" href="#">deviantart</a>

Teeny - 22px

L1: email skype linkedin google+ rss flickr youtube youtube vimeo pinterest instagram blogger 500px delicious digg dribbble dopplr evernote
L2: forrst foursquare geotag github github google grooveshark lastfm myspace picasa sharethis stackoverflow stumbleupon technorati tumblr twitter ustream yahoo

View code:


L1:
<a class="mail_teeny tsc_social_teeny" title="email" href="#">email</a>
<a class="skype_teeny tsc_social_teeny" title="skype" href="#">skype</a>
<a class="facebook_teeny tsc_social_teeny" title="facebook" href="#">facebook</a>
<a class="twitter_teeny tsc_social_teeny" title="twitter" href="#">twitter</a>
<a class="linkedin_teeny tsc_social_teeny" title="linkedin" href="#">linkedin</a>
<a class="googleplus_teeny tsc_social_teeny" title="google+" href="#">google+</a>
<a class="feed_teeny tsc_social_teeny" title="rss" href="#">rss</a>
<a class="flickr_teeny tsc_social_teeny" title="flickr" href="#">flickr</a>
<a class="youtube_teeny tsc_social_teeny" title="youtube" href="#">youtube</a>
<a class="youtube2_teeny tsc_social_teeny" title="youtube" href="#">youtube</a>
<a class="vimeo_teeny tsc_social_teeny" title="vimeo" href="#">vimeo</a>
<a class="pinterest_teeny tsc_social_teeny" title="pinterest" href="#">pinterest</a>
<a class="instagram_teeny tsc_social_teeny" title="instagram" href="#">instagram</a>
<a class="blogger_teeny tsc_social_teeny" title="blogger" href="#">blogger</a>
<a class="fivehundredpx tsc_social_teeny" title="500px" href="#">500px</a>
<a class="delicious_teeny tsc_social_teeny" title="delicious" href="#">delicious</a>
<a class="digg_teeny tsc_social_teeny" title="digg" href="#">digg</a>
<a class="dribbble_teeny tsc_social_teeny" title="dribbble" href="#">dribbble</a>
<a class="dopplr_teeny tsc_social_teeny" title="dopplr" href="#">dopplr</a>
<a class="evernote_teeny tsc_social_teeny" title="evernote" href="#">evernote</a>

L2:
<a class="forrst_teeny tsc_social_teeny" title="forrst" href="#">forrst</a>
<a class="foursquare_teeny tsc_social_teeny" title="foursquare" href="#">foursquare</a>
<a class="geotag_teeny tsc_social_teeny" title="geotag" href="#">geotag</a>
<a class="github_teeny tsc_social_teeny" title="github" href="#">github</a>
<a class="github2_teeny tsc_social_teeny" title="github" href="#">github</a>
<a class="google_teeny tsc_social_teeny" title="google" href="#">google</a>
<a class="grooveshark_teeny tsc_social_teeny" title="grooveshark" href="#">grooveshark</a>
<a class="lastfm_teeny tsc_social_teeny" title="lastfm" href="#">lastfm</a>
<a class="myspace_teeny tsc_social_teeny" title="myspace" href="#">myspace</a>
<a class="picasa_teeny tsc_social_teeny" title="picasa" href="#">picasa</a>
<a class="sharethis_teeny tsc_social_teeny" title="sharethis" href="#">sharethis</a>
<a class="stackoverflow_teeny tsc_social_teeny" title="stackoverflow" href="#">stackoverflow</a>
<a class="stumbleupon_teeny tsc_social_teeny" title="stumbleupon" href="#">stumbleupon</a>
<a class="technorati_teeny tsc_social_teeny" title="technorati" href="#">technorati</a>
<a class="tumblr_teeny tsc_social_teeny" title="tumblr" href="#">tumblr</a>
<a class="twitter2_teeny tsc_social_teeny" title="twitter" href="#">twitter</a>
<a class="ustream_teeny tsc_social_teeny" title="ustream" href="#">ustream</a>
<a class="yahoo_teeny tsc_social_teeny" title="yahoo" href="#">yahoo</a>

Mini - 16px

linkedin rss flickr vimeo tumblr music bebo blogger delicious digg dopplr dribbble forrst lastfm mixx myspace netvibes orkut picasa sharethis stumbleupon technorati yahoo

View code:


<a class="facebook_mini tsc_social_mini" title="facebook" href="#">facebook</a>
<a class="twitter_mini tsc_social_mini" title="twitter" href="#">twitter</a>
<a class="linkedin_mini tsc_social_mini" title="linkedin" href="#">linkedin</a>
<a class="rss_mini tsc_social_mini" title="rss" href="#">rss</a>
<a class="flickr_mini tsc_social_mini" title="flickr" href="#">flickr</a>
<a class="vimeo_mini tsc_social_mini" title="vimeo" href="#">vimeo</a>
<a class="tumblr_mini tsc_social_mini" title="tumblr" href="#">tumblr</a>
<a class="music tsc_social_mini" title="music" href="#">music</a>
<a class="bebo_mini tsc_social_mini" title="bebo" href="#">bebo</a>
<a class="blogger_mini tsc_social_mini" title="blogger" href="#">blogger</a>
<a class="delicious_mini tsc_social_mini" title="delicious" href="#">delicious</a>
<a class="digg_mini tsc_social_mini" title="digg" href="#">digg</a>
<a class="dopplr_mini tsc_social_mini" title="dopplr" href="#">dopplr</a>
<a class="dribbble_mini tsc_social_mini" title="dribbble" href="#">dribbble</a>
<a class="forrst_mini tsc_social_mini" title="forrst" href="#">forrst</a>
<a class="lastfm_mini tsc_social_mini" title="lastfm" href="#">lastfm</a>
<a class="mixx_mini tsc_social_mini" title="mixx" href="#">mixx</a>
<a class="myspace_mini tsc_social_mini" title="myspace" href="#">myspace</a>
<a class="netvibes_mini tsc_social_mini" title="netvibes" href="#">netvibes</a>
<a class="orkut_mini tsc_social_mini" title="orkut" href="#">orkut</a>
<a class="picasa_mini tsc_social_mini" title="picasa" href="#">picasa</a>
<a class="sharethis_mini tsc_social_mini" title="sharethis" href="#">sharethis</a>
<a class="stumbleupon_mini tsc_social_mini" title="stumbleupon" href="#">stumbleupon</a>
<a class="technorati_mini tsc_social_mini" title="technorati" href="#">technorati</a>
<a class="yahoo_mini tsc_social_mini" title="yahoo" href="#">yahoo</a>

Micro - 16px

L1:
L2:

View code:


L1:
<img src="dreamcodes/social_icons/mail-micro.png" title="mail" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/skype-micro.png" title="skype" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/facebook-micro.png" title="facebook" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/twitter-micro.png" title="twitter" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/google+-micro.png" title="google+" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/linkedin-micro.png" title="linkedin" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/rss-micro.png" title="rss" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/wordpress-micro.png" title="blog" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/flickr-micro.png" title="flickr" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/youtube-micro.png" title="youtube" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/vimeo-micro.png" title="vimeo" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/instagram-micro.png" title="instagram" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/github-micro.png" title="github" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/dopplr-micro.png" title="dopplr" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/myspace-micro.png" title="myspace" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/tumblr-micro.png" title="tumblr" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/lastfm-micro.png" title="lastfm" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/dribbble-micro.png" title="dribbble" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/behance-micro.png" title="behance" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/path-micro.png" title="path" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/paypal-micro.png" title="paypal" border="0" align="absmiddle" />

L2:
<img src="dreamcodes/social_icons/deviantart-micro.png" title="deviantart" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/forrst-micro.png" title="forrst" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/grooveshark-micro.png" title="grooveshark" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/virb-micro.png" title="virb" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/addthis-micro.png" title="addthis" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/delicious-micro.png" title="delicious" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/evernote-micro.png" title="evernote" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/sharethis-micro.png" title="sharethis" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/500px-micro.png" title="500px" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/picasa-micro.png" title="picasa" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/reddit-micro.png" title="reddit" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/digg-micro.png" title="digg" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/stumbleupon-micro.png" title="stumbleupon" border="0" align="absmiddle" />
<img src="dreamcodes/social_icons/windows-micro.png" title="windows" border="0" align="absmiddle" />

Browser Icons - 16px/32px

L1:

L2:

View code:


L1: 
<a class="ico-firefox16 tsc_browser-icon16" title="mozilla firefox" href="#"></a>
<a class="ico-iexplore16 tsc_browser-icon16" title="microsoft internet explorer" href="#"></a>
<a class="ico-chrome16 tsc_browser-icon16" title="google chrome" href="#"></a>
<a class="ico-safari16 tsc_browser-icon16" title="apple safari" href="#"></a>
<a class="ico-opera16 tsc_browser-icon16" title="opera" href="#"></a>
<a class="ico-html516 tsc_browser-icon16" title="html 5" href="#"></a>

L2:
<a class="ico-firefox32 tsc_browser-icon32" title="mozilla firefox" href="#"></a>
<a class="ico-iexplore32 tsc_browser-icon32" title="microsoft internet explorer" href="#"></a>
<a class="ico-chrome32 tsc_browser-icon32" title="google chrome" href="#"></a>
<a class="ico-safari32 tsc_browser-icon32" title="apple safari" href="#"></a>
<a class="ico-opera32 tsc_browser-icon32" title="opera" href="#"></a>
<a class="ico-html532 tsc_browser-icon32" title="html 5" href="#"></a>



© TemplateAccess