Avatars

  1. Base UI
  2. Avatars

A size for every context

From compact lists to prominent profile details.

Amelia HartXS
Amelia HartSM
Amelia HartMD
Amelia HartLG
Amelia HartXL

Shape variations

Round portraits, soft corners, and square frames.

Liam CarterCircle
Liam CarterRounded
Liam CarterSquare

Initials & color

A simple fallback when a portrait is unavailable.

AHLCNEOR

Use semantic colors and readable initials to distinguish members.

Notification badges

Attach a count without taking over the portrait.

Amelia Hart3Messages
LCVerified

Presence indicators

Show availability with a dot and a clear label.

Amelia Hart

Amelia Hart

Product designer
Online
Liam Carter

Liam Carter

Project lead
Offline
Noah Ellis

Noah Ellis

Developer
Online

Shared team

Compact groups for projects and shared documents.

Atlas product team

Four members working together

Amelia HartLiam CarterNoah EllisOlivia Reed
Amelia HartLiam CarterNoah Ellis+6
9 collaborators

Outlined portraits

Subtle rings add structure to featured members.

Amelia HartAmelia
Liam CarterLiam
Noah EllisNoah

Workspace identities

Company logos and initials for shared spaces.

Northstar company logo

Northstar collective

Design & development
AT

Atlas workspace

12 active members

Account preview

A clear identity block with one useful action.

Amelia Hart

Amelia Hart

Senior product designer

Available for collaborationView profile

Assigned members

Keep names and roles visible alongside portraits.

Amelia Hart

Amelia Hart

Product designer
Owner
Liam Carter

Liam Carter

Project lead
Member
Noah Ellis

Noah Ellis

Developer
Member

Icon avatars

Recognizable symbols for services and system accounts.

Support
Security
Assistant

Conversation preview

Portraits provide context in compact message lists.

Liam Carter

Liam Carter

10:24 AM

The updated project files are ready for your review.

Amelia Hart

Amelia Hart

Thanks! I will share my feedback this afternoon.