We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

syncfusion trusted companies

Overview

Avatar is a pure CSS component used to add initials, icons, or images representing people or objects in different shapes and sizes. The Avatar component can be easily integrated with ListView, Badge, Card, and other container components.


Profile or image avatar

The Angular Avatar component supports various types of images to represent user profile images like those in applications such as Mail, Outlook, GitHub, and StackOverflow.


Initial avatar

Represents a user’s initials in different sizes.


Text or word avatar

Create word or text avatars from user names.


Media types

The avatar supports well-known media types, icons, SVG, font icons, and text.

Shapes and sizes

The Angular Avatar component can be either square or circular in one of five sizes: extra small, small, medium, large, and extra large. By default, avatars are created in a square shape with a medium size.


UI customization

Completely customize the avatar attributes, like dimensions and colors.


Avatar generator

In applications like Gmail, StackOverflow, GitHub, and others, user avatars are represented using Identicons, which are visual representations of hash values of IP addresses.

Use the Syncfusion Angular Avatar and Badge components to integrate dynamically generated Identicons by following the instructions in this blog:


Integration with other components

Easily integrate the Angular Avatar component with layout controls, specifically ListView and Card, to achieve different UIs, such as mobile contacts, Mail-like, Outlook-like, and more. Integrate it with the Badge control to represent a notification count like in email applications.


Other supported frameworks

The Avatar control is also available in React, Vue, and JavaScript frameworks. Check out the different Avatar platforms from the links below:


Angular version compatibility

With continuous improvement in Angular versions, the Angular Avatar is kept up to date to make it compatible with the latest version.



80+ ANGULAR UI COMPONENTS

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time.
Here are some of their experiences.

Rated by users across the globe

Transform your applications today by downloading our free evaluation version Download Free Trial

Awards

Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Up arrow icon
Live Chat Icon For mobile