Components / Avatar
Avatar
An image element with a fallback for representing the user.
Regular 
CN
Large + Fallback 
NB
Square
CN
<Avatar size="md">
<AvatarImage src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=800&q=80" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>
<Avatar size="lg">
<AvatarFallback>NB</AvatarFallback>
</Avatar> <div class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full bg-slate-100">
<img class="aspect-square h-full w-full" src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=800&q=80" />
<span class="flex h-full w-full items-center justify-center rounded-full bg-slate-100 text-slate-500">CN</span>
</div>