Avatar

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.

1. An image Avatar
2. A text Avatar
3. An icon Avatar

The next image shows the anatomy of an Avatar and includes the following elements:

1. Container
2. Icon (optional)

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.

1. Small
2. Medium (default)
3. Large

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. 

1. Solid (default)
2. Outline

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.

1. Small
2. Medium (default)
3. Large
4. Full

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular AvatarFind more information about the Kendo UI for Angular Avatar in the official product documentation of the component.

Telerik UI for Blazor AvatarFind more information about the Telerik UI for Blazor Avatar in the official product documentation of the component.

Kendo UI for jQuery AvatarFind more information about the Kendo UI for jQuery Avatar in the official product documentation of the component.

KendoReact AvatarFind more information about the KendoReact Avatar in the official product documentation of the component.

Kendo UI for Vue AvatarFind more information about the Kendo UI for Vue Avatar in the official product documentation of the component.

Telerik UI for ASP.NET Core AvatarFind more information about the Telerik UI for ASP.NET Core Avatar component.

Telerik UI for ASP.NET MVC AvatarFind more information about the Telerik UI for ASP.NET MVC Avatar component.