Avatar

Avatar options
Choice	Values	Default	What it does
`sizesmbk-avatar--size-<value>`	`2xsxssmmdlgxl`	`xl`
`tonesmbk-avatar--tone-<value>`	`defaultbrandinverse`	`default`	Default sits on the raised surface; brand on the brand fill; inverse on the inverse fill.
`typesmbk-avatar--type-<value>`	`initialsiconimage`	`initials`	What fills the circle. Figma calls the image type "Avatar".

Partssmbk-avatar__initialssmbk-avatar__iconsmbk-avatar__image

A person's picture at the medium size.

Six sizes with a picture.

When there is no picture, initials.

When it is not a person, an icon: a team, a place, a bot.

Three fills behind initials or an icon: raised, brand, inverse.

Purpose

A circle that stands for a person, a team or a thing: their picture when there is one, their initials when there is not, or an icon when it is not a person. Six sizes cover a chip's corner up to a profile header.

When to use

Beside a name in a list, a comment, a card.
Inside a chip that stands for a person.
As the main image of a profile.

When not to use

For a logo. Logos are not circles.
For decoration without a subject.

Usage rules

Do

Write the name beside a small avatar and leave its alternative text empty, so the name is read once.
Use the default tone for people and the brand tone for the product itself.

Don't

Put more than two or three letters in the initials.
Stretch it. It is square by its size.

Use two initials, so the letters stay legible inside the circle.

Don't

Four letters or a whole name crowd the circle and shrink out of reading size.

Anatomy

The block, a circle with a faint highlight edge, clipping its content.
One of three fills: the initials part, the icon part, or the image part. Initials are set in the label styles in the small sizes and grow to the body and heading styles in the large ones.

Behavior

It is inert; wrap it in a link or a button when it should do something.

A picture that fails to load gives way to the initials, or to the icon when there are none, named by the same alternative text, so the circle never shows the browser's broken-picture mark. A picture that failed before the page's script ran is caught when it runs; without script the browser's own mark shows. A new address is tried afresh.

What it does for you

Initials are always hidden from assistive technology, because they read as letters, not as a name. Given an alternative text, the avatar becomes one image named by it, so the name is read instead.
An icon avatar is decorative unless labeled.

What you must do

Give an image avatar an alternative text describing the subject, or empty text when the name is written right beside it.
Label an icon avatar when it means something, since it is decorative otherwise.

How to test

With a screen reader, an image avatar is read as its alternative text, an initials avatar with no alternative text is skipped, and one with an alternative text is read as one image by that name.
When the name is written beside the avatar, the avatar adds nothing to what is read.
Tab past it: the avatar takes no focus.

The files the avatar is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.

Stylesheet

avatar.css

/* smbk-avatar — Avatar. Figma "Avatar" 962:62.
 * Sizes are bound to primitive size steps in Figma; so here. Initials take a
 * text style per size, as Figma binds them: the label styles up to the medium
 * avatar, then Body LG, then Heading 2XS at the largest. */

.smbk-avatar {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--smbk-size-88);
  height: var(--smbk-size-88);
  overflow: hidden;
  border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-rim-subtle);
  border-radius: var(--smbk-radius-full);
  background: var(--smbk-color-surface-raised);
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-heading-2xs-font-family);
  font-size: var(--smbk-typography-heading-2xs-font-size);
  font-weight: var(--smbk-typography-heading-2xs-font-weight);
  line-height: var(--smbk-typography-heading-2xs-line-height);
  letter-spacing: var(--smbk-typography-heading-2xs-letter-spacing);
  -webkit-user-select: none;
  user-select: none;
}

.smbk-avatar__icon {
  font-size: var(--smbk-size-icon-2xl);
}

.smbk-avatar__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- tone. The default tone is the block's own look above. ---- */

.smbk-avatar--tone-brand {
  background: var(--smbk-color-surface-brand);
  color: var(--smbk-color-text-on-brand);
}

.smbk-avatar--tone-inverse {
  background: var(--smbk-color-surface-inverse);
  color: var(--smbk-color-text-inverse);
}

/* ---- size ---- */

.smbk-avatar--size-lg {
  width: var(--smbk-size-64);
  height: var(--smbk-size-64);
  font-family: var(--smbk-typography-body-lg-font-family);
  font-size: var(--smbk-typography-body-lg-font-size);
  font-weight: var(--smbk-typography-body-lg-font-weight);
  line-height: var(--smbk-typography-body-lg-line-height);
  letter-spacing: var(--smbk-typography-body-lg-letter-spacing);
}

.smbk-avatar--size-lg .smbk-avatar__icon { font-size: var(--smbk-size-icon-xl); }

.smbk-avatar--size-md {
  width: var(--smbk-size-40);
  height: var(--smbk-size-40);
  font-family: var(--smbk-typography-label-lg-font-family);
  font-size: var(--smbk-typography-label-lg-font-size);
  font-weight: var(--smbk-typography-label-lg-font-weight);
  line-height: var(--smbk-typography-label-lg-line-height);
  letter-spacing: var(--smbk-typography-label-lg-letter-spacing);
}

.smbk-avatar--size-md .smbk-avatar__icon { font-size: var(--smbk-size-icon-lg); }

.smbk-avatar--size-sm {
  width: var(--smbk-size-32);
  height: var(--smbk-size-32);
  font-family: var(--smbk-typography-label-md-font-family);
  font-size: var(--smbk-typography-label-md-font-size);
  font-weight: var(--smbk-typography-label-md-font-weight);
  line-height: var(--smbk-typography-label-md-line-height);
  letter-spacing: var(--smbk-typography-label-md-letter-spacing);
}

