HubSpot email signature tool icon bug

Smart CRM & Sales Hub Account & Settings
,
1

I used the HubSpot email signature generator to create an email signature template for myself and my coworkers. The finished product on the website looked like this:

JSalem_0-1732055567709.png
JSalem_0-1732055567709.png643×241 20.6 KB

I followed the instructions to copy this signature to Outlook, however when I tried testing my new signature by sending my email to a coworker, there were borders and deformities on the icons. The signature on the bottom looked like this:

JSalem_1-1732055774164.png
JSalem_1-1732055774164.png1125×427 61.3 KB

I tried many troublshooting steps found online, but the main fix appeared to be copying the signature, pasting it in another application (like MS Word or similar app), copying it again from there, and then pasting it into your Outlook signature tool. This resulted in no change.

I also tried another proposed fix which was to paste the HTML code given by the Hubspot signature generator instead of the signature itself. Same outcome. I will paste the HTML code here for reference:

<table cellpadding=“0” cellspacing=“0” border=“0” class=“table__StyledTable-sc-1avdl6r-0 jKaNHW” style=“vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;”><tbody><tr><td><table cellpadding=“0” cellspacing=“0” border=“0” class=“table__StyledTable-sc-1avdl6r-0 jKaNHW” style=“vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;”><tbody><tr><td style=“vertical-align: middle;”><h2 color=“#000000” class=“name__NameContainer-sc-1m457h3-0 fDJBkJ” style=“margin: 0px; font-size: 18px; color: rgb(0, 0, 0); font-weight: 600;”><span>Joseph</span><span>\ </span><span>Salem, ICP</span></h2><p color=“#000000” font-size=“medium” class=“job-title__Container-sc-1hmtp73-0 eVBSPG” style=“margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;”><span>Business Development</span></p><p color=“#000000” font-size=“medium” class=“company-details__CompanyContainer-sc-j5pyy8-0 kPrOBw” style=“margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;”><span>Scientific Applied Concepts Ltd.</span></p></td><td width=“30”><div style=“width: 30px;”></div></td><td color=“#c70b0b” direction=“vertical” width=“1” height=“auto” class=“color-divider__Divider-sc-1h38qjv-0 jmHABg” style=“width: 1px; border-bottom: none; border-left: 1px solid rgb(199, 11, 11);”></td><td width=“30”><div style=“width: 30px;”></div></td><td style=“vertical-align: middle;”><table cellpadding=“0” cellspacing=“0” border=“0” class=“table__StyledTable-sc-1avdl6r-0 jKaNHW” style=“vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;”><tbody><tr height=“25” style=“vertical-align: middle;”><td width=“30” style=“vertical-align: middle;”><table cellpadding=“0” cellspacing=“0” border=“0” class=“table__StyledTable-sc-1avdl6r-0 jKaNHW” style=“vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;”><tbody><tr><td style=“vertical-align: bottom;”><span color=“#c70b0b” width=“11” class=“contact-info__IconWrapper-sc-mmkjr6-1 KxJwQ” style=“display: inline-block; background-color: rgb(199, 11, 11);”><img src=“https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color=”#c70b0b" alt=“mobilePhone” width=“13” class=“contact-info__ContactLabelIcon-sc-mmkjr6-0 bOaORQ” style=“display: block; background-color: rgb(199, 11, 11);”></span></td></tr></tbody></table></td><td style=“padding: 0px; color: rgb(0, 0, 0);”><a href=“tel:+1 (807) 700-7225” color=“#000000” font-size=“medium” class=“contact-info__ExternalLink-sc-mmkjr6-2 djHrwm” style=“text-decoration: none; color: rgb(0, 0, 0); font-size: 14px;”><span>+1 (807) 700-7225</span></a> | <a href=“tel:(613) 314-2255” color=“#000000” font-size=“medium” class=“contact-info__ExternalLink-sc-mmkjr6-2 djHrwm” style=“text-decoration: none; color: rgb(0, 0, 0); font-size: 14px;”><span>(613) 314-2255</span></a></td></tr><tr height=“25” style=“vertical-align: middle;”><td width=“30” style=“vertical-align: middle;”><table cellpadding=“0” cellspacing=“0” border=“0” class=“table__StyledTable-sc-1avdl6r-0 jKaNHW” style=“vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;”><tbody><tr><td style=“vertical-align: bottom;”><span color=“#c70b0b” width=“11” class=“contact-info__IconWrapper-sc-mmkjr6-1 KxJwQ” style=“display: inline-block; background-color: rgb(199, 11, 11);”><img src=“https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color=”#c70b0b" alt=“emailAddress” width=“13” class=“contact-info__ContactLabelIcon-sc-mmkjr6-0 bOaORQ” style=“display: block; background-color: rgb(199, 11, 11);”></span></td></tr></tbody></table></td><td style=“padding: 0px;”><a href="mailto:joseph@saclcanada.com" color=“#000000” font-size=“medium” class=“contact-info__ExternalLink-sc-mmkjr6-2 djHrwm” style=“text-decoration: none; color: rgb(0, 0, 0); font-size: 14px;”><span>joseph@saclcanada.com</span></a></td></tr><tr height=“25” style=“vertical-align: middle;”><td width=“30” style=“vertical-align: middle;”><table cellpadding=“0” cellspacing=“0” border=“0” class=“table__StyledTable-sc-1avdl6r-0 jKaNHW” style=“vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;”><tbody><tr><td style=“vertical-align: bottom;”><span color=“#c70b0b” width=“11” class=“contact-info__IconWrapper-sc-mmkjr6-1 KxJwQ” style=“display: inline-block; background-color: rgb(199, 11, 11);”><img src=“https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" color=”#c70b0b" alt=“website” width=“13” class=“contact-info__ContactLabelIcon-sc-mmkjr6-0 bOaORQ” style=“display: block; background-color: rgb(199, 11, 11);”></span></td></tr></tbody></table></td><td style=“padding: 0px;”><a href=“//saclcanada.com” color=“#000000” font-size=“medium” class=“contact-info__ExternalLink-sc-mmkjr6-2 djHrwm” style=“text-decoration: none; color: rgb(0, 0, 0); font-size: 14px;”><span>saclcanada.com</span></a></td></tr><tr height=“25” style=“vertical-align: middle;”><td width=“30” style=“vertical-align: middle;”><table cellpadding=“0” cellspacing=“0” border=“0” class=“table__StyledTable-sc-1avdl6r-0 jKaNHW” style=“vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;”><tbody><tr><td style=“vertical-align: bottom;”><span color=“#c70b0b” width=“11” class=“contact-info__IconWrapper-sc-mmkjr6-1 KxJwQ” style=“display: inline-block; background-color: rgb(199, 11, 11);”><img src=“https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/address-icon-2x.png" color=”#c70b0b" alt=“address” width=“13” class=“contact-info__ContactLabelIcon-sc-mmkjr6-0 bOaORQ” style=“display: block; background-color: rgb(199, 11, 11);”></span></td></tr></tbody></table></td><td style=“padding: 0px;”><span color=“#000000” font-size=“medium” class=“contact-info__Address-sc-mmkjr6-3 kENIhs” style=“font-size: 14px; color: rgb(0, 0, 0);”><span>8-5330 Canotek Road, Ottawa ON, Canada, K1J 9C3</span></span></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td><table cellpadding=“0” cellspacing=“0” border=“0” class=“table__StyledTable-sc-1avdl6r-0 jKaNHW” style=“width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;”><tbody><tr><td height=“30”></td></tr><tr><td color=“#c70b0b” direction=“horizontal” width=“auto” height=“1” class=“color-divider__Divider-sc-1h38qjv-0 jmHABg” style=“width: 100%; border-bottom: 1px solid rgb(199, 11, 11); border-left: none; display: block;”></td></tr><tr><td height=“30”></td></tr></tbody></table></td></tr><tr><td><table cellpadding=“0” cellspacing=“0” border=“0” class=“table__StyledTable-sc-1avdl6r-0 jKaNHW” style=“width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;”><tbody><tr><td style=“vertical-align: top;”><img src=“https://static.wixstatic.com/media/fc973b_323c4cc2077642c5a1c511604e3dc68c~mv2.png/v1/fill/w_157,h_63,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/cropped-SACL_logo-2021-1%20(3).png" role=“presentation” width=“130” class=“image__StyledImage-sc-hupvqm-0 iQUdAH” style=“display: inline-block; max-width: 130px;”></td><td style=“text-align: right; vertical-align: top;”><table cellpadding=“0” cellspacing=“0” border=“0” class=“table__StyledTable-sc-1avdl6r-0 jKaNHW” style=“display: inline-block; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;”><tbody><tr style=“text-align: right;”><td><a href=“https://www.linkedin.com/in/josephsalem1/" color=”#0c6af6” class=“social-links__LinkAnchor-sc-py8uhj-2 jQPMbH” style=“display: inline-block; padding: 0px; background-color: rgb(12, 106, 246);”><img src=“https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-2x.png" alt=“linkedin” color=”#0c6af6" width=“24” class=“social-links__LinkImage-sc-py8uhj-1 cnQsdS” style=“background-color: rgb(12, 106, 246); max-width: 135px; display: block;”></a></td><td width=“5”><div></div></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>

