Design and Create Your Own Social Media Buttons For Free!

After searching the internet for how to create your own Social Media buttons I realised...bloggers like to use ALOT of words I don't understand and I end up getting lost and kinda figuring it out myself and so thought I would hare a post but it in simple terms and make it easy to use for us forever amateur bloggers...

Designing and creating your own social media icons is actually pretty simple– If you already have a knowledge of PicMonkey great..if not? No worries it is still simple and I will go through EVERY SINGLE STEP IN DETAIL WITH IMAGES.

What You Need:

  • Set of Silhouette Social Media Icons (DONT LOOK AT ME BLANKLY...I just mean some plain black icons! I will provide the most used Social Media at the bottom of this post or you can wander the web to find your own!!)
  • Access To PicMonkey
  • Access to an Image hosting site (lost you again? I mean like Picasa etc, your images NEED a URL)
  • Access to Image Maps
Access to the above is all free (though I do recommend upgrading in PicMonkey, it isn't necessary for this!)

1. Scroll to the bottom of this blog page and right click/save image on the social media icons you need. 

2. Open PicMonkey and click DESIGN from this screen scroll down and click RESIZE you want your image to fit in your side bar (I find around 300x300 is perfect) 

3. Now it's time to get creative an create the image you want your social media icon to go over. So now try clicking on OVERLAYS (the butterfly)...

....from here you have a variety of images to choose from...simple shapes, hearts, stars, happi-icons, bug's, monsters etc. Have a play and see what you like. Once you click on an image you can 1. change the size 2. change the colour and 3. Fade (I found fading to around 50% worked well for me as I had chosen dark colours and as the icons are black you want it to stand out!). 

I choose monsters as it fits with my header! (You can also select an image from your computer here by clicking the Your Own tab at the top.) 

NOTE: all of your buttons need to fit on her so repeat until the square is full of all your needed buttons)

4. Your now ready to add the social media icons. So stay in UNDERLAYS and click on YOUR OWN...

locate the icons you saved in step 1, and add them 1 at a time and moving them over each of your images....again you can resize, recolour and fade if you wish.

The next step is ONLY if you need to crop and also if you don't have a plain white background ON YOUR BLOG you will need to follow this step, to get a transparent background. If you don't need to crop and are happy to use a white background continue to Step 6!

5.  To resize go back up to BASIC EDITS (where you found the resize tool) and click on the CROP tool. Then just drag the square to fit your image.

To get a transparent background stay in BASIC EDITS and click CANVAS COLOUR...

From here all you have to do is click in the TRANSPARENT CANVAS box and it will automatically change for you.

6. Now save your image to your computer...

selecting .png file from the drop down box.

Your now done with Picmonkey.

7. Now we need to upload the image to photobucket. (or another photo hosting page) this is really easy to do, all you need to do is sign up and upload your image. Then your ready for the next step.

8. Next you need to get the image URL you do this by clicking on the image you just uploaded, which should take you to a screen like this:

From here click DIRECT underneath Share Link (this will copy the URL, so that in the next steps all you have to do is hit paste)

You are now done with photobucket.

9. Now head over to Image-Maps and paste you URL into the box and hit START MAPPING. That will then bring up a picture of your image, now hit CONTINUE...

10. You will be taken to a blank screen with just your image for company...

11. What you do next sounds complicated, its not! You need to right click ON YOUR IMAGE and select create rectangle...

then move your rectangle (and crop if needed) around your first social media icon once in place delete the MAP URL and enter the appropriate URL (eg: the URL of your Twitter account on the Twitter icon etc etc) continue this step until all icons have a link.

12. Now you have done that you nee to right click one last time and select GET CODE...

this will take you to this screen...where you need to click on the HTML CODE BUTTON...

From the next screen scroll down until you see HTML IMAGE MAP CODE...

You need to highlight and copy this code.

You are now done with Image-Mapping.

13. Copy the code and paste it into an HTML gadget box on your  Layout (Blogger) page. (If you are unsure how to do that click HERE as this video is quite useful!)

And that is that if you follow these steps you will soon have your own Social Media Buttons sat nicely on your blog!

Silhouette's For Social Media....Just right click and save to your computer.







You Tube


  1. Great idea! Thanks for the very thorough how-to, looks like it would be easy if I follow your instructions! :) x

    1. Glad you think so, was my aim as i read so much confusing stuff!

  2. Great tutorial! I thought about making my own when I first started blogging but I ended up just using the ones that came with the template I bought. I'm glad you linked up to that image maps creator though, I will definitely be remembering that for the future!

  3. I've never made an image map before, that's a great way of doing it! ALl my social media icons are individual images x

    1. It was really easy to do, well I mean if i can do it it MUST be easy!!! Thanks for commenting X

  4. Great post huni! I used image maps once before but a few weeks later it went a bit weird, so I didn't bother again. But this is fab and I will give it another go. Thanks so much for linking up to #TheList xx

  5. Clever! I use picmonkey, but I have Wordpress. Is it harder to add on Wordpress? Thanks for your tips.

    1. you would follow all the steps but then follow the wordpress video (link above) to see how to pop in on a wordpress blog xx


Leave me a comment, I try to reply to everyone!