Avatars

A circle that stands for a person: a photo, a cut-out, a memoji, an illustration, initials or a person glyph, with an optional online dot and verified badge. Nine sizes, from 24 to 100.

import { Avatar } from '@orvain/react';
 
<Avatar variant="image" src="/ada.jpg" alt="Ada Lovelace" size={48} />
<Avatar variant="text" name="Ada Lovelace" />
<Avatar variant="icon" />
<Avatar variant="image" src="/ada.jpg" alt="Ada Lovelace" showOnlineStatus showVerifiedBadge />

Add an Orvain Avatar for Khadija Alaa, illustration style, size 100, with the verified badge on top and the online dot at the bottom.

Orvain MCPIncluded with the library

When to use#

Beside a name in lists, comments, mentions and account menus.
With a status dot when presence matters: online, away, busy.

When not to use

Use an Avatar Group or Avatar Compact Group to show several people.

Anatomy#

1Disc

A circle in the persona's colour, with a #f2f2f2 inner ring: 2px from 56px up, 1px below. Nine sizes, 24 to 100.

2Content

A photo, a cut-out photo or memoji on the persona colour, a line illustration, two initials in Satoshi Bold, or a person glyph.

3Verified badge

Optional, top right: an 8-point rosette with a check, in the persona's brand colour.

4Online dot

Optional, bottom right: #2ed714 inside a #fcfcfc ring, with a soft shadow.

States#

Image

The person's photo, filling the disc.

Image + Bg

A cut-out photo on the persona colour.

Memoji

A 3D memoji on the persona colour.

Illustration

A line portrait on the persona colour.

Text

Initials in the persona's ink colour.

Icon

A head-and-shoulders glyph, when nothing else is known.

Source#

Preview – final code pending

The Avatars is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

lists activity feed notifications feed