Avatar

When to use

Use when identifying users is important. profile pages, team collaboration, navigation headers. For creator pages, use our CreatorAvatar wrapper which handles ImageKit URL resolution.

When not to use

  • For product thumbnails, use NuxtImg with fallback placeholder
  • When an icon is more suitable than a person's image
  • Privacy-sensitive contexts where showing user images may be inappropriate

Guidelines

  • Keep 1:1 ratio: Never change the aspect ratio. it distorts the image.
  • Circle shape: Use circles for people. Don't change the shape.
  • Sizing: 24-40px for headers/bars, 40-48px in lists/content, 56px+ for profiles.
  • Consistent groups: When grouping avatars, keep size, shape, and content type equal.
  • Fallback chain: Image → Initials → Icon. Never show a broken image.

How it works

Sizes

S
M
L

With image

Icon

Edge cases

  • Always pass :pt="{ image: { class: 'object-cover' } }" to prevent distortion
  • CDN paths need the ImageKit prefix, so use CreatorAvatar