The right way to size, link, and export social media icons for an email signature — per-icon hyperlinks, Retina export math, and the mobile width check most guides skip.
The MailSigCraft Team
MailSigCraft
Dropping social icons into a signature looks like a five-minute job: grab a logo pack, paste in three or four icons, done. Then a coworker mentions every icon opens the same LinkedIn tab, or the row wraps onto its own line on a phone, or the icons show up as little red boxes for half your recipients. Icons are simple pictures, but each one needs its own hyperlink, its own export size, and a width budget that fits inside a template that's also carrying your name, title, and contact line — and that's where most signatures quietly break.
Here's the setup that avoids the three most common failures: one link for the whole row, oversized source files, and icons that don't survive a phone screen.
Icon packs ship ten-plus platforms; most professionals maintain two or three. Every extra icon adds width to a row that also has to leave room for your name and title column, and a dead LinkedIn or a dormant TikTok account looks worse than no icon at all. Start from the platforms you'd point a new contact to today, then stop.
If an icon displays at 24×24px, export the source file at 48×48px (2x) or 72×72px (3x) and let the <img> tag's width/height attributes scale it down. This is standard Retina practice for any image on a high-density phone or laptop screen — export at native size only and the icon looks visibly soft on anything sharper than a 1x display.
Add the social icon image, then hyperlink that specific image, then repeat for every icon in the row. That "repeat for every icon" step is the one people skip after wrapping the first image, and it's the difference between four working links and one link that happens to sit under four pictures.
width and height attributes stop the row from jumping around while images load, and alt="LinkedIn" (or the platform name) means a recipient with images blocked — Outlook blocks automatic picture downloads by default — still sees which icon is which instead of a row of blank boxes.
Add up each icon's display width plus the gaps between them, then compare that number to the width your template allocates for the icon row on mobile — usually well under 360px once a name, title, and contact line share the same space. A row that fits on desktop can still be the widest single element in a stacked mobile layout.
Gap is estimated at roughly a third of icon size, a common spacing rule of thumb — not a rendered preview of your exact template. Build the real row inside MailSigCraft's editor.
A single <a href> wrapped around a strip of images is how you'd link a banner, not a row of distinct icons — and most signature editors won't even let you do it cleanly, which is why people end up linking only the first or last image and leaving the rest as plain pictures. Each platform needs its own image, hyperlinked individually: select the icon, add the link, move to the next icon, repeat. Skipping the repeat step is the single most common reason "some of my icons don't click through."
A 512×512px brand-guideline icon dropped straight into a signature and squeezed down with CSS to 24px still weighs like a 512px file and, in mail clients that don't fully respect image scaling, can render at or near its native pixel size instead of the intended display size — turning a tidy icon row into an oversized, lopsided one. Resize and export at the actual display size (times 2 or 3 for Retina) before it goes anywhere near the signature, not after.
Desktop previews are forgiving — there's plenty of horizontal space to spare. A recipient's phone isn't. Six icons at 32px with modest gaps between them can easily clear 240–250px on their own, and once that sits next to a name and title column that also needs room, the row is the first thing to wrap or get compressed. Measure the row, not just each icon.
Outlook is configured to block automatic picture downloads from the internet by default, and plenty of recipients never turn that setting off. Without alt="Instagram" on the image tag, a blocked icon renders as an empty placeholder with no indication of what it was supposed to be — a small addition that costs nothing and saves the row from looking broken to a meaningful share of your audience.
A signature opened on a phone is a touchscreen surface, and WCAG 2.2's Target Size (Minimum) criterion sets 24×24 CSS pixels as the Level AA floor for anything a person is expected to tap. Icons exported at 16px or 18px to save space look neat in a desktop preview and become genuinely hard to hit accurately on a phone — size for the smallest screen your signature will actually be read on, not the widest one.
Each icon is its own image with its own width, height, alt, and hyperlink. Every icon clicks through to the right destination, blocked images still show a label instead of a blank box, and the row scales cleanly for Retina screens.
One flattened image containing all the icons, wrapped in a single hyperlink. It looks identical to the real thing until someone clicks the Instagram icon and lands on your LinkedIn profile instead — there's only one destination behind the whole graphic.
"LinkedIn · Instagram · X" as hyperlinked text instead of icons. Loses the visual polish but survives every client without exception, including plain-text and image-blocked contexts, and needs no export sizing at all.
width, height, and descriptive alt text setTwo or three that you actively maintain outperform five or six that pad out the row. Each additional icon adds width a mobile layout has to absorb, and a stale or abandoned profile linked from a professional signature undercuts the polish the icons were meant to add in the first place.
24×24px is a sensible floor — it matches WCAG 2.2's Level AA minimum tap-target guidance and reads clearly without dominating the row. Many signatures use 20–28px comfortably; below roughly 18–20px, icons get genuinely hard to tap on a phone screen even if they still look fine in a desktop preview.
They can, if the source files are oversized. A handful of icons exported at their actual display size (2x/3x for Retina) typically add only a few KB combined — the real weight risk is dropping in full-resolution brand-guideline logos and letting CSS shrink them visually while the underlying file stays huge.
Not reliably in an email client. HTML image maps aren't consistently supported across Gmail, Outlook, and Apple Mail, so a single graphic can only carry one destination. Separate images with separate hyperlinks is the only approach that works everywhere.
Flat, single-color icon sets usually hold up fine; icons with thin outlines or transparent backgrounds designed for a light background can lose contrast or disappear against a dark-mode signature. Test the actual icon set against both backgrounds before shipping, the same way you'd check any other signature element for dark-mode contrast.
Icons read faster and look more polished, but plain hyperlinked text ("LinkedIn · Instagram") is the most universally compatible option — it needs no image hosting, no Retina export, and works even where images are blocked by default. If a recipient's rendering environment is unpredictable, text links are the safer fallback.
A social icon row is three small decisions repeated correctly: hyperlink each icon on its own instead of the whole row at once, export source files at 2x or 3x their display size instead of shrinking a large logo with CSS, and check the row's total width against your template's narrowest mobile column before calling it done. Get those three right and the icons do what they're supposed to — get a recipient to your actual profile in one click, on any screen.