standard icon

1680 FREE Circle Social Media Icons

UPDATED October 2014: Free circle social media icon set expanded to include Instagram, Pinterest, Dribble, Behance, and more — in vector format.

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!

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 Circle Vector Icons

Original Icons In a Rainbow Of Colors

Free Circle Social Media Icons in 48 Different Colors

Download The Circle Icon Set
 

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 …

Subscribe To Our Blog & Never Miss A Thing

Sign up to get new our latest posts and announcements delivered straight to your inbox. Seriously, at this point, what’s one more email?



Comments & Feedback:Check out what others have to say about this post!

  1. 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

  2. Ricci Smalls

    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.

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

  4. Bonnie

    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!

  5. 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!

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

  7. Jessica

    These are great! However, it would be great if the Instagram was included in the Circle Icon Set (second download). Do you foresee adding it to the collection?

Share Your Thoughts & Opinions!

Have something to say, add, or share? Speak up!