Avatar

Circular user representation with two sizes (SM, XL) plus an Avatar Group for stacking multiple users. All geometry pulled directly from the LUSTER Figma component.

user
Figma Properties
Size: LG — 80 × 80px
Shape: Circle
Border: 2px solid #FFFFFF

Variant

user
SM — 24 × 24px
user
LG — 80 × 80px

Avatar Group

Multiple avatars stacked with a −4px overlap and a 2px white separator border. Add a “+N” chip for overflow.

user
user
user
user
user

Shown at 2.4× for clarity — actual size is 24px (SM) with a −4px overlap, exactly as in Figma.

Design Tokens

Token NameFigma VariableDefault Value
--avatarSizeSmHeightAvatar/Size/Sm/Height24px
--avatarSizeLgHeightAvatar/Size/Lg/Height80px
--avatarBorderWidthAvatar/Border/Width2px
--avatarBorderRadiusAvatar/Border/Radius0px
--avatarGroupGapAvatarGroup/Gap-4px

Usage Guidelines

✓ DO

Fall back to initials when no profile image is available.

✓ DO

Use an Avatar Group with a +N chip when space is limited.

✕ DON'T

Don't stretch non-square images — always crop to a circle.

✕ DON'T

Don't overlap more than ~5 avatars before collapsing to +N.

Implementation

Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

import React from 'react';
import './Avatar.css';

export interface AvatarProps {
  size?: 'sm' | 'xl';
  src?: string;
  name: string;
}

const initials = (name: string) =>
  name.split(' ').map(n => n[0]).join('').slice(0, 2).toUpperCase();

export const Avatar = ({ size = 'sm', src, name }: AvatarProps) => (
  <span className={`avatar avatar--${size}`} title={name}>
    {src ? <img src={src} alt={name} /> : initials(name)}
  </span>
);

export const AvatarGroup = ({ max = 4, children }: { max?: number; children: React.ReactNode[] }) => {
  const shown = React.Children.toArray(children);
  const extra = shown.length - max;
  return (
    <div className="avatar-group">
      {shown.slice(0, max)}
      {extra > 0 && <span className="avatar avatar--sm avatar--more">+{extra}</span>}
    </div>
  );
};