Avatar Component Generator.

Generate production-ready avatars from a single prompt. 6 open-source patterns — photo, Notion-style illustrated, initials fallback, presence badge, stacked group, uploader — all Tailwind + shadcn, accessible, themeable and MIT-licensed. Copy the code, or regenerate any of them straight into your Lovable, Bolt, v0 or Cursor project.

6 templates

Avatar Templates You Can Generate

Every template is a real prompt, not a screenshot. Copy it into any AI editor, or run it in MeDo and get React + Tailwind code back.

BasicImage + Fallback

Photo With Initials Fallback

Photo when it loads, initials when it doesn't. The avatar every app needs first.

Create a reusable <Avatar /> React component with Tailwind CSS. Pattern: basic avatar with image and initials fallback. Layout: circular avatar rendering an <img> when src loads; on error or missing src, render a generated initials fallback with a deterministic background color derived from the name string. API: props for src, name (required, used for alt text and initials), size ("xs" | "sm" | "md" | "lg" | "xl"), and className passthrough. Include: required alt text from name, loading="lazy", onError fallback swap via local state, focus-visible ring when rendered inside a link or button, light and dark support via Tailwind dark: classes. Constraints: React + Tailwind only, no external UI or image dependencies, no layout shift while the image loads (reserve the box with fixed width/height).

Try in MeDo

StatusPresence Badge

Avatar With a Presence Dot

Online, away, busy, offline — a presence dot anchored to the avatar's edge.

Create an <AvatarWithStatus /> React component with Tailwind CSS. Pattern: avatar with a presence badge. Layout: circular avatar with a small status dot pinned to the bottom-right, separated from the photo by a background-colored ring so it reads on any surface. API: props for src, name, size, and status ("online" | "away" | "busy" | "offline"), with the dot color mapped per status and the dot scaling with avatar size. Include: initials fallback, a visually hidden text label announcing the status for screen readers (do not rely on color alone), aria-label on the wrapper, light and dark support. Constraints: React + Tailwind only, no external UI deps, dot never overlaps more than 30% of the avatar edge.

Try in MeDo

GroupStacked + Overflow

Avatar Group With a +N Chip

Overlapping avatar stack with a +N overflow chip. For teams, assignees, collaborators.

Create an <AvatarGroup /> React component with Tailwind CSS. Pattern: stacked (overlapping) avatar group with overflow count. Layout: horizontal row of avatars overlapping by roughly one third, each with a background-colored ring so the stack stays legible; after max visible avatars, render a "+N" counter chip in the same size and shape. API: props for users (array of { src, name }), max (default 4), size, and an optional onAddClick that renders a dashed "Invite" affordance at the end of the row. Behaviour: hover lifts the hovered avatar above its neighbours with a small translate and z-index change; the stack reverses overlap direction with a "dir" prop. Include: initials fallback per avatar, aria-label summarising the full member count, keyboard-focusable items with focus-visible rings, light and dark support. Constraints: React + Tailwind only, no external UI deps, no animation library.

Try in MeDo

Sizes & ShapesScale + Shape

Scale System

xs through xl on one type scale, plus circle, squircle and rounded-square variants.

Create a themeable <Avatar /> React component with a full size and shape scale, using Tailwind CSS. Pattern: avatar design-system primitive. API: size ("xs" | "sm" | "md" | "lg" | "xl" | "2xl") mapped through a single lookup object that controls width, height, font size and border-radius together; shape ("circle" | "squircle" | "square"); plus src, name and className. Requirement: initials font size scales proportionally with the avatar box so xs and 2xl both stay balanced; all tokens live in one config object at the top of the file so a team can retheme in one place. Include: initials fallback, alt text from name, forwardRef to the root element, TypeScript prop types exported, light and dark support. Constraints: React + Tailwind only, no external UI deps, no inline styles except computed pixel sizes.

Try in MeDo

UploaderEditable

Avatar With Upload and Remove

Avatar with a camera badge, upload button and file constraints. For settings pages.

Create an <AvatarUploader /> React component with Tailwind CSS. Pattern: editable profile photo control for a settings page. Layout: large avatar on the left with a circular camera badge pinned to its bottom-right; on the right, a "Profile Photo" label, a file-constraint hint line ("PNG or JPG, up to 2 MB"), and an Upload primary button plus a Remove text button. Behaviour: hidden <input type="file" accept="image/png,image/jpeg"> triggered by both the badge and the Upload button; client-side size/type validation with an inline error message; local preview via URL.createObjectURL, revoked on unmount; Remove restores the initials fallback. Include: <label> association for the file input, aria-live region for validation messages, focus-visible rings, disabled/uploading state on the button, light and dark support. Constraints: React + Tailwind only, no upload library, no cropping dependency — expose an onChange(file) callback for the caller.

Try in MeDo

Profile RowAvatar + Meta

Avatar, Name, Role Row

Avatar, name, verification tick and role — the row that fills tables and member lists.

Create an <AvatarRow /> React component (and a <MemberList /> wrapper) with Tailwind CSS. Pattern: avatar plus metadata row for member lists, tables and comment threads. Layout: avatar on the left, a two-line block with the person's name (plus an optional verified tick) and a muted secondary line ("Team · Role"), and a trailing action button on the right; the middle block truncates with min-w-0 + truncate instead of wrapping. API: props for users (array of { src, name, role, team, verified }), a trailing action label, and an onAction(user) callback. Include: initials fallback, semantic <ul>/<li> markup in the wrapper, accessible name on the trailing button ("Manage access for {name}"), hover row highlight, focus-visible rings, light and dark support. Constraints: React + Tailwind only, no table or list library, works at 320px width without overflow.

Try in MeDo

Avatar Patterns for Different Websites

The same avatar component, tuned to the kind of site it ships on.

01 / 06

SaaS Team Settings

Member lists live and die by the avatar row — photo, name, role, access action. Initials fallback keeps the table tidy when nobody has uploaded a photo yet.

Avatar Styles and Variants

Pick the variant that matches the rest of the page, then generate it.

01 / 06

Basic Avatar

Image with an initials fallback and a deterministic background color per name. The baseline every other variant extends.

Avatar in React, Next.js, Vue and Svelte

React, Next.js, Vue 3, SvelteKit, Astro or plain HTML — the same avatar, six ways to drop it in.

01 / 06

React Avatar

A single functional component with a size lookup and an onError fallback. No client state beyond the image-failed flag, safe anywhere in a React 18+ tree.

src/components/Avatar.tsx

export function Avatar({ src, name, size = "md" }) {
  const [failed, setFailed] = useState(false);
  return failed || !src
    ? <span className={box[size]}>{initials(name)}</span>
    : <img src={src} alt={name} onError={() => setFailed(true)} />;
}

Who Uses the Avatar Component

Team and Member Lists

Settings pages, org charts and permission tables all need the same row: avatar, name, role, action. Generate it once and reuse it across every table in the app.

Real-Time Collaboration

Stacked avatars with a +N chip are the cheapest presence UI there is — one row tells the user who else is editing without a sidebar or a websocket dashboard.

Social Feeds and Comments

Comment threads, reactions and mentions repeat the avatar hundreds of times per page. A single primitive with a size scale keeps the layout consistent and the bundle small.

Chat and Support Inboxes

Presence badges tell an agent whether a customer is still online, and the initials fallback keeps the inbox readable when nobody has a profile photo.

Account Settings and Onboarding

The upload avatar handles file type and size validation, local preview and remove — the whole profile-photo flow without an upload library.

Marketplaces and Reviews

Reviewer avatars with a verification tick do more for perceived trust than an extra star. Drop the profile row straight into product pages.

How to Add Your Avatar to a Project

Four steps, from picking a avatar template to shipping it in production.

01~30s

Pick an Avatar Pattern

Scan the 6 templates above and pick the one closest to your surface — photo, illustrated, table row, presence stack, or upload control.

02~2s

Preview It Live

Every card renders a real React + Tailwind preview, so you see the spacing and sizing before you copy anything.

03~10s

Copy the Prompt or Code

Copy the prompt into MeDo, Lovable, Bolt, v0 or Cursor, or take the component code straight from the card.

04~1min

Drop It Into Your App

Import <Avatar /> once, then reuse it in tables, headers and comment threads with the size and shape props.

Common Questions About Avatar

What Is an Avatar Component?

An avatar component renders a small image that represents a user, team or organisation — usually a circular profile photo. A production-ready avatar also handles the cases where the photo is missing or fails to load, typically by showing the person's initials on a generated background color.

How Do Avatar Fallback Initials Work?

The component takes the user's name, splits it on whitespace, and renders the first character of the first and last parts in uppercase. The background color is derived deterministically from the name string, so the same person always gets the same color across sessions and devices.

What Is an Avatar Group or Stacked Avatar?

An avatar group is a horizontal row of overlapping avatars, each with a background-colored ring so the stack stays readable. After a maximum visible count it renders a "+N" chip. It's the standard pattern for team members, task assignees and live collaborators.

Are These Avatar Components Accessible?

Yes. Every avatar carries alt text derived from the user's name, presence status is announced with a visually hidden label rather than color alone, tooltips are wired with aria-describedby, and interactive avatars keep visible focus-visible rings.

Are These Avatar Components Free for Commercial Use?

Yes. Every template in the gallery is MIT licensed — use it in personal projects, client work and commercial products with no attribution and no licensing fees.

Do They Work With React, Vue, and Svelte?

The components are authored in React + Tailwind, but the markup is framework-agnostic. The Frameworks section above shows the same avatar in Next.js, Vue 3, SvelteKit, Astro and plain HTML.

How Should I Size and Optimise Avatar Images?

Serve square crops at roughly twice the rendered box (80px for a 40px avatar) to stay sharp on retina screens, set explicit width and height to avoid layout shift, use object-cover, and add loading="lazy" for avatars below the fold.

Should I Use Photo Avatars or Illustrated Avatars?

Use real photo avatars when identity matters — team directories, support inboxes, marketplace reviews — because a face is the fastest way to recognise a person. Use illustrated avatars in the Notion style when most users never upload a photo, when you want a consistent on-brand look, or when showing real faces raises privacy concerns. A good system supports both: photo when available, a deterministic illustration or initials when it isn't.

Generate Your Avatar Component in 30 Seconds.

Regenerate any of the 6 avatar templates from a prompt, or describe your own — photo, illustrated, presence badges, stacked groups, uploaders. Free, MIT-licensed, no signup.

Open the Generator View pricing