Simple Avatar

Initials, And A Colour It Always Gets

InitialsAvatar takes a name and shows its initials on a colour derived from that name — the same entity lands on the same colour in a list, on its own page, and after a reload, with nothing stored.

The five sizes, on one name — the colour does not move with the size.

With a src the picture takes the place of the initials — one code path, since it is Picturethat answers « a source, or something in its place ». Anindicator and apalette of one's own both still apply.

J

VP

OL

AS

BW

AG

J

<InitialsAvatar name={ thing.name } size="sm" />

<InitialsAvatar name={ thing.name } src={ thing.logo } size="lg" />

<InitialsAvatar name={ thing.name } palette={ OWN_TINTS } />

Custom Sizes

Rounded Avatars

Avatar with Mask

Avatar Group

Avatar Group with Counter

+99

Avatar with Ring

Presence Indicators

Placeholder Avatars (Initials)

Colored Placeholders

Practical Use Cases

User Profile Header

Sarah Johnson

@sarahjohnson

Premium

Designer

Comment Section

Alex Martinez

Great article! This really helped me understand the topic better.

2 hours ago

Team Members

+12

Status List

Emma Wilson

Online

Michael Brown

Offline