Some time ago I created this set of social media icons and decided to share them with you, they were not a creative revolution, but hey, they are for free! As I got some positive feedback, I now revamped them a little bit, updated and added some new companies, like amplifiy, picasa, bebo, diigo, Google buzz, Google Plus and xing.

Same issue as before feel free to use them, if you want to give me credits, it would be nice, but you do not mandatorily have to.

I provide a .psd file and .pngs of the complete icon set.  If you would need further more logos or icons of certain sites, just wite a comment or contact me. I’ll see want I can do for you.
For some platforms I also added their logos, so you can choose. The following icons are contained in this package: amplify, bebo, delicious, digg, diigo, facebook, flickr, foursquare, friendfeed, goodreads, google, google+, google buzz, google maps, google sidewiki,  lastfm, linkedin, picasa, reddit, stumbleupon, technorati, twitter, xing, yelp and youtube.

So here they are!

All Icons as .png (256 px x 256px):
social media icons

Icons and logos in .psd format (including layers):
social media icons psd

Have a look at all the icons

I searched for free to use web 2.0 icons of social media sites, but I did not find anything nice except some stock icons.

So I’ve made my own ones and I like to share them with you!

Feel free to use, modify and integrate them on your blog or website.
There is no need to link back, if you’d like to do so anyway, it is appreciated.

UPDATE:

I made a new icon set, you can download it here.

Here’s the download for all icons and logos and the .psd containing templates for 256×256 pixel buttons:

social-media-icons

Free Social Media Icons (PSD)

Have fun folks!

(Take a look at a live demo here)

In order to get this working in all the browsers (Ok, using IE6 we’ll have to trick a little bit, but we’ll discuss this later) we have to approach this in a sneaky way.
Here is a simple, fast, lean, cross browser functional and JavaScript free method, only using plain HTML, CSS and graphical elements:

First of all we need graphical elements, for this example only four are needed, five if including the IE6 hack:

• 2 images of your choice to be linked
• one graphic with transparency and color of your choice in the same size as the linked images
• one 1px x 1px full transparent GIF

You might want to download the whole demo here, there the graphics are included.

First create the div containers including the picture links in the html document, assign a class called “image” and determine the background image, which shall be linked, by using the “style” attribute.

<div class="image"
style="background-image: url(product_01.jpg);" > </div>

<div class="image"
style="background-image: url(product_02.jpg);" > </div>

[Integrating the images via "style" might be avoided by assigning "id" and referencing the image url in the css, but I needed the image to referenced in the html code for dynamic site and did not want to use the "img" tag for reasons]

After that add the links, define them using “class=”picture”, linkpath and further attributes like “title”. it should look somewhat like this:

<div class="image"
style="background-image: url(product_01.jpg);" >
<a href="[path]" class="picture" title="linktitle" > </a>
</div>

<div class="image"
style="background-image: url(product_02.jpg);" >
<a href="[path]" class="picture" title="linktitle" > </a>
 </div>

Now the css, only two classes (+ one pseudo class) are needed:

.image:
It must at least contain “background-repeat: no-repeat; border: none;” or modifications if wanted.

a.picture
The size of the linked picture and the attribute “display:block;” must be indicated. The image-url for the non-active link is indicated as “background-image”, too

a.picture:hover
Here the image-url for the active link is defined.

Now the .css file should contain the following:

a.picture {
background: url(opacity_01.png) no-repeat;
width:183px;
height:146px;
display:block;}

a.picture:hover {
background: url(blank_01.gif) repeat;}

.image{
background-repeat: no-repeat;
border: none;}

Now you just need to align the two div containers properly as you like them to be.
In this example they are floating with a margin of 10 pixels, which is done by two additional classes “l” and “m”. Why it is separated from the “image” class is explained here.

Attention!

This works properly in every browser, but in not IE6, because here only full transparency is supported.
So here’s the IE6 hack:

First create a new .css file named “ie6.css”, then add the following lines between the <head> tags of your html file:

<!--[if IE 6]>
<style type="text/css">@import url(ie6.css);</style>
<![endif]-->

After that you refer to an image using only full transparency in the “a.picture” class in the “ie6.css” file, somewhat like that:

a.picture {background: url(opacity_ie6_01.gif) no-repeat;}

…and you are done!