Email signature generator › Social icons

Social icons in a signature, and whether to have them

A row of small square icons is the default decoration of the corporate signature. It is also the element most likely to be invisible, and the one that most reliably reduces the chance of any of them being used.

Three problems, in order of size

They are images. When the recipient blocks remote content — which is the default in several clients — a row of five icons becomes a row of five empty boxes or five pieces of alt text. Nothing about the link survives except the gap.

Five links is no link. Offering five destinations does not multiply the chance of a click; it divides attention until nobody chooses. If there is a place you want people to go, one link goes there.

They add weight. Five icons at 3 KB each is 15 KB, on every message, repeated down every thread — for a decoration that most readers do not register.

When one icon is justified

If a single network is genuinely where your work lives — a designer's portfolio, a developer's code, a researcher's publication list — then a link there is not decoration, it is the most useful thing in the signature. In that case make it a text link rather than an icon: it survives image blocking, it says where it goes, and it cannot be mistaken for a toolbar.

If you are going to use icons anyway

Keep them to two at most. Export each at twice the display size — 48 pixels for a 24-pixel display — and keep each under 2 KB, which is achievable for a flat monochrome glyph. Set width and height as HTML attributes so the layout does not shift.

Give each one alt text naming the network, not the word "icon": alt="LinkedIn". With images blocked, that alt text is the entire link, and it should read as a word rather than as a label.

Wrap each in an anchor with the destination and put a small amount of horizontal space between them — a spacer cell of 8 pixels — so they can be tapped individually on a phone. Icons packed edge to edge at 24 pixels are below a comfortable tap target.

The monochrome question

Brand-coloured icons pull the eye to the bottom of the signature, which is where you least want attention. Monochrome versions in the same grey as the secondary text sit quietly and remain recognisable by shape. They also survive dark mode inversion better, because a mid grey stays visible in both directions.

What to do instead

Consider what you actually want the reader to do next. For most people it is to reply, to call, or to book a time. A booking link as text — "Book 20 minutes" — accomplishes something. A row of social icons accomplishes the appearance of a complete signature.

The alt text is the link, more often than you think

With images blocked, a row of icons becomes a row of alt text. Written as alt="LinkedIn" that row still reads as three usable links. Written as alt="li-icon" or left empty it reads as nothing at all, and the anchor around it becomes an invisible clickable gap.

This is a one-word change per icon and it decides whether the element works for the substantial share of readers who never load images.

What they cost in the size budget

Five icons at 3 KB each is 15 KB. A signature that would otherwise be 4 KB becomes 19 KB, and over a twenty-message thread that is 380 KB against Gmail's 102 KB clipping threshold. The icons are usually the single heaviest element in a signature after the logo, for the least return.

An alternative that survives everything

A single text line reading LinkedIn · GitHub with each word linked. It is under 100 bytes, it works with images blocked, it works in dark mode, it is tappable at a comfortable size, and it says where the links go. The only thing it lacks is the visual texture of icons, which was never the point.

Frequently asked questions