I found another post in the community which experienced the same issue as I was having (click here to see the post in question). This post did not really help me solve the issue and I am not sure I fully understood the fix.

I would really like to have someone help me resolve this issue, as I am quite fond of the HubSpot signature design. I have tried some alternative tools to create a signature for our company, but none of them have really looked as aesthetically pleasing as this one. I would also accept any suggested alternative that other users think would provide a similar look to the signature I created on HubSpot’s tool.

Thank you in advance for helping me resolve this issue!

2

@JSalem—I’m not sure about the issue, but it could be an HTML parsing error. My friend had built this tool to format it. I tested your code, and it looked fine.

3

Hey Aakar,

Thanks for replying so quickly. I tried your friend’s formatting tool and it looked exactly like how I want it to output. I had no way of getting the signature from there to the Outlook signature window.

JSalem_0-1732116040707.png
JSalem_0-1732116040707.png861×626 100 KB

Even if I again copy the HTML code from the tool, it creates the same issue when I try and get it back to Outlook. Do you know how I could copy the signature itself from your friend’s formatting tool, instead of the code?

4

@JSalem - I’m not sure how Outlook works. But you copy the output part from the tool itself (you can copy all) and paste it to the Outlook signature. Select all, copy and paste it.

5

Hey again!

Turns out, I fixed the formatting by accident. It now only appears on my end when I am drafting the email. Once I send it out, the formatting is fixed and it appears to have no issues. Thanks for all your help Aakar!

6

Hi, would you mind sharing how you fixed it? I am having the same issue.

7

Hey Aleesa, like I didn’t fix it after all. This is quite a frustrating issue to be having, since it looks to be recurring for a lot of users who tried to make use of the Hubspot signature tool. I don’t see any potential solution short of simply creating a signature myself or finding another template tool with better Outlook integration.

There is also the additional issue that the icons are not actually icon PNGs, but they are actually images of the icons, with a white background. This means someone who uses a “dark” theme in their email client will see white squares with the icons inside them, which looks really offputting and I would argue, unprofessional.

I am sorry that this thread couldn’t be much help.