Avatar

In the app

A rounded square with two initials in ink on the fill, or reversed on navy. 24, 32 or 40px, radius growing with size. AvatarGroup overlaps them with a surface-coloured ring and closes with a count.

@varick/ui/components/avatarAdded 26 Aug 2026

Usage

import { Avatar, AvatarFallback } from "@varick/ui/components/avatar";

export function Example() {
  return (
    <Avatar>
      <AvatarFallback>JS</AvatarFallback>
    </Avatar>
  );
}

Variants

Group with a count

ASJKMR+12

<AvatarGroup>
  <Avatar><AvatarFallback>AS</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>JK</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>MR</AvatarFallback></Avatar>
  <AvatarGroupCount>+12</AvatarGroupCount>
</AvatarGroup>

Navy

<Avatar tone="navy"><AvatarFallback>AS</AvatarFallback></Avatar>

Group in navy

ASJKMR+12

<AvatarGroup tone="navy">...</AvatarGroup>

Sizes

ASASAS

<Avatar size="sm">...</Avatar>
<Avatar size="md">...</Avatar>
<Avatar size="lg">...</Avatar>

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
Avatar.tone	'grey' \| 'navy'	'grey'	Ground and text colour. Inherited from AvatarGroup when set there.
Avatar.size	'sm' \| 'md' \| 'lg'	'md'	24, 32 or 40px with 4, 6 or 8px radius. Inherited from AvatarGroup when set there.
Avatar.name	string	undefined	Full name, for the title and the accessible label.
AvatarImage.src	string	undefined	Photograph. Put an AvatarFallback after it for when it fails.
AvatarFallback	ComponentProps<'span'>		Two initials.
AvatarGroup	size, tone		Overlaps its children by 8px with a 2px surface ring.
AvatarGroupCount	ComponentProps<'span'>		The +N at the end of a group, always grey.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.avatar {
  width: 32px; height: 32px;
  border-radius: 6px; /* 4px at 24px, 8px at 40px */
  display: grid; place-items: center;
  font-size: 12px; font-weight: 500;
  background: var(--fill);
  color: var(--fg-high);
}
.avatar.navy { background: var(--canvas); color: #FFFFFF; }
.avatar-group > * { box-shadow: 0 0 0 2px var(--surface); }
.avatar-group > * + * { margin-left: -8px; }