# Avatar Component

Avatars are used to show a thumbnail representation of an individual or business in the interface.

| Class name | Type |  |
| --- | --- | --- |
| avatar | Component | Avatar |
| avatar-group | Component | Container for multiple avatars |
| avatar-online | Modifier | shows a green dot as online indicator |
| avatar-offline | Modifier | shows a gray dot as offline indicator |
| avatar-placeholder | Modifier | To show letters as avatar placeholder |

#### Avatar

```
<div class="$$avatar">
  <div class="w-24 rounded">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>
```

#### Avatar in custom sizes

```
<div class="$$avatar">
  <div class="w-32 rounded">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>
<div class="$$avatar">
  <div class="w-20 rounded">
    <img
      src="https://img.daisyui.com/images/profile/demo/[email protected]"
      alt="Tailwind-CSS-Avatar-component"
    />
  </div>
</div>
<div class="$$avatar">
  <div class="w-16 rounded">
    <img
      src="https://img.daisyui.com/images/profile/demo/[email protected]"
      alt="Tailwind-CSS-Avatar-component"
    />
  </div>
</div>
<div class="$$avatar">
  <div class="w-8 rounded">
    <img
      src="https://img.daisyui.com/images/profile/demo/[email protected]"
      alt="Tailwind-CSS-Avatar-component"
    />
  </div>
</div>
```

#### Avatar rounded

```
<div class="$$avatar">
  <div class="w-24 rounded-xl">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>
<div class="$$avatar">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>
```

#### Avatar with mask

```
<div class="$$avatar">
  <div class="$$mask $$mask-heart w-24">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>
<div class="$$avatar">
  <div class="$$mask $$mask-squircle w-24">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>
<div class="$$avatar">
  <div class="$$mask $$mask-hexagon-2 w-24">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>
```

#### Avatar group

```
<div class="$$avatar-group -space-x-6">
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
    </div>
  </div>
  <div class="$$avatar">
    <div class="w-12">
      <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
    </div>
  </div>
</div>
```

#### Avatar with online/offline indicator

```
<div class="$$avatar $$avatar-online">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>
<div class="$$avatar $$avatar-offline">
  <div class="w-24 rounded-full">
    <img src="https://img.daisyui.com/images/profile/demo/[email protected]" />
  </div>
</div>
```

#### Avatar with placeholder

```
<div class="$$avatar $$avatar-placeholder">
  <div class="w-24 rounded-full bg-neutral text-neutral-content">
    <span class="text-xl">A</span>
  </div>
</div>
<div class="$$avatar $$avatar-placeholder">
  <div class="w-24 rounded-full bg-primary text-primary-content">
    <span class="text-xl">B</span>
  </div>
</div>
```

![daisyUI store](https://img.daisyui.com/images/store/nexus.webp)

## NEXUS Official daisyUI Dashboard Template

## Available on daisyUI store

[More details](/store)