---
title: Avatar
description: 'Avatar renders either an Image or the Initials of a user.'
type: images
slug: /components/avatar/
keywords: ['avatar', 'image', 'user', 'initials']
---

# Avatar

`Avatar` renders either an `Image` or the `Initials` of a user.

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

-   [Usage](#usage)
-   [Props](#props)
-   [See Also](#see-also)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

<!-- Automatically Generated. DO NOT EDIT THIS FILE. -->
<!-- Instead, edit packages/website/src/docs/components/images/avatar.mdx -->

<!-- props -->

<!-- Automatically Generated -->

## Usage

```jsx live
import { Avatar } from '@wp-g2/components';

function Example() {
	return (
		<Avatar
			name="Elsa Oldenburg"
			src="https://picsum.photos/id/1041/300/300"
			size="medium"
		/>
	);
}
```

## Props

##### animateOnImageLoad

**Type**: `boolean`

Fades the image in when it is loaded.

##### border

**Type**: `boolean`

Renders a border around the `Avatar`.

##### color

**Type**: `CSS['color']`

`Avatar` can be rendered with any background color. The background color is only visible if there is no `Image` (`src`).

```jsx live
import { Avatar } from '@wp-g2/components';

function Example() {
	return <Avatar color="blue" name="Elsa Oldenburg" size="medium" />;
}
```

##### name

**Type**: `string`

The name to render as `Initials`.

```jsx live
import { Avatar } from '@wp-g2/components';

function Example() {
	return <Avatar name="Elsa Oldenburg" size="medium" />;
}
```

##### shape

**Type**: `"circle"`,`"square"`

`Avatar` renders with a `circle` shape by default (`30px` x `30px`). There are handful of preset sizes (below). A custom shape (`border-radius`) can be provided by passing in a `number` value.

-   `circle`: Renders a circular shape.
-   `square`: Renders a rounded rectangle shape.

##### size

**Type**: `AvatarSize`,`CSS['width']`

The dimensions of the `Avatar`.
`Avatar` renders with a `medium` size by default (`30px` x `30px`). There are handful of preset sizes (below). A custom sizes can be provided by passing in a `number` value.

-   `xLarge`: Renders an `Avatar` that is `48px` x `48px`
-   `large`: Renders an `Avatar` that is `36px` x `36px`
-   `medium`: Renders an `Avatar` that is `30px` x `30px`
-   `small`: Renders an `Avatar` that is `24px` x `24px`
-   `xSmall`: Renders an `Avatar` that is `16px` x `16px`

##### src

**Type**: `string`

The source of the `Image`.

<!-- /Automatically Generated -->
<!-- /props -->

## See Also

-   [Image](../image/)
-   [Initials](../initials/)