On this page

Angular Avatar Component

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.

## Image avatars

## Letter avatars

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

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

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

## Avatars with status

## 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.

  ```scss
  --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

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

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

### SASS variables

  ```scss
  $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

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

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

### c-avatar _component_ #### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `color` | Sets the background color context of the component to one of CoreUI’s themed colors.| `Colors` | | | `shape` | Select the shape of the component. | `string` | | | `size` | Size the component small, large, or extra large. | Sizes | `md` | | `src` | The src attribute for the img element.| `string` | | | `status` | Sets the color context of the status indicator to one of CoreUI’s themed colors. | `Colors` | | | `textColor` | Sets the text color of the component to one of CoreUI’s themed colors.| `TextColors`| |