Bourn Creative is making it simple for you to add social media icons to your website that match your brand and your color palette for a more cohesive look.
We’ve created square icons for RSS, Facebook, Twitter, YouTube, Google+, LinkedIn, and Pinterest in 48 colors, at 5 different sizes (32×32, 48×48, 64×64, 96×96, 125×125), as transparent PNGs so you can use them on any color background.
And we’re giving you the HTML and CSS code to show you exactly how to use them and how to add a cool opacity effect on hover!
Colors included in the icon pack:
How to Use The Social Icons:
Not quite sure how to use these social media icons on your website?
Here is some basic HTML and CSS to help get you started after you upload the icon images to your website server:
Minimum HTML required to show and link the icons
<a href="https://www.facebook.com/BournCreative"><img src="http://yourdomain.com/FILEPATH/filename.png"/></a>
HTML with title and alt tags for usability and SEO
<a href="https://www.facebook.com/BournCreative" title="Bourn Creative On Facebook" alt="Bourn Creative Facebook Icon"><img src="http://yourdomain.com/FILEPATH/filename.png"/></a>
HTML with title tag, alt tag, and CSS class to add a simple hover effect to icons
<a class="social-icons" href="https://www.facebook.com/BournCreative" title="Bourn Creative On Facebook" alt="Bourn Creative Facebook Icon"><img src="http://yourdomain.com/FILEPATH/filename.png"/></a>
To create the hover effect add the following to your website or WordPress theme style.css file
/* Social Icons
----------------------------------------------- */
a.social-icons {
margin-right: 5px; /*Adjust This Value As Needed*/
}
a.social-icons:hover {
opacity: .7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
Complete example
<a class="social-icons" href="https://facebook.com/YOUR-PROFILE"><img src="http://yourdomain.com/wp-content/uploads/2012/11/32x32-Square-64-FB.png"/></a>
<a class="social-icons" href="https://twitter.com/YOUR-PROFILE"><img src="http://yourdomain.com/wp-content/uploads/2012/11/32x32-Square-64-TW.png"/></a>
<a class="social-icons" href="https://plus.google.com/YOUR-PROFILE"><img src="http://yourdomain.com/wp-content/uploads/2012/11/32x32-Square-64-GP.png"/></a>
<a class="social-icons" href="http://www.linkedin.com/in/YOUR-PROFILE"><img src="http://yourdomain.com/wp-content/uploads/2012/11/32x32-Square-64-LI.png"/></a>
<a class="social-icons" href="http://pinterest.com/YOUR-PROFILE"><img src="http://yourdomain.com/wp-content/uploads/2012/11/32x32-Square-64-P.png"/></a>
<a class="social-icons" href="http://www.youtube.com/user/YOUR-PROFILE"><img src="http://yourdomain.com/wp-content/uploads/2012/11/32x32-Square-64-YT.png"/></a>
<a class="social-icons" href="http://yourdomain.com/YOUR-RSS-FEED"><img src="http://yourdomain.com/wp-content/uploads/2012/11/32x32-Square-64-RSS.png"/></a>If you want to use the social icons in a WordPress page or post, you will probably have to remove the line breaks between each HTML link as WordPress will sometimes automatically add breaks and put each icon on its own line instead of inline.
Complete example with line breaks removed
<a class="social-icons" href="https://facebook.com/YOUR-PROFILE"><img src="http://yourdomain.com/wp-content/uploads/2012/11/32x32-Square-64-FB.png"/></a><a class="social-icons" href="https://twitter.com/YOUR-PROFILE"><img src="http://yourdomain.com/wp-content/uploads/2012/11/32x32-Square-64-TW.png"/></a><a class="social-icons" href="https://plus.google.com/YOUR-PROFILE"><img src="http://yourdomain.com/wp-content/uploads/2012/11/32x32-Square-64-GP.png"/></a><a class="social-icons" href="http://www.linkedin.com/in/YOUR-PROFILE"><img src="http://yourdomain.com/wp-content/uploads/2012/11/32x32-Square-64-LI.png"/></a><a class="social-icons" href="http://pinterest.com/YOUR-PROFILE"><img src="http://yourdomain.com/wp-content/uploads/2012/11/32x32-Square-64-P.png"/></a><a class="social-icons" href="http://www.youtube.com/user/YOUR-PROFILE"><img src="http://yourdomain.com/wp-content/uploads/2012/11/32x32-Square-64-YT.png"/></a><a class="social-icons" href="http://yourdomain.com/YOUR-RSS-FEED"><img src="http://yourdomain.com/wp-content/uploads/2012/11/32x32-Square-64-RSS.png"/></a>
More Icon Packs & Design Resources!
Stay tuned! We’ll be releasing several additional icons packs shortly featuring different shapes — plus, we’ll be bringing you even more design resources. Until next time …
About Jennifer Bourn
1680 FREE Polaroid-Style Social Media Icons
1680 FREE Speech Bubble Social Media Icons
FREE Tone-on-Tone Speech Bubble Social Media Icons
FREE Tone-on-Tone Polaroid-Style Social Media Icons
FREE Tone-on-Tone Star Social Media Icons
WOW! What a Christmas gift! This is very cool Jennifer! Very very cool.
Thanks,
Michele Jennae
You’re welcome Michele! Look out next for tone-on-tone squares … and after that circles!
Jennifer what a great example of illustrating the importance of brand consistency. And, as your business demonstrates so well, constantly seeking ways to provide high quality content, and added value to your community. Thanks, I’ll take mine in purple.
Awesome Sherri! Those icons are so important for social proof, but you don’t want them to stick out and steal attention from your content! That’s why I love them in branded colors!
Hooray! Super idea. I have seen a couple of other folks on FB sharing this post of yours with their friends and fans. It’s a great idea to share with others. Thanks for taking the time and giving of your fantastic talent!
Can you say Viral?
Amy
Thanks Amy! I see so many sites with these added and they look so bad, we figured this would be a great way to help them make their site m,ore attractive — and on brand :)
Wow, what a great resource, Jen. Thanks so much for sharing these.
No problem Sue! Soon we’ll be releasing other shapes too!
Very Cool Jen – Thank you for sharing these AND the code!
The code that adds the opacity effect on hover is awesome. It makes them act more like buttons and makes it obvious that they are clickable icons.
Thanks Jennifer! I will pass these along to my web developer/designer as well.
Please do Mary Ellen! We welcome anyone to download these and use then on their sites, or client sites … and of course we’d love any shares online!
Very useful icons Jennifer. Thanks for your great work !
Thanks Adrian!
Thanks for the icons and the tips on how to use them.
Jennifer these are awesome and I love having the code! I can’t wait to use these!
I should start on my own sites first :)
Wow! I was looking all over for icons that would fit my new design and never even thought of icons like these. They are sleek and fit in without distracting or being an eye sore. Thanks!
It’s not a big deal at all, but any plans to update the Google+ icon with their newer logo where the g+ is all inside the square? Hopefully they’ve finally settled on a logo and will stop changing it every few months! Thanks again! – Jeremy
Glad you like our icon sets. Right now we aren’t planning to update the Google Plus icons. We may in the future and if we do we’ll post about it on our blog and send out an email notification to our subscribers.
I’m having trouble getting the hover effect to work.. :s what am I missing ?
Hello Jennifer,
Love your buttons! I placed the orange ones on my blog and they look awesome!
Thank you so much!
Gabriela
Thank you!! I really don’t know how these are free, but thank you!