1680 FREE Flower Social Media Icons

FREE Flower Shaped Social Media Icons

Hey ladies, mommy bloggers, and girlies … We’ve got a brand new social media icon pack just for you — flowers!

That’s right. We’re getting girly this week with our free flower shaped social media icons for Facebook, Twitter, YouTube, Google+, LinkedIn, Pinterest, and RSS. Add these pretty daisy-shaped icons to your website sidebar, footer, or content area, and add some fun to your site.

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 Flower Social Media Icons in 48 Different Colors

Download 1680 Flower Shaped 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. What a selection of basic and other shapes! I’ll definitely be sharing these! You’ve done a great job with a great resource!

Share Your Comments & Feedback: