SVG Icons in HTML Email – Compatibility, Fallbacks & Best Practices

SVG support in HTML email is inconsistent. Most email clients either partially support or completely ignore SVGs. Here’s what actually works — and what to do instead.

Email client SVG support matrix

The safe approach: PNG fallbacks

Use a <picture> element with a PNG fallback — widely supported since 2022 in major clients:

<picture>
  <!-- SVG for clients that support it -->
  <source srcset="https://yourcdn.com/icons/arrow.svg" type="image/svg+xml" />
  <!-- PNG fallback for Outlook, older Gmail -->
  <img
    src="https://yourcdn.com/icons/arrow.png"
    width="24"
    height="24"
    alt=""
    style="display:block;"
  />
</picture>

Icons via <img> tag (simpler)

If you only care about Apple Mail and modern clients and your audience skews consumer:

<!-- Hosted SVG or PNG -->
<img
  src="https://api.iconify.design/lucide:home.svg"
  width="24"
  height="24"
  alt=""
  style="display:block; color:#6366f1;"
/>

Note: currentColor doesn’t apply to <img> — the SVG’s own fill/stroke colors are used. Pre-color your SVG before hosting it.

Generate colored SVGs for email

Most icon libraries are black by default. For email, bake the color into the SVG:

<!-- Iconify CDN: set color via query param -->
<img
  src="https://api.iconify.design/lucide:home.svg?color=%236366f1"
  width="24"
  height="24"
  alt=""
/>

<!-- Or for a white icon on dark background -->
<img
  src="https://api.iconify.design/lucide:home.svg?color=%23ffffff"
  width="24"
  height="24"
  alt=""
/>

Recommended icon sets for email

HomeMailStarHomeEnvelopeStarHomeMailStarHouseEnvelopeStarHomeEmailStar

For email, pick icons with these characteristics:

• Simple paths — fewer nodes = smaller file size and better rendering
• 24×24 or 32×32 viewBox — scales cleanly for retina
• Solid fill preferred over complex strokes — more consistent across clients

Pre-colored PNG export workflow

The safest email icon workflow:

1. Browse AllSVGIcons, find your icon
2. Download SVG, then convert to PNG at 2× (48×48px) via a tool like Sharp, Squoosh, or Figma
3. Upload the PNG to your CDN
4. Reference in email HTML with fixed width="24" height="24" attributes

<!-- 48px PNG displayed at 24px for retina -->
<img
  src="https://cdn.example.com/icons/[email protected]"
  width="24"
  height="24"
  alt=""
  style="display:block;"
/>

Icon in a button (email CTA)

Build a button with an inline icon — keep it simple for maximum client compatibility:

<table role="presentation" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background:#6366f1; border-radius:6px; padding:12px 24px;">
      <a href="https://example.com" style="text-decoration:none; display:inline-flex; align-items:center; gap:8px;">
        <!-- 24px icon hosted as PNG -->
        <img
          src="https://cdn.example.com/icons/arrow-right.png"
          width="16"
          height="16"
          alt=""
          style="display:inline-block; vertical-align:middle;"
        />
        <span style="color:#ffffff; font-family:Helvetica,Arial,sans-serif; font-size:16px; font-weight:600; vertical-align:middle;">
          Get Started
        </span>
      </a>
    </td>
  </tr>
</table>

Testing your email icons

Before sending, test in:

• Email on Acid or Litmus — visual regression across 100+ clients
• Gmail (webmail) — the most restrictive common client
• Outlook 2019 — Microsoft Word rendering engine
• Apple Mail — most permissive

Always test dark mode — Gmail and Apple Mail invert some colors in dark mode, which can make light-colored icons disappear.

Frequently asked questions