Need help with html email signature and Outlook

[AHicks56]

Hi all, firstly let me just say I'm no coder, this is my first attempt so please go easy haha. I've used the Hubspot email signature generator as well as adding some extra elements to create an email signature. I used BBEdit to create a clean html file and when the file is opened in a browser, the signature looks fine, the issue lies when copying into Outlook - for some reason the small icons next to address/email/website come out with lines around the icons and the three images at the bottom either don't appear or they all take on the look of the Follow me on LinkedIn image. Can someone check and see if there's anything I can do so that the signature can look the same in Hubspot and Outlook please? Would be really appreciative. 

<span style="font-family: Tahoma, Geneva, sans-serif; font-size: 16px; line-height: 16px; margin: 0; padding: 0;">
  Kind regards,<br>
  Alec
</span>
<br><br><br><br>

<table cellpadding="0" cellspacing="0" border="0" style="font-size: medium; font-family: Tahoma;">
  <tr>
    <td>
      <table cellpadding="0" cellspacing="0" border="0" style="font-size: medium; font-family: Tahoma;">
        <tr>
          <td style="vertical-align: top;">
            <table cellpadding="0" cellspacing="0" border="0" style="font-size: medium; font-family: Tahoma;">
              <tr>
                <td style="text-align: center;">
                  <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Signature%20headshots/Alec%20Hicks.png" width="130" style="display: block;" alt="Alec Hicks">
                </td>
              </tr>
              <tr><td height="30"></td></tr>
              <tr>
                <td style="text-align: center;">
                  <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/RES%20Stacked%20Grey%20Logo-01.png" width="130" style="display: block;" alt="Rocket Exhibition Services Logo">
                </td>
              </tr>
              <tr><td height="30"></td></tr>
              <tr>
                <td style="text-align: center;">
                  <table cellpadding="0" cellspacing="0" border="0" style="text-align: center; display: inline-block;">
                    <tr>
                      <td>
                        <a href="https://www.linkedin.com/company/rocketexhibitionservices" style="border-radius: 50%;">
                          <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Social%20icons/LinkedIn.png" width="24" style="display: block;" alt="LinkedIn">
                        </a>
                      </td>
                      <td width="5"></td>
                      <td>
                        <a href="https://www.instagram.com/rocketexhibitionservices/" style="border-radius: 50%;">
                          <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Social%20icons/Instagram.png" width="24" style="display: block;" alt="Instagram">
                        </a>
                      </td>
                      <td width="5"></td>
                      <td>
                        <a href="https://www.facebook.com/rocketexhibitionservices" style="border-radius: 50%;">
                          <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Social%20icons/Facebook.png" width="24" style="display: block;" alt="Facebook">
                        </a>
                      </td>
                      <td width="5"></td>
                      <td>
                        <a href="https://www.youtube.com/@rocketexhibitionservices" style="border-radius: 50%;">
                          <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Social%20icons/Youtube.png" width="24" style="display: block;" alt="YouTube">
                        </a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
          <td width="46"></td>
          <td style="vertical-align: middle;">
            <h2 style="margin: 0; font-size: 18px; font-family: Tahoma; font-weight: 600; color: #000;">
              Alec Hicks
            </h2>
            <p style="margin: 0; color: #000; font-size: 14px;">Marketing Executive</p>
            <div style="font-weight: 500; font-size: 14px; color: #000;">Rocket Exhibition Services</div>
            <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
              <tr><td height="30"></td></tr>
              <tr>
                <td style="width: 100%; border-bottom: 1px solid #ec6608;"></td>
              </tr>
              <tr><td height="30"></td></tr>
            </table>

            <!-- Contact Info -->
            <table cellpadding="0" cellspacing="0" border="0" style="font-family: Tahoma;">
              <tr>
                <td width="30">
                  <img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" width="13" style="display: block; background-color: #ec6608;" alt="Phone">
                </td>
                <td><a href="tel:+441476327080" style="text-decoration: none; color: #000; font-size: 14px;">+44 (0) 1476 327080 - 221</a></td>
              </tr>
              <tr>
                <td width="30">
                  <img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" width="13" style="display: block; background-color: #ec6608;" alt="Email">
                </td>
                <td><a href="mailto:alec@rocketglobal.co.uk" style="text-decoration: none; color: #000; font-size: 14px;">alec@rocketglobal.co.uk</a></td>
              </tr>
              <tr>
                <td width="30">
                  <img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" width="13" style="display: block; background-color: #ec6608;" alt="Website">
                </td>
                <td><a href="https://rocket-exhibitions.com" style="text-decoration: none; color: #000; font-size: 14px;">rocket-exhibitions.com</a></td>
              </tr>
              <tr>
                <td width="30">
                  <img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/address-icon-2x.png" width="13" style="display: block; background-color: #ec6608;" alt="Address">
                </td>
                <td style="font-size: 14px; color: #000;">Rocket Exhibition Services, Arnfield House, Swingbridge Road, NG31 7XT</td>
              </tr>
            </table>

            <table cellpadding="0" cellspacing="0" border="0">
              <tr><td height="30"></td></tr>
            </table>

            <!-- Scorecard Button -->
            <span style="display: block; text-align: left;">
              <a href="https://scorecard.rocket-exhibitions.com/scorecard">
                <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Social%20icons/Scorecard.png?randomParam=cta" width="236" height="40" style="border: none; display: block;" alt="CTA Button">
              </a>
            </span>
          </td>
        </tr>
      </table>
      <br>
      <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Signature%20GIF.gif" width="669" height="172" alt="Animated Signature GIF">
      <br>

      <!-- Disclaimer -->
      <table border="0" cellpadding="0" cellspacing="0" style="max-width: 669px; margin: 0 auto;">
        <tr>
          <td>
            <p style="font-family: Tahoma, sans-serif; font-size: 10px; line-height: 1.4em; margin: 0;">
              <strong>Disclaimer:</strong> The information transmitted including any attachments is intended only for the exclusive use of the person(s) or entity to which it is addressed and may contain confidential and privileged material that may be subject to legal privilege. Any perusal, review, retransmission, dissemination, distribution, reproduction or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient without the sender's prior consent is unauthorised and strictly prohibited. If you have received this message in error, please notify the sender immediately and delete the message from your computer without making any copies. Any personal views and opinions expressed in this email message are the sender's own and do not necessarily represent the views and opinions of the company. This footnote also confirms that this message has been swept for the presence of computer viruses but this does not guarantee that it is virus free. Please consider the environment before printing this email ♻
            </p>
          </td>
        </tr>
      </table>

      <!-- Bottom Row of CTA Buttons -->
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td style="padding: 5px;">
            <img src="https://app-eu1.hubspot.com/api/filemanager/api/v2/files/234356133068/signed-url-redirect?portalId=26048386" width="104" height="38" style="border: none; display: block;" alt="CTA 1" />
          </td>
          <td style="padding: 5px;">
            <a href="https://www.reviews.co.uk/company-reviews/store/rocketprintpromotions-com">
              <img src="https://app-eu1.hubspot.com/api/filemanager/api/v2/files/234355183804/signed-url-redirect?portalId=26048386" width="144" height="38" style="border: none; display: block;" alt="Reviews">
            </a>
          </td>
          <td style="padding: 5px;">
            <a href="https://www.linkedin.com/in/alec-hicks-503a56105">
              <img src="https://app-eu1.hubspot.com/api/filemanager/api/v2/files/234356133069/signed-url-redirect?portalId=26048386" width="124" height="38" style="border: none; display: block;" alt="LinkedIn Profile">
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

