SVG Avatar Iniciais

Initials avatars in SVG: self-contained placeholders for any user

An initials avatar is the fallback every modern product reaches for when a user has not uploaded a profile picture: a coloured circle (or rounded square) with one or two letters in the centre. Gmail does it, Slack does it, Notion does it, Discord does it. Building it in SVG instead of HTML gives you a vector image that scales perfectly to any size, encodes the colour and the letters in a single string you can store as a data URI, and avoids the layout shift you'd get while a remote image loads. The canonical structure is a circle plus a centred <text> node:

<svg viewBox="0 0 80 80" width="40" height="40">
  <circle cx="40" cy="40" r="40" fill="#3b82f6"/>
  <text x="40" y="50" text-anchor="middle"
    fill="white" font-size="32"
    font-family="system-ui, sans-serif">AB</text>
</svg>

Hashing the name into a stable colour

The same person should always see the same colour, even across sessions and devices, without a server-side lookup. The trick is to hash the name string and map the result into a colour space. A simple djb2-like accumulator plus an HSL conversion gives 360 distinct hues and the same name always produces the same hue:

let hash = 0;
for (let i = 0; i < name.length; i++) {
  hash = name.charCodeAt(i) + ((hash << 5) - hash);
}
const hue = Math.abs(hash) % 360;
return `hsl(${hue}, 70%, 50%)`;

Fixing saturation around 70% and lightness around 45–55% keeps every result vibrant but never so pale that white text loses contrast. For brand-safer palettes, map the hash modulo into a curated list of ~12 colours (Slack does this).

Extracting initials, one vs two letters

• One letter — WhatsApp style: first character of the first word. Simpler, friendlier for mobile-thumbnail sizes.
• Two letters — Slack and Notion style: first letter of first word + first letter of last word. Reads as a monogram.
• CJK / RTL languages — use the first glyph as-is (a single CJK character already carries enough information); make sure the SVG font-family falls back to a system font that includes the script.
• Emoji / numbers in name — skip them when extracting; if nothing remains, fall back to ? or the first Unicode codepoint of the original string.

Accessibility, contrast and use cases

The avatar should never be the only way to identify the user. Wrap it in a node with role="img" and aria-label="Avatar of João Silva" so screen readers announce a meaningful description. For contrast, always use white or near-white text (it works against the vibrant HSL palette above) — or compute the relative luminance and pick black/white dynamically to comply with WCAG 4.5:1. Common use cases: profile picture fallback before image loads (prevents CLS), comment threads, mentions in chat (Discord, Slack), team listings (Notion, Linear), participant tiles in video calls (Zoom, Google Meet).

Libraries, Gravatar and data URI shipping

If you'd rather not roll your own, services like ui-avatars.com (Sebastian Lasse, free API), DiceBear (Florian Körner, multiple avatar styles), and Boring Avatars (Hayk An) generate similar avatars from a name parameter. Gravatar is different — it requires hashing the user's email and round-tripping to a third-party server, which leaks email hashes and adds a request; initials avatars are self-contained and weigh under 500 bytes when inlined as a data URI (data:image/svg+xml,...). For SSR, you can embed the SVG directly in the HTML and skip the image request entirely.

FAQ

How do I fall back from a missing profile photo? Render the initials avatar by default and overlay the <img> on top. If the image fails to load, the avatar stays visible. Avoids the broken-image icon flash and the layout shift.

Will the colour stay the same across devices? Yes, as long as the input string is identical. The hash is deterministic and depends only on the name, so the same user shows the same circle everywhere.

Does it work with CJK or Arabic characters? Yes — SVG's <text> renders any Unicode codepoint. Make sure the font-family list includes a fallback that covers the script (e.g. system-ui or specific CJK fonts).

Should I cache the avatar? If the name is fixed, render once and reuse the data URI. For a dynamic list (search results), regenerate inline — at ~500 bytes a piece, 1000 avatars cost less than one mid-sized JPEG.