Spryker

Avatar

Circular image or initials representing a user or entity.

JD

Variants

Three render modes cover every identity case — image when available, initials as a friendly fallback, icon when nothing is known.

VariantPurpose
ImageUse a user-uploaded photo or product thumbnail. The default when data is available.
InitialsFallback when no photo is available. Use the first letters of the user's name on a brand-subtle background.
Icon fallbackLast-resort fallback when neither photo nor name is known. Neutral grey glyph.

Design tokens

TokenValueDescription
background/brand/subtle
#f3fffc
Initials background
text/primary
#3b3b3d
Initials text
background/subtle
#f5f5f5
Icon fallback background
icon/secondary
#7b7b7b
Icon glyph + offline status
background/state/success/bold
#049442
Online status dot
background/state/warning/bold
#bb7034
Away status dot
size
24/32/40/48
Four discrete sizes
radius (square)
4/6/8/10
Square shape radius per size

Guidelines

Do
  • Always provide meaningful alt text
  • Use initials that match name order (first + last)
  • Reserve status dots for user presence — not product state
  • Use square avatars for organisations, circle for people
Don't
  • Use avatars to convey rank or priority
  • Show more than 2 letters in initials
  • Use low-contrast backgrounds that fail WCAG
  • Use avatars larger than XL inline — use a profile header instead
BreadcrumbDivider