Back to components

Avatar

zyra-avatar
IdentityZyraAvatar

Component preview

Explore the available states and the real library behavior for this component.

Live previewZyraAvatar

zyra-avatar Playground

InitialsImageFallback

Avatar component with initials, image support, status indicator and variants

Controls
name
src (image)
size
variant
online
shape
Live Preview mdteal
Generated Code
<zyra-avatar
  name="Arjun Kumar"
  size="md"
  variant="teal"
/>
Sizes 5 sizes
xs
sm
md
lg
xl
Color Variants 5 variants
teal
blue
purple
warm
neutral
Online Status
online
offline
no status
Shapes
circle
square
Image & Fallback auto fallback on error
User Oneimage loads
User Twoimage loads
Broken Imagefallback → initials
initials only
Real World — Team List
Arjun KumarLead Developer
Online
Priya SharmaUI Designer
Online
Rohit VermaBackend Engineer
Offline
Sneha PatelProduct Manager
Online
Dev ZyraQA Engineer
Offline
Avatar Group — Stacked
+3
7 members
Usage code
zyra-avatar
import { Component } from '@angular/core';
import { ZyraAvatar } from 'zyra-ng-ui';

@Component({
  selector: 'app-demo-avatar',
  standalone: true,
  imports: [ZyraAvatar],
  template: `
    <zyra-avatar
      name="Ava Patel"
      size="lg"
      variant="purple"
      [online]="true"
    />
  `,
})
export class DemoAvatarComponent {}
Great for team UIsPairs well with badgesReadable at smaller sizes