---
title: Avatar
description: Avatar
element: vaadin-avatar
---

## Description

`<vaadin-avatar>` is a Web Component providing avatar displaying functionality.

```html
<vaadin-avatar img="avatars/avatar-1.jpg"></vaadin-avatar>
```

### Styling

The following shadow DOM parts are available for styling:

Part name | Description
--------- | ---------------
`abbr`    | The abbreviation element
`icon`    | The icon element

The following custom CSS properties are available for styling:

Custom CSS property            | Description
-------------------------------|-------------
`--vaadin-avatar-background`   | Background color of the avatar
`--vaadin-avatar-border-color` | Border color of the avatar
`--vaadin-avatar-border-width` | Border width of the avatar
`--vaadin-avatar-font-size`    | Font size of the avatar
`--vaadin-avatar-font-weight`  | Font weight of the avatar
`--vaadin-avatar-size`         | Size of the avatar
`--vaadin-avatar-text-color`   | Text color of the avatar

The following state attributes are available for styling:

Attribute         | Description
------------------|-------------
`focus-ring`      | Set when the avatar is focused using the keyboard.
`focused`         | Set when the avatar is focused.
`has-color-index` | Set when the avatar has `colorIndex` and the corresponding custom CSS property exists.
`has-tooltip`     | Set when the element has a slotted tooltip.

See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

## Properties

### abbr

**Type:** `string | null | undefined`

A shortened form of name that is displayed
in the avatar when `img` is not provided.

### colorIndex

**Type:** `number | null | undefined`

Color index used for avatar background.

### i18n

**Type:** `AvatarI18n`

The object used to localize this component. To change the default
localization, replace this with an object that provides all properties, or
just the individual properties you want to change.

The object has the following JSON structure and default values:
```js
{
  // Translation of the anonymous user avatar tooltip.
  anonymous: 'anonymous'
}
```

See also: [AvatarI18n](#avatari18n)

### img

**Type:** `string | null | undefined`

The path to the image

### name

**Type:** `string | null | undefined`

Full name of the user
used for the tooltip of the avatar.

### withTooltip

**Type:** `boolean`

When true, the avatar has tooltip shown on hover and focus.
The tooltip text is based on the `name` and `abbr` properties.
When neither is provided, `i18n.anonymous` is used instead.

## Types

### AvatarI18n

```ts
export interface AvatarI18n {
  anonymous?: string;
}
```