Avatar Component
A lightweight, accessible avatar component built with semantic HTML and Tailwind CSS. Display user profile images, initials, and placeholder icons in multiple sizes and shapes. Supports stacked groups, online status indicators, and ring variants for rich user interface representations.
Avatar components display user profile images or initials in a compact, customizable container. Built with Frutjam's CSS custom properties, avatars represent users, contributors, or team members across your interface. The avatar system supports images and text, multiple sizes, colors, shapes, status indicators, rings, and group arrangements—ideal for user lists, comments, team displays, profile sections, and messaging interfaces.
| Class | Type | Description |
|---|---|---|
| avatar | Base | Circular avatar container with initials or image |
| avatar-group | Modifier | Overlapping stack of multiple avatars |
| avatar-ring | Modifier | Adds a colored ring border around the avatar |
| avatar-circle | Style | Fully circular shape (default) |
| avatar-rounded | Style | Rounded rectangle shape |
| avatar-square | Style | Square shape with no rounding |
| avatar-online | Style | Green online status indicator |
| avatar-away | Style | Yellow away status indicator |
| avatar-busy | Style | Red busy status indicator |
| avatar-offline | Style | Gray offline status indicator |
| avatar-xs | Size | Extra small |
| avatar-sm | Size | Small |
| avatar-md | Size | Medium (default) |
| avatar-lg | Size | Large |
| avatar-xl | Size | Extra large |
| avatar-2xl | Size | 2x extra large |
| avatar-primary | Color | Primary theme color |
| avatar-secondary | Color | Secondary theme color |
| avatar-accent | Color | Accent theme color |
| avatar-neutral | Color | Neutral theme color |
| avatar-info | Color | Info semantic color |
| avatar-success | Color | Success semantic color |
| avatar-warning | Color | Warning semantic color |
| avatar-error | Color | Error semantic color |
| avatar-ring-primary | Color | Ring in primary color |
| avatar-ring-secondary | Color | Ring in secondary color |
| avatar-ring-accent | Color | Ring in accent color |
| avatar-ring-neutral | Color | Ring in neutral color |
| avatar-ring-info | Color | Ring in info color |
| avatar-ring-success | Color | Ring in success color |
| avatar-ring-warning | Color | Ring in warning color |
| avatar-ring-error | Color | Ring in error color |
Basic Usage
Create simple avatars with text initials or colors.
<div class="avatar">AB</div> |
<div className="avatar">AB</div> |
Avatar with Images
Display user profile photos with automatic image fitting and responsive sizing.
1 2 3 4 5 6 7 8 9 10 11 | <div class="avatar avatar-sm"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=32&height=32&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-md"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=40&height=40&face_crop=true" alt="Strawbery" loading="lazy" /> </div> <div class="avatar avatar-lg"> <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=56&height=56&face_crop=true" alt="Strawbery" loading="lazy" /> </div> |
Avatar Sizes
Use size variants to scale avatars from extra-small (xs) to 2x-large (2xl) for different contexts.
1 2 3 4 5 6 | <div class="avatar avatar-xs avatar-primary">XS</div> <div class="avatar avatar-sm avatar-secondary">SM</div> <div class="avatar avatar-md avatar-accent">MD</div> <div class="avatar avatar-lg avatar-primary">LG</div> <div class="avatar avatar-xl avatar-secondary">XL</div> <div class="avatar avatar-2xl avatar-accent">2XL</div> |
Avatar Colors
Apply color variants to differentiate avatars by role, team, or status when not using images.
1 2 3 4 5 6 7 8 | <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> <div class="avatar avatar-md avatar-neutral">E</div> <div class="avatar avatar-md avatar-success">F</div> <div class="avatar avatar-md avatar-warning">G</div> <div class="avatar avatar-md avatar-error">H</div> |
Avatar Shapes
Choose from circular (default), rounded, or square shapes to match your design system.
1 2 3 | <div class="avatar avatar-lg avatar-circle avatar-primary">●</div> <div class="avatar avatar-lg avatar-rounded avatar-secondary">◇</div> <div class="avatar avatar-lg avatar-square avatar-accent">■</div> |
Avatar with Initials
Display user initials for quick identification in lists, comment threads, and team sections.
1 2 3 4 | <div class="avatar avatar-sm avatar-primary">JD</div> <div class="avatar avatar-md avatar-secondary">AR</div> <div class="avatar avatar-lg avatar-accent">MS</div> <div class="avatar avatar-xl avatar-info">KL</div> |
Avatar with Status Indicator
Combine avatars with status badges to show user presence or availability (online, offline, busy, away).
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-online avatar-primary">JD</div> <div class="avatar avatar-md avatar-offline avatar-secondary">AR</div> <div class="avatar avatar-md avatar-busy avatar-accent">MS</div> <div class="avatar avatar-md avatar-away avatar-info">KL</div> |
Avatar with Ring Border
Add decorative rings around avatars for emphasis, status highlighting, or visual separation.
1 2 3 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-lg avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-xl avatar-ring avatar-ring-accent avatar-accent">C</div> |
Ring Color Variants
Choose ring colors independently from avatar background colors.
1 2 3 4 5 6 7 | <div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div> <div class="avatar avatar-md avatar-ring avatar-ring-secondary avatar-secondary">B</div> <div class="avatar avatar-md avatar-ring avatar-ring-accent avatar-accent">C</div> <div class="avatar avatar-md avatar-ring avatar-ring-info avatar-info">D</div> <div class="avatar avatar-md avatar-ring avatar-ring-success avatar-success">E</div> <div class="avatar avatar-md avatar-ring avatar-ring-warning avatar-warning">F</div> <div class="avatar avatar-md avatar-ring avatar-ring-error avatar-error">G</div> |
Avatar Group
Stack multiple avatars with automatic negative margin for overlapping display of team members and collaborators.
1 2 3 4 5 6 | <div class="avatar-group"> <div class="avatar avatar-md avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-md avatar-accent">C</div> <div class="avatar avatar-md avatar-info">D</div> </div> |
Avatar Group with Different Sizes
Combine multiple sizes within a group for visual hierarchy.
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-sm avatar-primary">A</div> <div class="avatar avatar-md avatar-secondary">B</div> <div class="avatar avatar-lg avatar-accent">C</div> </div> |
Avatar Group with Status
Show availability status for each member in a team group.
1 2 3 4 5 | <div class="avatar-group"> <div class="avatar avatar-md avatar-online avatar-primary">A</div> <div class="avatar avatar-md avatar-offline avatar-secondary">B</div> <div class="avatar avatar-md avatar-busy avatar-accent">C</div> </div> |
Combined Variants
Mix and match size, color, shape, status, and ring modifiers for complex avatar displays.
1 2 3 4 5 | <div class="avatar avatar-xl avatar-rounded avatar-ring avatar-ring-success avatar-success avatar-online">SK</div> <div class="avatar avatar-lg avatar-square avatar-ring avatar-ring-primary avatar-primary">AB</div> <div class="avatar avatar-2xl avatar-circle avatar-ring avatar-ring-error avatar-error avatar-busy">MR</div> |