Bourn Creative

Transforming Businesses into Extraordinary Brands

  • Portfolio
  • Services
  • About
  • Praise
  • Contact
  • Blog
  • Start Your Project
Square Vector Social Icons
standard icon

1680 FREE Square Social Media Icons

December 5, 2012 Jennifer Bourn

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

Free Square Social Media Icons in 48 Different Colors

Download The Square 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 …

TwitterFacebookLinkedIn

Category: Design Tools & Resources Tags: Social Media Icons

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?

About Jennifer Bourn

Creative Director · Digital Strategist · WordPress Evangelist

As founder of Bourn Creative, Jennifer is an award-winning designer who has been working in the branding and design trenches since 1997. Today she consults on brand development, website strategy, and content strategy, works closely with clients on graphic design and web design projects with WordPress as her platform of choice.

When not immersed in client projects, Jennifer manages the Bourn Creative brand and our internal systems and processes. She speaks often on podcasts, summits, and at live events, and writes not only for our blog, but for several other websites, sharing her expertise on freelancing, client services, agency growth, blogging, marketing, and branding. Jennifer also co-organizes the Sacramento WordPress Meetup and is lead organizer for WordCamp Sacramento.

Discover What We Can Do For You

Have a project you think we'll like? Click the button below and tell us about it.

We love working with enthusiastic clients who are as passionate about their business as we are about strategy, design, and development. If that sounds like you, we should talk.

Start Your Project

Bourn Creative

  • Follow Us On Twitter
  • Like Us On Facebook

Copyright © 2021 Bourn Creative, LLC. All Rights Reserved.

Privacy | Disclaimer