How to add social Media Icons to your blog


Many blogs and websites now have a familiar strip of stylised social media icons, proudly displaying which networks they are active on and encouraging you to click and connect.  Do you want to know how to create your own social media icon widget? You can use either your own artwork or any of the thousands of free social media icons available to download on the internet.

I've created a little tutorial and some code to help you create a beautifully integrated set of links to all of your social media networks.  You can simply add it to your sidebar.

Adding Social Media Icons to your blog tutorial


First of all you need some icons - I have included a long list of creative and crafty social media icons for you to browse through below.   There are many more available, just click this link to a Google image search for free social media icon sets. There will be a download button for each set.

  • Click download.  The file will usually be 'zipped'.
  • Click on the file and you should see the option to 'extract all files'

  • Decide which size icons you will be using, most icon sets have more than one size available, 16px, 32px or 64px.  If you choose the largest size you can always make it smaller when we get to adding the code snippet, but you cannot increase as the icon will look fuzzy.
  • Next you need to create an image code for these files.  I use www.photobucket.com to do this, it's free and very easy to use.  I can quickly upload an image, then once saved to one of my photobucket albums, I copy the 'direct url' which is found in a list of links. I now have the image address ready to add to the code.  The image address will look something like this -

    http://i951.photobucket.com/albums/ad358/haptree_photos/facebook-logo-square-webtreatsetc-1.png


  • Now do the above for all of the icons you need
  • Open up your Blogger or Wordpress dashboard and click on the layout area where you can then  add a gadget / widget for 3rd party html or similar.  You can move it into the best position later.  If you are adding the icons to a sidebar you may need to adjust their dimensions to make them fit nicely, or form even rows.
  • Next you need to create the code, it's essentially a series of clickable images that link to your social media networks.  The basic structure of the code for one of the images is as follows -

    <a href="SOCIAL NETWORK LINK HERE"><img alt="NAME OF NETWORK HERE" border="0" src="IMAGE ADDRESS LINK HERE" style="height: 64px;" /></a>

  • For each icon you need to copy and paste the above, adding each link, name and image address for each network.
  • To change the size of the images adjust the height dimension 64 within the code shown above to your desired height.  If you have use 32px icons ensure they are at 32 or less and ditto for 16px icons.  You can simply remove the height dimension from the code and the image will be the size it was created at.
  • If you feel they need a border to seperate them, experiment by adding a number to the  border="0" - just 1 or 2 would probably be enough if you did feel they are too close.
Design your own social media icon Set

If you want your site to be unique and you have some  photoshop / design skills then you could also create your own. This would be a great idea for an illustrator, graphic designer or if your blog or style is very particular/stylised -  in most cases you will find a set for free that will fit in fine.

The standard dimensions for icons are 16px , 32px , 48px or 64px. If you decide to create a set of your own icons remember that they need to be instantly recognisable for which network they represent.  You should also check before using another persons design set as a base for your own designs.  The actual logos themselves are of course the copyright of the networks.

Free Social Media Icons for Craft Bloggers


Beautiful and crafty free social media icons that truly reflect the character of your blog!  I've hand chosen these and at the time of publishing they were all available to download for FREE! Some designers are so generous :)  Thank you to all of those I have included on the list.

The following is a huge visual list of free social media icons that are all downloadable. Aren't they pretty!  The screen shots just show some of the icons, be sure to check that the set has all the icons you need, before you start.






Round Sticker Peel Social Media Icons






Origami paper social media icon set




Round wooden social media icon set




Vintage stamps social media set






Old frayed fabric social media set






Black and white clear bubbles social media icon set





Drawn social media icon set






Furry Social Media Icon set





Green Social Media Icons




Marker Pen Social Media Icons






Cloud Shaped Icons






Standard social media icons








Bursting through page social media icons







Vintage peeling stickers social media icons






Light wooden social media icons




Blue biro scribbled social media icons






Arty Painted Social Media Icons






Arty colourful social media icons






Dark wooden social media icons






Coffee Stain icons






Leaves Social Media Icons Set