Examples & Showcase
Explore all avatar features and variations.
Live Examples
Initials Avatars
vue
<Avatar name="Tony Stark" :size="50" />
<Avatar name="Bruce Banner" :size="50" />
<Avatar name="Steve Rogers" :size="50" />
<Avatar name="Natasha Romanoff" :size="50" />Presence Status Indicators
vue
<Avatar name="Tony Stark" status="online" :size="50" />
<Avatar name="Bruce Banner" status="away" :size="50" />
<Avatar name="Steve Rogers" status="busy" :size="50" />
<Avatar name="Natasha Romanoff" status="offline" :size="50" />PixelGen Identicons
vue
<Avatar name="tony@stark.com" variant="pixel" pixel-theme="earth" :size="50" />
<Avatar name="bruce@hulk.org" variant="pixel" pixel-theme="neon" :size="50" />
<Avatar name="steve@avengers.io" variant="pixel" pixel-theme="ocean" :size="50" />
<Avatar name="natasha@shield.gov" variant="pixel" pixel-theme="sunset" :size="50" />
<Avatar name="peter@web.net" variant="pixel" pixel-theme="midnight" :size="50" />Avatar Groups
vue
<AvatarGroup :max="3">
<Avatar name="Tony Stark" status="online" />
<Avatar name="Bruce Banner" status="away" />
<Avatar name="Steve Rogers" status="offline" />
<Avatar name="Natasha Romanoff" status="online" />
<Avatar name="Peter Parker" status="online" />
</AvatarGroup>