1680 FREE Circle Social Media Icons

1680 FREE Circle Social Media Icons

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:

Free Circle Social Media Icons in 48 Different Colors

Download 1680 Circle Social Media Icons


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

Social Media Icon Hover Effect Sample and Code

<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

As Creative Director of Bourn Creative, Jennifer leads all consulting, strategy, and creative projects. She is an award-winning designer, specializing in custom WordPress theme design, brand design, Legos (Yes, Legos), and graphic design for small business.

Entrenched in the world of online business, Jennifer consults with clients around the world on branding, website planning, and marketing strategies that leverage the internet to generate leads, attract clients, and create opportunities. She speaks regularly at live events, conferences, and workshops around the country, as well as on radio shows, teleclases, webinars, and podcasts.

Bourn Creative Recommends WP Engine

WP Engine WordPress Hosting Gain peace of mind knowing your website (the main source of your online income) is safe, secure, and protected with WP Engine - an insanely fast, infinitely scalable, backed up, secure, expert WordPress hosting company that’s got your back!

Comments & Feedback:

  1. Josette Williams says:

    Thanks so much for your creative ideas. This is fabulous.

  2. Thanks you so much Jennifer :)

  3. Thank you Jennifer. Is there a quick way for me to also add one for Instagram?

  4. 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,

  5. Ricci Smalls says:

    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.

  6. 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?

  7. Hi, thanks a lot!!!

  8. Thanks for sharing these icons!!! I was looking everywhere for circle icons for my blog!! How come you didn’t do one for Instagram?? That’s the only one I’m missing lol!

  9. Hi Team Bourn!! These icons are wonderful, and an absolute godsend. Thank you thank you — I’ve told everyone about them!!

    Quick question: Is there any chance you guys could do an update TUMBLR icons in the set? And INSTAGRAM and QUORA…. but mostly TUMBLR is the big one I’m looking for. Are they available on a secret paid page somewhere? Thanks!

  10. Thank you for the fun bright icons!

  11. Love these – thank you. I used them some time ago and am coming back again for an update.

    Just wondered if you will be releasing some in these colours for instagram??

    Thank you again!

Share Your Comments & Feedback: