Awesome Social Media Icons For Website Design

Posted by Hunter Liptrap on Feb 11, 2015
Hunter Liptrap

5209796269_3b538042c8_o.png

Social media can be an avenue of great adventure for your website and branding. Positioning your brand as an industry thought leader and engaging in a social setting are important keys to the success of many brands today.

Social networks are a place to take break from the boring "About Us" page and define the personality of your brand. Using social media to make connections, update followers and tell the story of what goes on behind the scenes at your business in a lighter tone brings life and humanity to brands.

What does that mean for you? It means that your brand lives on more places than just your website online. That's where social media icons for website design come in to play. Implementing social media icons on your website is the path that takes visitors from your website to a more informal setting to learn about your company.

Professional Social Media Icons For Website Design

Social media icons come in a variety of different shapes, sizes, colors and every other variable you can think of. However, if you want to design a website that looks like it was professionally designed within the last year, your options are more limited. If this is the look you are going for, here are a few of the best options.

Super Awesome Icons

Social Media Icons

From Design Deck

[stag_button url="http://designdeck.co.uk/a/1289/112-Super-Awesome-Icons" style="orange" size="medium" type="normal" target="_blank" icon="" icon_order="before"]Download[/stag_button]

This is honestly the first and arguably the last option in social media icons for website design. The simplistic design is what is key. No boxes, no circles, no gradients, no shadows, no color variation, just plain and simple icons that look good on every website.  The Icon Set includes:

  • 112 icons at 512px, 256px, 128px, 64px and 32px all icons are 100% resizable vector shapes.
  • The original PSD is included and all the icons are named and super easy to adjust/update.
  • There are 560 Icons in total included in the Premium Download.
  • The social icons above (28 icons in total) are available to download for free

If you want further proof of this as the go-to style for social media icons on the web today, look no further than recent awwwards winners. There are quite a few that use icons of this style, but here are a few, just to show off.

[stag_columns][stag_one_third]Social Media Icons For Website[/stag_one_third] [stag_one_third]Social Media Icons for Website[/stag_one_third] [stag_one_third_last]Social Media Icons for Website[/stag_one_third_last] [/stag_columns]

All these websites utilize the same style of icon, despite being in different industries and placing their icons in different places. It is a testament to not only web design, but to the utility and design of this particular style of social media icons.

There is one other style of icon that is still used in some of the best website designs. Again, if you visit awwwards you will come across of few websites using a style found in the icon set below.

FREE SOCIAL MEDIA ICONS

Social Media Icons for Website

From Daniel Oppel

[stag_button url="https://dribbble.com/shots/1509889-Free-Social-Media-Icons" style="orange" size="medium" type="normal" target="_blank" icon="" icon_order="before"]Download[/stag_button]

In defense of Daniel's icon set, his set also includes a version of these icons without the circles as well as several other versions, including color options and transparent options. In fact, there are eight different sets contained in this one download and all in vector form.

Here's an example to admire.

Social Media Icons for Website

Obviously this is a visually stunning website. The reason you would want to use social media icons with a solid circle background and a transparent logo is if the simple, solid, icon doesn't provide enough contrast. On this webpage, you can see that the Facebook "f" just wouldn't pop at all if it had no background. This style is a great alternative that can really make social media icons pop off a website's dynamic or darker background.

What If You Want to be Different?

I'm glad you asked. If you don't want to follow the crowd, your options of social media icons for website design really open up.

Long Shadow Social Media Icons

Social Media Icons for Website

[stag_button url="http://graphicburger.com/40-social-media-flat-icons/" style="orange" size="medium" type="normal" target="_blank" icon="" icon_order="before"]Download[/stag_button]

These types of icons are hyper-stylized and provide more depth. This is definitely a style that goes better with certain website designs more than others. This particular set includes 40 social media icons, inspired by Google's new visual style. Each icon comes in four different sizes (32×32 px, 64×64 px, 128×128 px, 256×256 px) and is optimized to align perfectly on a pixel grid.

Sketchy Social Media Icons

Social Media Icons for Website

[stag_button url="http://www.webhostingsecretrevealed.net/discount-freebies/free-icons/sketchy/" style="orange" size="medium" type="normal" target="_blank" icon="" icon_order="before"]Download[/stag_button]

Got more of an artsy or retro feel to your website? These icons are for you — and happen to be my personal favorite that I have found. Sketchy is a colorful icon set for all major social media and frequently-used blogging platforms, including Facebook, LinkedIn, Blogger, Flickr, Google Plus, MySpace, Vimeo, YouTube, Reddit, Vimeo, Yahoo!, RSS and more. This icon set blends well with blogs or sites in ‘hand-sketch’ style (hence the name, Sketchy).

Ribbon Social Media Icons

Social Media Icons for Website

[stag_button url="http://www.designbolts.com/2012/09/25/18-free-ribbon-social-media-icons-png-256-px/" style="orange" size="medium" type="normal" target="_blank" icon="" icon_order="before"]Download[/stag_button]

Looking for something with a little more flair or going for that tabbed look? Here you go. These can be placed in either the header or the footer as a way to maybe not-so subtly attract visitors' attention to your social media icons.

Retro Social Icons

Social Meda Icons for Website

[stag_button url="http://brainleaf.eu/index.php/free-icons/62-free-retro-social-icons-by-brainleaf" style="orange" size="medium" type="normal" target="_blank" icon="" icon_order="before"]Download[/stag_button]

Straight old school vibe and I'm loving it. While clearly not for everyone, this icon set is the best there is for those retro-hipster websites.

Conclusion

There are hundreds, maybe even thousands, of social media icons out there on the web by now and most of them are good choices. The examples shown and described above are the ones that stick out to me as the best options for web design in 2015. Some them are more versatile than others, but just make sure they are visible wherever you use them and they will do their job.

Photo Credit: Social Media Icons

Author
Hunter Liptrap

Hunter Liptrap

Creative Director at Modgility
Hunter is Certified Inbound Marketing, Growth Driven Design, and HubSpot Design. He has a passion for the conversion rate optimization process. With 3 years of experience he has designed and built multiple websites across various industries.

Leave a Comment: