Component Card

Avatar

Represent people with visual identity and fallback initials.

Avatar anatomy

When to Use

Comments and activity feeds to identify who did what.
User menus and profile areas where identity confirms account context.
Team lists when quick face-or-name recognition improves scanning.

When NOT to Use

Use consistent avatar sizing per context and always provide initials fallback.

If identity is irrelevant, show simple text labels and reduce visual noise.

Variants

Image avatar

Initials fallback

Stacked group

Confused?

Use Avatar for people, and use Badge when you only need metadata labels.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Build an avatar component with image, fallback initials, and optional online status indicator for user lists and comments.

Pencil Prompt

Create avatar examples for single profile, stacked team group, and fallback initials when image is missing.

Next Lesson

Accordion