.smbk-avatar--size-sm .smbk-avatar__icon { font-size: var(--smbk-size-icon-md); }

.smbk-avatar--size-xs {
  width: var(--smbk-size-24);
  height: var(--smbk-size-24);
  font-family: var(--smbk-typography-label-sm-font-family);
  font-size: var(--smbk-typography-label-sm-font-size);
  font-weight: var(--smbk-typography-label-sm-font-weight);
  line-height: var(--smbk-typography-label-sm-line-height);
  letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
}

.smbk-avatar--size-xs .smbk-avatar__icon { font-size: var(--smbk-size-icon-sm); }

.smbk-avatar--size-2xs {
  width: var(--smbk-size-20);
  height: var(--smbk-size-20);
  font-family: var(--smbk-typography-label-sm-font-family);
  font-size: var(--smbk-typography-label-sm-font-size);
  font-weight: var(--smbk-typography-label-sm-font-weight);
  line-height: var(--smbk-typography-label-sm-line-height);
  letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
}

.smbk-avatar--size-2xs .smbk-avatar__icon { font-size: var(--smbk-size-icon-xs); }

Tokens it reads

Avatar tokens
Token and CSS	Value	Preview	Foundation
size.88--smbk-size-88	88px		Size
border-width.hairline--smbk-border-width-hairline	1px		Border width
color.border.rim-subtle--smbk-color-border-rim-subtle	light: #ffffff33dark: #ffffff08changes with theme		Color
radius.full--smbk-radius-full	9999px		Radius
color.surface.raised--smbk-color-surface-raised	light: #f9fafbdark: #232527changes with theme		Color
color.text.default--smbk-color-text-default	light: #232527dark: #e7ebf0changes with theme		Color
typography.heading-2xs--smbk-typography-heading-2xs-font-family--smbk-typography-heading-2xs-font-size--smbk-typography-heading-2xs-font-weight--smbk-typography-heading-2xs-line-height--smbk-typography-heading-2xs-letter-spacing--smbk-typography-heading-2xs-text-transform	fontFamily: Funnel Display, Funnel Display Fallback, system-ui, sans-seriffontSize: min: 18px · max: 24pxfontWeight: 400lineHeight: 1.2letterSpacing: 0px	The quick brown fox	Typography
size.icon.2xl--smbk-size-icon-2xl	40px		Size
color.surface.brand--smbk-color-surface-brand	#cc0d0d		Color
color.text.on-brand--smbk-color-text-on-brand	#f9fafb		Color
color.surface.inverse--smbk-color-surface-inverse	light: #2d3237dark: #e7ebf0changes with theme		Color
color.text.inverse--smbk-color-text-inverse	light: #f9fafbdark: #232527changes with theme		Color
size.64--smbk-size-64	64px		Size
typography.body-lg--smbk-typography-body-lg-font-family--smbk-typography-body-lg-font-size--smbk-typography-body-lg-font-weight--smbk-typography-body-lg-line-height--smbk-typography-body-lg-letter-spacing--smbk-typography-body-lg-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 20pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
size.icon.xl--smbk-size-icon-xl	32px		Size
size.40--smbk-size-40	40px		Size
typography.label-lg--smbk-typography-label-lg-font-family--smbk-typography-label-lg-font-size--smbk-typography-label-lg-font-weight--smbk-typography-label-lg-line-height--smbk-typography-label-lg-letter-spacing--smbk-typography-label-lg-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 16pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px	The quick brown fox	Typography
size.icon.lg--smbk-size-icon-lg	24px		Size
size.32--smbk-size-32	32px		Size
typography.label-md--smbk-typography-label-md-font-family--smbk-typography-label-md-font-size--smbk-typography-label-md-font-weight--smbk-typography-label-md-line-height--smbk-typography-label-md-letter-spacing--smbk-typography-label-md-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px	The quick brown fox	Typography
size.icon.md--smbk-size-icon-md	20px		Size
size.24--smbk-size-24	24px		Size
typography.label-sm--smbk-typography-label-sm-font-family--smbk-typography-label-sm-font-size--smbk-typography-label-sm-font-weight--smbk-typography-label-sm-line-height--smbk-typography-label-sm-letter-spacing--smbk-typography-label-sm-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 12pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px	The quick brown fox	Typography
size.icon.sm--smbk-size-icon-sm	16px		Size
size.20--smbk-size-20	20px		Size
size.icon.xs--smbk-size-icon-xs	12px		Size

Manifest

avatar.manifest.json

{
  "name": "avatar",
  "block": "smbk-avatar",
  "summary": "A person or thing as a circle: initials, an icon, or a picture, in six sizes.",
  "adapt": "css",
  "axes": {
    "size": {
      "values": [
        "2xs",
        "xs",
        "sm",
        "md",
        "lg",
        "xl"
      ],
      "default": "xl"
    },
    "tone": {
      "values": [
        "default",
        "brand",
        "inverse"
      ],
      "default": "default",
      "description": "Default sits on the raised surface; brand on the brand fill; inverse on the inverse fill."
    },
    "type": {
      "values": [
        "initials",
        "icon",
        "image"
      ],
      "default": "initials",
      "description": "What fills the circle. Figma calls the image type \"Avatar\"."
    }
  },
  "flags": {},
  "parts": [
    "initials",
    "icon",
    "image"
  ],
  "figmaNodeId": "962:62"
}

Menu

Customize the preview

Options

Examples

Usage

Picture

Initials

Icon

Tones

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Source