Identicon and initials avatar generator — SVG from any name

How to use the identicon avatar generator

1. Type a Name, email or any text, such as a username or user ID.
2. Choose a Style: Identicon (a symmetric block pattern) or Initials.
3. Pick a Shape: Circle, Rounded or Square, and set the Size (16–512 px).
4. For identicons, set the Grid (3–9). Smaller grids give bolder blocks.
5. Optionally type a Background hex colour, then copy the code or download avatar.svg.

What it does and when to use it

New users on a forum, a team tool or a comments section often have no photo. A grey silhouette for everyone makes them hard to tell apart. An identicon or initials avatar gives each person a distinct, stable picture from information you already have, and it stays the same each time it is drawn.

Initials suit business tools where people know each other’s names. Identicons suit public sites where you would rather not show a name, or where many people share the same initials. For a team page header, the abstract background generator can make a matching banner. For status labels next to a profile, try the SVG badge generator. To pick a fixed brand background instead of the hashed colour, test options in the colour palette generator.

How it works

The trimmed, lower-case text is turned into a 32-bit number with the FNV-1a hash. That number seeds a small random number generator (mulberry32). The first value picks a hue from 0 to 359, and the foreground colour is that hue at 55% saturation and 48% lightness.

For an identicon, the tool keeps a 10% margin and divides the rest into a grid. It decides each cell in the left half (including the middle column) with a 50% chance and mirrors it to the right, which makes the face-like symmetry. The background is light grey #f0f0f0 unless you set one. For initials, the hue colour fills the whole square and white letters are drawn at 40% of the size. Circle and Rounded shapes are made with a clip path. Everything runs in your browser.

Worked examples

Default identicon. “Priya Sharma”, 128 px, rounded, 5 × 5. The SVG has aria-label="Identicon for Priya Sharma" and teal blocks, <g fill="#37beb7">, on #f0f0f0.

Same person, initials. Initials, Circle. The square is filled with the same teal, <rect width="128" height="128" fill="#37beb7"/></g><text, and the text is PS. Users keep their colour whichever style you choose.

Email address with a brand background. “maya.chen@example.com”, Initials, background #0f766e. The letters come out as >MC</text> on dark teal.

Limits and tips

• Two different texts can, rarely, produce the same identicon. Do not use it as a unique ID.
• Initials use a system font, so the exact letter shapes vary by device. Convert to PNG if you need fixed pixels.
• Avatars pasted inline into one HTML page all use the clip-path id a. That is harmless when they share one size and shape; otherwise give each a different id.