[Anton]

Hey @AHicks56, 

welcome to the community. 

The reason why the browser displays correctly but Outlook doesn't is that browsers (at least most of them) are build upon newest tech and support almost everything. Outlook on the other hand(the "app" version) is build upon the Word engine (Yes, Word). Outlook 365 (web version), is build on modern technology.... So there are a lot of differences and Outlook (and GMail) are the nightmare of email devs. 🙂 

I'll check the code in a bit and come back to you

best, 

Anton

[AHicks56]

Hi Anton, 

Thanks for the welcome! 

I had no idea Outlook’s app version still relies on the Word engine.. that explains a lot. 😅 No wonder email devs have a love-hate relationship with it (mostly hate, I imagine!). Thank you man, look forward to your findings! 

Don't suppose you'd had chance to look at the code? 

Many thanks, Alec

[Anton]

Hey @AHicks56, 

got caught up yesterday.

Try this code:

 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>
</head>

<body>
	<span style="font-family: Tahoma, Geneva, sans-serif; font-size: 16px; line-height: 16px; margin: 0; padding: 0;">
  Kind regards,<br>
  Alec
</span>
<br><br><br><br>

<table cellpadding="0" cellspacing="0" border="0" style="font-size: medium; font-family: Tahoma;">
  <tr>
    <td>
      <table cellpadding="0" cellspacing="0" border="0" style="font-size: medium; font-family: Tahoma;">
        <tr>
          <td style="vertical-align: top;">
            <table cellpadding="0" cellspacing="0" border="0" style="font-size: medium; font-family: Tahoma;">
              <tr>
                <td style="text-align: center;">
                  <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Signature%20headshots/Alec%20Hicks.png" width="130" style="display: block;" alt="Alec Hicks">
                </td>
              </tr>
              <tr><td height="30"></td></tr>
              <tr>
                <td style="text-align: center;">
                  <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/RES%20Stacked%20Grey%20Logo-01.png" width="130" style="display: block;" alt="Rocket Exhibition Services Logo">
                </td>
              </tr>
              <tr><td height="30"></td></tr>
              <tr>
                <td style="text-align: center;">
                  <table cellpadding="0" cellspacing="0" border="0" style="text-align: center; display: inline-block;">
                    <tr>
                      <td>
                        <a href="https://www.linkedin.com/company/rocketexhibitionservices" style="border-radius: 50%;">
                          <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Social%20icons/LinkedIn.png" width="24" style="display: block;" alt="LinkedIn">
                        </a>
                      </td>
                      <td width="5"></td>
                      <td>
                        <a href="https://www.instagram.com/rocketexhibitionservices/" style="border-radius: 50%;">
                          <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Social%20icons/Instagram.png" width="24" style="display: block;" alt="Instagram">
                        </a>
                      </td>
                      <td width="5"></td>
                      <td>
                        <a href="https://www.facebook.com/rocketexhibitionservices" style="border-radius: 50%;">
                          <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Social%20icons/Facebook.png" width="24" style="display: block;" alt="Facebook">
                        </a>
                      </td>
                      <td width="5"></td>
                      <td>
                        <a href="https://www.youtube.com/@rocketexhibitionservices" style="border-radius: 50%;">
                          <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Social%20icons/Youtube.png" width="24" style="display: block;" alt="YouTube">
                        </a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
          <td width="46"></td>
          <td style="vertical-align: middle;">
            <h2 style="margin: 0; font-size: 18px; font-family: Tahoma; font-weight: 600; color: #000;">
              Alec Hicks
            </h2>
            <p style="margin: 0; color: #000; font-size: 14px;">Marketing Executive</p>
            <div style="font-weight: 500; font-size: 14px; color: #000;">Rocket Exhibition Services</div>
            <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
              <tr><td height="30"></td></tr>
              <tr>
                <td style="width: 100%; border-bottom: 1px solid #ec6608;"></td>
              </tr>
              <tr><td height="30"></td></tr>
            </table>

            <!-- Contact Info -->
            <table cellpadding="0" cellspacing="0" border="0" style="font-family: Tahoma;">
              <tr>
                <td width="30" style="border:none;outline:none">
                  <img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" width="13" style="display: block; background-color: #ec6608;border:none;outline:none" alt="Phone">
                </td>
                <td><a href="tel:+441476327080" style="text-decoration: none; color: #000; font-size: 14px;">+44 (0) 1476 327080 - 221</a></td>
              </tr>
              <tr>
                <td width="30" style="border:none;outline:none">
                  <img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" width="13" style="display: block; background-color: #ec6608;border:none;outline:none" alt="Email">
                </td>
                <td><a href="mailto:alec@rocketglobal.co.uk" style="text-decoration: none; color: #000; font-size: 14px;">alec@rocketglobal.co.uk</a></td>
              </tr>
              <tr>
                <td width="30" style="border:none;outline:none">
                  <img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" width="13" style="display: block; background-color: #ec6608;border:none;outline:none" alt="Website">
                </td>
                <td><a href="https://rocket-exhibitions.com" style="text-decoration: none; color: #000; font-size: 14px;">rocket-exhibitions.com</a></td>
              </tr>
              <tr>
                <td width="30" style="border:none;outline:none">
                  <img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/address-icon-2x.png" width="13" style="display: block; background-color: #ec6608;border:none;outline:none" alt="Address">
                </td>
                <td style="font-size: 14px; color: #000;">Rocket Exhibition Services, Arnfield House, Swingbridge Road, NG31 7XT</td>
              </tr>
            </table>

            <table cellpadding="0" cellspacing="0" border="0">
              <tr><td height="30"></td></tr>
            </table>

            <!-- Scorecard Button -->
            <span style="display: block; text-align: left;">
              <a href="https://scorecard.rocket-exhibitions.com/scorecard">
                <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Social%20icons/Scorecard.png?randomParam=cta" width="236" height="40" style="border: none; display: block;" alt="CTA Button">
              </a>
            </span>
          </td>
        </tr>
      </table>
      <br>
      <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Signature%20GIF.gif" width="669" height="172" alt="Animated Signature GIF">
      <br>

      <!-- Disclaimer -->
      <table border="0" cellpadding="0" cellspacing="0" style="max-width: 669px; margin: 0 auto;">
        <tr>
          <td>
            <p style="font-family: Tahoma, sans-serif; font-size: 10px; line-height: 1.4em; margin: 0;">
              <strong>Disclaimer:</strong> The information transmitted including any attachments is intended only for the exclusive use of the person(s) or entity to which it is addressed and may contain confidential and privileged material that may be subject to legal privilege. Any perusal, review, retransmission, dissemination, distribution, reproduction or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient without the sender's prior consent is unauthorised and strictly prohibited. If you have received this message in error, please notify the sender immediately and delete the message from your computer without making any copies. Any personal views and opinions expressed in this email message are the sender's own and do not necessarily represent the views and opinions of the company. This footnote also confirms that this message has been swept for the presence of computer viruses but this does not guarantee that it is virus free. Please consider the environment before printing this email ♻
            </p>
          </td>
        </tr>
      </table>

      <!-- Bottom Row of CTA Buttons -->
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td style="padding: 5px;">
            <img src="https://app-eu1.hubspot.com/api/filemanager/api/v2/files/234356133068/signed-url-redirect?portalId=26048386" width="104" height="38" style="border: none; display: block;" alt="CTA 1" />
          </td>
          <td style="padding: 5px;">
            <a href="https://www.reviews.co.uk/company-reviews/store/rocketprintpromotions-com">
              <img src="https://app-eu1.hubspot.com/api/filemanager/api/v2/files/234355183804/signed-url-redirect?portalId=26048386" width="144" height="38" style="border: none; display: block;" alt="Reviews">
            </a>
          </td>
          <td style="padding: 5px;">
            <a href="https://www.linkedin.com/in/alec-hicks-503a56105">
              <img src="https://app-eu1.hubspot.com/api/filemanager/api/v2/files/234356133069/signed-url-redirect?portalId=26048386" width="124" height="38" style="border: none; display: block;" alt="LinkedIn Profile">
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

