Use the Avatar Component as a graphical representation of a person through a profile picture or image, an icon, or a string with initials. The Avatar is visually identical to the Ignite UI for Angular Avatar Component

    Avatar Demo


    The Avatar can carry different types of content such as an image, a string with initials, or an icon.


    The Avatar comes in three different sizes:

    • Large - Suitable for profile pages
    • Medium - Appropriate for custom menus and visualizations
    • Small - Easily embedded in a contact list and similar repetitive scenarios


    The avatar comes in two distinct types determined by its shape: a circle and a square form.


    The Avatar comes with styling flexibility through the various options for the background color, as well as initials and their text style, and icon and its color, where applicable.


    When using an Avatar with initials or icons, pick their colors carefully to assure good contrast with the Avatar background color. Avoid colors with poor contrast like similar shades of the same color or combinations that create chromatic aberrations.

    Do Don't

    Additional Resources

    Related topics:

    Our community is active and always welcoming to new ideas.