Delphi Design

An avatar component for profile images with fallback support and optional rounded-square (squircle) shape.

Default (circle)

Small

Base

Large

Fallback only

Squircle

Use the squircle prop for a rounded-square shape with corner radius 33% of the width.

Small

Base

Large

Fallback only

Usage

import { Avatar, AvatarImage, AvatarFallback } from "@delphi/ui";

export function Example() {
  return (
    <Avatar className="size-10">
      <AvatarImage src="/me.jpg" alt="Me" />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  );
}

With squircle

import { Avatar, AvatarImage, AvatarFallback } from "@delphi/ui";

export function SquircleExample() {
  return (
    <Avatar squircle className="size-10">
      <AvatarImage src="/me.jpg" alt="Me" />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  );
}

API Reference

Prop	Type	Default	Description
`squircle`	`boolean`	`false`	Rounded square with corner radius 33% of width
`className`	`string`	-	Additional CSS classes (e.g. `size-8`, `size-10`)

AvatarImage accepts standard image props (src, alt, etc.). AvatarFallback renders when the image fails or is loading (with delay).

Provide a short fallback (1–2 characters) for initials

Use squircle for app-icon or product-style avatars when you want a softer square

Set size via className (e.g. size-6, size-8, size-10)

Always set alt on AvatarImage for accessibility

Use long text in AvatarFallback — keep it to initials

Rely on squircle for critical layout