Why it matters
Placeholder services are handy until one goes offline the week before a client demo, or a privacy review asks why every page calls a third-party server. Generating placeholders yourself means they always load and nothing about your visitors leaves your site.
An SVG placeholder is usually a few hundred bytes, scales to any size and can sit inline in your HTML. The initials avatars give each name the same colour every time, which makes lists of people easier to scan.
How to use it
- Choose Image or Avatar.
- Set the size, colours and label, or type a name for the avatar.
- Download a PNG or SVG, or copy it.
- Or copy the data URI or img tag to paste straight into your HTML.
FAQ
Why use an SVG placeholder?
It's tiny, sharp at any size, and can be inlined so there's no extra request.
How is the avatar colour chosen?
From a hash of the name, which picks a hue. Every hue uses the same mid-tone lightness, so white letters stay readable, and the same name always gets the same colour.
Can I use these in production?
Yes. The avatar is a good fallback when a user hasn't uploaded a photo. Give the img an alt text with the person's name.
Does anything get uploaded?
No. Everything is drawn in your browser.