best, 

Anton

[AHicks56]

Hi Anton,

Thanks for taking a look, unfortunately it's still the same issue. Please see image attached.

I wonder what the issue is? The code seems sound 

Alec

[Anton · Accepted solution]

Hey @AHicks56,

thank you for the screenshot. 

In terms of the icons - try uploading the attached icons I've created for you to your file-manager to a folder like "signature-icons", and replacing them in the source code. 

As for the 3 images at the bottom:

They're all linked to your Hub and not LinkedIn. 

<span style="font-family: Tahoma, Geneva, sans-serif; font-size: 16px; line-height: 16px; margin: 0; padding: 0;">
  Kind regards,<br>
  Alec
</span>
<br><br><br><br>

<table cellpadding="0" cellspacing="0" border="0" style="font-size: medium; font-family: Tahoma;">
  <tr>
    <td>
      <table cellpadding="0" cellspacing="0" border="0" style="font-size: medium; font-family: Tahoma;">
        <tr>
          <td style="vertical-align: top;">
            <table cellpadding="0" cellspacing="0" border="0" style="font-size: medium; font-family: Tahoma;">
              <tr>
                <td style="text-align: center;">
                  <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Signature%20headshots/Alec%20Hicks.png" width="130" style="display: block;" alt="Alec Hicks">
                </td>
              </tr>
              <tr><td height="30"></td></tr>
              <tr>
                <td style="text-align: center;">
                  <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/RES%20Stacked%20Grey%20Logo-01.png" width="130" style="display: block;" alt="Rocket Exhibition Services Logo">
                </td>
              </tr>
              <tr><td height="30"></td></tr>
              <tr>
                <td style="text-align: center;">
                  <table cellpadding="0" cellspacing="0" border="0" style="text-align: center; display: inline-block;">
                    <tr>
                      <td>
                        <a href="https://www.linkedin.com/company/rocketexhibitionservices" style="border-radius: 50%;">
                          <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Social%20icons/LinkedIn.png" width="24" style="display: block;" alt="LinkedIn"> 
                        </a>
                      </td>
                      <td width="5"></td>
                      <td>
                        <a href="https://www.instagram.com/rocketexhibitionservices/" style="border-radius: 50%;">
                          <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Social%20icons/Instagram.png" width="24" style="display: block;" alt="Instagram">
                        </a>
                      </td>
                      <td width="5"></td>
                      <td>
                        <a href="https://www.facebook.com/rocketexhibitionservices" style="border-radius: 50%;">
                          <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Social%20icons/Facebook.png" width="24" style="display: block;" alt="Facebook">
                        </a>
                      </td>
                      <td width="5"></td>
                      <td>
                        <a href="https://www.youtube.com/@rocketexhibitionservices" style="border-radius: 50%;">
                          <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Social%20icons/Youtube.png" width="24" style="display: block;" alt="YouTube">
                        </a>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
          <td width="46"></td>
          <td style="vertical-align: middle;">
            <h2 style="margin: 0; font-size: 18px; font-family: Tahoma; font-weight: 600; color: #000;">
              Alec Hicks
            </h2>
            <p style="margin: 0; color: #000; font-size: 14px;">Marketing Executive</p>
            <div style="font-weight: 500; font-size: 14px; color: #000;">Rocket Exhibition Services</div>
            <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
              <tr><td height="30"></td></tr>
              <tr>
                <td style="width: 100%; border-bottom: 1px solid #ec6608;"></td>
              </tr>
              <tr><td height="30"></td></tr>
            </table>

            <!-- Contact Info -->
            <table cellpadding="0" cellspacing="0" border="0" style="font-family: Tahoma;">
              <tr>
                <td width="30" style="border:none;outline:none">
                  <img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" width="13" style="display: block; background-color: #ec6608;border:none;outline:none" alt="Phone"><!-- Replace this src-path with the one from the uploaded phone icon -->
                </td>
                <td><a href="tel:+441476327080" style="text-decoration: none; color: #000; font-size: 14px;">+44 (0) 1476 327080 - 221</a></td>
              </tr>
              <tr>
                <td width="30" style="border:none;outline:none">
                  <img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" width="13" style="display: block; background-color: #ec6608;border:none;outline:none" alt="Email"><!-- Replace this src-path with the one from the uploaded envelope/email icon -->
                </td>
                <td><a href="mailto:alec@rocketglobal.co.uk" style="text-decoration: none; color: #000; font-size: 14px;">alec@rocketglobal.co.uk</a></td>
              </tr>
              <tr>
                <td width="30" style="border:none;outline:none">
                  <img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" width="13" style="display: block; background-color: #ec6608;border:none;outline:none" alt="Website"><!-- Replace this src-path with the one from the uploaded globe icon -->
                </td>
                <td><a href="https://rocket-exhibitions.com" style="text-decoration: none; color: #000; font-size: 14px;">rocket-exhibitions.com</a></td>
              </tr>
              <tr>
                <td width="30" style="border:none;outline:none">
                  <img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/address-icon-2x.png" width="13" style="display: block; background-color: #ec6608;border:none;outline:none" alt="Address"> <!-- Replace this src-path with the one from the uploaded map-pin icon -->
                </td>
                <td style="font-size: 14px; color: #000;">Rocket Exhibition Services, Arnfield House, Swingbridge Road, NG31 7XT</td>
              </tr>
            </table>

            <table cellpadding="0" cellspacing="0" border="0">
              <tr><td height="30"></td></tr>
            </table>

            <!-- Scorecard Button -->
            <span style="display: block; text-align: left;">
              <a href="https://scorecard.rocket-exhibitions.com/scorecard">
                <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Social%20icons/Scorecard.png?randomParam=cta" width="236" height="40" style="border: none; display: block;" alt="CTA Button">
              </a>
            </span>
          </td>
        </tr>
      </table>
      <br>
      <img src="https://26048386.fs1.hubspotusercontent-eu1.net/hubfs/26048386/Signature%20GIF.gif" width="669" height="172" alt="Animated Signature GIF">
      <br>

      <!-- Disclaimer -->
      <table border="0" cellpadding="0" cellspacing="0" style="max-width: 669px; margin: 0 auto;">
        <tr>
          <td>
            <p style="font-family: Tahoma, sans-serif; font-size: 10px; line-height: 1.4em; margin: 0;">
              <strong>Disclaimer:</strong> The information transmitted including any attachments is intended only for the exclusive use of the person(s) or entity to which it is addressed and may contain confidential and privileged material that may be subject to legal privilege. Any perusal, review, retransmission, dissemination, distribution, reproduction or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient without the sender's prior consent is unauthorised and strictly prohibited. If you have received this message in error, please notify the sender immediately and delete the message from your computer without making any copies. Any personal views and opinions expressed in this email message are the sender's own and do not necessarily represent the views and opinions of the company. This footnote also confirms that this message has been swept for the presence of computer viruses but this does not guarantee that it is virus free. Please consider the environment before printing this email ♻
            </p>
          </td>
        </tr>
      </table>

      <!-- Bottom Row of CTA Buttons -->
