Creating Social Media Icons

I’ve been blogging for just about a year now and I never had social media icons. Sure, I have a pretty layout and purchased my own domain, but I kept putting off my social media icons and I’m not too sure why. Now that I have my own, I realize how important they really are. Social media icons not only look super cute but allow your readers to have access to your social media accounts super easily.

STEP ONE: Save each of the below silhouettes to your computer! (each around about 125×125, so try not to make them any larger or you will loose clarity)

STEP TWO: Go to and open a new design

STEP THREE: Click the Overlay button on the left side (the butterfly) and click ‘Your Own’ to open your social media silhouettes 

STEP FOUR: Design your social media silhouettes like you would with a regular overlay {reference this post}

STEP FIVE: Crop the design so all you have is the icons


*** Make sure you crop it down so it can fit in your sidebar (my sidebar is 250px so I made my actual icons to fit that but this tutorial is larger so it’s easier to see), fix sizing of icons if necessary

STEP SIX: Save design to your computer as a .png file for better quality

STEP SEVEN: Go to (the best site to get your image URL & linking your URLs to the icons) and click ‘Browse for File’

STEP EIGHT: Click ‘Click to Continue’

STEP NINE: Right click in the top corner and a little drop down menu will appear, click ‘Create Rect’ and then a little rectangle will appear

STEP TEN: Click the edge of the little square and pull it over the ONE icon and fill in the URL info. Once done, click ‘Save’

STEP ELEVEN: Repeat Steps nine and ten for the rest of the icons, when each is completed it will look like the below image

STEP TWELVE: Right-Click on top of the red and select ‘Get Code’

STEP THIRTEEN: Click ‘HTML Code’ and scroll all the way to the bottom. Copy & Paste the coding under ‘HTML Image Map Code’

STEP FOURTEEN: Go to your homepage (mine is & go to the ‘Layout’ section and click ‘Add Gadget’

STEP FIFTEEN: Paste in your HTML code from the step thirteen (I added in <center> and </center> to center my icons in my sidebar) & click ‘Save’

And just like that you are done!!!!!!

I apologize for listing so many steps, I promise you it’s easy but I really wanted to show every single little step so there was no confusion! Don’t forget to use the hashtag #sstutorials so I can check out your creation via social media. 
Being a college student means that I’m on dat college stud3nt budg3t aka I don’t have extra money to spend on little things for my blog that I can easily do myself. I love being able to share these tutorials with you so that you can learn new ways to advance your blog on your own! The next #sstutorial is pretty sweet so keep your eyes pealed and don’t forget to shoot me an e-mail if you have any questions!
Happy designing!
Xo, Rach

Holler At Your Girl: Twitter | Instagram | Facebook | Pinterest

Follow @_ssblog Tweet


  1. July 16, 2015 / 1:34 PM

    Hmm, this is such a useful tutorial for bloggers who want to customized and give their social icons a new look.
    Thanks for sharing!

    Jhem |

  2. July 21, 2015 / 11:10 AM

    I love making adjustments on my blog on my own, it's so much funner!

    Xo, R

  3. July 26, 2015 / 8:36 AM

    I've never heard of ImageMap- good job on finding that site! I know that would save A LOT of time for some bloggers! Thanks for sharing lovey!

    XO Corbin Tate
    Classy South Blog

  4. July 26, 2015 / 10:31 AM

    It's awesome! Makes linking so much easier!

    Xo, R

Leave a Reply

Your email address will not be published. Required fields are marked *