Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

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 generated 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.

PropTypeDefault
image
The URL of the image to display
string''
variant
The visual variant of the avatar
AvatarVariant''
label
The text label to display (initials)
string''
key
Stable key used to generate deterministic avatar placeholders
string | number | null | undefined''
appearance
Avatar appearance. Use default for normal image, label, or icon avatars, and identicon or initials for generated key-based placeholders
'default' | 'identicon' | 'initials' | string'default'
backgroundColors
HEX background color palette used by generated avatar appearances
string[][]
foregroundColors
HEX foreground color palette used by generated avatar appearances
string[][]
alt
Accessibility label for the image
string''
clickable
Whether the avatar is clickable
booleanfalse
automaticColor
HEX color for automatic background and text color generation
stringundefined
presenceIndicator
The presence status indicator
AvatarPresenceIndicatornull

Global Configuration

Use provideAvatar(config) to set defaults for Avatar instances in an Angular app. Component inputs override provider defaults for a specific avatar.

ConfigTypeDefault
appearance
Default avatar appearance used when an avatar does not set its own appearance input
'default' | 'identicon' | 'initials' | string'default'