# Appearance

The `Аvatar` allows you to set different styles based on its content.

Here are the sections you can directly access:

* [Avatar Configurator demo](https://www.telerik.com/kendo-vue-ui-develop/components/layout/avatar/appearance#configurator-demo)
* [Type](https://www.telerik.com/kendo-vue-ui-develop/components/layout/avatar/appearance#type)
* [Theme Color](https://www.telerik.com/kendo-vue-ui-develop/components/layout/avatar/appearance#theme-color)
* [Roundness](https://www.telerik.com/kendo-vue-ui-develop/components/layout/avatar/appearance#roundness)
* [Size](https://www.telerik.com/kendo-vue-ui-develop/components/layout/avatar/appearance#size)
* [Fill Mode](https://www.telerik.com/kendo-vue-ui-develop/components/layout/avatar/appearance#fill-mode)
* [Border](https://www.telerik.com/kendo-vue-ui-develop/components/layout/avatar/appearance#border)

## Configurator demo

The following example demonstrates configuring different aspects of an `Avatar` appearance through a configurator.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/avatar/appearance/configurator/source.txt)

## Type

The available [type](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/avatarprops#type) are:

* `Image` —By passing an `img` element as child element of the Avatar.
* `Text avatar`—By passing an given string to be rendered as text (initials).
* `Icon avatar`—By passing `icon` to the Avatar component.

The following example demonstrates the `type` options of the Avatar.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/avatar/appearance/shapes/source.txt)

## Theme Color

The `Аvatar` allows you to specify predefined theme colors.

The available [`themeColor`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/avatarprops#themeColor) values are:

* `base`—Applies base coloring.
* `primary`—Applies coloring based on primary theme color.
* `secondary`—Applies coloring based on secondary theme color.
* `tertiary`— Applies coloring based on tertiary theme color.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/avatar/appearance/theme-color/source.txt)

## Roundness

To `Avatar` enables you to apply different `border radius` through the [rounded](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/avatarprops#rounded) property.

The available rounded options are:

* `none` — Does not set a border radius className.
* `small` — Sets the border radius to 1px.
* `medium` — Sets the border radius to 2px.
* `large` — Sets the border radius to 4px.
* `full` — Sets the border radius to 9999px.

The following example demonstrates how to customize the `roundness` of the Avatar.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/avatar/appearance/rounded/source.txt)

## Size

The `Avatar` allows you to set predefined or custom sizes.
To specify a predefined size, set the [size](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/avatarprops#size) property.

The available [size](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/avatarprops#size) values are:

* `small`
* `medium`
* `large`

To specify a custom Avatar size, use the `style` property.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/avatar/appearance/size/source.txt)

## Fill Mode

The styling of the `Avatar` is controlled through its [`fillMode`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/avatarprops#fillmode) property. The values we can pass to the property are as follows:

* `solid` — Sets a `background` color and `solid borders`.
* `outline` — Sets a `transparent background` and `solid borders`.

The following example demonstrates the usage of each `fillMode` option:

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/avatar/appearance/fill-mode/source.txt)

## Border

The Avatar allows you to specify whether or not to render an additional [`border`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/avatarprops#border) around its content by using the border property. By default, `border` is set to `false`.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/avatar/appearance/border/source.txt)

## Suggested Links

* [API Reference of the Avatar Component](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/avatarprops)
* [Avatar `size` options](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/avatarprops#size)
* [Avatar `rounded` options](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/avatarprops#rounded)
* [Avatar `fillMode` options](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/avatarprops#fillmode)
* [Avatar `themeColor` options](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/avatarprops#themecolor)
* [Avatar `border` options](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/avatarprops#border)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-vue-ui-develop/components/styling/theme-builder)