# Avatar
> Cherry Avatar component - a circular identity badge with image, initials, and icon fallbacks in three sizes.
Source: https://cherry.al/code/avatar
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# Avatar
The Avatar component renders a circular identity badge for a person or an assistant. It resolves its content through a fallback chain: an image when `$src` is set, otherwise initials derived from `$name`, otherwise an icon.
Initials are the first letters of the first two words of `$name`, uppercased: "Ada Lovelace" becomes "AL", "cherry" becomes "C".
```jsx
import React from "react";
import { Avatar } from "cherry-styled-components";
export default function Page() {
return (
<>
);
}
```
In the [chat kit](/code/chat), pass it to a message's `$avatar` slot to attribute the bubble to its author.
## Properties
Diameter of the badge: 28px, 36px, or 48px. Defaults to `"default"`. The font size of the initials and the size of the fallback icon scale with it.
Image URL. The image covers the circle with `object-fit: cover`.
Alt text for the image, and the accessible label when the icon fallback renders. Falls back to `$name`.
Full name or label. Shown as initials when there is no image.
Lucide icon name used when there is no image and no name. Defaults to `"User"`.
Background color, read from the theme (`gray` uses `colors.grayDark`). Defaults to `"primary"`. The initials and icon take the palette's contrasting end automatically, in both light and dark mode.
Accessibility is handled by the fallback chain: an image carries its own `alt`, initials are visible text, and the icon fallback gets `role="img"` with an `aria-label` from `$alt` or `$name`.
The component also accepts all native `` attributes and forwards its ref to the root element. The library exports the types `AvatarSize` and `AvatarColor`.