Avatar from Initials

About this tool

The Avatar from Initials Generator creates profile image placeholders with one to three initials on a solid colour. Type a name and the tool takes the first letter of the first two words (Jane Doe gives JD; a single word gives one letter), or type up to three custom initials to override it. The background colour is derived from a hash of the full name, so the same name always gets the same colour; pick your own background and text colours with the colour pickers if you prefer. Choose a circle, rounded square or square shape and a size of 64, 100, 128 or 200 pixels, then download a clean SVG or PNG. Initials use a semibold system font, sized automatically. It suits user account UIs, design mockups, email templates, and anywhere a profile photo placeholder is needed, a pattern used by Google, GitHub, Slack and many other apps. Everything runs in your browser.

Why use it

• Generates clean initials avatars in seconds — no design tool needed.

• Auto-color derives a consistent hue from the name so the same user always gets the same color across sessions.

• Three shapes, four sizes and custom background and text colours.

• SVG and PNG downloads for code, mockups and uploads.

How to use

1. Type a name in the Name field; the initials are the first letters of the first two words.
2. Optionally enter up to three letters in Custom initials to override the automatic ones.
3. Choose a Shape (circle, rounded square or square) and a Size (64, 100, 128 or 200 px).
4. Keep the automatic background colour or pick your own, and set the Text colour.
5. Click Download SVG or Download PNG to save avatar.svg or avatar.png.

When it helps

• Creating profile image placeholders for users who have not uploaded a photo in your web or mobile app.
• Populating design mockups with realistic-looking avatars in Figma, Sketch, or Adobe XD.
• Generating avatar assets for user documentation or onboarding flows.
• Building test environments with visually distinct user representations.

Examples

Tips

• Leave the background on auto so the same name maps to the same colour — users come to recognise their own avatar across screens.
• For dark UI themes, pick a slightly darker background with the colour picker so white initials stay readable.
• Use 64 px for list views (chats, comments), 128 px for navigation menus, and 200 px or the SVG for larger profile headers.
• If you need accessibility-grade contrast, ensure the initials and background have a contrast ratio of at least 4.5:1, especially when you pick custom colours.
• When the first letters aren't the most representative characters of a name, type the initials you want in Custom initials.
• Cache generated avatars by name hash to avoid recomputing on every render in long lists.
• Combine with the Identicon Generator for users you only know by email — initials work better when you have a name.

Frequently Asked Questions

Glossary

Initials avatar

A common UI pattern where a user's first and last initial are drawn on a colored circle as a default profile image. Used by Google, Microsoft, Slack, GitHub, and many SaaS apps.

Auto-color hashing

A technique where a small hash of the user's name is mapped to a color hue, so the same name always produces the same background color across sessions and devices.

Canvas (HTML5)

The browser's bitmap drawing API. For PNG export this tool draws the avatar SVG onto a canvas and exports it with canvas.toDataURL.

Data URL

A URL scheme (data:image/png;base64,...) that embeds image bytes directly in the URL string. Useful for inlining avatars into HTML without extra HTTP requests.

Rounded square

A square with softened corners. This tool uses a corner radius of 20% of the avatar size for its default shape.

Foreground / background contrast

The visual difference between the initial-text color and the background color. WCAG AA requires a contrast ratio of at least 4.5:1 for body text — important for accessibility.

Initial extraction

The logic that turns a name into initials. This tool splits on whitespace and takes the first character of the first two words.

PNG vs SVG

PNG is a raster format with fixed pixel dimensions, ideal for upload and display. SVG is vector and infinitely scalable, handy when you need a size other than the presets.