How to add custom social icons to Mailchimp

Mailchimp’s Social block locks the icon files

In Mailchimp’s new email builder, the social icons come from a Social block. It starts with Facebook, Instagram, and X, you swap or add networks from a dropdown, and you set display (icon only, icon and text, or text only), icon style, size, alignment, and spacing. For a lot of campaigns that is enough, and you should use it.

What it will not do is point an icon at your own image. There is no custom icon URL field and no upload. Whatever Mailchimp ships for a network is what your subscribers see. The classic builder is no better here: its Social Follow block also styles only its own built-in icons.

That closes the usual Footerico route, where you style your icons once and paste live PNG URLs wherever you need them. In Mailchimp the way through is a Code block with your own HTML.

A Code block gives you the same layout, with your own icons

Mailchimp’s Code block takes custom HTML, and its own documentation tells you to reference images by absolute path. That is exactly what a Footerico icon is: a PNG at a public HTTPS URL, with the style baked into the query string.

Footerico’s Mailchimp snippet copies the structure Mailchimp uses for its own social icons: nested presentation tables, floated cells, and <img> tags with fixed width and height. Subscribers see ordinary social icons. You get the brands and the style you picked in Icon Picker.

The cost is the editing experience. A Code block is raw HTML, so you can no longer click an icon and change it in the builder. Swapping a network or restyling the icons means editing the HTML or copying a fresh snippet. Most footers are set once and reused across every campaign, so that trade usually lands in your favor.

Before you start

• Your icons styled and selected in the Icon Picker (brands + style)
• A Mailchimp email campaign or template where you can add content blocks
• The profile URLs you want behind each icon

Add the icons in four steps

1. Style your icons in Footerico Open the Icon Picker. Select the networks you need, then set size, shape, and color so the icons match your email footer.
2. Copy the Mailchimp embed code Open Embed code. Choose Email Editors & ESP, then Mailchimp. Copy the HTML.
3. Add a Code block in Mailchimp In your campaign or template, add a Code content block where the social icons should sit in the email footer. Do not use the Social block for this method.
4. Paste the HTML and set profile links Paste the snippet into the Code block. Replace each [YOUR_PAGE_URL] with the matching profile URL. Preview the email, then save the template if you want to reuse the footer.

What the snippet looks like

One outer table centers the icons. Each icon is its own floated table, which is how Mailchimp builds its own social icons too. Your style travels in the src, so a circular 32px Instagram icon is a URL, not a file you upload.

<td valign="top" align="center" width="32" style="padding: 3px 12px;">
	<a href="[YOUR_PAGE_URL]" target="_blank" rel="noreferrer">
		<img width="32" height="32" alt="Instagram" src="https://api.footeri.co/v1/icons/instagram.png?size=32&shape=circle&retina" border="0" style="display: block; border: 0; outline: none; text-decoration: none;">
	</a>
</td>

Two details are doing quiet work. &retina renders the PNG at double the size so it stays sharp on high-density screens, while width and height hold the display size. The border attribute and inline style stop Outlook from drawing a blue link border around a linked image.

Icon Picker writes those URLs for you. Every parameter is listed in the API reference.

Dark mode can swallow a flat icon

Apple Mail, Outlook, and Gmail all have dark modes that redraw the background behind your footer. Your PNG is a fixed file, so the icon itself never changes. The surface under it does, and that is where contrast disappears: a black or dark brand mark on a transparent background sits on a dark panel and reads as a smudge.

The fix is to give the icon its own background instead of borrowing the email’s. In Footerico, any shape without a border does that: circle, rounded, or square fills the whole PNG with brand color, black, gray, or white and paints the mark on top. Contrast is decided inside the file, so nothing the client does behind it matters.

• Safe anywhere: a shape without a border, in brand color or white. The plate travels with the icon.
• Needs a fixed background: flat logos and bordered shapes are transparent, so they depend on the footer color staying put.
• Always dark footer: a flat white mark works and stays visually light.

Mailchimp Social vs Footerico

Mailchimp’s built-in block wins on convenience, and it is honest to say so: it is a real block in the builder, and you edit it by clicking. Footerico wins on the catalog and on control over how the icons look.

The network list is the practical difference

Mailchimp’s Social block covers Instagram, Facebook, X (formerly Twitter), TikTok, YouTube, Website, Email, Pinterest, WhatsApp, Threads, Bluesky, LinkedIn, Patreon, Discord, Snapchat, Telegram, Spotify, Twitch, and Reddit.

Footerico has an icon for every one of those, including the two that are not really social networks: Website maps to Globe and Email to Mail. It also carries contact marks Mailchimp has no option for at all, such as Phone, Location, Address, Link, and Share, plus messengers, app stores, and review sites that never made Mailchimp’s list.

Styles are fixed presets on one side and parameters on the other

Mailchimp gives you eight combinations: Color, Dark, Light, and Gray icons, then the same four with a white or black mark on the plate. Shapes stay at plain logo, circular, and circular with a border. When a network rebrands, you wait for Mailchimp to refresh that preset.

In Footerico the style is query parameters on a live URL, which is why a rebrand lands in an email you set up months ago without touching the Code block.

Tips that save a resend

• Replace every [YOUR_PAGE_URL] before you send. Empty placeholders break the click path.
• Keep icon HTML width / height aligned with the size you chose in Icon Picker. The snippet already does this.
• Send yourself a test and open it on desktop and mobile. The floated tables follow the same pattern as Mailchimp’s own Social HTML.
• Save the finished footer in a reusable template so later campaigns inherit the Code block.

FAQ

Style your icons, then paste them

Style the icons in Footerico, copy the Mailchimp embed, and drop it into a Code block in your email footer. You keep current brand marks without fighting the Social block’s locked image URLs.

Open Icon Picker All guides