iconiq
—Open GitHub

Avatar

Compact circular avatar with motion on enter, hover, and tap. Shows an image or fallback text at a fixed 42 x 42 size.

Open in
Avatar

Spring in · Hover lifts the ring · Image fades to fit

Installation

npx shadcn@latest add @iconiq/avatar

Props

Avatar

3 props

Compact motion avatar with a canonical Avatar export, optional image source, and fallback text for empty states.
srcstring
Image URL rendered into a framework-agnostic img element. When present, the image fills the 42x42 circular mask with a blur-and-clip reveal animation.
fallbackstring
Default?
Text rendered in the center when no src is provided, typically initials or a short placeholder character.
classNamestring
Merged onto the root motion.div. The base component already fixes the size to 42x42 and applies the circular overflow mask.

Notes

The component does not forward refs or arbitrary DOM props; the public surface is only src, fallback, and className.
The root is a motion.div with pointer-style hover and tap animation, but it is not a button or link by itself.