---
title: Avatar
slug: avatar
Description: Profile picture, user initials or fallback icon.
section: components
---
# Avatar

<Description>Profile picture, user initials or fallback icon.</Description>

<ComponentThemesPreview name="avatar" file="avatar-demo" />
## API Reference

This component inherits props from the [Avatar primitive](/primitives/components/avatar).

## Examples


### Size

Use the `size` prop to control the size of the avatar.

<ComponentThemesPreview name="avatar" file="avatar-sizes-demo" />

### Variant

Use the `variant` prop to control the visual style of the avatar.

<ComponentThemesPreview name="avatar" file="avatar-variant-demo" />

### Color

Use the `color` prop to assign a specific color.

<ComponentThemesPreview name="avatar" file="avatar-color-demo" />

### High-contrast

Use the `highContrast` prop to increase color contrast with the background.

<ComponentThemesPreview name="avatar" file="avatar-hc-demo" />


### Radius

Use the `radius` prop to assign a specific radius value.

<ComponentThemesPreview name="avatar" file="avatar-radius-demo" />
