PreviewFeatures
Automatic fallback to initials when image fails to load
Built with Radix UI Avatar primitive for reliability
Multiple size variants from small to extra large
Support for circular and rounded square shapes
Status indicators for online, offline, and away states
Works with avatar groups and stacked layouts
Shadcn/ui Avatar - Figma Component
An image element with a fallback for representing the user. This Figma component is part of our comprehensive design system that brings the popular shadcn/ui library into your design workflow.
Every Avatar variant includes all the necessary states, properties, and styling options you need to create consistent, production-ready designs. The component seamlessly integrates with your existing Figma files and maintains full compatibility with the shadcn/ui React implementation.
Your questions, answered
Browse all 58 components
Accordion
Alert Dialog
Alert
Aspect Ratio
Avatar
Badge
Breadcrumb
Button Group
Button
Calendar
Card
Carousel
Chart
Checkbox
Collapsible
Combobox
Command
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Field
Form
Hover Card
Input Group
Input OTP
Input
Item
Kbd
Label
Menubar
Native Select
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Scroll Area
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spinner
Switch
Table
Tabs
Textarea
Toast
Toggle Group
Toggle
Tooltip
Designing avatars in Figma
The shadcn/ui figma Avatar component includes fallback states with user initials for when images don't load. Design complete user profiles in Figma with all states—image loaded, initials fallback, and loading. This shadcn figma component matches the code behavior exactly.
Avatar sizes for different contexts
Design with the right avatar size in Figma—large (64px) for profiles, medium (40px) for comments, and small (32px) for lists. The shadcn/ui figma component includes all standard sizes so you can prototype different layouts quickly.
Status indicators and badges
Add online/offline status to your Figma avatar designs with the shadcn figma component. Design presence indicators for messaging apps, collaboration tools, and live chat. Your Figma designs will match the shadcn/ui implementation perfectly.
Avatar groups in Figma
Design team displays and user groups in Figma with overlapping avatars. The shadcn/ui figma Avatar component includes group variants with proper spacing and overflow counts (+5 users). Perfect for designing collaboration features and team pages.