How to Create Your Own Social Media Icons using Picmonkey

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!

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Comments

  1. I know what I will be doing this evening now! Thanks for the fab tutorial!

    Alison
    x

  2. Great job!

  3. 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 ;)

  4. Whaaat?! Oh I am so doing this right now! Great Tutorial.

  5. 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!!!

  6. This is great information. Thank you!

  7. 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!

    • 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.

  8. I have been wanting to do this, but didn’t know how. Thanks so much for the tutorial!!!

  9. Ok, so seriously I will need you address, to send you a box of cookies because this ROCKS! I can’t thank you enough for your tutorials! I love it!! xoxo

  10. 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

  11. Thank you! Thank you! Thank YOU! I’ve been attempting this for a couple weeks now, and now I finally can cross that off my blog to-do list!

  12. 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!

    • 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!

  13. Thank you sooo much! This may be old news to some, but I have coveted custom designed social media tabs for so long. I’m implementing this!

  14. I did it! I did it! You are da bomb!!!!

  15. That is so helpful, thanks! I would love for you to share this (and any other creations) at Pin It and Win It Wednesday @ http://www.cheapcraftymama.com– where you can win free ad-space on my blog!

  16. Such a great tutorial. That image maps site is great!

  17. Oh wow! This is great! Thanks so much! Haven’t used PicMonkey yet and hadn’t heard of image-maps

    Visiting from HoH

    • 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!

  18. Great tutorial, but I cant figure out how to link up my email, any suggestions?

    • 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!

    • Thank you so much!

  19. 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!

  20. Great tutorial! Would you consider linking it up at my Pinworthy Projects Party? I hope to see you there!

  21. This is a great tutorial! Thank you so much! I have been trying to figure out social media icons forever!

  22. Wow! I have been wanting to do this for a long time and now I can thanks to you! I’d love for you to link up to our Finished Friday blog party.

  23. what a great tutorial – I wish I hadn’t already paid a web designer:( you have all the tips I would have needed.

    thanks
    ~heather

  24. Seriously, this was so easy. I spent much more time getting it how I liked it in picmonkey than actually getting it all linked up and on my blog. Come check out my new buttons.

  25. This is at the very top of my to do list this week! What a great tutorial! Can’t wait to get to this!!!

  26. Found this site thru a google search, and it’s great. Thanks!!!!

  27. I am so jazzed I found you! I know what I will be doing on my lunch break! THANKS so much for sharing!
    New Follower!
    Jen @ f5

  28. Great info! Thanks! Just pinned it!

  29. 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

  30. This tutorial was amazing and awesome and easy! Thank you so much for sharing. :)

  31. 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!!

  32. 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)

  33. ….and just when I thought I was going to walk away from the computer, lol! This tutorial is EXACTLY what I have been looking for! Thanks so much!

    ~Tanya
    Mrs. Dwyer’s A+ Firsties

  34. 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!

  35. I have been looking for this for ages

  36. That’s for the fabulous tutorial!!!!!

  37. 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. :)

  38. I just tried to paste this to my page and it says it contains illegal charachters! can you help? thanks!

  39. Love it, thanks! I have been learning quite a bit – and learning to do it all on my own!

  40. Thanks for the tutorial! I love picmonkey and now with you help I know how to make my own images!!

  41. Thanks so much for this tutorial it was so easy and now my social media buttons are unique and professional looking Kxx

  42. Thanks so much! This was just what I needed!

  43. this is Awesome!! I just made mine! I have one question though, I am using the Mail picture and trying to link it to my email and I keep putting in my email address and it’s not working? Do I have to use the Send email I tried it several times several different ways and it wont work %-(

  44. Thanks for the tutorial!!! Used it to create social media icons and credited to you on my blog. :)

  45. This comment has been removed by the author.

  46. Thank you thank you! My blog looks a million times better, and you made it really easy. If I could hug you, I would! justpeachy-darling.blogspot.com

  47. 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 :)

  48. Awesome tutorial, just completed it for my blog and had to say thanks!!!

  49. 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 :)

  50. I LOVE YOU. thank you thank you thank you thank you thaaaaannnnkkkk youuuuuu!

  51. 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!!

  52. 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!

  53. Amazing work dear……

  54. Thank you so much for this! This is amazing!! I just have one question. How to I make the social icons button white? Thanks again! Youre a genius!

  55. I AM NOW IN LOVE WITH YOU. PERIOD. END OF STORY. CUE HAPPY ENDING MUSIC.

  56. I just found your blog via Google & I am SO glad I found it! I’ll be back later to fancy up my blog “all on my own” thanks to you!!!

    XOXO,
    Shayna

  57. that was a lot of work! see for yourself and let me know if I can make any adjustments. i guess it’s set in stone!
    http://www.shilohstaste.com

  58. I have been trying to find a simple way to do this (one without learning lots of code!)for ages! Thank You!

  59. I finally got around to following this tutorial– THANK YOU! I am jumping into social media a bit late in the game but your tutorial has me going in the right direction.
    Many thanks!

  60. 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.

  61. Thank you SOOOOOO MUCH for this tutorial!!!!! This will be Such a great help when I design our social media icons!!

    Thanks again!

    Charlotte
    boyerfamilysingers.blogspot.com

  62. You just made me feel really, really smart! Thank you so much for this great tutorial!!! :)

  63. 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!

  64. 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

  65. HIII! Mine is saying “untitled image map” underneath and that’s ugly. lol
    help?

    • Ok, the good news is: easy fix. The bad news is: sort of a time consuming fix :P

      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 :)

  66. This is the best tutorial I’ve found! Thanks for being so descriptive.. but when I get through all of the steps at to the end, it appears on my page as a little photo bucket box that says “This is no longer supported by the site”
    HELP!
    :)

    http://www.fashionablecents.blogspot.com

  67. Okay My bad.. it actually says “Photo has been removed by the user” I dont know what that means? Thanks again for your awesome advice/ help :)

  68. This is AMAZING! Thank you so much for posting this! It’s helped me finally figure out how to create my own social icons!! YOU ARE THE BEST!!!

  69. Thank you! Thank you! Thank you!!

  70. OMG you are amazing, followed your directions and it worked perfectly. I am now a follower:)

  71. this is great-you’ve given me a project for today :) thank you!

  72. Wow. Nice.

  73. THANK YOU for this guide! Love all your tutorials. Just finished adding my new icons to my blog.

  74. Oh my goodness, you are a godsend!! I just followed this tutorial and it worked! So happy!!! Thank you ever so much for taking the time to write this post.

  75. Brilliant!!!!! Thanks so much. :)

  76. 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.

  77. Hey! Any idea where we can find the outline of the Instragam Icon?

    THANKS!
    Julie @ Julie’s Eats & Treats recently posted..Microwave Caramel CornMy Profile

    • 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 :)

  78. Yaaaay! This is such a great post – I just make some awesome buttons for my blog. Thank you so much!
    Rachel recently posted..Why I’m Not Using Etsy AnymoreMy Profile

  79. Sarah McLachlan says:

    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

    • 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

      • 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! Email me the link to your blog and a description of the problem again, and I’ll take a look :)

          • Sarah McLachlan says:

            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!!!

  80. WOW This is amazing – thanks for these tutorials.

  81. 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….

  82. 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?

    • My first guess would be that you need to save the image as .png not .jpg . Could that be the problem?

      • 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!
        tanny s. recently posted..first postMy Profile

  83. *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!!!
    Laura recently posted..Southwest Pasta Skillet – RecipeMy Profile

  84. 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!

  85. 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.

  86. 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??

  87. 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!
    Kelly Reber recently posted..Jeff Lewis PaintMy Profile

    • 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!

  88. Thank you so much for this post!!! You are the best !! I can’t believe I did this on my own, but your post made it so easy!! Amazing! Thank you!
    Heather @ The Unsophisticated Kitchen recently posted..Cheese & Corn ChowderMy Profile

  89. 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 :D
    Tash @ The Velvet Moon Baker recently posted..Chewy FlapjacksMy Profile

  90. What do I do to set up my social icon links to open up in a new tab or webpage?

  91. Rachel Simons says:

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

    Thank you

  92. Most amazing, thank you. If this “old dog” can follow your directions, ANYBODY should be able to! Thanks!

  93. 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!!
    Tammy recently posted..Preparing for ThundersnowMy Profile

  94. Hey, that link is broken for the social media sillhouttes. I found the updated link, if you want it :)

    http://theblogdesignernetwork.com/free-social-icon-silhouettes/

  95. 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?

    • 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?

  96. 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!

  97. 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?

  98. 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!! :)

  99. 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
    Kristin recently posted..reptiles & amphibians.My Profile

    • 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!!!

  100. 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!
    Sukhi recently posted..The Princess and The FrogMy Profile

  101. Did you create your “My Favorite Posts” and “Reader’s Favorites” in the sidebar using Image Map Tool, or was that a plug-in?

  102. Your tutorials are so great! :-) I am your newest follower as of now!
    Anja recently posted..How To Truncate Your Blogger PostsMy Profile

  103. 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!
    Nancy P.@theittersideofsweet recently posted..Starfish Cream CookiesMy Profile

    • 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!

  104. I just put my icons up today. I followed your instructions but made my own icons from scratch. I love them!
    Darcel ~ The Mahogany Way recently posted..Ride On Two WheelsMy Profile

  105. THANKS!!!

  106. Holy cow!!! Thank you so much!!! Love the result and it was so easy!
    Rita Marie recently posted..Viva Fiesta! Que bien suerta!My Profile

  107. Thanks to you, my blog is starting to look great. Thank you for the easy to follow directions!
    Shannon @ Pinstersisters recently posted..New RugMy Profile

  108. Thank you so much for this!

  109. 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.

  110. 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

  111. Thank you so much for this post! Was so useful when I was creating my own little icons! Thanks again, so useful!

    Katie <3
    Katie recently posted..Tiffany Bracelets and a BurritoMy Profile

  112. 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?

  113. Thank you so much for the tutorial! You can see the result on my site (www.apestaartje.net)!

  114. This was so helpful. Your detailed explanations were great. Thank you so much! :-)

  115. What a fantastic tutorial! I just made a bunch of Social Networking buttons for my blog in no time at all!
    Jillian Wade recently posted..Lemon ChickenMy Profile

  116. THANK YOU a million times over!!! I am so excited about my new social media buttons. They are gorgeous! Seriously, thank you so much for this tutorial. You are a lifesaver.
    Christina Ventura-DiPersia recently posted..A new way to follow me!My Profile

  117. 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!

  118. Thank you so much for writing this post! It is so helpful!

  119. Fabulous tutorial! I’m not very computer graphics savvy, but I was able to make my icons from this :-)
    Vyki @ On The Shelf recently posted..Waiting on Wednesday (46)My Profile

  120. i think you have just saved my life

  121. Thank you! Easiest directions yet! http://www.handandtheheart.com

  122. Brilliant Tutorial! I’m not great with website type things but found this so easy to do! Thanks :)

  123. OMG Thank you so much! You have no idea how great of a help this was to me!

  124. This is amazing! I just tried this and upload it to my blog. Thank you for sharing!

  125. This was so easy and a huge help! Thanks so much!

  126. This is a great tutorial but I’m having problems, my google+ and Facebook links don’t work. Has this ever happened before?

    • 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

  127. 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:/
    Sofie recently posted..Exploring San Diego by TrolleyMy Profile

  128. Hi this is great thank you just having a little bit of trouble finding out what to put at the beginning and end of the code to make it centre on the sidebar?

    Thanks :”)

  129. Thank you SO much!! I have been wanting to do this for ages but had no idea how. Your tutorial is the best. Thank you.
    Jacqui
    Jacqui recently posted..Good Things Take TimeMy Profile

  130. I know this is an old post, but it’s a gold mine! HUGE thanks, cause I totally did it! :D
    Kacie recently posted..Friday Favorites: Audra, Mother’s Day, and More MatryoshkasMy Profile

  131. 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!
    Andi recently posted..Diferența între blogul personal și blogul de businessMy Profile

  132. 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!
    O Williams recently posted..Help! Please. I mean, you know, if you want to…My Profile

  133. 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. :)
    Ashley recently posted..How to Get Rid of Cucumber Beetles NaturallyMy Profile

  134. 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. :)

Trackbacks

  1. [...] have to admit that without the help of this tutorial  from Something Swanky on creating my own social media icons I would have likely given up or just [...]

  2. [...] ‘about me’ frame above them myself using picmonkey. I followed the instructions from Something Swanky for the icons but made mine from scratch instead of using the cookie cutter silhouettes. [...]

  3. [...] can reference this post for screen shots and visuals on creating your own social media icons. But in a nutshell, simply [...]

  4. [...] totally counts as a DIY project, right? (I used this tutorial and these buttons and this magical [...]

  5. […] media icons: Make your ownTutorial here.Free Social Media Icon […]

  6. […] media icons: Make your ownTutorial here.Free Social Media Icon […]

Leave a Comment

*

Current ye@r *

CommentLuv badge