Initials Avatar Generator

Generate an SVG avatar from name initials — choose shape, size, and colors.

Full name

Shape

Size

Background

Text

SVG initials avatar explained

The avatar is a pure SVG element with a shape (circle, square, or rounded square), a background color, and a centered text element for the initials. The initials are taken from the first letter of the first and last word in the name. The result is a scalable vector — no raster artifacts at any size.

To generate a gradient avatar, try the CSS Gradient Generator. For full icon sets, see Favicon Generator. To encode the SVG for CSS background-image use, try URL Encoder.

Built and maintained by Meet Shah · Last updated 12 August 2026

What this tool is used for

Producing a placeholder avatar for a user who has not uploaded a picture.
Generating consistent avatars from names for a mockup or a prototype.
Creating an SVG avatar that scales without pixelation.
Producing avatars for a demo dataset so every row looks populated.
Getting a deterministic colour per name so the same user looks the same.

Frequently Asked Questions

How are the initials chosen?: First letter of the first word plus first letter of the last word, upper-cased — "Alice Johnson" gives AJ, and "Ann-Marie O'Brien" gives AO. A single word gives its first two characters ("Cher" → CH), and an empty name gives a question mark.
Does it work with non-Latin names?: Yes. Letters are taken by code point rather than by UTF-16 unit, so "李小龍" gives 李小 and a name beginning with an emoji or a rare plane-2 ideograph is not sliced in half into a broken character. Upper-casing simply leaves scripts without case alone.
Why SVG rather than PNG?: It is a few hundred bytes, stays sharp at any size, and can be inlined as a data URI with no extra request. For a list of a hundred users that is a hundred avatars for less than the weight of one photograph — and the text stays editable.
How is the text centred?: `x="50%"` with `text-anchor="middle"` centres horizontally, and `dominant-baseline="central"` centres vertically against the font's own metrics rather than the box. The font size is 40% of the avatar, which keeps two characters comfortably inside a circle.
Will the colours pass contrast checks?: Only if you choose them so. An avatar is meaningful content when it stands in for a person, so aim for at least 4.5:1 between the text and the background — a pastel background with white text is the usual failure. Test the pair before adopting a palette.

Common errors and gotchas

Assuming two initials from a Western name pattern, which breaks for mononyms and many naming conventions.
Taking the first letters of a name written family-name-first, which produces the wrong initials.
Choosing background and text colours that fail contrast at small sizes.
Generating a colour from a name hash without checking it stays legible.
Handling non-Latin scripts by dropping characters, which produces an empty avatar.