<!-- If you don't need those - delete from this <table> -->
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td style="padding: 5px;">
            <img src="https://app-eu1.hubspot.com/api/filemanager/api/v2/files/234356133068/signed-url-redirect?portalId=26048386" width="104" height="38" style="border: none; display: block;" alt="CTA 1" /><!-- replace this src-path -->
          </td>
          <td style="padding: 5px;">
            <a href="https://www.reviews.co.uk/company-reviews/store/rocketprintpromotions-com">
              <img src="https://app-eu1.hubspot.com/api/filemanager/api/v2/files/234355183804/signed-url-redirect?portalId=26048386" width="144" height="38" style="border: none; display: block;" alt="Reviews"><!-- replace this src-path -->
            </a>
          </td>
          <td style="padding: 5px;">
            <a href="https://www.linkedin.com/in/alec-hicks-503a56105">
              <img src="https://app-eu1.hubspot.com/api/filemanager/api/v2/files/234356133069/signed-url-redirect?portalId=26048386" width="124" height="38" style="border: none; display: block;" alt="LinkedIn Profile"> <!-- replace this src-path -->
            </a>
          </td>
        </tr>
      </table>
<!-- until this </table> -->

    </td>
  </tr>
</table>

Also - I've noticed that it seems that the bottom images are most likely hidden from public (src-path contains API). This is why they don't work every time and won't work for anyone who doesn't have access to a membership portal inside your portal or are a user inside the portal. To change this, you have to change the file visibility from what ever they have to "public" and copy-paste the new path into the HTML.

