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


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

Shape and Type

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.

All of the options can be rendered in a different shape by setting the shape property.

The available shape values are:

  • circleRenders a circle shape avatar.
  • roundedRenders an avatar with rounded borders.
  • square(Default)Renders a square shape avatar.

The following example demonstrates the type and shape 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:

In this article

Not finding the help you need?