Email Signature Generator CSS icons

Back in 2017, I was experimenting with something that was pretty fun for the CSS we had at the time — building icons without using images.

Using mainly CSS, :before, :after, borders, shadows and a bit of creativity, I managed to create a set of icons that didn't depend on external image files. The interesting part for email was simple: no images to load or block — the icons are always visible.

You can still see that old experiment here:

Fast forward to 2026

At my last job, I decided to apply some of that old knowledge to an email signature.

And then I met Classic Outlook again. :D

What looked like a simple signature quickly turned into dealing with Outlook's rendering limitations, different behaviour between email clients, px → pt conversions, table rendering and weird spacing issues.
A few survival tricks

Along the way I found a few useful tricks — one of my favourites being that line-height: 0.5pt can practically zero out a line in Classic Outlook, which solved one of the most annoying spacing problems I had.

Eventually, that little fight turned into a complete email signature generator: SimpleSignature

nikolaisabev.eu

If you'd like to check out the source code or contribute, you can find the repository on GitHub

k0ko.github.io

It's not trying to be the prettiest or the most complicated signature generator out there. It's simple, effective and built around what I learned from actually fighting with email clients.

It's completely free, there's no registration, and I don't store the data you enter. Feel free to use it!

If you find a bug, have an idea, or think something could work better, leave a comment here or send me an email. Feedback is more than welcome.

And if it saves you some time and you feel like supporting the work, there's a Buy Me a Coffee button. If you wish. :)

What's the worst email client rendering bug you've ever had to deal with? Do you still rely on table-based layouts, or have you found a cleaner workaround? Let me know in the comments!

Cheers,
Nikolay

Comments

[Svg/icons]

Did you compare these CSS icons with inline SVG or SVG data URIs across Outlook, Gmail and Apple Mail? It’d be interesting to see exactly where CSS still wins in 2026.

[Nikolay Sabev]

The main idea behind the project is actually much simpler — I want your contact information to always be visible and still look good, regardless of the recipient's email client settings.

That's why I intentionally don't use images for the contact icons. If images are blocked, not loaded, or handled differently by the client, I don't want the signature to lose an important part of its visual structure.

The CSS icons are there to keep the contact details recognizable without depending on external images.

So the goal isn't really "CSS vs SVG" or proving that CSS wins. It's about making the signature as independent as possible from the recipient's settings while keeping it clean and visually consistent.
Thank you for your comment :)