AvatarComponent

Updated on Feb 6, 2026

Represents the Kendo UI Avatar component for Angular. Displays images, icons, or initials representing people or other entities.

typescript

@Component({
  selector: 'my-app',
  template: `
    <kendo-avatar [imageSrc]="userImage" size="large"></kendo-avatar>
    <kendo-avatar [initials]="userInitials" themeColor="primary"></kendo-avatar>
    <kendo-avatar [icon]="userIcon" fillMode="outline"></kendo-avatar>
  `
})
class AppComponent {
  userImage = 'path/to/image.jpg';
  userInitials = 'JD';
  userIcon = 'user';
}

Selector

kendo-avatar

Inputs

Name	Type	Default	Description
border	boolean	false	Adds a border to the Avatar.
cssStyle?	any		Defines the CSS styles that render on the content element of the Avatar. Supports the type of values that ngStyle supports.
fillMode	AvatarFillMode		Specifies the fill style of the Avatar. The default value is set by the Kendo theme.
height	string		Sets the height of the Avatar.
icon	string		Sets the icon for the Avatar. All Kendo UI Icons are supported.
iconClass	string		Defines a CSS class or multiple classes separated by spaces. You can apply these classes to a span element inside the Avatar and also use custom icons.
imageSrc	string		Sets the image source of the Avatar.
initials	string		Sets the initials for the Avatar.
rounded	AvatarRounded		Specifies the rounded styling of the Avatar (see example). The default value is set by the Kendo theme.
size	AvatarSize		Specifies the size of the Avatar (see example). The default value is set by the Kendo theme.
svgIcon	SVGIcon		Defines an SVG icon to render. You can use either an existing Kendo SVG icon or a custom one.
themeColor	AvatarThemeColor		Specifies the theme color of the Avatar. The theme color applies as background and border color while adjusting the text color accordingly. The default value is set by the Kendo theme.
width	string		Sets the width of the Avatar.