Avatar Component

The Ignite UI for Blazor 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.

igc-avatar[role="img"]           // host - exposes the avatar
└─ div[part="base"]              // avatar wrapper
   ├─ span[part="initials"]      // rendered when `initials` is set
   ├─ slot                       // rendered when `initials` is not set
   └─ img[part="image"]          // rendered while `src` is set and loads

Getting Started

Register the avatar module in Program.cs and add the theme stylesheet to your host page. If you have not set up Ignite UI for Blazor yet, complete the shared Getting Started topic first.

builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule));

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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 avatar renders Initials when they are set, otherwise it renders default slot content, and it also renders an image element while Src is set and loads successfully.

<IgbAvatar Initials="AZ" />

<IgbAvatar
  Src="https://static.infragistics.com/xplatform/images/people/GUY01.png"
  Alt="A photo of Ana Zane" />

<IgbAvatar>
  <IgbIcon Name="home" />
</IgbAvatar>

Shape

Set Shape to square, rounded, or circle.

<IgbAvatar Initials="AZ" Shape="@AvatarShape.Circle" />

Size

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

igc-avatar {
  --ig-size: var(--ig-size-large);
}

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 CSS parts when you need to target the rendered wrapper, image, icon, or initials.

Sass Theming

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

@use "igniteui-theming/sass/themes" 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.

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

igc-avatar::part(base) {
  border: 2px solid var(--ig-success-700);
}

Styling with Tailwind

Use Tailwind utility classes with the Ignite UI for Blazor Avatar when you need utility-first layout styling together with Ignite UI component tokens.

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.

• Set alt when a src image represents a specific person, entity, or object.
• Add an explicit aria-label when projected custom content needs a different accessible name.
• Treat decorative avatars as redundant when adjacent text already identifies the same entity.

Accessibility Compliance

Infragistics documents Ignite UI for Blazor 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.

• Provide a descriptive label or alt text when the avatar 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

Slotted icons require the IgbIcon component to be registered or imported.

The avatar also uses the shared theme stylesheet for its default appearance.

Additional Resources

Use these resources for support and related Ignite UI documentation.

• Ignite UI for Blazor Forums
• Ignite UI for Blazor 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