Avatar

UI Components

A visual representation of a user or entity, typically displayed as a circular image, initials, or icon placeholder.

Visual Examples

Example 1

Example 2

Example 3

Visual examples for Avatar coming soon.

How It Works in Apps/Websites

Avatars provide visual identity in user interfaces. They typically display profile photos when available, falling back to initials (first letter of name) or a default icon. Common sizes range from small (24px) in compact lists to large (128px) on profile pages. Often accompanied by status indicators.

How AI Interprets This Term

When you say 'avatar', AI expects: circular image container, typically 32-48px for inline use, with fallback to colored background with white initials if no image. May have status dot (green online, gray offline) at bottom-right corner.

Prompt Examples

Copy-paste these prompts to use in your AI tools.

Basic

Create a circular avatar with user photo

Detailed

Design an avatar component: 40px circular, shows user photo if available, falls back to initials on colored background (color based on name hash). Include green status dot for online users. Show in a stack/group where avatars overlap.

Comparative

Show avatar variations: photo avatar, initials avatar (JD on blue), icon placeholder (user silhouette on gray)