---
title: "Avatar"
description: "Round profile images."
requested_language: sk
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/sk/components/avatar
version: unreleased (main)
docs_index: https://docs.systhema.app/sk/llms.txt
---
> This page isn't translated yet. Showing English.


`Avatar` renders a profile image at the avatar size from the tokens, cropped to fill, with the avatar border, radius and shadow. Use it for authors, team members and testimonials.

```tsx preview title="Avatar"
import { Avatar } from '@systhemaui/next'

export default function Demo() {
  return <Avatar src="/demo-assets/avatar-1.webp" alt="Maya Lindqvist" sizes="64px" />
}
```

## Import

```tsx
import { Avatar } from '@systhemaui/next'
```

In a React app without Next.js, import it from `@systhemaui/react`. There it renders a plain `<img>`.

## Examples

### Group of avatars

Avatars are inline-block, so they line up in a row. Overlap them with a negative margin for a compact group.

```tsx preview title="Avatar group"
import { Avatar } from '@systhemaui/next'

const team = [
  { src: '/demo-assets/avatar-1.webp', name: 'Maya Lindqvist' },
  { src: '/demo-assets/avatar-2.webp', name: 'Daniel Okafor' },
  { src: '/demo-assets/avatar-1.webp', name: 'Sara Nyberg' },
]

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-10">
      <div className="flex items-center gap-3">
        {team.map((person) => (
          <Avatar key={person.name} src={person.src} alt={person.name} sizes="64px" />
        ))}
      </div>
      <div className="flex items-center">
        {team.map((person) => (
          <Avatar
            key={person.name}
            src={person.src}
            alt={person.name}
            sizes="64px"
            className="-ml-4 first:ml-0"
          />
        ))}
      </div>
    </div>
  )
}
```

### With a name

Next to visible text that names the person, the avatar is decorative: leave `alt` empty so the name is not read twice.

```tsx preview title="Author byline"
import { Avatar, Paragraph } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex items-center gap-4">
      <Avatar src="/demo-assets/avatar-2.webp" alt="" sizes="64px" />
      <div>
        <Paragraph className="font-semibold">Daniel Okafor</Paragraph>
        <Paragraph type="small">Frontend lead, Northwind</Paragraph>
      </div>
    </div>
  )
}
```

### Another size

The size comes from `--avatar-size`. Override it per instance with a size utility, or change the `avatar` tokens for the whole project.

```tsx preview title="Sizes"
import { Avatar } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex items-end gap-4">
      <Avatar src="/demo-assets/avatar-1.webp" alt="" sizes="32px" className="size-8" />
      <Avatar src="/demo-assets/avatar-1.webp" alt="" sizes="64px" />
      <Avatar src="/demo-assets/avatar-1.webp" alt="" sizes="96px" className="size-24" />
    </div>
  )
}
```

## Props

`Avatar` takes every `<img>` attribute (in Next.js, every `next/image` prop). `alt` defaults to `''`, `loading` to `'lazy'` and `decoding` to `'async'`.

<!-- generated:props @systhemaui/react AvatarProps -->

| Prop                        | Type     | Default | Description |
| --------------------------- | -------- | ------- | ----------- |
| `className`                 | `string` | -       |             |
| …and all `<img>` attributes |          |         |             |

<!-- /generated -->

## HTML and CSS

Without React, add the `avatar` class to an `<img>`:

```html
<img class="avatar" src="/avatar.webp" alt="Maya Lindqvist" width="64" height="64" loading="lazy" />
```

Size, radius, border and shadow come from the `avatar` tokens (`--avatar-size`, `--avatar-border-radius`, `--avatar-border-width`, `--color-avatar-border`, `--color-avatar-shadow`).

<!-- generated:utilities avatar -->

| Class    | Styles                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `avatar` | `--tw-shadow-color: var(--color-avatar-shadow);`<br>`display: inline-block;`<br>`object-fit: cover;`<br>`object-position: center;`<br>`overflow: hidden;`<br>`box-shadow: var(--avatar-shadow-x) var(--avatar-shadow-y) var(--avatar-shadow-blur) var(--avatar-shadow-spread) var(--tw-shadow-color);`<br>`width: var(--avatar-size);`<br>`height: var(--avatar-size);`<br>`border-radius: var(--avatar-border-radius);`<br>`border-width: var(--avatar-border-width);`<br>`border-color: var(--color-avatar-border);` |

<!-- /generated -->

## Next.js

The `@systhemaui/next` `Avatar` renders `next/image`, so the file is resized and served in a modern format. It defaults `width` and `height` to `64` and `loading` to `'lazy'`.

> [!TIP]
> `sizes` defaults to `'100vw'`, which makes the browser pick a viewport-wide file for a 64 px image. Pass the displayed size, `sizes="64px"`, as the examples on this page do.

```tsx
import { Avatar } from '@systhemaui/next'

export function AuthorAvatar({ src, name }: { src: string; name: string }) {
  return <Avatar src={src} alt={name} width={64} height={64} sizes="64px" />
}
```

<!-- generated:props @systhemaui/next AvatarProps -->

| Prop                               | Type     | Default | Description |
| ---------------------------------- | -------- | ------- | ----------- |
| `className`                        | `string` | -       |             |
| …and props from `next`             |          |         |             |
| …and all inherited HTML attributes |          |         |             |

<!-- /generated -->

## Accessibility

- Write the person's name in `alt` when the avatar stands alone. Leave it empty when the name is in the text next to it.
- An avatar is an image, not a control. Wrap it in a [Link](https://docs.systhema.app/sk/components/link.md) when it should lead to a profile, and give the link a name.

## Related

- [Avatar block](https://docs.systhema.app/sk/payload/blocks/avatar.md)
- [Quote](https://docs.systhema.app/sk/components/quote.md) (`QuoteAvatar`)
- [PostMeta](https://docs.systhema.app/sk/components/post-meta.md) (author bylines)