Angular Avatar Component

Avatar

Angular Avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters.

Available in Other JavaScript Frameworks

CoreUI Angular Avatar Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

Image avatars

import { Component } from '@angular/core';
import { AvatarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-avatar-image-avatars',
  templateUrl: './avatar-image-avatars.component.html',
  imports: [AvatarComponent]
})
export class AvatarImageAvatarsComponent {}

<c-avatar src="/assets/images/avatars/1.jpg" />
<c-avatar src="/assets/images/avatars/2.jpg" />
<c-avatar src="/assets/images/avatars/4.jpg" />

Letter avatars

import { Component } from '@angular/core';
import { AvatarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-avatar-letter-avatars',
  templateUrl: './avatar-letter-avatars.component.html',
  imports: [AvatarComponent]
})
export class AvatarLetterAvatarsComponent {}

<c-avatar color="primary" textColor="white">CUI</c-avatar>
<c-avatar color="secondary">CUI</c-avatar>
<c-avatar color="warning" textColor="white">CUI</c-avatar>

Rounded avatars

Use the shape="rounded" prop to make avatars squared with rounded corners.

import { Component } from '@angular/core';
import { AvatarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-avatar-rounded-avatars',
  templateUrl: './avatar-rounded-avatars.component.html',
  imports: [AvatarComponent]
})
export class AvatarRoundedAvatarsComponent {}

<c-avatar color="primary" shape="rounded" textColor="white">CUI</c-avatar>
<c-avatar color="secondary" shape="rounded">CUI</c-avatar>
<c-avatar color="warning" shape="rounded" textColor="white">CUI</c-avatar>

Square avatars

Use the shape="rounded-0" prop to make avatars squared

import { Component } from '@angular/core';
import { AvatarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-avatar-square-avatars',
  templateUrl: './avatar-square-avatars.component.html',
  imports: [AvatarComponent]
})
export class AvatarSquareAvatarsComponent {}

<c-avatar color="primary" shape="rounded-0" textColor="white">CUI</c-avatar>
<c-avatar color="secondary" shape="rounded-0">CUI</c-avatar>
<c-avatar color="warning" shape="rounded-0" textColor="white">CUI</c-avatar>

Sizes

Fancy larger or smaller avatar? Add size="xl", size="lg", size="md" or size="sm" for additional sizes.

import { Component } from '@angular/core';
import { AvatarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-avatar-sizes',
  templateUrl: './avatar-sizes.component.html',
  imports: [AvatarComponent]
})
export class AvatarSizesComponent {}

<c-avatar color="secondary" size="xl">CUI</c-avatar>
<c-avatar color="secondary" size="lg">CUI</c-avatar>
<c-avatar color="secondary" size="md">CUI</c-avatar>
<c-avatar color="secondary">CUI</c-avatar>
<c-avatar color="secondary" size="sm">CUI</c-avatar>

Avatars with status

import { Component } from '@angular/core';
import { AvatarComponent } from '@coreui/angular';

@Component({
  selector: 'docs-avatar-avatars-with-status',
  templateUrl: './avatar-avatars-with-status.component.html',
  imports: [AvatarComponent]
})
export class AvatarAvatarsWithStatusComponent {}

<c-avatar src="/assets/images/avatars/7.jpg" status="success" />
<c-avatar color="secondary" status="danger">CUI</c-avatar>

Customizing

CSS variables

Angular multi selects use local CSS variables on .avatar for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

--cui-avatar-width: #{$avatar-width};
--cui-avatar-height: #{$avatar-height};
--cui-avatar-font-size: #{$avatar-font-size};
--cui-avatar-border-radius: #{$avatar-border-radius};
--cui-avatar-status-width: #{$avatar-status-width};
--cui-avatar-status-height: #{$avatar-status-height};
--cui-avatar-status-border-radius: #{$avatar-status-border-radius};

How to use CSS variables

const vars = {
'--my-css-var': 10,
'--my-another-css-var': "red"
}

<div [ngStyle]="vars"></div>

SASS variables

$avatar-width:                 2rem;
$avatar-height:                2rem;
$avatar-font-size:             .8rem;
$avatar-border-radius:         50em;
$avatar-status-width:          .5rem;
$avatar-status-height:         .5rem;
$avatar-status-border-radius:  50em;
$avatar-transition:            margin .15s;

$avatar-sizes: (
  sm: (
    width: 1.5rem,
    height: 1.5rem,
    font-size: .6rem,
    status-width: .4rem,
    status-height: .4rem
  ),
  md: (
    width: 2.5rem,
    height: 2.5rem,
    font-size: 1rem,
    status-width: .7rem,
    status-height: .7rem
  ),
  lg: (
    width: 3rem,
    height: 3rem,
    font-size: 1.2rem,
    status-width: .8rem,
    status-height: .8rem
  ),
  xl: (
    width: 4rem,
    height: 4rem,
    font-size: 1.6rem,
    status-width: 1rem,
    status-height: 1rem
  ),
);

API

Avatar Module

import { AvatarModule } from '@coreui/angular';

@NgModule({
  imports: [AvatarModule,]
})
export class AppModule(){}

c-avatar

component

jsx

import { AvatarComponent } from '@coreui/angular'

Property	Default	Type
alt	`''`	`string`
The alt attribute for the img element alternate text.
color	-	`string`
Sets the background color context of the component to one of CoreUI’s themed colors.
shape	-	`string`
Select the shape of the component.
size	`''`	`Omit<string, 'xxl'>`
Size the component small, large, or extra large.
src	-	`string`
The src attribute for the img element.
status	-	`string`
Sets the color context of the status indicator to one of CoreUI’s themed colors.
textColor	-	`string`
Sets the text color of the component to one of CoreUI’s themed colors via TextColorDirective