UPDATED October 2014: Free square social media icon set expanded to include Instagram, Pinterest, Dribble, Behance, and more — in vector format.
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!
New Updated Vector Social Media Icon Pack
Due to popular demand — yes we have been paying attention to the Contact Form requests for additional icons — We have made available an expanded icon set in vector format. In the zip file, you’ll receive the Adobe Illustrator AI and EPS file, a PDF, an unflattened PSD, and a JPG image of the icon set. This means you’ll have everything you need to make the icons any color you want, and you can even use them as part of your own custom icon font.
Download The Square Vector Icons
Original Icons In a Rainbow Of Colors
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 …
