Free Social Media Icon Silhouettes and How to Use Them |

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]

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


GPLUS transparent

[google plus]

STUMBLE transparent[stumbleupon .. newest logo]

FB transparent


INSTAGRAM transparent


PINTEREST transparent


TWITTER transparent


EMAIL transparent


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=”″ border=”0″ /></a>

Twitter: <a href=”YOUR PINTEREST TWITTER URL”><img src=”” border=”0″ /></a>

Facebook: <a href=”YOUR FACEBOOK PROFILE URL”><img src=”” border=”0″ /></a>

RSS: <a href=”YOUR RSS FEED URL”><img src=”” border=”0″ /></a>

Google Plus: <a href=”YOUR GOOGLE PLUS URL”><img src=”” border=”0″ /></a>

Instagram: <a href=”YOUR INSTAGRAM PROFILE URL”><img src=”” border=”0″ /></a>

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