Signature guide
Email signature icons: sizes, sources, and how to add them
Everything you need for email signature icons that render everywhere: the social and contact icons Wren renders, the right size (16 to 20px), direct links to official brand downloads, and step-by-step for Gmail and Outlook. Icons are the single most-broken element after the marketing banner. Get the two things below right and yours won't join them.
Live example
One of ten built-in Looks. Every element is editable in the builder — colors, photo, links, tagline.
Preview
ToTeam
SubjectNew job announcement
Thanks,
Alex
Step-by-step
- 1
Download the free icon set (official sources only)
Skip the third-party "free icon" sites — most ship outdated logos (old Twitter bird, pre-2019 Instagram gradient) that make your signature look stale. Grab the current ones from each platform's brand page: LinkedIn, X, Instagram, YouTube, GitHub. All free, all PNG, all current. Or use Wren's builder — the icons are already hosted and set to the right size. - 2
Size the icons at 2× and export as PNG
Target render size is 20 × 20 pixels. Export the icon at 40 × 40 pixels (2× density) and setwidth="20" height="20"on the<img>. Save as PNG-24 with transparency. Do not use SVG — email clients don't render inline SVG reliably, and Outlook strips it entirely. - 3
Host on a stable public HTTPS URL
Every icon needs ahttps://URL that Gmail's image proxy can fetch anonymously. Do not use Dropbox share links, Google Drive links, or intranet URLs — they render as broken images for external recipients. Use an image CDN or a signature platform that hosts assets for you. - 4
Pick the platforms that matter — 3 to 5, not 12
Ranked by how often people actually click through: LinkedIn (professional context, highest CTR), Twitter/X (thought-leadership brands), Instagram (visual/consumer brands), YouTube (creators and B2B video-forward companies), GitHub (technical/dev-tool brands). Skip Facebook unless your audience is truly on it. TikTok only if you're actively posting. - 5
Space them evenly with a small horizontal gap
Use nested tables with<td>cells for each icon and a fixedwidth="8"spacer cell between. Never use CSS margin on the img — Outlook strips margin from inline images. The table approach renders identically everywhere. - 6
Wrap each icon in an <code><a href></code> with UTMs
Every icon should link out with tracking so you can see which platform gets the most clicks:?utm_source=signature&utm_medium=email&utm_campaign=social_icon. Otherwise you have no data on whether the icons are even worth including — most people find they're not.
Email signature icons
The exact social and contact icons Wren renders in every signature. Email-safe by design: solid color chips with a single glyph, sized 18px, wrapped in a real link. No SVG, no heavy PNGs, no CDN gymnastics.
Social icons
inLinkedIn
XX
IGInstagram
fFacebook
▶YouTube
Contact icons
☎Phone
↗Web
@Email
In a signature row
inXIGf
Rendered at 18px — the sweet spot. Below 16px the glyph turns to mush; above 20px the row starts dominating the signature and pulling the eye away from your name.
Do
- Keep icons 16 to 20px. 18px is the safe default.
- Host them on a public HTTPS URL, or use color chips like these.
- Wrap each icon in an
<a href>to the profile. - Pick 3 to 5 platforms. More reads as clutter.
Don't
- Don't embed SVG. Outlook strips it.
- Don't hotlink from Dropbox or Google Drive share links.
- Don't paste big PNGs. 40x40 export max, displayed at 20x20.
- Don't add all 12 networks. Nobody clicks the 12th.
Common questions
›How do I add social media icons to my email signature?
Three steps: (1) download the icon PNGs from each platform's official brand page — links above. (2) Host them at a public HTTPS URL that Gmail's image proxy can fetch anonymously (a signature tool does this for you). (3) In your mail client's signature editor, insert each image at 20 × 20 px and wrap it in a link to your profile. In Gmail: Settings → See all settings → Signature. In Outlook: File → Options → Mail → Signatures.
›How do I add a LinkedIn icon to my email signature?
Download the current LinkedIn 'in' bug from brand.linkedin.com/downloads (PNG at 40 × 40), upload it to your signature editor, set the display size to 20 × 20, and wrap it in a link to your LinkedIn profile URL. Add ?utm_source=signature to the profile URL if you want to track clicks.
›How do I add social media icons to a Gmail signature?
Gmail's signature editor accepts inline images but only from public URLs. Open Settings → See all settings → Signature, click the image icon in the toolbar, and either upload the PNG or paste its public URL. Then select the image and click the link icon to add your profile URL. Repeat per platform.
›How do I add social media icons to an Outlook signature?
In classic Outlook: File → Options → Mail → Signatures → New. Click the image icon, browse to the PNG on disk, then select the image and click the hyperlink icon. In new Outlook / Outlook web: Settings → Mail → Compose and reply → Signature, use the image toolbar the same way. Outlook renders local PNGs correctly for the sender but external recipients only see them if you host publicly.
›What size should social icons be in an email signature?
20 × 20 pixels at render, exported at 40 × 40 (2× density) to look crisp on retina screens. Any smaller reads as noise; larger dominates the signature.
›Should I use PNG, JPG, or SVG for social icons?
PNG-24 with transparency. JPG can't do transparent backgrounds and shows colour banding on flat icons. SVG doesn't render in Outlook. PNG is the only right answer.
›Where can I get free social media icons for email signatures?
Every major platform publishes official brand icons on their branding pages, all free: LinkedIn (brand.linkedin.com/downloads), X (about.x.com/who-we-are/brand-toolkit), Instagram (about.meta.com/brand/resources/instagram), YouTube (youtube.com/howyoutubeworks/resources/brand-resources), GitHub (github.com/logos). Those are the ones to use — third-party 'free icon' sites often ship out-of-date logos that make signatures look dated.
›How many social icons should I include?
Three to five, maximum. More than five and the icons crowd the signature; recipients tune them out. Pick the ones where you're actually active and where a click drives value — usually LinkedIn plus one or two others.
›Why are my social icons showing as broken images?
Almost always a hosting problem: the icon URL isn't publicly accessible over HTTPS. Test by opening the URL in an incognito browser — if you see a login page, that's why. Move to a public CDN or a signature tool that hosts icons for you.
Also useful