Social Media Icons for Email Signatures

With the rise in everyday reliance on social media platforms for things like customer reviews and promotions, it’s little wonder that social media icons are now seen as an integral part of every email signature. In this article, you can download all the social media icons for email signatures, and also find instructions on how to add them to your signature.

Whether you’re trying to set up social icons for Outlook, Gmail, Apple Mail, Office 365, or any other email client, the instructions and icons you will require will be the same.

Download Free Social Media Icons for Email Signatures

AirBnB Icons

Alibaba Icons

AliExpress Icons

Amazon Icons

AngelList Icons

Apple Icons

Apple App Store Icons

Apple iTunes Icons

Ask Icons

Baidu Icons

BBB Icons

Behance Icons

Bitbucket Icons

Bitcoin Icons

Blogger Icons

Booking Icons

Calendly Icons

Craigslist Icons

DeviantArt Icons

Digg Icons

Discord Icons

Dribbble Icons

Ebay Icons

Ello Icons

Ethereum Icons

Etsy Icons

Eventbrite Icons

Evernote Icons

Facebook Icons

Facebook Messenger Icons

Fiverr Icons

Flickr Icons

Flipboard Icons

Foursquare Icons

Freelancer Icons

Github Icons

GitLab Icons

Glassdoor Icons

Google Calendar Icons

Google Drive Icons

Google Hangouts Icons

Google Messages Icons

Google My Business Icons

Google Photos Icons

Google Play Icons

Google Plus Icons

Google Icons

HomeAdvisor Icons

Homes Icons

Homify Icons

Houzz Icons

IMDB Icons

Imo Icons

Instagram Icons

Kickstarter Icons

Kuaishou Icons

Line Icons

LinkedIn Icons

Medium Icons

Meetup Icons

Microsoft Teams Icons

Mixcloud Icons

Myspace Icons

Netflix Icons

Nextdoor Icons

Patreon Icons

Paypal Icons

Pinterest Icons

Product Hunt Icons

QQ Icons

Quora Icons

QZone Icons

Realtor Icons

Reddit Icons

Resident Advisor Icons

ReverbNation Icons

Shopify Icons

Skype Icons

Slack Icons

SlideShare Icons

Snapchat Icons

SoundCloud Icons

Spotify Icons

Squarespace Icons

Stack Overflow Icons

Steam Icons

Telegram Icons

TikTok Icons

Trello Icons

Tripadvisor Icons

Tumblr Icons

Twitch Icons

Twitter Icons

Unsplash Icons

Upwork Icons

Viber Icons

Vimeo Icons

WeChat Icons

Weibo Icons

WhatsApp Icons

Wikipedia Icons

Wordpress Icons

Yelp Icons

YouTube Icons

Zillow Icons

Zomato Icons

Zoom Icons

Download Free Generic Icons for Email Signatures

Calendar Icons

Email Icons

Home Icons

Hyperlink Icons

Map Icons

Map 2 Icons

Mobile Icons

Podcast Icons

RSS Icons

Telephone Icons

Website Icons

World Icons

How to Add Social Icons to Your Email Signature

There are several ways to add social media icons to your email signature.

You can use a signature generator tool like Gimmio that allows you to customize a professional signature with social icons included.

Another option is to add your social icons using your email program’s built-in signature editor. However, not all email programs have this option, and the ones that do, have limited functionality.

Alternatively, you can manually edit your signature’s HTML code – this requires a basic understanding of HTML.

Add Social Icons Using Gimmio (recommended)

Adding social icons to your email signature is really easy when you use an email signature tool such as Gimmio. It has an in-built social icon generator, where you can easily create social media icons for email signatures.

For each social media platform, there are millions of style and color combinations available. This makes it really easy to match your company colors and style with your email signature.

What’s more, you won’t have to do any coding at all! Just select the social platform, shape, and colors that you want to use, and your icon will appear. Easy as that!

