Something Swanky

Free Social Media Icon Silhouettes and How to Use Them in Picmonkey.com

Free Social Media Icon Silhouettes and How to Use Them | www.somethingswanky.com

Creating social media icons for your site is SUPER important and SUPER easy! The more custom and cute, the better. And to make custom and cute, you need silhouettes (rather than already designed social media icons).

That’s usually the trickiest (or simply the most time consuming) part for me: finding all of the silhouettes I need, and they’re never all in one place. So why do we like silhouettes of social media icons better than pre-designed and ready-to-go social media icons? Because we can make them custom and cohesive with the rest of the site’s design.

You can reference this post for screen shots and visuals on creating your own social media icons. But in a nutshell, simply design the image you want behind your social media icon– it may be a circle, a square, a long bar (like mine, look up!), or maybe something more elaborate! And then lay the icon over the design. Most of the time, you’ll want to change the color of the icon to white. White is usually a nice overlay on the other colors you may have used. But in some instances, you may want the icon to be colored, and this is why the silhouettes need to be black. Black is the only color that will allow you to actually change colors in the color palette and display true colors.

Like so:

Screen Shot 2013-04-30 at 9.18.15 PM

[select YOUR OWN in overlays www.picmonkey.com]

Screen Shot 2013-04-30 at 9.18.26 PM

[find the social media icon .png file saved on your desktop… scroll down to save files]

Screen Shot 2013-04-30 at 9.18.37 PM

[your icon will appear black, note color palette on the right]

Screen Shot 2013-04-30 at 9.18.51 PM

[adjust color of the icon by clicking in the color palette or pasting in the color code]

Again, if you’d like to see varieties of ways to style and code your social media icons, reference this post.

Today’s post isn’t so much about creating the icons as it is about giving you the tools to create them (teach a man to fish and all…). As I mentioned before, simply finding the silhouettes to use can be the most difficult part. So I’ve compiled the icon silhouettes I use most often as a blogger and blog designer right here, and you can feel free to snag them for yourself! They all have transparent backgrounds (yay!). All you need to do is right click each image below to save the image for yourself, and BE SURE TO SAVE THE IMAGE AS .PNG! Otherwise, you’ll lose the transparent background…

BLOGLOVIN transparent

[bloglovin]

GPLUS transparent

[google plus]

STUMBLE transparent[stumbleupon .. newest logo]

FB transparent

[facebook]

INSTAGRAM transparent

[instagram]

PINTEREST transparent

[pinterest]

TWITTER transparent

[twitter]

EMAIL transparent

[email]

RSS transparent

[rss feed]

These are all sized to approximately 125 x 125 pixels. So you can shrink them if you’d like, but you risk losing clarity if you try to make them much larger.

As an added bonus, I made a set of a few of my favorite icons that can be used in your sidebar! Simply copy the codes below (be sure to change the links to YOUR social media pages) and paste them into the HTML/TEXT box on your site where you want them to display! Happy Tuesday :)

   pinterest tab Twitter tab facebook tab rss tab google plus instagram tab

Pinterest: <a href=”YOUR PINTEREST PROFILE URL”><img src=”http://bit.ly/12YGGF3″ border=”0″ /></a>

Twitter: <a href=”YOUR PINTEREST TWITTER URL”><img src=”http://bit.ly/12YGNjW” border=”0″ /></a>

Facebook: <a href=”YOUR FACEBOOK PROFILE URL”><img src=”http://bit.ly/12YGGF3” border=”0″ /></a>

RSS: <a href=”YOUR RSS FEED URL”><img src=”http://bit.ly/ZSBhjp” border=”0″ /></a>

Google Plus: <a href=”YOUR GOOGLE PLUS URL”><img src=”http://bit.ly/12jZdIc” border=”0″ /></a>

Instagram: <a href=”YOUR INSTAGRAM PROFILE URL”><img src=”http://bit.ly/10Tx2Wu” border=”0″ /></a>

I used www.picmonkey.com to design all of these icons. They are an official sponsor of Something Swanky.

Follw me!

Ashton

Ashton is the owner and author ofSomething Swanky. Although first and foremost a wife and mother, she considers herself an online entrepreneur, freelance writer and photographer, and brand ambassador.Her focus is in food styling, food photography and recipe development.
Follw me!

