Avatar Component — Astro

Avatar Component

An accessible avatar for users: show a profile image when available, or initials derived from a name (or custom initials) when no image is provided. Supports multiple sizes and circle or square shape.

Props

• src (string, optional) - Image URL; when provided, the image is shown
• alt (string, optional) - Alt text for the image
• name (string, optional) - Full name used to derive initials when no image (e.g. "Jane Doe" → "JD")
• initials (string, optional) - Override initials when no image (e.g. "JD"); ignored if name is provided
• size (string, optional) - sm, md, lg (default: md)
• shape (string, optional) - circle, square (default: circle)
• class (string, optional) - Additional CSS classes

Basic Usage (initials)

When no src is provided, use name to show initials (first letter of first and last word, or first two letters of a single word).

---
import Avatar from '../../components/Avatar.astro';
---

<Avatar name="Jane Doe" />
<Avatar name="Alice" />
<Avatar initials="AB" />

Sizes

<Avatar name="Jane Doe" size="sm" />
<Avatar name="Jane Doe" size="md" />
<Avatar name="Jane Doe" size="lg" />

Shape

Use shape="square" for a rounded square; default is circle.

<Avatar name="Jane Doe" shape="circle" />
<Avatar name="Jane Doe" shape="square" />

With image

Pass src (and alt) to show a profile image. The image is scaled to cover the avatar with object-fit: cover.

Live Example (placeholder image)

<Avatar
  src="/path/to/photo.jpg"
  alt="Jane Doe"
  size="md"
/>

Features

• Accessible - role="img" and aria-label from alt, name, or initials
• Initials - Derived from name (e.g. "Jane Doe" → "JD") or set via initials
• Image - Optional src with loading="lazy" and object-fit: cover
• Sizes - sm, md, lg
• Shape - circle (default) or square with rounded corners

Svelte & Vanilla: Svelte · Vanilla: same HTML and BEM as in Usage above.