---
title: Usage
position: 2
seo_title: Guidelines for Using the Avatar Component
seo_description: Get the knack of the Telerik and Kendo UI Avatar and learn how
  to use the fill modes, label text and width, sizing and alignment options of
  the component by following the instructions and recommendations in the user
  guidelines created by our designers.
---
## Usage Guidelines

The Telerik and Kendo UI Avatar requires you to follow some basic principles when using the component.

### Proportions

The Avatar usually displays an image or icon that requires equal height and width. Changing its 1:1 ratio will distort the component and the content inside will be displayed improperly.

<DosDonts>
<Do description="Use the size and border radius options provided by the Avatar to achieve the desired look-and-feel.">![A Telerik and Kendo UI Avatar with square shape and rounded corners.](images/components-avatar-usage-proportions-do.png "Render Telerik and Kendo UI Avatar with square shape and rounded corners.")</Do>
<Dont description="Avoid changing the 1:1 aspect ratio between the width and height of the Avatar.">![A Telerik and Kendo UI Avatar with changed ratio of width and height.](images/components-avatar-usage-proportions-dont.png "Do not change Telerik and Kendo UI Avatar ratio of 1:1 between width and height.")</Dont>
</DosDonts>


### Text Label Lenght

The Avatar must contain brief and clear information as the available space is limited and the content must fit.

<DosDonts>
<Do description="Use initials and short words to represent the meaning of the Avatar.">![A Telerik and Kendo UI Avatar with initials inside.](images/components-avatar-usage-text-lenght-do.png "Keep the label of the Telerik and Kendo UI Avatar as clear and short as possible.")</Do>
<Dont description="Avoid using long labels that distort the Avatar.">![A Telerik and Kendo UI Avatar showing a two-word name inside instead of initials.](images/components-avatar-usage-text-lenght-dont.png "Do not use long words or expressions for the label of the Telerik and Kendo UI Avatar.")</Dont>
</DosDonts>


### Consistency

When using multiple Avatars in a group, their size, border radius, and content type must be equal to indicate the relation.

<DosDonts>
<Do description="Use Avatars of equal size, border radius, and content type if they are part of the same group.">![Three Telerik and Kendo UI Avatars using consistent sizing, fill mode, and border radius in a container that wraps them.](images/components-avatar-usage-consistency-do.png "Use similar size, fill mode, and border radus for Telerik and Kendo UI Avatars for similar UI context.")</Do>
<Dont description="Avoid mixing sizes, border radiuses and different content types within a group of Avatars.">![Three Telerik and Kendo UI Avatars using different sizing, fill mode, and border radius in a container that wraps them.](images/components-avatar-usage-consistency-dont.png "Do not combine Telerik and Kendo UI Avatars that are of different sizes, fill modes, and border radiuses inside a single component.")</Dont>
</DosDonts>