Using a tool like Gimmio will also ensure your email signature is compatible with many email clients, so it always looks great.

Add Social Icons in Your Email Program

You can often add social media icons to your email signature by editing the signature in your email program’s settings. Keep in mind that not all email clients support the use of social icons (images) in signatures.

Select your email program below for instructions on how to add social icons.

Outlook (Windows)

Outlook for Mac

Outlook App (iOS)

Outlook App (Android)

Add Social Icons Manually in Your Signature HTML Code

Adding social icons to your email signature requires that you modify the HTML of your email signature. However, if you’ve used one of our free email signature templates as a base for your email signature, you’re in luck – adding or changing social icons shouldn’t be too hard!

1. Before getting started

To make life easier for yourself, you’ll need a couple of tools that will help you view and change HTML code.

Sublime Text – or any other good text editor which makes it easy to work with HTML.

Google Chrome – I suggest using Chrome to copy email signatures, as some other browsers don’t copy HTML tables correctly.

2. Understanding HTML Tables

Because HTML email signatures are made using tables, you will need to learn a little bit about HTML tables before going further.

However, to save you hours of reading, here is the structure of a HTML table and an explanation for each part below.

Here is also a visualization of what the above table would look like when rendered, with the applicable parts highlighted.

—– This is where the table starts and ends.

—– Within the opening and closing of the table body <tbody> tag is where the rows and columns of the table are placed.

—– Within the opening and closing of the table row <tr> tag is all the data that is inside that row.

—– This is also known as a column. Within the opening and closing of the table data <td> tag is all the data that is inside that column.

—– Within the opening and closing of the <a> tag, are all the elements that will be linked to the href location. Href is an attribute of the <a> tag.

In the example above, there is a table, which has 1 row, with 2 columns inside it.

Inside the first column, is an image of the Facebook social icon. Inside the second column is an image of the Twitter social icon.

To add another row, you would simply place another set of <tr></tr> tags just after the existing closing </tr> tag. Then, you would place <td></td> tags (which are essentially columns) inside them. Finally, you would place something inside the <td> tags, such as an <img>.

An important point to remember is that tables can be nested. Meaning, you can have a table element inside another table element.

Now that you understand a bit more about HTML tables, we can move on to the next section.

3. Inspecting HTML code

People that are new to coding HTML are often afraid to change code because it’s difficult to visualize the changes.

Using Google Chrome (or most other web browsers), you can easily inspect HTML elements to get a better understanding of how they work and how everything ties together.

We will be inspecting code using Chrome in this guide, so it’s important to know this part.

To inspect HTML code, you will need to open your HTML file using Chrome. If your file has a .html extension, you can just double-click on it.

Once you’ve opened it, right-click on the part you wish to inspect (such as a social icon), and click “Inspect”. This will open up the HTML code where the social icon is located.

This allows you to see which part of the HTML code is responsible for displaying the part you’re inspecting.

4. Open your signature HTML file

Open your signature HTML file using Sublime Text, or another text editor. This file will contain all the HTML code inside it that makes up your email signature.

Right-click on the file > Open with > Sublime Text

If you have Sublime Text installed but don’t see it on the list, click on “Choose another app” and then select it from there.

5. Locate where to add the new social icon HTML code

Since there can be hundreds of lines of HTML code in your file, it can be hard to find exactly where the new social icon code should go, but there are some tricks.

Remember, you can always use Google Chrome to open your email signature so you can inspect elements. This makes it much easier to visualize the table rows and columns and see how the HTML code works.

If your email signature already has some social icons

As social icons are images, most of the time they will be inserted using <img> tags.

Press Ctrl + F to find > type in “<img”. Make sure you don’t type in the closing “>” bracket.

You will likely find a few results by doing this search, especially if you have a logo, banner, or any other images in your email signature. You will need to go through the results you get, and try and figure out which ones are the social icons. A good way to figure out which ones are social icons is to look at the file name of the image, eg. “facebook.png” or “twitter.png”. If that doesn’t give it away, take a look at the “alt” attribute to see if there is anything in there to identify it.

