Avatar

🧭 When to Use an Avatar

Use an Avatar when:

• You want to represent a user, account, or team visually

• You’re displaying contributors, assignees, or contacts

• You need compact visual identity in a dense UI layout

Avoid using Avatars when:

• A name or label alone suffices for clarity

• Images are too generic to add value (e.g., placeholder icons in data tables)

🎨 Types

• Image – Uses a profile or entity image

• Initials – Auto-generated or typed initials when no image is available

• Icon – Uses a fallback symbol or custom glyph (e.g., user, company, globe)

Types are swappable via Figma variants and use tokenized color rules for consistent fallbacks.

📏 Sizes

• Extra Small (xsm) – Used in tight UIs like badges or tag avatars

• Small (sm) – Ideal for inline text, lists, or chat interfaces

• Medium (md) – Default; works across most layouts

• Large (lg) – For featured accounts, profile sections, or teams

• Extra Large (xl) – Used in settings headers or modals

• XXL (xxl) – High-emphasis avatars for hero layouts, onboarding, or dashboards

Each size scales the shape, padding, and text accordingly.

✨ Modifiers

• None – Plain avatar with no additional decoration

• Dot – A small status or presence indicator (e.g., online, away) in a corner

• Logo – Adds a background or label to denote the avatar represents a brand, product, or company

Modifiers can be toggled via layer visibility in Figma and align with consistent badge positions.

🎯 States

• Default – Standard appearance with no visual effect

• Outline – A thin stroke around the avatar; useful for clarity on dark or image backgrounds

• Shadow – Applies a subtle elevation; useful for emphasis or grouping (e.g., in overlapping avatars)

These states are visual and do not impact behavior. They're helpful in differentiating avatar roles or ownership.

♿ Accessibility Considerations

From a design perspective:

• Ensure initials and fallback icons are readable on all backgrounds

• Use contrast-compliant colors for badge dots and outlines

• Avoid using avatars as the sole way to convey identity — pair with a name or tooltip when possible

From a code perspective (if implemented):

• Use alt text for images (e.g., alt="Kirk’s avatar")

• For icon or initials-based avatars, provide a title or visually hidden label

• If avatars are interactive, use aria-label or wrap in a button with role and accessible name

✅ Best Practices

• Always provide a fallback (initials or icon) when an image fails to load

• Use consistent sizes across similar layouts (e.g., all assignees = sm)

• Don’t mix modifiers in the same row unless they convey different meanings

• Reserve shadows for high-emphasis or standalone avatars

• Dot modifiers should be color-coded consistently across the system (e.g., green = active, red = away)