Account & Settings

JSalem
Member

HubSpot email signature tool icon bug

SOLVE

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

 

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

 

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>&nbsp;</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_6... 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!

 

1 Accepted solution
Aakar
Solution
Key Advisor

HubSpot email signature tool icon bug

SOLVE

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

Aakar Anil
Marketing Technologist
aakar.me | @aakarpost | in/aakarpost

View solution in original post

0 Upvotes
6 Replies 6
aleesa
Member

HubSpot email signature tool icon bug

SOLVE

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

0 Upvotes
JSalem
Member

HubSpot email signature tool icon bug

SOLVE

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.

0 Upvotes
Aakar
Solution
Key Advisor

HubSpot email signature tool icon bug

SOLVE

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

Aakar Anil
Marketing Technologist
aakar.me | @aakarpost | in/aakarpost
0 Upvotes
JSalem
Member

HubSpot email signature tool icon bug

SOLVE

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!

Aakar
Key Advisor

HubSpot email signature tool icon bug

SOLVE

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

Aakar Anil
Marketing Technologist
aakar.me | @aakarpost | in/aakarpost
0 Upvotes
JSalem
Member

HubSpot email signature tool icon bug

SOLVE

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

 

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?

0 Upvotes