# Avatar

> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

```jsx
<Flex gap="2">

	<Avatar src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" fallback="A" />

	<Avatar fallback="A" />

</Flex>
```

## API Reference

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

| Prop                                                                                                                                                                   | Type                                                 | Default  |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------- |
| `asChild`Render one explicit target with merged props and behavior, not a cloned child. Read our [Composition](/primitives/docs/guides/composition) guide for details. | `boolean`                                            | —        |
| `size`                                                                                                                                                                 | `Responsive<enum>`                                   | `"3"`    |
| `variant`The visual variant to apply, see [theme overview](/themes/docs/theme/overview#variants) for more details.                                                     | `"solid" \| "soft"`                                  | `"soft"` |
| `color`Overrides the accent color inherited from the Theme. See the [color guide](/themes/docs/theme/color) for more details.                                          | `enum`                                               | `""`     |
| `highContrast`Uses a higher contrast color for the component.                                                                                                          | `boolean`                                            | —        |
| `radius`Overrides the radius inherited from the theme. See the [radius guide](/themes/docs/theme/radius) for more details.                                             | `"none" \| "small" \| "medium" \| "large" \| "full"` | —        |
| `fallback*`The fallback element to render when an image is not available.                                                                                              | `Element`                                            | —        |

## Examples

### Size

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

```jsx
<Flex align="center" gap="4">

	<Avatar size="1" src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" fallback="A" />

	<Avatar size="2" src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" fallback="A" />

	<Avatar size="3" src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" fallback="A" />

	<Avatar size="4" src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" fallback="A" />

	<Avatar size="5" src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" fallback="A" />

	<Avatar size="6" src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" fallback="A" />

	<Avatar size="7" src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" fallback="A" />

	<Avatar size="8" src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" fallback="A" />

</Flex>
```

### Variant

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

```jsx
<Flex gap="2">

	<Avatar variant="solid" fallback="A" />

	<Avatar variant="soft" fallback="A" />

</Flex>
```

### Color

Use the `color` prop to assign a specific [color](/themes/docs/theme/color).

```jsx
<Flex gap="2">

	<Avatar variant="solid" color="indigo" fallback="A" />

	<Avatar variant="solid" color="cyan" fallback="A" />

	<Avatar variant="solid" color="orange" fallback="A" />

	<Avatar variant="solid" color="crimson" fallback="A" />

</Flex>
```

### High-contrast

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

```jsx
<Grid rows="2" gap="2" display="inline-grid" flow="column">

	<Avatar variant="solid" color="indigo" fallback="A" />

	<Avatar variant="solid" color="indigo" fallback="A" highContrast />

	<Avatar variant="solid" color="cyan" fallback="A" />

	<Avatar variant="solid" color="cyan" fallback="A" highContrast />

	<Avatar variant="solid" color="orange" fallback="A" />

	<Avatar variant="solid" color="orange" fallback="A" highContrast />

	<Avatar variant="solid" color="crimson" fallback="A" />

	<Avatar variant="solid" color="crimson" fallback="A" highContrast />

	<Avatar variant="solid" color="gray" fallback="A" />

	<Avatar variant="solid" color="gray" fallback="A" highContrast />

</Grid>
```

### Radius

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

```jsx
<Flex gap="2">

	<Avatar radius="none" fallback="A" />

	<Avatar radius="large" fallback="A" />

	<Avatar radius="full" fallback="A" />

</Flex>
```

### Fallback

Use the `fallback` prop to modify the rendered fallback element.

```jsx
<Flex gap="2">

	<Avatar fallback="A" />

	<Avatar fallback="AB" />

	<Avatar fallback={<Box width="24px" height="24px">
				<svg viewBox="0 0 64 64" fill="currentColor">
					<path d="M41.5 14c4.687 0 8.5 4.038 8.5 9s-3.813 9-8.5 9S33 27.962 33 23 36.813 14 41.5 14zM56.289 43.609C57.254 46.21 55.3 49 52.506 49c-2.759 0-11.035 0-11.035 0 .689-5.371-4.525-10.747-8.541-13.03 2.388-1.171 5.149-1.834 8.07-1.834C48.044 34.136 54.187 37.944 56.289 43.609zM37.289 46.609C38.254 49.21 36.3 52 33.506 52c-5.753 0-17.259 0-23.012 0-2.782 0-4.753-2.779-3.783-5.392 2.102-5.665 8.245-9.472 15.289-9.472S35.187 40.944 37.289 46.609zM21.5 17c4.687 0 8.5 4.038 8.5 9s-3.813 9-8.5 9S13 30.962 13 26 16.813 17 21.5 17z" />
				</svg>
			</Box>} />

</Flex>
```