Phoundry UI

Avatar

Circular avatar displaying an image, initials, or icon fallback. Supports four sizes and an optional status dot indicator.

import { Avatar } from 'phoundry-ui';

With Image

Jane Doe
Show code 
<Avatar src="https://i.pravatar.cc/80?u=1" alt="Jane Doe" />

Initials

JD
AB
XY
Show code 
<Avatar initials="JD" />
<Avatar initials="AB" />
<Avatar initials="XY" />

Icon Fallback

Use any Iconify id or shared tokens from PhiIcons when there is no photo or initials.

Show code 
<Avatar icon={PhiIcons.folder} />
<Avatar icon={PhiIcons.document} />

Image with status

Team member
Away user
Show code 
<Avatar src="/photo.jpg" alt="Team lead" status="online" size="lg" />

Default user glyph

Show code 
<Avatar />
<!-- Same fallback as omitting src, initials, and icon -->

Sizes

XS
SM
MD
LG
Show code 
<Avatar initials="XS" size="xs" />
<Avatar initials="SM" size="sm" />
<Avatar initials="MD" size="md" />
<Avatar initials="LG" size="lg" />

Status Indicators

ON
AW
BS
OF
Show code 
<Avatar initials="ON" status="online" />
<Avatar initials="AW" status="away" />
<Avatar initials="BS" status="busy" />
<Avatar initials="OF" status="offline" />

Props

PropTypeDefaultDescription
src string-Image URL for the avatar.
alt string-Alt text for the image.
initials string-Initials to display when no image is provided.
icon string-Iconify icon string used as fallback when no image or initials.
size 'xs' | 'sm' | 'md' | 'lg''md'Avatar size.
status 'online' | 'offline' | 'away' | 'busy'-Status dot indicator.
class string-Additional CSS classes.

Usage tips

  • The avatar falls back gracefully: image → initials → explicit icon → default user icon.
  • If the image fails to load, the component automatically switches to the initials or icon fallback.
  • Provide meaningful alt text whenever src is set; it defaults to an empty string.
  • Use status alongside user avatars in chat, team lists, or collaboration UIs.