---
metaTitle: Avatar component | AwesCode UI
meta:
  - name: description
    content: The <AwAvatar /> component is used to render Avatar - UI Vue component for AwesCode UI.
title: Avatar
---

# Avatar

**Category:** Atom | **Import:** Global

The `AwAvatar` component displays a user avatar with image, initials, or placeholder icon.

## Overview

`AwAvatar` provides a flexible avatar component that can display a user image, initials from a name, or a placeholder icon. It automatically generates colors for initials based on the user's name and supports loading states.

## Usage

### Basic Example

```markup
<AwAvatar src="/user.jpg" name="John Doe" />
```

### With Initials

```markup
<AwAvatar name="Jane Smith" :size="48" />
```

### Custom Size

```markup
<AwAvatar name="User" :size="64" />
```

### Different Types

```markup
<AwAvatar name="User" type="initials" /> <!-- Shows initials -->
<AwAvatar name="User" type="empty" /> <!-- Empty circle -->
<AwAvatar name="User" type="no-img" /> <!-- Placeholder icon -->
```

### Without Color

```markup
<AwAvatar name="User" :is-colored="false" />
```

## API

### Props

| Name | Description | Type | Required | Default | Validator |
|------|-------------|------|----------|---------|-----------|
| tag | HTML tag for wrapper | `String` | `false` | `'span'` | - |
| src | Full URL to the picture | `String` | `false` | `''` | - |
| name | User name (for initials) | `String` | `false` | `''` | - |
| size | Size of the avatar in pixels | `Number` / `String` | `false` | `36` | Must be a number |
| type | Display type when no image | `String` | `false` | `'initials'` | Must be: initials, empty, no-img |
| isColored | Use colored background for initials | `Boolean` | `false` | `true` | - |
| loading | Show loading indicator | `Boolean` | `false` | `false` | - |
| colors | Array of color objects for initials | `Array` | `false` | From config | - |
| square | Use square shape instead of circle | `Boolean` | `false` | `false` | - |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Custom avatar content | `{ src, name, initials, color, onColor, imageError }` | Image or initials |
| no-img | Custom no-image placeholder | `{ initials, color, onColor }` | Default placeholder icon |
| loading | Custom loading indicator | `{ isLoading }` | Default loader |

### Events

No events are emitted by this component.

### Config Options

The component uses default configuration from `@AwConfig`:

```javascript
export default {
  AwAvatar: {
    colors: COLORS // Array of color objects
  }
}
```

## Related Components

- `AwUserpic` - User picture component
- `AwIslandAvatar` - Avatar in island layout

## Notes

- **Import Method:** Global - Available as atom component
- Automatically extracts initials from name (first letter of first two words)
- Colors are deterministically generated from name hash for consistency
- Falls back to initials/placeholder when image fails to load
- Supports loading state indicator
- Square variant available for different design needs