---
title: "Avatar"
type: component
version: "2.2.1"
doc_version: "2.4.3"
status: stable
date: 2026-04-19
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Avatar with image, initials, and icon variants. Supports stacked groups, status indicators, and multiple sizes—zero JavaScript required."
url: https://frutjam.com/components/avatar
---

# Avatar Component

 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.

## Avatar with Images

Display user profile photos with automatic image fitting and responsive sizing.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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).

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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>
```