best, 

Anton

[AHicks56]

Hi Anton, 

Thanks so much for the icons, it's done the trick! How did you create them?

Changing the bottom images to URL public also worked a treat! 

It's 99% perfect but on closer inspection, on Outlook, the social icons and logo are cut off slightly, please see attached, Any ideas?

Thanks! 

Alec

[Anton]

Hey @AHicks56,

I'm using Adobe Illustrator for creating such icons. For the icons themselves I'm using FontAwesome Pro (they got a free version as well), because it's one of the most used icon library and because HubSpot uses it as well, but you can use any other icon library that you like. Phosphor icons are not as huge as FontAwesome but they're free and have a slightly different look.

When it comes to the social icons, it doesn't really matter as they are brands and always the same. 

The way I've created those icons:

• Opened Illustrator
• created 4 artboards with 24px by 24px
• drag&dropped the icons from my local icon folder into each one
• resized the icons to 16px height
• aligned them vertically and horizontally to the artboard
• copied the color code from the html and colored them
• last but not least I renamed the artboards and exported them as png

The main difference is, that the png's are "real" and don't rely on the cell color. This is done so you can basically ignore the cell color.

I'd say the "error" is related to a few things.

1. When you're using the HubSpot signature creator, the icons are inversed (white background and the icon itself is transparent), this is done so HubSpot doesn't have to create thousands of icons, the icons are more universal and more client friendly 😀. When setting the icon color you're technically not setting the icon color but the background color of the cell the inversed icons gonna be placed in. So technically, it's not the icon that you colorize. And this is where Outlook (and others) might display it a bit off - if the inversed image should be displayed 1-2px smaller by the client (you never know what they're up to), then it will look like it has a border - but actually it's the cell you're seeing 
2. Outlook itself. The "app" version is - as mentioned - build upon the Word-Engine, Outlook 365 (the web-version) is technically a website, therefore supports almost everything that your browser supports, Outlook (the private version) is different again... The differences go on and on and on... For instance - look at the feature rem (almost more common than "px" on modern websites). When it comes to Outlook - full support outside of Windows... Simply because the Windows version is using Word and Word doesn't understand rem. Only "pt" (used for print because pixels are digital and print is "analog").

Also - here are some social icons. Created the same way as described above

best, 

Anton

[AHicks56]

Hi Anton, 

Apologies for the late reply, I've just got back into the office. 

Thank you so much for the info, it's really helpful! The social icons are our custom images so wanting to stick with them.

I think the issue with the chopping of the social images/logo could be due to the table cell sizes? When I drag the table slightly, the images present correctly. Doe we need to add width to this <tr><td height="30"></td></tr> ?

?

Thanks, 

Alec