Social Media Icons for Email Signatures

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

Download Free Generic Icons for Email Signatures

How to Add Social Icons to Your Email Signature

Many online tutorials instruct you to add social icons to your email signature using a word processor, or just add them directly in your email client’s signature editing panel. As someone who has been creating email signatures every single day for over a decade, I can tell you that this is terrible advice – and here is why you shouldn’t create signatures with a word processor.

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.

gimmio-social-icon-editor

Add Social Icons Manually (requires HTML coding)

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.

email-signature-html-tables

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

email-signature-social-icon-table-structure

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

email-signature-chrome-inspect-social-icon

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.

email-signature-open-html-file-sublime1

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.

email-signature-inspect-element-chrome

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.

email-signature-sublime-search-img-tag

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.

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

Examples of Email Signatures with Social Icons