How to Create Your Own Social Media Icons using Picmonkey

SomethingSwanky is reader-supported. When you buy through links on our site, we may earn an affiliate commission at no extra cost to you.

Creating your own social media icons is actually a fairly simple process– it’s not much more complicated than creating an image you like and linking to the appropriate URL.

All you need is a good set of Social Icon Sillhouette images (which I will direct you to ๐Ÿ™‚ and a little Picmonkey know-how.



Using Social Icon Silhouettes and a Custom Imageย 
This method is my favorite for creating social icons and has been a popular how-to question among my readers, so I think you’ll like it too! But I’ll touch on another method in a later post for those of you who don’t want to create your own image from scratch.
1. Find free social icon silhouette vector images online. My favorite set is here: http://theblogdesignernetwork.com/2011/08/free-social-icon-silhouettes/ I like this one because you don’t have to do a download! They’re just click and save images.
2. Right click on the images you want to use, and save them to your desktop (or an easily accessible folder).
3. Go to picmonkey.com and upload your white starter image. Size it just a little smaller than the width of your sidebar (mine is 300px) by about 300px (just to give wiggle room, you can crop later). So I would size mine to about 280x300px.
4. Here’s where you use that creativity a little bit– create the image for your social icon to go over. I would suggest keeping it simple– circles, squares, etc. I’ll show you a few different things that you could do…
4. Go into overlays (if you’re using Picmonkey), select YOUR OWN, and add the appropriate social icon images, one at a time, that you’ve saved to your desktop.
5. Adjust the size and color, and drag the icons over your images. (most of the time, you’ll want the color to be white, but in image #3, I chose to have the social icons different colors. I sent the image to the back and faded them out so that the words are the main focus of the image)
6. Crop the image down and save it (as .png) to your desktop…

 

Ta-da!
Now for something really fun… linking the URLs.
7. Go to http://www.image-maps.com (this site is AWESOME).
Time out. you will need an image URL to continue at this site (they can’t host images for you). So make sure to upload your image to a blog post, photo bucket, picasa, etc. so that you can have an “image location.”
8. Enter in your image location and click on “start mapping your image.”
9. Click on RECTANGLE
10.ย  A.) Size the rectangle to fit over one social icon.
ย ย ย ย ย ย  B.) Type in the corresponding URL (your FB page, your twitter profile, your RSS feed, etc), and click save.
ย ย ย ย ย ย  C.) UN-CHECK THIS BOX.
11. Repeat for all social media icons (you only have to un-check the box once). Once complete, click on GET CODE.
12. Click on HTML Code
13. Copy the code and paste it into an HTML gadget box on your Page Elements (old blogger) or Layout (new blogger) page. I would recommend adding

at the start of the code and at the end of the code before saving. This will center it in your side bar. Drag the gadget box to wherever you want your social icons to appear!

 

ยซ Previous Post

White Chocolate Cinnamon Swirl Muffins

Next Post ยป

Everything But The… Cookies

