Blazor Avatar - Overview


Jason Smith

UX Designer


George Porter

Software Engineer

A profile picture of a random person.

Michael Holz


A profile picture of a random person.

André Stewart

Product Manager


Not specified

  • Overview.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
blazor ui ninja image

The Avatar component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.


The Telerik UI for Blazor Avatar component makes the sizing and formatting of pictures, initials, or icons a breeze. It exposes three different types - Image, Icon and Text. The Avatar accepts arbitrary HTML and applies styling over it depending on the chosen type. To follow the accessibility guidelines, specifying additional attributes such as the alt tag is fully customizable via the custom HTML that is passed to the content of the component. The avatar can also be used as a template and it can accept a RenderFragment and be used in a loop or nested within other components.

It is used to easily display content when building forms, profile pages navbar menus. Through the exposed appearance configuration options, the avatar can fit and integrate with any application design. You can customize its size, roundness, fill mode, and coloring.

Apart from the built-in size options (small, medium, large), you can set custom width and height to comply with any design requirements. To go with the flow of your page, specify the Rounded parameter - the outlook of the Avatar varies from a rectangular to a complete circle. The ThemeColor parameter can be set to a handful of options so that the coloring goes with the outlook of the page.

The FillMode parameter mainly targets the Icon and Text avatar types. It controls the coloring of the background (solid) or the icon/text (outline). The outline option usually goes hand-in-hand with the Bordered parameter. It sets a border around the avatar and accents the text/icon displayed within. The color depends on the ThemeColor parameter.

This Blazor Avatar Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.