In this guide you’ll find:

Free Downloads

Detailed instructions for each particular platform follow, but for starters, here are the files.

Logos of Facebook, Twitter, and Google+

All logotypes come in various styles

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

Snippets and JavaScript Libraries

Below we hand-picked the solutions that we tried while developing Icons8 and that worked great for us: snippets, JavaScript libraries, and stuff like that.

While there are multiple solutions for each of the case, we’ve preferred:

  • Lightweight solutions over heavy ones. If one can share a text with a plain link, why to load heavy JavaScript libraries?
  • Free and open source over adware and trackware. There are “free” services that track you and sell data to advertisers. No way!

Blogs

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.

ultimate-social-icons

Install Ultimate Social Media

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:

    1. Search for the icon you need. For example, twitter icon

search twitter icon

    1. Click on the name of the icon in the right panel to open that icon’s page.twitter icon html code
    2. Now press the “Generate HTML” button

social media icons html code

  1. Choose “Our CDN” tab, icon size (48 px is a common choice) and copy the code somewhere. We’ll soon use it
  2. 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.

<img scr="https://...>

– 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.