New to Kendo UI for Vue? Start a free 30-day trial


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


The available type are:

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

The following example demonstrates the type options of the Avatar.

View Source
Edit In Stackblitz  
Change Theme:

Theme Color

The Аvatar allows you to specify predefined theme colors.

The available themeColor values are:

  • primary (Default)Applies coloring based on primary theme color.
  • secondaryApplies coloring based on secondary theme color.
  • tertiary Applies coloring based on tertiary theme color.
  • inherit Applies inherited coloring value.
  • infoApplies coloring based on info theme color.
  • success Applies coloring based on success theme color.
  • warning Applies coloring based on warning theme color.
  • error Applies coloring based on error theme color.
  • dark Applies coloring based on dark theme color.
  • light Applies coloring based on light theme color.
  • inverse Applies coloring based on inverted theme color.
View Source
Edit In Stackblitz  
Change Theme:


The Avatar allows you to set predefined or custom sizes. To specify a predefined size, set the size property.

The available size values are:

  • small
  • medium (Default)
  • large

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

View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?