Yep. You read that right. If you’re tired of the same old square social media icons or even the tone-on-tone square social media icons we’ve got a treat for you!
We’ve got more icons for you and this time, we’re delivering circle icons for Facebook, Twitter, YouTube, Google+, LinkedIn, Pinterest, and RSS that match your brand and your color palette. Plus, get them in 48 different colors, at 5 different sizes (32×32, 48×48, 64×64, 96×96, 125×125), all as transparent PNGs so you can use them on any color website 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:
Want To Be Notified By Email When We Release The Next Free Design Resource?
Just enter your first name and email address below to sign up for our email newsletter and be notified first when we release future social media icon packs and other design resources.
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
FREE Tone-on-Tone Speech Bubble Social Media Icons
1680 FREE Heart Social Media Icons
1680 FREE Scalloped Edge Circle Social Media Icons
FREE Tone-on-Tone Scalloped Edge Circle Social Media Icons
FREE Tone-on-Tone Star Social Media Icons
There are designers that can make it pretty, coders that can make it work, and marketers that can make it sell — at 
Bourn Creative is a 
Thanks so much for your creative ideas. This is fabulous.
You’re welcome!
Thanks you so much Jennifer :)
Thanks for stopping by! Watch out for more icons packs … we’re releasing one a week!
Thank you Jennifer. Is there a quick way for me to also add one for Instagram?
Hi there,
Great post, thank you for the icons.
Do you know how you can install these social media icons, within a WordPress.org template?
I’m guessing it would probably go within Appearance > Widgets, so that you can edit the code within this. However I wouldn’t know how to get the icons to display within the same line.
If you could provide a guide on how to do this, it would be great.
Many Thanks,
Li
Yes, the easiest way to add these would be to add the code to a WordPress widget. After you upload the icons to your site, the HTML & CSS examples in this post will get them working for you.
Hi Brian,
Yay I finally worked out how to do it after all this time! :)
Thank you so much for your help.
This is great! But can somebody tell me what I did wrong? The links work but the icons are not showing the correct picture on my blog.
my blog is howeyeseeitblog.blogspot.com if that helps
You need to upload the images to your website first, then replace the example link (yourdomain.com…) with the actual path to the images.
Thank you so much for sharing these! I added them to my blog, and they look awesome. So much better than the generic icons! I really appreciate you making them available like this. You don’t by chance have a blog lovin icon in the works, do you?