# Appearance

The Avatar allows you to set different styles based on its content.

* [Type](https://www.telerik.com/kendo-react-ui/components/layout/avatar/appearance#type)
* [Size](https://www.telerik.com/kendo-react-ui/components/layout/avatar/appearance#size)
* [Fill Mode](https://www.telerik.com/kendo-react-ui/components/layout/avatar/appearance#fill-mode)
* [Rounded](https://www.telerik.com/kendo-react-ui/components/layout/avatar/appearance#rounded)
* [Border](https://www.telerik.com/kendo-react-ui/components/layout/avatar/appearance#border)
* [Theme Color](https://www.telerik.com/kendo-react-ui/components/layout/avatar/appearance#theme-color)

## Type

The available [type](https://www.telerik.com/kendo-react-ui/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 icon type in action.

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

The following example demonstrates the image type in action.

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

The following example demonstrates the text type in action.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/avatar/appearance/text/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-react-ui/components/layout/api/avatarprops#size) property.

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

* `small`
* `medium` (Default)
* `large`

To specify a custom avatar size, use the [style](https://www.telerik.com/kendo-react-ui/components/layout/api/avatarprops#style)property.

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

## Fill Mode

The Avatar enables you to set styling options and create solid or outline avatars by setting the `fillMode` property.

The available [fillMode](https://www.telerik.com/kendo-react-ui/components/layout/api/avatarprops#fillmode) values are:

* `solid` (Default)
* `outline`

An additional border around the content of an `outline` avatar can be rendered by setting the [border](https://www.telerik.com/kendo-react-ui/components/layout/api/avatarprops#border) property to `true`.

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

## Rounded

The Avatar allows you to set predefined border-radius by setting the `rounded` property.

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

* `small`
* `medium` (Default)
* `large`
* `full`
* `none`

An additional border around the content of an `outline` avatar can be rendered by setting the [border](https://www.telerik.com/kendo-react-ui/components/layout/api/avatarprops#border) property to `true`.

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

## Border

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

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

## Theme Color

The Avatar allows you to specify predefined theme colors.

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

* `primary` (Default)—Applies coloring based on primary theme color.
* `base`—Applies coloring based on the base 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-react-ui/layout/avatar/appearance/theme-color/func/source.txt)

## Suggested Links

* [Learn about KendoReact Free.](https://www.telerik.com/kendo-react-ui/components/getting-started/free-vs-premium)

* [API Reference of the Avatar Component](https://www.telerik.com/kendo-react-ui/components/layout/api/avatarprops)

* [Creating Custom Styles](https://www.telerik.com/kendo-react-ui/components/styling/theme-builder)