190 thoughts on “How to Create Your Own Social Media Icons using Picmonkey”

  1. Um, you had me until the “time out.” Then I got scared and confused. Good thing you did mine before you quit ๐Ÿ™‚ If I do ever want to change though, I know the perfect place to get some great tutorials ๐Ÿ˜‰

    Reply
  2. Girl you make it sound so super easy!!! I know if I sit down and work on it, I could do it. Oh wait I don’t need to because awesome you did such a great job already on mine! But when the time comes to change…you have the best and easiest to follow tutorials!!!

    Reply
  3. Thanks Ashton! You rock. I love all that you did for me, but I know I’ll get the “itch” soon (you know the one, where you want to change everything ๐Ÿ™‚ so this will be great. The mapping, is that how you put your icons in your header? Because I’ve been wondering about that. SO cool!

    Reply
    • Wow. It has taken me 10 DAYS to respond to this comment!!! Sorry :/ But, YES. That’s exactly how I did my header. I LOVE that site. Honestly, it does give some trouble every once in a while, but I honestly think the results are worth the occasional hassle.

      Reply
  4. Thank you so much for this tutorial, I will be doing this to make sure all of my button match. If I can request another tutorial I would to be able to do my custom menu bar but really have no idea how. I would love to see something like that in the near future.

    Thank you so much

    Reply
  5. It’s as if you’ve read my mind…just yesterday at our Mother’s Day BBQ I was asking my stepmother if she knew how to put multiple links onto one image. You’re my hero, THANK YOU!

    Reply
    • It’s funny, I spent MONTHS wishing I “had that kind of technology.” And then one day I just thought, why don’t I just google it? Just to see. And I literally googled “I want to put multiple images on one image and use different links.” IS there a more ridiculous search than that?? Anyway, found image-maps through that search, so I guess it works!

      Reply
    • I love image-maps! Highly recommend. Sometimes the site gives me a little bit of trouble and I have to start over— but honestly, it’s worth the hassle. It’s an awesome service for free!

      Reply
    • Ok, so if you want to provide a link to your actual email address, you’ll want the URL for that link to be: mailto:example@gmail.com

      OR, you can link it to a standalone page, and embed a contact form on that page using 1-2-3 contact (you’ll have to google that, I can’t remember their URL).

      Hope that helps!

      Reply
  6. oh wow…just noticed this linked up to our party and was looking for awhile on how to do this. Everything I came across seemed so confusing. This is great! I ended up having a friend send me the ones I have now, but I still have no idea how to group them. I am terrible at this stuff! I will make sure to share this…you rock!

    Reply
  7. First of all I LOVE THIS! And am so thankful that I found it….BUT I NEED SOME HELP! I have put the center codes at the front and end of my html code, but it is still not to the left margin. Does it need to say something about the left?

    I would love for you to stop by and look at the issue I’m having and see if you have any tips on how to fix it. I will leave it up (even though it is messed up for a bit) so hopefully you can stop by and help me!

    Please email me: naturalnesters@gmail.com

    Reply
  8. This is great! Thanks for the tutorial! If there is one request I could make it’s how to add the box at the bottom of your posts as to where you’ve linked up to. I just can’t seem to get that to work for me!!

    Reply
  9. OK, I just finished following your tutorial. It is AWESOME…thank you!!! I have one little problem. My finished product is too wide, even though I looked up the width on my blog layout (320 px). Would you take a look and let me know if you have a solution? Thanks again, Ashton! :0)

    Reply
  10. I have a question that is probably ridiculously simple but how do I figure out what the link is for my rss feed? Thanks! I can’t wait to update my blog layout!

    Reply
  11. Thank you – Thank you – Thank you! Perfect timing. I am new to blogging and still getting my site all set up. I was just thinking about attempting my own icon designs on Picmonkey, this post will be so helpful. ๐Ÿ™‚

    Reply
  12. I love you so much for this! And all of your tutorials! I used your tutorials to make my social media icons, to make a white blank photo, how to use image maps to link urls, and customized my horizontal navbar… all thanks to you! Seriously seriously thank you. I have tried googling help to no success and your tutorials are very easy to understand, and always easy on the eyes too. You’re the best ๐Ÿ™‚

    Reply
  13. You are an ANGEL! The tutorial was fabulous and even I was able to follow it and just made some cute little social icon buttons! They need a little ‘tweeking’ but so much better than the clutter I had! Thank you so much! I’ll be doing a blog post when I can,singing your praises ๐Ÿ™‚

    Reply
  14. I just wanted to say thank you soooooo much for this post! This morning I had no idea how to do this and by this afternoon i have a full set of working custom media buttons that i made! you rock!!

    Reply
  15. I am so glad that I found you! I have been needing to revamp my social icons, but had no idea how I did them to begin with ;). Your tute was super helpful! Thank you! Please feel free to swing on by and check it out!

    Reply
  16. Thank you so much. I have been trying to figure this out forever. You just helped me redesign my entire blog. I have one question – can you tell me how you got your recent posts to configure like that. I have the widget from blogger and I can only have it in my side bar. I just want the thumbnail like you have and to have it in the same location. Any help would be very appreciated. I am now a follower of your awesome blog.

    Reply
  17. Thank you so much for this tutorial! Everything worked for me the only slight problem is that when I put it onto my blog (WordPress) there is a little grey boarder that surrounds it. Not sure if this is normal or if I did something wrong? Any help would be great. Thanks!

    Reply
  18. Hi, Ashton
    Just wanted to say thank-you for this tutorial. I walked my way through split screen of your blog and split screen of image-maps. I had already loaded my pic onto picasa after I tweeked it in photoshop elements 9.0 but, found picmonkey to be very useful for the future. I was not sure how to get the URL address then I right clicked on my photo when it was in picasa then went to properties and the location was right there. I just did letters than the squares and linked up my urls to each letter, then copied the html added to my blog and tada, it was beautiful. Can’t tell you how many times I have come across a blog and thought, man how can I get my links going across and not down, without taking to much space up. And you walked me through it. Yeah, I feel so proud of myself. I also made my own button and banner and my blog keeps getting better like a fine wine. Thanks again, oh and stop by to see how it turned out. Christina http://www.creativetizzy.blogspotcom

    Reply
    • Ok, the good news is: easy fix. The bad news is: sort of a time consuming fix ๐Ÿ˜›

      You need to re-map the image, but before you finish and grab your code, look in the right hand column on the mapping page. There will be a check box that says “show text links.” Make sure that is UNCHECKED and you won’t have any problems ๐Ÿ™‚

      Reply
  19. OMG! Thanks so much! I found this through blogcon and it was so simple to follow. I have no blog design experience and I was able to get it to work with minimal issues. I have wordpress so finding where to put the code was a bit tricky, but I figured it out. Thanks SO much for sharing your wisdom with all of us newbies.

    Reply
    • Yes! Will you email me on this? Otherwise I’ll forget to find the icon set for you when I get back into town and can sit down at the computer!

      Thanks ๐Ÿ™‚

      Reply
  20. URL contains illegal characters??? I go through everything exactly as you said but then I get this messge when I try to ad my own Gadget URL on my Blog??? PLease help! This was such a great tutorial and I really want to get it working.
    Many Thanks

    Reply
    • Sadly, the first thing I’m going to have to recommend is to just try it again! Occasionally, HTML code can just be a pain and one little mistake in typing or in copying and pasting can throw the whole thing off. So that’s the first thing you do, just try it again. If that still doesn’t work, send me an email with all of the links you are trying to use and I’ll take a look and see if I can help! somethingswanky [at] gmail [dot] com

      Reply
      • Hi Ashton,
        Thank you so much for your reply. So I’ve re tried the entire thing several time and was meticulous with the details however i just can seem to get it working?Darn, I’m so dissapointed I can’t simply figure this out. Any chance you’d be able to lend me a hand ๐Ÿ™‚
        Many thanks
        Sarah

      • Hey Ashton,
        You told me to e-mail you back so you could take a look at my link problem. I’ve seriously tried it so many times since then, thinking I would be able to sort it out myself but it still continues to only work the first time and then shows an error or unauthorized message after that ๐Ÿ™ Would you send me an e-mail at photographybysarahanne@hotmail.com when you get a chance and let me know where I can message you the info.
        Thanks again!!!

  21. Thank you so much for posting this tutorial it was very helpful! I’m currently “re-vamping” my blog and now have awesome social media icons because of this post! Do you happen to know where I can get an Instagram silhouette? I’ve googled it, to no avail….

    Reply
  22. Awesome tutorial! it worked like a charm. I used picmonkey for the first time and coding for the first time! thanks! my navigation bar image on the blog is super blurry, but in picmonkey and picasa it’s fine. What could be the issue?

    Reply
      • hmmm… png or jpg seem to be really poor quality. and it seems nothing fits right either. lots more trial and error. If you have any other ideas, I am more than willing to try them. Thanks again!

  23. *cries* Thank you sooooooo much! I thought for sure I could do this, but I couldn’t figure out how to get the right “fonts” for each social media website. I also didn’t know how to map the image outside of FrontPage, which I don’t own anymore. This is a HUGE help!!!

    Reply
  24. I love your website and all the fabulous how-to’s! I just started blogging a few months ago and I’m trying to give my blog a face-lift. Your site will definitely help me there. I love your blog design…can you tell me if it’s a specific WordPress theme that you’ve used? I noticed a very similar design on portuguesegirlcooks.com and I’d like to do something similar. Thank you!

    Reply
    • I’m running the genesis framework with the Craftiness child theme ๐Ÿ™‚ Good luck on your blogging journey!! It’s a lot of fun ๐Ÿ™‚ ๐Ÿ™‚ ๐Ÿ™‚

      Reply
  25. Hi. This is a great tutorial, thank you! I’m in the middle of using it right now…but for the email social media icon, how do I link my email to that part of the image since it’s not a url? I was doing so well up until that point.

    Reply
  26. What is the process for a ‘mail to’ link? LIke I have the interest and instagram set up, but I’m not sure how to make it bring up my email when people click the envelope??

    Reply
  27. I luv U! Your tutorials are so helpful and user friendly! I just did this one and feel proud of my self for it. Couple questions… is it necessary to host the html other than on your own blog (in case you lose it later)? I want to do some fun stuff like your scalloped side detail on your blog and your custom background – got any tutorials coming for those?
    Thanks again!

    Reply
    • I have lots of tutorials coming up this year! I’ve just recently partnered officially with picmonkey, and part of that deal is writing lots of blog design posts!! ๐Ÿ™‚

      It is necessary for you to host the image SOMEWHERE, but it doesn’t ave to be on another blog. Lots of people host on photobucket or picasa. I just like to use my sample blog to host, because it actually keeps me a little more organized ๐Ÿ™‚

      Glad you liked this tutorial!

      Reply
  28. Hey ashton thanks for the tutorial. one quick question when doing the nav bar, for some reason I can’t see the HTML code to put before and after for it too center. It’s just showing up as blanks spaces in your post. Could you let me know what the code is. Thanks so much ๐Ÿ˜€

    Reply
  29. Would you happen to know where else I might be able to get the silhouettes? as the site links is under construction.

    Thank you

    Reply
  30. Thank you – thank you – thank you! Decided I had procrastinated long enough on fixing a mess I made of the nav-bar, googled, and voila! yours was the only one that made sense. Thanks so very much!!

    Reply
  31. Hi, Ashton! Thank you so much for your tutorials on blogging! I am a newbie and I think I have been on you blog now for at least 2 hours!! lol, I have one thing I am unsure of before trying this. You say to add at the start of the code, and at the end of the code. Not really sure what you mean. Are you actually typing “at the start of the code” in the HTML box before pasting?

    Reply
    • Hey there! Sorry, someone just pointed out to me that the center tags disappeared from the post! I’ll have to add them back in (but I have to change the code a little so it shows up). What I’m trying to say in the post is be sure to add “center” tags. Add a center before the HTML and a /center after the HTML. But be sure to put each of the “centers” in these: < > (I can’t actually do it, or else they’ll disappear from the comment like the do in the post). Does that make sense?

      Reply
  32. My question is about the tag you said to add to the front and back of the html code to get it to be centered? it isn’t showing up on your blog post, and i think that i need it to make my stuff work! Help!
    By the way.. this is the most helpful thing i have ever found online! You are awesome!

    Reply
  33. hello! I love the tutorial! Also, love the font as I am typing this in haha! just one question… the blog design network silhouettes are not available anymore ๐Ÿ™ do you recommend any others?

    Reply
  34. What’s the code for the “Follow by RSS” link? I got FB, Pinterest & email all sorted out but can’t figure out that one. This tutorial is great and I’ll post when I get it all figured out. Thank you!! ๐Ÿ™‚

    Reply
  35. I think I figured it out. Would love to have you come see. I used your tutorial to make my header AND nav bar! Is there a way to make my Header smaller & center it? I can make it smaller in PicMonkey but it automatically anchors on the left. It’s blurry when it’s stretched this big but that’s better for my OCD than having it off center. ๐Ÿ˜‰

    Little Miss Glamour Goes to Kindergarten

    Reply
    • Maybe save your images as .png instead of .jpg to help with the blurriness! And if you change the width of your blog in template designer, that should help with the centering too ๐Ÿ™‚ But I think it looks GREAT! You did such a good job!!!

      Reply
  36. Hello there!

    I wanted to take a minute and thank you for posting these instructions! I just created social buttons for my blog using your instructions. I am new to the whole blogging thing and have been working on making my blog prettier and more user friendly! I have got long way to go though.. :p
    Thank you once again though!

    Reply
  37. I just did this on Thursday I am curious if I did it wrong because I selected image upload from my computer instead of from a URL. Was that wrong? I am in the process of making a header, I saw on the comments I can add my icons to that as well? I like the position of them better at the top. This has been so helpful to a newbie!

    Reply
    • Yes! You want to use a URL, NOT upload it. When you upload it, it’s like asking image-maps to host it for you. And they don’t like to do that. So they’ll delete your photo within 2 days. That’s why you have to host it yourself ๐Ÿ™‚ I have a tut on image hosting in my nav bar if you want to check it out!

      Reply
  38. Thanks for the very helpful tutorial. I use Picmonkey a lot but have never come across Image-Maps.com. Definitely worth looking into for social icons and perhaps even banner creation.

    Reply
  39. Ashton, this tutorial is so helpful! I kept wondering how people made all the gorgeous free social media icons around the web, and this made it simple for me to create them in my own colors and style. Thanks a lot for the clear, easy to follow guide. Can’t wait to check out more of your posts.

    Alicia

    Reply
  40. Thank you so much for this tutorial! I just have one quick question…Is there a way to get rid of the ugly rectangles shape that appears on the mouse over of the links?

    Reply
  41. Thank you So much for this tutorial! I have been struggling for a month with finding and using my social media icons. I think I am going to go back and fix a lot of things using your site! Thanks!

    How do you center it in the side bar? I couldn’t see that in your blog post!

    Also, unrelated question I have been searching for the answer to forever! My CSS codes I enter never work or remotely move anything. Any ideas for a solution to this? Thanks again!

    Reply
    • I have actually fixed it now! lol! just a little tip for everyone, you can’t copy and paste stuff into the website unless you use keyboard shortcuts.

      Mac:
      Copy: cmd+c
      Paste: cmd+v

      hope this helps x

      Reply
  42. Love your tutorials, but have a problem with this one: image maps isn’t working anymore like in your screenshot. The layout has totally changed and when I map a button it just becomes one color instead of a button with an icon on it:/

    Reply
  43. Thank you very much for this tutorial.

    I used Adobe Illustrator to create the photo with the icons that I looked for on Google. Some links in this post don’t work any more.

    The image mapper does work. It looks different now, but the functionality is the same.

    Cheers!

    Reply
  44. Warning: I’m only 13 years old and have absolutely no clue what I’m doing. None. Nada.

    So…I tried to use this website on an image that I created using PicMonkey aaaaaaand….has the website changed in the past two years since you’ve posted this? (This is a possibility.) Or am I doing something wrong? (A much more probable possibility.)

    Because when I tried to map my image using the url (that I got after uploading the image to Dropbox), and it took me to the page where I could map my image, I just got a white screen. And I could right-click in the white screen and add where I wanted the image to link to, but I couldn’t see my image while I was mapping it. (I probably explained this very badly.)

    Sorry I’m sooooo late commenting, but if you even still use this blog, could you tell me what I’m doing wrong? Or…at least sort of try to with the small amount of information I gave you? Because I’m really confused. Thanks!

    Reply
  45. Thank you so much! I have no coding/minimal computer experience, and I just successfully followed this tutorial in about 15-20 minutes. So very helpful to the person who has no idea what she’s doing. ๐Ÿ™‚

    Reply
  46. I appreciate the tutorial. I never thought about doing this before coming across this post. Now, I designed social media icons for 4 different sites. ๐Ÿ™‚

    Reply

Leave a Comment