Latest posts by Ashton (see all)

   

41 Responses to “Free Social Media Icon Silhouettes and How to Use Them in Picmonkey.com”

  1. Sarah posted on April 30, 2013 at 11:19 pm (#)

    Awesome, thanks so much! This part of my blog has been quite blah…can’t wait to update it using these!

  2. kelly thompson posted on May 1, 2013 at 11:26 am (#)

    I bet you get this alot but after i slaved over doing this myself, i see your post….I will keep it for future ref though cause i love the banner look and may add it instead….

  3. Gloria @ Simply Gloria posted on May 1, 2013 at 11:41 am (#)

    Love your tutorial! In fact, this is how I did mine on my blog. Love Picmonkey…you are the one that actually got me hooked on it. So, thank you!

  4. Brenda @ SweetSimpleStuff posted on May 1, 2013 at 12:37 pm (#)

    Thank you … I will use it!

  5. Megan @ The Pink Flour posted on May 1, 2013 at 12:50 pm (#)

    I have been scouring the internet to find new social media icons I liked, but had no luck. Thank you so much for this post, Ashton! Now I can really get to re-doing my blog design :)

  6. Dorothy @ Crazy for Crust posted on May 1, 2013 at 1:04 pm (#)

    THANK YOU. Now that I’m doing business cards (hahaha) I needed these. :)

    • Ashton replied: — May 1st, 2013 @ 4:16 pm

      Seriously! You’ve got a business going on!

  7. Nancy P.@thebittersideofsweet posted on May 1, 2013 at 3:30 pm (#)

    You did such a good job with the social media icon post that I was able to figure this part out what am I overjoyed about is that you add the side bar icons! Yay!!

  8. Abby posted on May 1, 2013 at 10:02 pm (#)

    I tried the facebook banner one and it shows that is for pinterest. I’m not sure If I’m missing something or if there really is a problem with it.

    • Ashton replied: — May 1st, 2013 @ 11:36 pm

      Grrrr… I’ll take a look at it tomorrow! It’s a simple fix if there really is a problem :)

      • Amy replied: — September 23rd, 2013 @ 4:09 pm

        I am having this same problem!

  9. Jenn @ peas and crayons posted on May 2, 2013 at 10:41 am (#)

    Looooove the tutorial and can’t wait to share it with friends! Thanks! Xo

  10. Becca from ItsYummi.com posted on May 2, 2013 at 11:21 pm (#)

    These are FABULOUS! Thank you so much for sharing your hard work with us :)

  11. Martina posted on May 6, 2013 at 2:51 pm (#)

    Wow, this was a super-helpful tutorial!!
    Thanks for sharing these tips!
    I love your blog!
    Martina

  12. PapaLos @ The Man, The Chef, The Dad posted on May 7, 2013 at 1:21 pm (#)

    This is perfect timing! I’ve been busy trying to fix up my blog and I’m going to take advantage of this. Thank you so much!

  13. Beth posted on May 18, 2013 at 2:44 pm (#)

    Thank you so much for the great post. I just made my icons in picmonkey using your silhouettes and instructions. Can’t wait to get them on my site!

  14. Chloe Webber posted on June 6, 2013 at 7:44 am (#)

    Hey, I tried doing the twitter one, and apparently the coding was ALL wrong. What’s going on? It won’t work I’ve tried everything.

    • Ashton replied: — June 6th, 2013 @ 9:30 am

      The twitter banner? or just trying to grab the twitter icon? Can I see the code you used? Thanks!

  15. Brittany @ La vita dibella posted on July 30, 2013 at 10:42 am (#)

    I loved this tutorial. However, it’s not working for me. I edited the images you provided, but after inserting my URL information, the images show up on my blog, but the links do not work. Do you know what may have gone wrong?

  16. Samantha posted on August 12, 2013 at 9:30 am (#)

    I have read a bunch of your blogger tips – THANK YOU!!! Your advice is so simple but VERY HELPFUL!!!!!!

  17. karen posted on August 20, 2013 at 9:46 pm (#)

    yay…thanks so much, I just made my own buttons using your transparent images. YOU ROCK

  18. Corinna Ashley posted on August 22, 2013 at 12:48 pm (#)

    Thanks so much for sharing these!

    XO

  19. Edith posted on September 3, 2013 at 8:21 am (#)

    Thanks so much for sharing these. I’m a new blogger so this was really helpful. I love the bonus icon, Could you show me how to make one for bloglovin’. Thank you.
    Edith x

  20. Timeka posted on November 12, 2013 at 3:32 pm (#)

    Absolutely stumbled upon your site and thanking you a great deal for these social media icons!!!! They came just in the nick of time!!!! My site is currently under construction by me which I am very proud to say that…LOL!! Hopefully I can make some graphic magic happen.

  21. Tasha Meline posted on December 18, 2013 at 12:45 am (#)

    The ones that you made did not work on my blog when I copied and pasted them onto a new gadget html box. any reason why? :)

    • Ashton replied: — December 18th, 2013 @ 9:50 pm

      Not that I know of! Bummer!

  22. Betty posted on December 29, 2013 at 9:35 pm (#)

    OK, so if I need some other social media icon, you say to IMAGE MAP them. How do you do that? From my web background, image mapping is taking a larger image (such as your row of social media icons as one image) and mapping the ‘f’ part for facebook and so on. I want to add the ‘r’ for ravelry.com. How do I do that? Thanks so much

  23. Sarah posted on January 31, 2014 at 11:00 pm (#)

    Thank you for compiling all of the social media icons. I was driving myself crazy trying to find them all. You saved me loads of time and gave me a second wind to *hopefully* finish my blog design tonight.

  24. Rachel @Baby Blythe Blog posted on February 1, 2014 at 9:34 pm (#)

    Thanks so much for posting these! I was searching all over for some simple icons. Thanks again! This is awesome!

  25. Sandy posted on February 7, 2014 at 3:33 pm (#)

    This is not working for me (it is not easy). Once I am on pic monkey — then, what? I also need a Flickr icon, but so far I’ve gotten no where with this.

  26. Mrs Night Owl posted on February 23, 2014 at 8:55 pm (#)

    I’m new to blogging and this is going to be fabulous to help me along. Thank you!!!

  27. M posted on March 19, 2014 at 11:52 am (#)

    I have been looking EVERYWHERE for simple silhouettes. THANK YOU. You’re right, that is the most difficult part.

  28. What the Lady Loves posted on March 23, 2014 at 3:44 pm (#)

    Absolutely brilliant – thank you so much!

    Love stumbling across blogs where people are so kind and give things away that they have spent time working on – I hope I am talented enough one day to be able to reciprocate :-) Working on that bit but your work is helping me get there!

    I had the same issue as one other blogger above – the Facebook icon was not working for me (despite the link above pointing to a Facebook icon, the link is working as Pinterest – odd). So, that particular link is actually ‘working’ per se, just not in the correct capacity. Not that I am worried in the slightest because I have learned so much today and have managed to add some brilliant icons to my blog…

    All because of you and your kindness!

    Thank you!

    What the Lady Loves

  29. Angela posted on April 17, 2014 at 8:01 pm (#)

    Thanks! Love these. However, the twitter works fine, but the Facebook one actually shows Pintrest image instead. How can I get the Facebook coding?

  30. Stephanie posted on May 12, 2014 at 2:32 pm (#)

    thanks so much i was at this for an hour until I found your useful guide!

  31. Jewel Barnett posted on May 28, 2014 at 12:57 pm (#)

    Thank you for the code! I just used the Twitter and Pinterest. Have a great day!

  32. Frannie posted on July 5, 2014 at 11:51 am (#)

    I am *so* glad I found your site! I love your easy-to-understand tutorials … and you’ve got me hooked on picmonkey!

    Lovely!

  33. Amy posted on October 8, 2014 at 2:37 pm (#)

    Just found these on Pinterest. Thank you SO much – just what I’ve been looking for!

  34. My Glutenacious Life posted on October 22, 2014 at 7:03 pm (#)

    I can’t be thankful enough for this post. Thank you so much! I was desperate trying to find icons for my business cards and found this page.

    I tried to use the icons for the sidebar but something is not working :/ no image is showing. Any ideas how to fix it?

Trackbacks/Pingbacks

  1. Pingback: Blogging: 10 Steps to Getting Started on WordPress - White Lights on Wednesday

Leave a Comment





Current ye@r *