Angular Avatar

New Year sale. Skyrocket your business in 2025!

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order!
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.

Get offer!

On this page

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

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