If you still cannot figure out which of the <img> tags are the social icons, open your HTML file with Chrome and inspect the elements.

Now you know which part of the code in your HTML file is responsible for the social icons, it should just be a matter of adding a new <td> tag inside your existing <tr> tag and placing your new icon <img> tag inside the new <td> tag.

If your email signature doesn’t have any social icons

You will need to look at your email signature code to try and identify a place where you can add your social icon code.

Some things to identify in your HTML code:

Does your code already have <table> and <tdata> tags?
Can you see where the last <tr> tag is?
Are there any <td> tags inside the last <tr> tag?

Most of the time, it should just be a matter of adding a <tr> and <td> inside an existing <table> and then adding a whole new <table> for the social icons you wish to add, inside the new <td> tag.

A great way to test whether you’re on the right track is to have the HTML file open in both Sublime and Chrome. Then, in Sublime, add the test code below in the location where you think the social icons should go, save the changes (Ctrl + S), switch over to Chrome, and refresh the page (Ctrl + R). Remember, you can always undo (Ctrl + Z) in Sublime if you make a mistake.

<div style="font-size:14px !important; color:red !important;">
this is a test
</div>

social-media-icons-testing-code-placement

Once you’ve found the correct location, you can then replace the test code with the real HTML table (below).

6. Add HTML code for the new social icons

Here is a template HTML table you can use to add social media icons for email signatures.

The template below has some additional features such as:

styling parameters on all elements to increase compatibility between email clients – this makes the formatting of your social icons look good no matter what email client the recipient uses to open your email.
<td> tags used for spacing between the social icons.
items marked with <<< >>> which should be changed to suit your needs.

<table border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;">
  <tbody>
    <tr>
      <td style="padding: 0px !important;">
        <a style="font-size: 0px; line-height: 0px;" target="_blank" rel="nofollow" href="<<<https://facebook.com/profile>>>">
          <img height="24" width="24" alt="<<<description of your social icon, eg. facebook>>>" border="0" src="<<<link to the image of your social icon, eg. https://domain.com/facebook.png>>>">
        </a>
      </td>
      <td style="border-collapse:collapse;padding-right:5px;width:5px;"></td>
      <td style="padding: 0px !important;">
        <a style="font-size: 0px; line-height: 0px;" target="_blank" rel="nofollow" href="<<<https://instagram.com/profile>>>">
          <img height="24" width="24" alt="<<<description of your social icon, eg. instagram>>>" border="0" src="<<<link to the image of your social icon, eg. https://domain.com/instagram.png>>>">
        </a>
      </td>
      <td style="border-collapse:collapse;padding-right:5px;width:5px;"></td>
      <td style="padding: 0px !important;">
        <a style="font-size: 0px; line-height: 0px;" target="_blank" rel="nofollow" href="<<<https://linkedin.com/profile>>>">
          <img height="24" width="24" alt="<<<description of your social icon, eg. linked in>>>" border="0" src="<<<link to the image of your social icon, eg. https://domain.com/linkedin.png>>>">
        </a>
      </td>
      <td style="border-collapse:collapse;padding-right:5px;width:5px;"></td>
      <td style="padding: 0px !important;">
        <a style="font-size: 0px; line-height: 0px;" target="_blank" rel="nofollow" href="<<<https://twitter.com/profile>>>">
          <img height="24" width="24" alt="<<<description of your social icon, eg. twitter>>>" border="0" src="<<<link to the image of your social icon, eg. https://domain.com/twitter.png>>>">
        </a>
      </td>
      <td style="padding: 0px !important;"></td>
    </tr>
  </tbody>
</table>

Bonus Tip

When changing the href attribute of the <a> tags to allow your social icon to be clickable, make sure you use a URL shortening service for your social profile. For example, if you are adding a Facebook icon to your email signature, first copy the URL of your Facebook profile, go to a service like bit.ly, and shorten your Facebook profile URL. Then insert that shortened URL as the link on your social button.

