# Avatar Types

The Kendo UI for Angular Avatar allows you to render its content by using a number of built-in options such as image, initials, or an icon.

## Image Avatar

To display an image inside the Avatar, set the [`imageSrc`](https://www.telerik.com/kendo-angular-ui/components/layout/api/avatarcomponent#imageSrc) property to an image source.

```html
<kendo-avatar [imageSrc]="accountImg" size="large"></kendo-avatar>
```

```ts
public accountImg = 'https://demos.telerik.com/kendo-angular-ui/assets/dropdowns/contacts/RICSU.jpg';
```

The following example demonstrates how to display an image inside the Avatar component.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/avatar/types/img/source.txt)

## Initials Avatar

To define the initials Avatar, set the [`initials`](https://www.telerik.com/kendo-angular-ui/components/layout/api/avatarcomponent#initials) property to any given string.

```html
<kendo-avatar initials="MB"></kendo-avatar>
```

The following example demonstrates how to display initials inside the Avatar component.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/avatar/types/initials/source.txt)

## Icon Avatar

The Avatar provides the following options to set an icon inside the component:

* [`Displaying SVG Icons`](https://www.telerik.com/kendo-angular-ui/components/layout/avatar/types#displaying-svg-icons)—Sets an SVG icon inside the Avatar.
* [`Font and third-party icons`](https://www.telerik.com/kendo-angular-ui/components/layout/avatar/types#displaying-font-icons)—Sets a font icon inside the Avatar.

> As of R2 2023 (`v13.0.0`) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from `font` to `svg`. Set the `svgIcon` property, or [Continue Using Font Icons](https://www.telerik.com/kendo-angular-ui/components/styling/migrating-font-svg#continue-using-font-icons).

### Displaying SVG Icons

To display an SVG icon inside the Avatar set the [`svgIcon`](https://www.telerik.com/kendo-angular-ui/components/layout/api/avatarcomponent#svgicon) property of the Avatar to the necessary [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon). For details, go to the [list of SVG icons supported by Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/components/icons/svgicon/svgicon-list).

```html
<kendo-avatar [svgIcon]="svgCart">Cart</kendo-avatar>
```

```ts
import { cartIcon, SVGIcon } from '@progress/kendo-svg-icons';

public svgCart: SVGIcon = cartIcon;
```

The following example demonstrates how to set an SVG icon inside the Avatar.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/avatar/types/svg/source.txt)

### Displaying Font Icons

o display a font icon inside the Avatar:

1. Use the [`ICON_SETTINGS`](https://www.telerik.com/kendo-angular-ui/components/icons/api/icon_settings) token of the Icons package and set the icon type to `font`. For more information, go to the topic about [icon settings](https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings).
2. Depending on the font icons library, you can set the:
   * [`icon`](https://www.telerik.com/kendo-angular-ui/components/layout/api/avatarcomponent#icon) property to a font icon in the Kendo UI theme. For details, go to the [list of font icons supported by Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/components/icons/icon/icon-list).
     ```html
     <kendo-avatar icon="user" size="large"></kendo-avatar>
     ```
   * [`iconClass`](https://www.telerik.com/kendo-angular-ui/components/layout/api/avatarcomponent#iconclass) property to a third-party font icon (like [FontAwesome](https://fontawesome.com/)).
     ```html
     <kendo-avatar iconClass="fa fa-taxi"></kendo-avatar>
     ```

The following example demonstrates how to set the `icon` property of the Avatar.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/avatar/types/font/source.txt)

The following example demonstrates how to set the `iconClass` property of the Avatar.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/layout/avatar/types/icon-class/source.txt)

## Suggested Links

* [Kendo UI for Angular Avatar Appearance](https://www.telerik.com/kendo-angular-ui/components/layout/avatar/appearance)
* [API Reference of the Avatar](https://www.telerik.com/kendo-angular-ui/components/layout/api/avatarcomponent)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-angular-ui/components/styling/theme-builder)