Skip to content
gohacks.dev
Web

Avatar Generator

Generate a default avatar from a name or user id: initials on a colour derived from the name, or a symmetric identicon, as a small SVG.

Free · No sign-up · Your inputs stay in your browser

Input

Generate an initials avatar or identicon

Output

Avatar

AL
AL

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 100 100"><clipPath id="c"><circle cx="50" cy="50" r="50"/></clipPath><g clip-path="url(#c)"><rect width="100" height="100" fill="hsl(278 55% 42%)"/><text x="50" y="50" dy=".35em" fill="#fff" font-family="system-ui, sans-serif" font-size="40" font-weight="600" text-anchor="middle">AL</text></g></svg>

The colour and pattern are derived from a hash of the input, so the same user always gets the same avatar with no image stored, and the SVG is a few hundred bytes. Hash a stable id rather than a display name, which users change. The identicon is a symmetric 5×5 grid like GitHub's default avatars.

Runs in this browser. Nothing you paste is sent to a server.

Deterministic defaults

The same input always gives the same avatar, so there is nothing to store and nothing to generate in advance: render it on demand, or inline the SVG. Hash a stable identifier such as the user id rather than the display name, which changes. GitHub's default avatars are identicons built the same way.

Accessible colours

White initials need a dark enough background. The hue comes from the hash while saturation and lightness are fixed, which keeps contrast acceptable for every name.

Share

Frequently asked questions

Can I use these avatars in an app?
Yes. Generate the SVG server-side with the same hash, or use the SVG output directly. It is plain markup with no dependencies.
Why does the identicon look symmetric?
The left columns are mirrored to the right, which makes random patterns look like deliberate shapes and easier to recognise.
Is what I paste sent anywhere?
No. The tool runs entirely in your browser with JavaScript. Nothing you type or paste is sent to our server or stored.

Keep planning

Similar tools