Taiga UI 5.0 is out!

Avatar KIT

Examples API GitHub

On this page

Content types

Icons and initials

Image, video and content

Alex Inkin
99+

Fallback to initials or icon

Alex Inkin
Alex Inkin
    
      
    

      
      
    

  
    
      <p><b>Icons and initials</b></p>
<div tuiCell>
    <div tuiAvatar="@tui.user"></div>
    <div tuiAvatar="@img.mastercard"></div>
    <div tuiAvatar="assets/icons/nx.svg"></div>
    <div tuiAvatar="UI"></div>
</div>

<p><b>Image, video and content</b></p>
<div tuiCell>
    <div tuiAvatar>
        <picture>
            <source
                media="(min-width: 600px)"
                srcset="assets/images/wisely.png"
            />
            <img
                alt="Alex Inkin"
                src="assets/images/avatar.jpg"
            />
        </picture>
    </div>
    <div tuiAvatar>
        <video
            autoplay
            loop
            playsinline
            [muted]="true"
        >
            <source
                src="assets/media/bbb.mp4"
                type="video/mp4"
            />
        </video>
    </div>
    <div tuiAvatar>99+</div>
</div>

<p><b>Fallback to initials or icon</b></p>
<div tuiCell>
    <div tuiAvatar="AI">
        <img
            alt="Alex Inkin"
            src="https://broken.jpg"
        />
    </div>
    <div tuiAvatar="@tui.user">
        <img
            alt="Alex Inkin"
            src="https://broken.jpg"
        />
    </div>
</div>

Colors

Fading
    
      
    

      
      
    

  
    
      <div
    appearance="negative"
    tuiAvatar="@tui.user"
></div>
<div
    tuiAvatar="AI"
    class="text"
    [style.background]="'AI' | tuiAutoColor"
></div>
<div
    tuiAvatar
    class="text"
>
    <div tuiFade>Fading</div>
</div>
<div
    appearance="negative"
    badge="var(--tui-text-positive)"
    tuiAvatar="@tui.user"
>
    <img
        alt=""
        src="assets/images/avatar.jpg"
    />
</div>

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 1rem;
}

.text {
    background: var(--tui-background-accent-opposite-pressed);
    color: var(--tui-background-base);
}

Sizes

XXL
XL
L
M
S
XS 
    
      
    

      
      
    

  
    
      @for (size of sizes; track size) {
    <section>
        <div
            tuiAvatar
            [size]="size"
        >
            {{ size | uppercase }}
        </div>
        <div
            tuiAvatar="@tui.user"
            [size]="size"
        ></div>
    </section>
}

    

      
      
    

  
    
      :host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

section {
    display: flex;
    gap: 0.5rem;
}

Stacking

99+
99+
99+
99+
99+
99+ 
    
      
    

      
      
    

  
    
      @for (size of sizes; track size; let odd = $odd) {
    <tui-avatar-stack
        class="tui-space_vertical-4"
        [direction]="odd ? 'start' : 'end'"
    >
        @for (name of names; track name) {
            <div
                [round]="odd"
                [size]="size"
                [style.background]="name | tuiAutoColor"
                [tuiAvatar]="name | tuiInitials"
            ></div>
        }
        <div
            tuiAvatar
            [round]="odd"
            [size]="size"
        >
            99+
        </div>
    </tui-avatar-stack>
}

Options with DI 

    
      
    

      
      
    

  
    
      <div tuiAvatar="DI"></div>

Labeled

GrigoriConstantinopolsky
NikolaiRimsky-Korsakov
HubertWolfflegelstainhausenbergedorf
ArkhangelskyConstantine
ZoyaKosmodemyanskaya
    
      
    

      
      
    

  
    
      <tui-avatar-labeled label="Grigori Constantinopolsky">
    <div tuiAvatar>
        <img
            alt=""
            src="https://avatars.githubusercontent.com/u/10106368"
        />
    </div>
</tui-avatar-labeled>

<tui-avatar-labeled label="Nikolai Rimsky-Korsakov">
    <div tuiAvatar>
        <img
            alt=""
            src="https://avatars.githubusercontent.com/u/11832552"
        />
    </div>
</tui-avatar-labeled>

<tui-avatar-labeled label="Hubert Wolfflegelstainhausenbergedorf">
    <div tuiAvatar>
        <img
            alt=""
            src="https://avatars.githubusercontent.com/u/46284632"
        />
    </div>
</tui-avatar-labeled>

<tui-avatar-labeled label="Arkhangelsky Constantine">
    <div tuiAvatar>
        <img
            alt=""
            src="https://avatars.githubusercontent.com/u/35179038"
        />
    </div>
</tui-avatar-labeled>

<tui-avatar-labeled label="Zoya Kosmodemyanskaya">
    <div tuiAvatar>
        <img
            alt=""
            src="https://avatars.githubusercontent.com/u/8158578"
        />
    </div>
</tui-avatar-labeled>

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 1rem;
}

[tuiAvatar] {
    border: 1px solid var(--tui-border-normal);
}

Outline

Alex Inkin
    
      
    

      
      
    

  
    
      <div
    size="m"
    tuiAvatar="@tui.heart"
    tuiAvatarOutline
></div>

<div
    size="l"
    tuiAvatar
    tuiAvatarOutline="var(--tui-background-accent-2)"
>
    <img
        alt="Alex Inkin"
        src="assets/images/avatar.jpg"
    />
</div>

<div
    size="xl"
    tuiAvatar="OK"
    tuiAvatarOutline="linear-gradient(#c86dd7, #3023ae)"
    [style.background]="'linear-gradient(#3023ae, #c86dd7)'"
    [style.color]="'#fff'"
></div>

    

      
      
    

  
    
      :host {
    display: flex;
    gap: 1rem;
}
GitHub StackBlitz