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.