Core ElementsFree

Avatar

A user or entity's profile image with a text fallback.

Usage

MLJWALPM

Installation

bash

npm install @wunderui/react

Then import what you need:

tsx

import {
  Avatar,
  AvatarBadge,
  AvatarColor,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
  AvatarStack,
} from "@wunderui/react"

Examples

Icon

A small round avatar with a person icon, for someone without a picture.

Icon, initials and photo

Large square avatars — solid with an icon, tinted initials and a photo — each with an online dot.

AVAL

Sizes

The icon avatar from 28 to 44 px, each with its status dot.

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Projects list on a profile page

Project logos with overlapping member avatars.

Projects

CIn progress

Checkout redesign

E-commerce · 8 members

62%

DReview

Design tokens v2

Design system · 4 members

84%

MPlanned

Mobile onboarding

iOS & Android · 6 members

12%

Projects grid on a profile page

The same project cards in a three-column grid.