Avatar

Updated: May 5, 2025

A versatile component for displaying user profile images, initials, or fallback icons in a circular container. Commonly used in user interfaces to represent people.

Avatar

Q

<Row gap="16">
  <Avatar src="/images/avatar.jpg" size="l" />
  <Avatar size="l" value="Q" />
  <Avatar size="l" empty />
</Row>

Empty

Use the empty prop to render an empty avatar.

Empty

<Avatar size="l" empty />

Icon

Use the icon prop to render an icon in the avatar.

Icon

<Avatar size="l" icon="sparkle" />

Sizes

Use the T-shirt size model or set sizes with numbers (REM).

Sizes

A

B

C

D

E

A

B

C

D

E

<Row gap="16" center>
  <Avatar size={1.5} value="A" />
  <Avatar size={2.5} value="B" />
  <Avatar size={3.5} value="C" />
  <Avatar size={4.5} value="D" />
  <Avatar size={5.5} value="E" />
</Row>
<Row gap="16" center>
  <Avatar size="xs" value="A" />
  <Avatar size="s" value="B" />
  <Avatar size="m" value="C" />
  <Avatar size="l" value="D" />
  <Avatar size="xl" value="E" />
</Row>

Status indicator

G

Y

R

G

<Row gap="16">
  <Avatar value="G" statusIndicator={{ color: "green" }} />
  <Avatar value="Y" statusIndicator={{ color: "yellow" }} />
  <Avatar value="R" statusIndicator={{ color: "red" }} />
  <Avatar value="G" statusIndicator={{ color: "gray" }} />
</Row>

Loading state

Loading

<Row gap="16">
  <Avatar size="l" loading />
  <Avatar size="m" loading />
  <Avatar size="s" loading />
</Row>

API reference

Prop	Type	Default
size	TShirtSizesnumber	m
value	string	—
src	string	—
unoptimized Bypass the image optimizer, for sources it cannot process.	boolean	—
loading	boolean	—
empty	boolean	—
icon	IconName	—
statusIndicator	{ color: "green" \| "yellow" \| "red" \| "gray"; }	—
style	React.CSSProperties	—
className	string	—
…and every FlexProps prop	inherited	—

ComponentsAutoScroll

ComponentsAvatarGroup

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club