Avatar
Brand avatar used as a logo across the site. Two variants: photo with a profile image and rotating accent-gradient border, and icon with an animated accent-gradient orb.
Variants
Icon
tsx
<Avatar variant="photo" />
<Avatar variant="icon" />Sizes
32px (default)
40px (lg)
tsx
<Avatar variant="photo" /> {/* 32px default */}
<Avatar variant="photo" size="lg" /> {/* 40px */}Use Cases
Photo
Gabriel Hidalgo
UX/UI Designer
Icon
Gabriel Hidalgo
UX/UI Designer
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "photo" | "icon" | "photo" | Photo shows the profile image with a rotating accent-gradient border. Icon shows an animated accent-gradient orb inside a dark container. |
size | "default" | "lg" | "default" | "default" renders at 32×32 with rounded-sm. "lg" renders at 40×40 with a slightly larger radius. |
className | string | - | Additional classes merged onto the outer container — for one-off tweaks (hover effects, etc.). Do not override size here; use the size prop. |
Import
tsx
import { Avatar } from '@/components/ui/Avatar'