In this guide you’ll find:
- Free downloads of social media icons: Facebook, Twitter, LinkedIn, Google+, and 7 other ones. Each icon comes in various styles: line, filled, more simplified, less simplified, or color.
- How-tos for different web-, mobile-, desktop platforms, and print.
Detailed instructions for each particular platform follow, but for starters, here are the files.
Feel free to download them in any format:
- PNG of different sizes – the easiest way to almost any platform
- SVG – great for web. See our best way to insert SVG icons
- PDF – best for inserting icons into iOS apps in Xcode. See our howto
- EPS – some people prefer it, though PDF is just about the same, but better
- As a font – some front-end developers prefer that
While there are multiple solutions for each of the case, we’ve preferred:
- Free and open source over adware and trackware. There are “free” services that track you and sell data to advertisers. No way!
If you use WordPress or Blogger, you’re done in 5 minutes or less.
Add Social Media Icons to WordPress
You got a lucky ticket. Install any WordPress social media plugin you like, and here you go.
Here is the one we’ve been using for a long time, called Ultimate Social Media. The name ain’t no pretty, but it has multiple styles of the social buttons, some are ridiculously hot and some are pretty… worth the name.
If you want to add custom social buttons, or customize their layout, use these thorough instructions on widgets.
Add Social Media Icons to Blogger
We’re not big fans of this platform, nonetheless here’s the video instruction:
Add Social Media Icons to an E-mail Signature
Whether you are using Gmail or any other mailing service, the approach is the same:
- Click on the name of the icon in the right panel to open that icon’s page.
- Now press the “Generate HTML” button
- Choose “Our CDN” tab, icon size (48 px is a common choice) and copy the code somewhere. We’ll soon use it
- Find and open signature configuration in your mailing program or service and paste this:
<a href="https://twitter.com/YourTwitterAdress" target="_blank"> <img alt="twitter" src="https://maxcdn.icons8.com/Color/PNG/48/Social_Networks/twitter-48.png" style="margin:0 10px; width:36px"></a>
Keep in mind, you have to change 2 things in this code:
<a href = "https:// ...>
– here you should paste a link people will be redirected to by pressing this twitter icon button (or any other icon you chose) in your signature.
– use the code we copied from step 5 here.
Add Social Icons to Mac OS X App
Use NSSharingService classes:
NSArray* array = @[ @"myText", [NSImage imageNamed:@"myImageFile"] ]; NSSharingService* sharingServiceFB = [NSSharingService sharingServiceNamed:NSSharingServiceNamePostOnFacebook]; [sharingServiceFB performWithItems:array];
For any item or group of items, the NSSharingService will display a sharing sheet to allow the user to pre-visualize what will be shared to the service. A sharing service can: create a post on a social network like Twitter or Facebook, send a message by email or iMessage, upload videos to viewing services, or send a file by AirDrop.
Here’s a video tutorial:
20 Minute Tutorial of Adding Icons
Add Social Icons to iOS App
Starting from iOS 6, Apple introduced Social Framework.
And every major network (e.g. Facebook) has its own guide.
Also, check out this all-in-one open source library.