Avatar Component

The Ignite UI for Angular Avatar represents a user, entity, or object with an image, initials, or custom content.

Use the avatar to provide a compact visual identity in lists, cards, profile menus, and activity feeds.

Live Demo

Anatomy

The avatar is a single host element that applies image semantics and renders one of the supported content patterns.

igx-avatar[role="img"]           // host - exposes the avatar
└─ one of, by priority:
   ├─ div.igx-avatar__image      // `src` set - image painted as a background
   ├─ igx-icon                   // `icon` set
   ├─ span                       // `initials` set - first two characters
   └─ ng-content                 // custom projected content

Getting Started

Import the Angular avatar component before you render <igx-avatar>. If you have not set up Ignite UI for Angular yet, complete the shared Getting Started topic first.

import { IgxAvatarComponent } from 'igniteui-angular/avatar';

Usage

Render an avatar with an image source, initials, or custom content in the default slot.

Variants

Set only the content source you intend to show. The Angular avatar renders src first, then icon, then initials, and falls back to projected custom content when none of those inputs are set.

<igx-avatar initials="AZ"></igx-avatar>

<igx-avatar src="https://static.infragistics.com/xplatform/images/people/men/1.jpg"></igx-avatar>

<igx-avatar icon="home"></igx-avatar>

Shape

Set Shape to square, rounded, or circle.

<igx-avatar initials="AZ" shape="circle"></igx-avatar>

Size

Set --ig-size to one of the shared size tokens when you need a preset avatar size.

<igx-avatar initials="AZ" size="large"></igx-avatar>

Do/Don’t

When to use: Use the avatar when a UI needs a small representation of a person, organization, object, or account, such as a profile image, initials, or an icon. Keep a consistent avatar strategy within the same UI region so repeated identities are easy to scan.

When not to use: Use the Badge component when you need to show a count, status, or notification indicator instead of representing an entity. Badges can also decorate avatars when both identity and status need to appear together.

Do	Don’t

Properties

The avatar exposes a small set of inputs for its content and shape.

Styling

The avatar appearance is controlled through theme variables and platform-specific styling hooks.

Use the avatar CSS variables for token-level changes and Angular host classes when you need to target a specific rendered type or shape.

Sass Theming

Use the avatar-theme function when your application customizes Ignite UI themes through Sass.

@use "igniteui-angular/theming" as *;

$custom-avatar-theme: avatar-theme(
  $background: #72da67,
  $border-radius: 16px,
  $size: 3rem
);

:root {
  @include tokens($custom-avatar-theme);
}

CSS Variables

Set component CSS variables directly when you need local styling without a Sass build step.

igx-avatar {
  --ig-avatar-background: var(--ig-success-500);
  --ig-avatar-color: var(--ig-success-500-contrast);
  --ig-avatar-border-radius: 20px;
}

Styling with Tailwind

Use the Angular Tailwind utility syntax when your application styles Ignite UI components through Tailwind classes.

Accessibility

The avatar is a non-interactive identity visual with accessible image semantics.

Keyboard Interaction

The avatar does not receive focus and has no keyboard interaction.

Screen Readers / ARIA

The avatar initializes with image semantics and a default accessible label of avatar.

• Use surrounding text to identify the represented person, entity, or object when an image avatar conveys identity.
• Treat decorative avatars as redundant when adjacent text already identifies the same entity.

Accessibility Compliance

Infragistics documents Ignite UI for Angular accessibility support for Section 508 and WCAG 2.1 guideline areas in the Accessibility Compliance topic.

Your responsibilities:

• Keep sufficient contrast between the avatar background and text or icon color when overriding styles.

• Avoid duplicating the same identity announcement when adjacent text already names the person or entity.

• Make sure nearby text identifies the represented entity when the avatar image conveys identity.

Troubleshooting

Use this section to check boundaries and common decisions before treating Avatar as an interactive or status component.

Known Limitations

The avatar is a visual identity primitive and does not add interaction, status, or notification behavior by itself.

• Use an interactive container, such as a button or list item, when the represented entity must be clickable.
• Use a badge with the avatar when you need to show status, counts, or notification indicators.

API References

Dependencies

The Sass styling workflow uses the IgxAvatar Theme and IgxIcon Theme APIs.

Additional Resources

Use these resources for support and related Ignite UI documentation.

• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub

Related Components

Use these related components when identity needs to be combined with status, actions, or richer layout.

• Badge - Use Badge to show counts, status, or notification indicators. Badge can decorate Avatar when the UI needs both identity and status.

FAQ