Design System

Avatar

Display a representation of a userโ€”their photo, initials, or a general icon on a background.

React

Avatar composes Chakra's Avatar component.

States

These states are implicit based on the information provided. An image will be shown if providedโ€”otherwise Avatar will try and parse the user's initials from the name you provide. If you don't provide anything it shows a user icon.

live

<Stack direction="row" spacing="300" alignItems="center" pl="200">
<Avatar
name="Sage"
src="/images/documentation/components/avatar-unsplash.jpg"
/>
<Avatar name="Sage Michaelson" />
<Avatar />
</Stack>

Size

There are three sizes, with medium as a default.

live

<Stack direction="row" spacing="300" alignItems="center" pl="200">
<Avatar
size="sm"
src="/images/documentation/components/avatar-unsplash.jpg"
/>
<Avatar
size="md"
src="/images/documentation/components/avatar-unsplash.jpg"
/>
<Avatar
size="lg"
src="/images/documentation/components/avatar-unsplash.jpg"
/>
</Stack>

Grouped

live

<Stack direction="row" spacing="300" alignItems="center" pl="200">
<AvatarGroup max={3}>
<Avatar name="Lenny Bruce" />
<Avatar name="Lester Bangs" />
<Avatar name="Leonard B" />
<Avatar />
<Avatar />
</AvatarGroup>
</Stack>

Props

PropertyTypeDefaultDescription
sizesm, md, lgmdSize of avatar

React Native

You can pass name and image to Avatar and it will do the best to determine what to display. If nothing is passed, a fallback "user profile" icon will be rendered.

Screenshot of different treatments for Avatar

import { XStack, Avatar } from '@hoverinc/design-system-react-native';
const App = () => (
<XStack gap="$300">
<Avatar name="Hรฉctor Lavoe" />
<Avatar name="Hรฉctor Lavoe" image="https://i.pravatar.cc/150?u=hector" />
<Avatar />
</XStack>
);

Size

There are three sizes available.

Screenshot of different size variants for Avatar

import {
XStack,
Avatar,
AvatarSizes,
} from '@hoverinc/design-system-react-native';
const App = () => (
<XStack gap="$300">
<Avatar
size={AvatarSizes.Small}
name="Celia Cruz"
image="https://i.pravatar.cc/150?u=celia"
/>
<Avatar
size={AvatarSizes.Medium}
name="Celia Cruz"
image="https://i.pravatar.cc/150?u=celia"
/>
<Avatar
size={AvatarSizes.Large}
name="Celia Cruz"
image="https://i.pravatar.cc/150?u=celia"
/>
<Avatar />
</XStack>
);

Grouped

We support grouping/stacking of Avatar via the AvatarGroup component.

Screenshot of minimum viable AvatarGroup

import { Avatar, AvatarGroup } from '@hoverinc/design-system-react-native';
const App = () => (
<AvatarGroup max={3}>
<Avatar name="Luiz Ortega" />
<Avatar name="Paulo Sonoplasta" />
<Avatar name="Francisco Labirintite" />
<Avatar name="Marcela Mil Grau" />
<Avatar name="Toninho do Diabo" />
<Avatar name="Carina Medeiros" />
</AvatarGroup>
);


Copyright ยฉ 2025 Hover Inc. All Rights Reserved.