Avatar

Image, initials, and icon fallbacks — 6 sizes, 2 shapes, status indicator, and group stacking.

Import

ts 
import Avatar from '$lib/components/Avatar.svelte';
import AvatarGroup from '$lib/components/AvatarGroup.svelte';

Usage

Zeynep Kaya
svelte 
<Avatar src="https://..." name="Jane Doe" size="md" />

Sizes

xs · sm · md · lg · xl · 2xl

ZK xs
ZK sm
ZK md
ZK lg
ZK xl
ZK 2xl
svelte 
<Avatar name="Zeynep Kaya" size="xs" />
<Avatar name="Zeynep Kaya" size="sm" />
<Avatar name="Zeynep Kaya" size="md" />
<Avatar name="Zeynep Kaya" size="lg" />
<Avatar name="Zeynep Kaya" size="xl" />
<Avatar name="Zeynep Kaya" size="2xl" />

Fallbacks

image → initials → icon

Zeynep Kaya image
ZK initials
icon
svelte 
<!-- image → initials → icon fallback chain -->
<Avatar src="https://i.pravatar.cc/150?img=47" name="Jane Doe" size="lg" />
<Avatar name="Jane Doe" size="lg" />
<Avatar size="lg" />

Shapes

circle · square

MA circle
MA square
Selin circle + img
Selin square + img

Initials & Colors

Color is auto-generated from the name.

ZK Zeynep
MA Mert
SÇ Selin
BY Baran
ED Ece
CÖ Can
LŞ Lara
KA Kemal

Status

online (pulse) · away · busy · offline

ZK online
ZK away
ZK busy
ZK offline
svelte 
<Avatar name="Zeynep Kaya" size="lg" status="online" />
<Avatar name="Mert Aydın"  size="lg" status="away"   />
<Avatar name="Selin Çelik" size="lg" status="busy"   />
<Avatar name="Baran Kaya"  size="lg" status="offline" />

Group

Stack — max, overlap, size, and shape are configurable.

overlap: sm
ZK MA SÇ BY ED +3
overlap: md
ZK MA SÇ BY ED +3
overlap: lg
ZK MA SÇ BY ED +3
lg · square
ZK MA SÇ BY +4
svelte 
<AvatarGroup avatars={people} max={5} size="md" overlap="md" />

Use Cases

Real-world examples.

Comment Thread

ZK
Zeynep 1m ago

This animation is amazing!

MA
Mert 3m ago

I think the same.

SÇ
Selin 12m ago

Can you share the source code?

Team Card

Design Team

8 members · 3 active

ZK MA SÇ BY +1
ZK Zeynep Kaya online
MA Mert Aydın online
SÇ Selin Çelik away
BY Baran Yılmaz offline

Notifications

ZK

Zeynep liked your video

1m
MA

Mert started following you

5m
SÇ

Selin left a comment

12m
BY

Baran viewed your story

1h

Liked By

ZK MA SÇ BY ED +1

Zeynep, Mert and 6 others liked this.

ZK MA SÇ +5

8 members joined this group

API Reference — Avatar

PropTypeDefaultDescription
src string—Image URL. Falls back to initials or icon if omitted or fails to load.
name string''Full name used to derive initials and generate a consistent color.
size 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl''md'Avatar size preset.
shape 'circle' | 'square''circle'Border-radius shape of the avatar.
status 'online' | 'away' | 'busy' | 'offline' | 'none''none'Shows a colored status dot. online pulses.
class string—Extra CSS classes forwarded to the root element.

API Reference — AvatarGroup

PropTypeDefaultDescription
avatars Array<{ src?: string; name?: string }>—List of avatar data objects to display.
max number5Maximum number of avatars to show before the overflow counter.
size 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl''md'Size of each avatar in the group.
shape 'circle' | 'square''circle'Shape of each avatar in the group.
overlap 'sm' | 'md' | 'lg''md'Controls how much avatars overlap each other.