---
title: Overview
position: 1
seo_title: Overview of the Avatar Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
Avatar component and its types, check out the extensive set of available
options in its live demo, and master its appearance by setting the color,
size, fill mode, and border radius as you wish on the fly.
---
## Avatar Overview
An Avatar is a user interface (UI) element, displaying textual or visual content to represent a user’s identity or entity.
Avatars provide consistent styling. They can render arbitrary content such as text, icons, or images. Avatars are rarely used as a stand-alone component as they are usually included in more complex components such as chips, menus, chats, grids, etc.
### Live Demo
### Appearance
Avatars provide built-in styling options that grant visually appealing and flexible rendering experience.
The Telerik and Kendo UI Avatar supports alternative styling options which enable you to configure the individual aspects of its appearance.
#### Anatomy
The anatomy of the Avatar summarizes the elements of the component. Depending on the elements they display, the Telerik and Kendo UI Avatars can be any of the following types:
* Image—Image avatars display images instead of text, and are useful for visual enhancement. Telerik and Kendo UI Avatar seamlessly accept Kendo UI Font icons, FontAwesome icons, and image icons.
* Text—Text avatars render a small chunk of text usually in the form of initials.
* Icon—Icon avatars display an icon that helps the recognition.
The next image shows the anatomy of an Avatar and includes the following elements:
#### Size
The Avatar provides the `size` configuration option that enables you to control how big or small the rendered avatar will be. Avatars also provide options for size customization.
`size` provides the following available options:
* `small`—Renders small avatars, which are suitable for compact components, such as small context menus, or the compact Grid, where the available space is limited.
* `medium` (default)—Renders medium avatars.
* `large`—Renders large avatars, which are suitable for adaptive components and mobile devices.
* `none`—Does not set a `size` and allows you to add your own, custom value.
#### Color
The Avatar provides the `themeColor` configuration option that enables you to choose among the available, built-in colors that will be applied to it. Avatars also provide options for color customization.
`themeColor` provides the following available options:
* `primary` (default)—Avatars in a primary color immediately draw the undivided attention of users and must be used sparingly on a page.
* `secondary`—Avatars in a secondary color indicate elements of secondary importance and blend seamlessly with the content on the page.
* `tertiary`—Avatars in a tertiary color are used less frequently than those in primary and secondary colors. They indicate independent, less pronounced, common elements throughout a page.
* `none`—Does not set a `themeColor` and allows you to add your own, custom value.
#### Fill Mode
Fill modes create a certain look-and-feel of the UI and also signify hierarchy between elements on the same page.
The Avatar provides the `fillMode` configuration option that enables you to control the way in which color is applied to the rendered avatar. Avatars also provide options for fill-mode customization.
`fillMode` provides the following available options:
* `solid` (default)—On a page, a solid avatar puts the strongest emphasis as it has a border and background and draws the attention of users.
* `outline`—Outline avatars have weaker emphasis as they only have a border, blend well with the rest of the content, and reduce the visual noise on the page.
#### Border Radius
The Avatar provides the `rounded` option that enables you to control the border radius of the rendered avatar. The defined value for the border radius significantly affects the look-and-feel of the UI. Avatars also provide options for border-radius customization.
`rounded` provides the following available options:
* `small`—Renders a border radius of 2 px.
* `medium` (default)—Renders a border radius of 4 px.
* `large`—Renders a border radius of 6 px.
* `full`—Renders a border radius of 9999 px.
* `none`—Does not set a `rounded` value and allows you to customize the configuration.
### Framework-Specific Documentation
For specific information about the component, refer to its official product documentation:
