A placeholder avatar stands in for a profile photo until someone uploads one. The usual pattern is the person's initials on a colour picked from their name, so the same name always gets the same avatar. Type names below to make initials, gradient or pattern avatars, then download SVG or PNG files or copy the code.
| Style | Looks like | Best for |
|---|---|---|
| Initials | Two letters on a solid colour | Team pages, comments, CRMs |
| Gradient initials | Two letters on a two-colour blend | Consumer apps, playful brands |
| Pattern | A mirrored 5 by 5 grid of squares | Anonymous users, test accounts, bots |
Updated
Enter one name or a whole list. Each name is hashed to pick its colour and pattern, so results are stable across reloads and devices. Text colour is chosen for contrast automatically. Nothing is uploaded.
Hashes the name, picks a colour, chooses black or white text for contrast and renders an inline SVG. No dependencies.
const COLORS = ["#4F98FB", "#22A39F", "#7C6CF2", "#E8774B", "#D9468F", "#3F8F4E", "#B7832F", "#5B6B82"];
function hash(s) {
let h = 0x811c9dc5;
for (let i = 0; i < s.length; i++) {
h ^= s.charCodeAt(i);
h = Math.imul(h, 0x01000193) >>> 0;
}
return h;
}
function initials(name) {
const w = name.trim().split(/\s+/).filter(Boolean);
if (!w.length) return "?";
return (w.length === 1 ? w[0].slice(0, 2) : w[0][0] + w[w.length - 1][0]).toUpperCase();
}
function textColor(hex) {
const n = parseInt(hex.slice(1), 16);
const lum = [(n >> 16) & 255, (n >> 8) & 255, n & 255]
.map((v) => v / 255)
.map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
const L = 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
return (L + 0.05) / 0.05 > 1.05 / (L + 0.05) ? "#111" : "#fff";
}
export function Avatar({ name, id = name, size = 40 }) {
const bg = COLORS[hash(String(id).toLowerCase()) % COLORS.length];
return (
<svg width={size} height={size} viewBox="0 0 40 40" role="img" aria-label={name}>
<circle cx="20" cy="20" r="20" fill={bg} />
<text x="50%" y="50%" dy=".35em" textAnchor="middle" fontSize="16" fontWeight="600"
fontFamily="system-ui, sans-serif" fill={textColor(bg)}>
{initials(name)}
</text>
</svg>
);
}When each person keeps the same colour everywhere, people start recognising colleagues in a long list before reading the name. Random colours on every page load undo that, and they also make screenshots and tests flaky.
Hashing gives stable results without storing anything. The server and the browser can both draw the same avatar from the same ID.
For lists with hundreds of people, render the SVG inline as a component rather than creating image files. It skips network requests entirely and keeps the markup small.
If you need an image URL, for example for an email or an Open Graph tag, export a PNG once per person and cache it, because many email clients do not display SVG.
The name is run through a small hash function (FNV-1a) that turns it into a number, and that number picks a colour from the palette. The same name always produces the same number, so the avatar never changes unless the name does.
For each background, the generator works out whether black or white text has more contrast using the WCAG relative luminance formula, and uses that one. Pastel palettes get dark text and stronger colours get white text.
Yes. The avatars are made by your own browser from your input and are yours to use. The React example on this page is free to copy into any project.
No. It makes abstract placeholders from names you provide, which is a safer choice for demos than photos of real or generated faces.
Related: Favicon generator, Colour palette generator, Image to Base64, Colour contrast checker, UUID generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.