{"id":7770,"date":"2026-06-19T12:28:58","date_gmt":"2026-06-19T15:28:58","guid":{"rendered":"https:\/\/www.bybrand.io\/docs\/?post_type=ht_kb&#038;p=7770"},"modified":"2026-06-19T12:29:27","modified_gmt":"2026-06-19T15:29:27","slug":"outlook-icon-with-text","status":"publish","type":"ht_kb","link":"https:\/\/www.bybrand.io\/docs\/article\/outlook-icon-with-text\/","title":{"rendered":"Issue with icon alignment with text in Outlook"},"content":{"rendered":"\n<p>This tutorial explains why, in some cases, email signature icons may become misaligned with text in Outlook. This occurs primarily in signatures that use icons alongside information such as phone, email, website, or address. <\/p>\n\n\n\n<p>Unfortunately, this behavior is related to how the Outlook editor interprets and rewrites the signature&#8217;s HTML.<\/p>\n\n\n\n<p>Example of an email signature with misaligned icons and text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"887\" height=\"657\" src=\"https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_IconsText_Problem.png\" alt=\"Issue with icon alignment with text in Outlook.\" class=\"wp-image-7754\" srcset=\"https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_IconsText_Problem.png 887w, https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_IconsText_Problem-300x222.png 300w, https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_IconsText_Problem-768x569.png 768w, https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_IconsText_Problem-50x37.png 50w, https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_IconsText_Problem-60x44.png 60w, https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_IconsText_Problem-100x74.png 100w\" sizes=\"auto, (max-width: 887px) 100vw, 887px\" \/><\/figure>\n\n\n\n<p>Note in the example that the text is vertically aligned at the bottom rather than the center.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why does icon alignment change in Outlook?<\/h2>\n\n\n\n<p>Outlook may automatically change the signature&#8217;s HTML code when saving or loading the signature in the editor.<\/p>\n\n\n\n<p>This means that even if the signature was correctly created in Bybrand, Outlook may remove important HTML tags or attributes used to maintain vertical alignment between icons and text.<\/p>\n\n\n\n<p>For example, properties used to align an icon to the center of the text may be removed by Outlook. As a result, the icon may appear slightly above or below the text line. <\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\"><strong>Note:<\/strong> this behavior is caused by the Outlook editor itself. It is not a flaw in the signature created in Bybrand. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Attempting to force vertical alignment<\/h2>\n\n\n\n<p>One possible attempt is to adjust the vertical alignment of the icons so that they are centered relative to the text.<\/p>\n\n\n\n<p>In practice, this can be done by making adjustments to the signature&#8217;s HTML, such as vertical alignment in tables or images.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"605\" height=\"368\" src=\"https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/vertical-text-align.png\" alt=\"Attempting to force vertical alignment.\" class=\"wp-image-7759\" srcset=\"https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/vertical-text-align.png 605w, https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/vertical-text-align-300x182.png 300w, https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/vertical-text-align-50x30.png 50w, https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/vertical-text-align-60x36.png 60w, https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/vertical-text-align-100x61.png 100w\" sizes=\"auto, (max-width: 605px) 100vw, 605px\" \/><\/figure>\n\n\n\n<p>However, this solution does not work in 100% of cases because Outlook may remove this parameter when loading or saving the signature.<\/p>\n\n\n\n<p>Example video:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" controls src=\"https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/vertical-text-align.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Recommended alternatives<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Replacing icons with text<\/h3>\n\n\n\n<p>If the misalignment persists, we recommend a more stable alternative: replacing icons with plain text.<\/p>\n\n\n\n<p>Instead of using an icon to identify phone, email, website, or address, you can use words such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Phone:<\/li>\n\n\n\n<li>Email:<\/li>\n\n\n\n<li>Website:<\/li>\n\n\n\n<li>Address:<\/li>\n<\/ul>\n\n\n\n<p>Example: email signature without icons using text for Outlook.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"378\" height=\"312\" src=\"https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_Text_Only.png\" alt=\"Example: email signature without icons using text.\" class=\"wp-image-7756\" srcset=\"https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_Text_Only.png 378w, https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_Text_Only-300x248.png 300w, https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_Text_Only-50x41.png 50w, https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_Text_Only-60x50.png 60w, https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_Text_Only-100x83.png 100w\" sizes=\"auto, (max-width: 378px) 100vw, 378px\" \/><\/figure>\n\n\n\n<p>This option is simpler, more compatible with Outlook, and reduces the risk of visual issues in the signature.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Changing the icon size<\/h3>\n\n\n\n<p>If the icons are too large, the misalignment may become more evident.<\/p>\n\n\n\n<p>A simple alternative is to reduce the icon dimensions to between <strong>20px and 25px<\/strong>. Smaller icons tend to minimize the perception of misalignment and give the signature a more balanced appearance. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Using a hyphen<\/h3>\n\n\n\n<p>Another option is to remove the icons and leave only a hyphen before the information.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>- Explore Partnership Opportunities\n- Download Our Executive Guide\n- Connect on LinkedIn<\/code><\/pre>\n\n\n\n<p>This alternative keeps the signature clean and easy to understand without relying on images or complex visual alignment.<\/p>\n\n\n\n<p>In most cases, the information is already self-explanatory, especially when the email, phone, or website follows a known format.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related articles<\/h2>\n\n\n\n<p>You can also consult these tutorials:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.bybrand.io\/docs\/article\/outlook-not-show-images\/\">Outlook does not show images in the email signature<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.bybrand.io\/docs\/article\/fixing-auto-image-resizes\/\">Fixing image resizing in the email signature<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Email signature icons misaligned with text in Outlook.<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[91],"ht-kb-tag":[],"class_list":["post-7770","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-outlook"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Issue with icon alignment with text in Outlook - Bybrand<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bybrand.io\/docs\/article\/outlook-icon-with-text\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Issue with icon alignment with text in Outlook - Bybrand\" \/>\n<meta property=\"og:description\" content=\"Email signature icons misaligned with text in Outlook.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bybrand.io\/docs\/article\/outlook-icon-with-text\/\" \/>\n<meta property=\"og:site_name\" content=\"Bybrand\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bybrandio\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-19T15:29:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_IconsText_Problem.png\" \/>\n\t<meta property=\"og:image:width\" content=\"887\" \/>\n\t<meta property=\"og:image:height\" content=\"657\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@bybrandio\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.bybrand.io\\\/docs\\\/article\\\/outlook-icon-with-text\\\/\",\"url\":\"https:\\\/\\\/www.bybrand.io\\\/docs\\\/article\\\/outlook-icon-with-text\\\/\",\"name\":\"Issue with icon alignment with text in Outlook - Bybrand\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bybrand.io\\\/docs\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.bybrand.io\\\/docs\\\/article\\\/outlook-icon-with-text\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.bybrand.io\\\/docs\\\/article\\\/outlook-icon-with-text\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.bybrand.io\\\/docs\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Outlook_HTML_Signature_IconsText_Problem.png\",\"datePublished\":\"2026-06-19T15:28:58+00:00\",\"dateModified\":\"2026-06-19T15:29:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.bybrand.io\\\/docs\\\/article\\\/outlook-icon-with-text\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.bybrand.io\\\/docs\\\/article\\\/outlook-icon-with-text\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.bybrand.io\\\/docs\\\/article\\\/outlook-icon-with-text\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.bybrand.io\\\/docs\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Outlook_HTML_Signature_IconsText_Problem.png\",\"contentUrl\":\"https:\\\/\\\/www.bybrand.io\\\/docs\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Outlook_HTML_Signature_IconsText_Problem.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.bybrand.io\\\/docs\\\/article\\\/outlook-icon-with-text\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.bybrand.io\\\/docs\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Issue with icon alignment with text in Outlook\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.bybrand.io\\\/docs\\\/#website\",\"url\":\"https:\\\/\\\/www.bybrand.io\\\/docs\\\/\",\"name\":\"Bybrand - Knowledge base\",\"description\":\"Business Email Signature Manager for IT Managers, and Marketers\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.bybrand.io\\\/docs\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Issue with icon alignment with text in Outlook - Bybrand","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.bybrand.io\/docs\/article\/outlook-icon-with-text\/","og_locale":"en_US","og_type":"article","og_title":"Issue with icon alignment with text in Outlook - Bybrand","og_description":"Email signature icons misaligned with text in Outlook.","og_url":"https:\/\/www.bybrand.io\/docs\/article\/outlook-icon-with-text\/","og_site_name":"Bybrand","article_publisher":"https:\/\/www.facebook.com\/bybrandio\/","article_modified_time":"2026-06-19T15:29:27+00:00","og_image":[{"width":887,"height":657,"url":"https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_IconsText_Problem.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@bybrandio","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.bybrand.io\/docs\/article\/outlook-icon-with-text\/","url":"https:\/\/www.bybrand.io\/docs\/article\/outlook-icon-with-text\/","name":"Issue with icon alignment with text in Outlook - Bybrand","isPartOf":{"@id":"https:\/\/www.bybrand.io\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.bybrand.io\/docs\/article\/outlook-icon-with-text\/#primaryimage"},"image":{"@id":"https:\/\/www.bybrand.io\/docs\/article\/outlook-icon-with-text\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_IconsText_Problem.png","datePublished":"2026-06-19T15:28:58+00:00","dateModified":"2026-06-19T15:29:27+00:00","breadcrumb":{"@id":"https:\/\/www.bybrand.io\/docs\/article\/outlook-icon-with-text\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bybrand.io\/docs\/article\/outlook-icon-with-text\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bybrand.io\/docs\/article\/outlook-icon-with-text\/#primaryimage","url":"https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_IconsText_Problem.png","contentUrl":"https:\/\/www.bybrand.io\/docs\/wp-content\/uploads\/2026\/06\/Outlook_HTML_Signature_IconsText_Problem.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.bybrand.io\/docs\/article\/outlook-icon-with-text\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bybrand.io\/docs\/"},{"@type":"ListItem","position":2,"name":"Issue with icon alignment with text in Outlook"}]},{"@type":"WebSite","@id":"https:\/\/www.bybrand.io\/docs\/#website","url":"https:\/\/www.bybrand.io\/docs\/","name":"Bybrand - Knowledge base","description":"Business Email Signature Manager for IT Managers, and Marketers","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bybrand.io\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.bybrand.io\/docs\/wp-json\/wp\/v2\/ht-kb\/7770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bybrand.io\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.bybrand.io\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.bybrand.io\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bybrand.io\/docs\/wp-json\/wp\/v2\/comments?post=7770"}],"version-history":[{"count":4,"href":"https:\/\/www.bybrand.io\/docs\/wp-json\/wp\/v2\/ht-kb\/7770\/revisions"}],"predecessor-version":[{"id":7774,"href":"https:\/\/www.bybrand.io\/docs\/wp-json\/wp\/v2\/ht-kb\/7770\/revisions\/7774"}],"wp:attachment":[{"href":"https:\/\/www.bybrand.io\/docs\/wp-json\/wp\/v2\/media?parent=7770"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.bybrand.io\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=7770"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.bybrand.io\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=7770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}