The reason you would do this is some social media app’s on smartphones will automatically open links that are to do with their brand. For example, if you try to open a conventional ‘https://www.facebook.com/yourprofile’ link on a smartphone, it will automatically open in the Facebook app rather than in a browser, and you might not want that.

Doing this also reduces the number of HTML characters in your email signature, which could be beneficial for overcoming the 10,000 Gmail character limit on email signatures.

Example HTML Code Placement for Social Icons

Here’s the HTML code for an entire email signature, which shows you where to place the social icon code (shown in bold).

This should help you better understand where to insert your code.

Email Signature HTML Code (social icon code shown in bold)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
    <table id="zs-output-sig" border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse; width:425px;">
      <tbody>
        <tr>
          <td style="padding: 0px !important;">
            <table border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;">
              <tbody>
                <tr>
                  <td style="padding: 0px !important;">
                    <table border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;">
                      <tbody>
                        <tr>
                          <td style="padding: 0px !important;">
                            <table border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;">
                              <tbody>
                                <tr>
                                  <td style="padding: 0px !important;">
                                    <table border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;">
                                      <tbody>
                                        <tr>
                                          <td style="border-collapse:collapse;font-family:Tahoma, Geneva, sans-serif;font-size:14.0px;font-style:normal;line-height:16px;font-weight:400;padding: 0px !important;">
                                            <span style="font-family:Tahoma, Geneva, sans-serif;font-size:14.0px;font-style:normal;line-height:16px;font-weight:400;color:#8b8b8b;display:inline;">Kind Regards,</span>
                                          </td>
                                        </tr>
                                        <tr>
                                          <td style="border-collapse:collapse;padding-bottom:7px;height:7px;"></td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td style="padding: 0px !important;">
            <table border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;">
              <tbody>
                <tr>
                  <td width="179" style="padding: 0px !important;">
                    <table border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;">
                      <tbody>
                        <tr>
                          <td style="border-collapse:collapse;line-height:0px;padding: 0px !important;">
                            <img height="93" width="179" alt="" border="0" src="https://img2.gimm.io/81d7bb44-77e9-4d1d-bbbe-cf58ca947cac/img.png">
                          </td>
                        </tr>
                        <tr>
                          <td style="border-collapse:collapse;padding-bottom:10px;height:10px;"></td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                  <td width="9" style="border-collapse:collapse;padding-right: 9px;width: 9px;"></td>
                  <td style="padding: 0px !important;">
                    <table border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;">
                      <tbody>
                        <tr>
                          <td style="padding: 0px !important;">
                            <table border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;">
                              <tbody>
                                <tr>
                                  <td style="padding: 0px !important;">
                                    <table border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;">
                                      <tbody>
                                        <tr>
                                          <td style="border-collapse:collapse;font-family:Tahoma, Geneva, sans-serif;font-size:14.0px;font-style:normal;line-height:16px;font-weight:700;padding: 0px !important;">
                                            <span style="font-family:Tahoma, Geneva, sans-serif;font-size:14.0px;font-style:normal;line-height:16px;font-weight:700;color:#0482b7;display:inline;">Anne Lyn-Hu&nbsp;</span>
                                            <span style="font-family:Tahoma, Geneva, sans-serif;font-size:14.0px;font-style:normal;line-height:16px;font-weight:400;color:#8b8b8b;display:inline;">Founder&nbsp;</span>
                                          </td>
                                        </tr>
                                        <tr>
                                          <td style="border-collapse:collapse;padding-bottom:1px;height:1px;"></td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                        <tr>
                          <td style="padding: 0px !important;">
                            <table border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;">
                              <tbody>
                                <tr>
                                  <td style="padding: 0px !important;">
                                    <table border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;">
                                      <tbody>
                                        <tr>
                                          <td style="border-collapse:collapse;font-family:Tahoma, Geneva, sans-serif;font-size:14.0px;font-style:normal;line-height:16px;font-weight:400;padding: 0px !important;">
                                            <span style="font-family:Tahoma, Geneva, sans-serif;font-size:14.0px;font-style:normal;line-height:16px;font-weight:400;color:#8b8b8b;display:inline;">VNmagazine.com</span>
                                          </td>
                                        </tr>
                                        <tr>
                                          <td style="border-collapse:collapse;padding-bottom:1px;height:1px;"></td>
                                        </tr>
                                        <tr>
                                          <td style="border-collapse:collapse;font-family:Tahoma, Geneva, sans-serif;font-size:14.0px;font-style:normal;line-height:16px;font-weight:400;padding: 0px !important;">
                                            <span style="font-family:Tahoma, Geneva, sans-serif;font-size:14.0px;font-style:normal;line-height:16px;font-weight:400;color:#8b8b8b;display:inline;">314.948.1139</span>
                                          </td>
                                        </tr>
                                        <tr>
                                          <td style="border-collapse:collapse;padding-bottom:3px;height:3px;"></td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                        <tr>
                          <td style="padding: 0px !important;">
                            <table border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;">
                              <tbody>
                                <tr>
                                  <td style="padding: 0px !important;">
                                    <table border="0" cellpadding="0" cellspacing="0" style="font-family:Arial,Helvetica,sans-serif;line-height:0px;font-size:1px;padding:0px!important;border-spacing:0px;margin:0px;border-collapse:collapse;">
                                      <tbody>
                                        <tr>
                                          <td style="padding: 0px !important;">
                                            <img height="24" width="24" alt="facebook" border="0" src="https://img1.gimm.io/assets/social/96/native/3/facebook.png">
                                          </td>
                                          <td style="border-collapse:collapse;padding-right:5px;width:5px;"></td>
                                          <td style="padding: 0px !important;">
                                            <img height="24" width="24" alt="twitter" border="0" src="https://img1.gimm.io/assets/social/96/native/3/twitter.png">
                                          </td>
                                          <td style="border-collapse:collapse;padding-right:5px;width:5px;"></td>
                                          <td style="padding: 0px !important;">
                                            <img height="24" width="24" alt="linkedin" border="0" src="https://img1.gimm.io/assets/social/96/native/3/linkedin.png">
                                          </td>
                                          <td style="padding: 0px !important;"></td>
                                        </tr>
                                        <tr>
                                          <td style="border-collapse:collapse;padding-bottom:4px;height:4px;"></td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td style="border-collapse:collapse;padding-bottom:8px;height:8px;">
            <span></span>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Frequently Asked Questions

Do I need to use social icons with my email signature?

No, but email signatures are more effective with social icons included. It allows you to social proof your email signature which can greatly benefit your business.

What size social icons should I use with my email signature?

The recommended size for social icons is 96×96 pixels. But in HTML, their height and width should be set around 24 pixels. This helps preserve their quality and eliminates any blurriness when viewed on scaled devices.

What are the most popular social icons for email signatures?

Facebook, Twitter, and Instagram are the most popular social icons used in email signatures.

Should I use a native or custom color for my social icons?

Generally, social icons should use colors that match the email signature and your branding. However, it should be noted that each social media platform has guidelines regarding the use of their respective social icons which you should read.

How do I make custom color social icons for my email signature?

You can use Gimmio’s email signature generator, which has a built-in icon generator to customize social icon colors. Using any image editing software like Photoshop can also work.

Which shape social icon should I use with my email signature?

The shape of social icons will depend on the overall design of the email signature they are included in. The shapes should be uniform and consistent with your branding.

How many social icons is too many in an email signature?

Including more than 5 icons is considered too many. Most email signatures typically include around 4 or fewer social icons.

Where can I download social icons for my email signature?

You can download free social icon packs from the top of this page. Alternatively, you can download each icon from the respective social platform’s marketing pages.