Social media means the world to today’s popular websites, and it is responsible for the occurrence of an advantageous psychological phenomenon called ‘social proof’. Website owners take advantage of this phenomenon (namely, the possibility to share content with larger audiences) to reach a variety of prospective readers, who also share content with each other.
That’s why it is so difficult to find a website which doesn’t include a set of social media vector icons. Soon, this will become completely unthinkable!
Social media icon sets drive traffic to your website more than any other tool you’ve considered for the purpose, which is exactly why designers never fail to incorporate them into their designs. The purpose of today’s article is to present few amazingly creative and free social media icons which can help your blog/website.
In case you’re looking for such, you came to the right place: the text summarizes a dozen great practices which may be exactly what you’re looking for.
The truth is that even the most detailed research on social media icons will overwhelm you with fantastic icon ideas and choices, which will make choosing the right set more difficult than you could ever imagine. Both when you’re looking for a new collector’s pack and updates for your existing collections, there will be hundredths of psd, ai, and eps icons, all of them guaranteeing high-quality output.
The good side of such supply is that there will always be a set to suit your project the best, especially when working with light themes where almost no alteration will be needed to add the icons. Premium themes, on their behalf, are already packed with ready-to-use amazing icons, which may or may not be what you’re looking for.
Iconscout: 127,540+ royalty-free images are available for Social Media apps
This stunning social media icons by Iconscout comes in various styles. These beautifully designed icons can be edited and their colours can be adjusted as per requirement too.
Somacro: 45 300 DPI Social Media Icons
Free Social Icons
Somicro: 45 Free Social Media Icons
Free Social Media Icon Set, Always Updated!
Social Media Vector Icons (Freebie)
Iconza Circle Social
Free Social Media Icons
Picons Social
True Social Buttons
Free circle icons for designers
Social Media
50 Free Flat Icons (Sketch & Illustrator)
Freebie: Flat Social Icon Set
20 Social Media Icons (Freebie)
Flat social icons eps
Flat Social Icons (Freebie)
Miu social
Simple Flat Social Media Icons (PSD & PNG)
Free Social Media Icons
230+ High-Quality Shaded Social Media Icons | Free & Premium Version
Social icons set
Beautiful & Free Social Media Icons
CapSocial Round
FREE ICONS
Free Vector Polygon Social Media Icons
Black and White Social Media Icons FREE!
Flat Shadow Social Media Icons
Free Social Media Icons
Free Social Media Icon Set
230+ Free iOS 9 Style Social Media Icons Set | Free & Premium Version
42 Long Shadow Social Icons(PSD)
20 SOCIAL MEDIA BADGES
Social Media Icons
Mitrious Social Icons
Free Long Shadow Social Media Icons
30 Free Flat Style Social Media Icons
15 Free Social Media Icons (PSD & PNG)
Social Media Long Shadow Icon Set
Rounded Social Media Icons Set
Stackicons-Social
Freebie: iOS7 Style Social Media Icons
Pen Sketch Icons Set
As you can see, free social media icons will bring lots of fans on board and will keep them engaged with applications, games, or even mobile-friendly websites.
Check out: King Line Icons Bundle
The standardized guidelines for social media icons usage
Facebook does not permit the change of their logo colors or allow the usage of any images or icons to represent Facebook other than the two logos for online usage found in their resource center.
Blue/white or just plain white. Options baby! Any other usage must be approved by Facebook. Certainly, some sites using illegal icons have taken this step. The majority probably have not.
To ensure accurate and consistent use, never alter, rotate, embellish or attempt to recreate the “f” logo. Don’t alter the rounded box shape or alter the proportions, or add any embellishment.
Check out: Decorative Elements Bundle
In a fashion similar to Facebook, Twitter does not allow for the recoloring of its trademarked icon. Put a bird on it! But make sure it’s a fashionable light blue.
Don’t:
- Use speech bubbles or words around the logo
- Rotate or change the direction of the logo
- Animate the logo
- Surround the logo with other birds or creatures
- Change the color of the logo
- Anthropomorphize the logo
- Add special effects to the logo
- Use older versions of the logo, previous logos, or any marks that may be confused with the brand
Don’t
- Rotate these marks
- Alter their proportions or colors
- Obstruct them
- Add extraneous effects
Do
- Use these marks in a readable size
- Maintain empty space equal to at least half the height of the logo on all sides
- Keep them straight and free of filters and effects
- Use the red logo on light backgrounds
- Use the white logo on dark backgrounds
Youtube
The identity system must not be altered or manipulated. Always present the logo fully, being clearly visible. The examples to the right illustrate some of the most common application errors.
Do not…
- alter or partially cover the logo.
- alter the proportions, position or letter spacing.
- stretch, condense, distort or separate logo elements.
- alter the color or add effects (drop shadow, glow, etc).
- replace the logotype with another typeface.
- place an image within the logotype.
- rotate (vertically, horizontally or diagonally) or flip.
The YouTube logo cannot be used as part of a sentence. The correct way to do this is to use text in the headline, and place the YouTube logo elsewhere on the page.
On another note, avoid designing so-called custom buttons that depart from these accepted, best practices in button design. There’s always the temptation to make a site’s elements extra fancy to impress clients or to make yourself stand out as a designer, but it’s really not effective, for the reasons outlined above. The worst case scenario is that users fail to understand how to interact with buttons if they’re too customized.
Check out: Free Country Flag Icons Bundle
Determining the best place for the social media icons
How many websites have you been to where you’re searching for social media buttons and just can’t find them? Then, it’s not until you scroll all the way down to the bottom of the page that you see them nestled in the footer. Sometimes, they’re so tiny they might as well not even be there at all.
The positioning of social icons can spell the difference between building social engagement and missed opportunities. There are actually only a handful of locations for social icons that are considered prime real estate:
Header: The header is what attracts the eye of site visitors first. Along with the title of the site and the main navigation, social profile link icons fit right in here.
Sidebar: Positioning social icons near the top of the sidebar is another way to quickly ensure visitors see them. The benefit here is they can be called out with a prominent widget header like, “Follow Me!”
Above or below posts: If your clients want to ensure social engagement, placing share buttons above and/or below blog posts is a good way to accomplish that. This is also the most popular way to go about displaying share buttons. You will find examples of this on big tech or news sites.
Check out: Fully Animated Icons On Mouse Hover
Floating bars: To ensure your client sites get the maximum number of shares possible, installing a plugin that provides some sort of a floating bar is a good solution. The idea behind a floating bar is that it always stays in the visible area of the screen as the visitor scrolls up and down the page.
The point here is to keep the social engagement links within the site visitor’s view and within easy reach as much as possible. If the content is lengthy, then having the icons only in the header and footer doesn’t qualify as keeping them within the visitor’s sight.
Looking for something even more interesting? How about a cool fading-in effect? This gives the icons extreme visibility as they literally jump right at you. When you scroll down, a banner appears across the header that prompts visitors to share the page on Facebook. There are several plugins you can use to achieve this.
I believe that everybody already understands the importance of social media, and incorporating it into a web design. To get the attention of your viewers to your social media links you need to use both strategy and good taste.
To design a good call-to-action social media icon/link you need to think about its positioning, its color, approach, style, size, everything. You also need to keep in mind that you want to get the attention of your viewers to the social side of your website without distracting from what’s important, such as the content.
In my opinion, a good social media link is one that you have no trouble to finding and when you find it, you like what you see.
In order to increase the base of your ‘fans’ and ‘followers’, high importance must be given to the design and the positioning of social media icons, on the pages of your website. Here are some useful Web design tips to help you design and pick the right social media icons for your website.
Check out: Royalty Free Vector Icons Bundle
Choosing the Right Size
The size of social media icons can greatly impact users’ first impression on the design of the site. Tiny icons most often don’t convey their exact purpose to users. Design the icons to make them visually appealing to users.
Bold and attractive icons will definitely direct users to where you want them to go. Moreover, tiny icons do not go well with mobile phones that demand big thumbs for navigation in a smaller screen.
Personalize Your Icons
Social media icons that are unique and interesting will surely grab the attention of visitors as soon as they land on your website. You can make your icons look interesting by personalizing them with respect to your brand. For example, if your website deals with hotels, you could include a cute food symbol on your icon, to make it more impressive.
Convey the Purpose of Icons
People may not be aware of why the social media icons are there. They may not know the real purpose of placing them on a website. Moreover, some may not know to connect the icons with the right media.
For eg, you may know that ‘f’ is for Facebook, but many people might not. So it is better to convey the name of the media beside the respective button. For eg, For the ‘t’ button, specify the word ‘Twitter’ near to it.
Check out: Mega Versatile Creation Kit Bundle
In conclusion
With innovations of web-based technologies, social media is now everywhere, changing the way human interacts. Thus, demands for social media icons are raised within web community especially web designer who creates commercial site or theme.
Social media traffic is too large and too important to relegate to the bottom of your clients’ sites. Social media buttons deserve a prominent position somewhere. It doesn’t have to be in your face, but it should definitely be eye-catching and easy to find.
Basically, if a site visitor likes your client’s content and wants to follow them on Twitter or Facebook, they should be able to do that without having to hunt around for the icons or links.
Most of all, users should understand what social media platform they’re sharing to and how many people have already shared the content before them. To achieve this, each platform’s symbol or logo should be clearly visible to users, along with its distinctive colors.
