Avatar

The Avatar component represents a user, team, file, folder, or other entity with an image, initials, generated placeholder, or icon. Use it as a compact identity marker in tables, lists, comments, account menus, cards, and collaborator interfaces.

Use it for:

People and entities: Show users, teams, files, projects, or folders in a compact visual form.
Fallback identity: Use initials, icons, automatic colors, or DiceBear placeholders when no image is available.
Presence: Add online, offline, or away indicators for users and collaborators.
Groups: Stack multiple avatars and show hidden participants with an avatar-more item.

Do not use Avatar as a full user profile card, a standalone status label, or a decorative image. Combine it with Card, Table, Select, Autocomplete, or other components when more structure is needed.

The NgStarter Angular Avatar component lets you represent users, teams, or entities with initials, images, icons, generated colors, and presence. Use in account menus, lists, comments, assignees, collaborators, and activity feeds. It includes examples for Basic Avatar, Avatar Variants, Presence Indicator, and Avatar Sizes.

Basic Avatar

Use a basic avatar to show a compact identity marker with initials when no image is available.

Avatar Variants

Choose a variant when the avatar needs to match the emphasis level of the surrounding UI.

Presence Indicator

Add a presence indicator when the avatar represents a user whose availability matters.

Avatar Sizes

Change avatar size with utility classes when it appears in dense tables, account menus, or larger profile areas.

Avatar With Images

Use image avatars for real users or entities when a reliable image URL is available.

Avatar With Icons

Use icon avatars for non-person entities such as folders, files, teams, projects, or system objects.

Grouped Avatars

Use an avatar group to show collaborators, assignees, team members, or shared access in a compact row.

Grouped and Total Avatars

Add avatar-more when the group has more participants than can be shown directly.

+20

Avatar automatic color

Use automaticColor with a valid hex color when avatars need consistent generated backgrounds, readable text, and a matching border without writing custom styles.

+20

Avatar with custom background placeholder

Use DiceBear avatars when you need generated placeholders from a stable key instead of uploaded images.