Avatar Components

Dev Design Library indexes 269 avatar components from 66 open-source UI libraries, with the most coming from Origin UI, ReUI, Watermelon UI, FLX UI and sv-particles. Each one links to its page with the source code, a live preview where available, the library license and the install command. Avatar components belong to the Data display group.

Showing 120 of 269, a mix from every library. Open a library to see all of its components.

• Avatarshadcn/ui · ReactAn image element with a fallback for representing the user.
• AvatarMUI / Material UI · React
• AvatardaisyUI · CSS (Tailwind)
• AvatarChakra UI · ReactUsed to represent user profile picture or initials
• AvatarHeroUI · ReactDisplays a user avatar with support for images, text initials, or fallback icons.
• Avatar CirclesMagic UI · ReactOverlapping circles of avatars.
• AvatarReact Spectrum · ReactAn avatar is a thumbnail representation of an entity, such as a user or an organization.
• Avatarcoss ui · ReactAn image element with a fallback for representing the user.
• AvatarOrigin UI · ReactAn image element with a fallback for representing the user.
• AvatarRadix Themes · React
• Collab AvatarCult UI · ReactCollaboration avatar with initials and color
• AvatarArk UI · ReactA graphical representation of the user, often used in profile sections.
• Avatar Group Hovertransitions.dev · HTML/CSS
• B
  Bot AvatarsLibraries.dev · ReactAnimated bot avatars for React — eighteen glossy 3D shapes with living faces that turn, hop and flip, three states…
• Basic avatarReUI · ReactBasic avatar
• Button AccountAmicro Micro Transitions · React
• AvatarPark UI · ReactA component for displaying user profile images with fallback support.
• AvatarLobe UI · ReactAvatar is a component that displays a user's profile picture or initials. It can be customized with props like size…
• Avatar PickerKokonut UI · ReactGenerated avatars from a name, morphing as you type, on a 3D coin you can flick, tap or shuffle.
• avatarIntent UI · Reactavatar
• AvatarUntitled UI React · React
• Avatar GroupbeUI · ReactOverlapping avatars that fan apart on hover, lift with a name tooltip, and expand from a +N count to show everyone.
• AvatarTailGrids · ReactAn image element with a fallback for representing a user.
• Avatar StackSpectrum UI · ReactAn overlapping avatar stack that fans apart on hover, springs name tooltips over each face and expands hidden members…
• Fallback AvatarSpell UI · ReactA unique gradient avatar generated from a name string.
• Animated TooltipVengeance UI · ReactBouncy SVG-shaped tooltips with spring animations
• Sidebar User FooterFluid Functionalism · ReactFooter identity row: a 20px avatar centred on the rows' leading icon axis, chevron on the trailing action axis, and an…
• AvatarToolcraft · React
• AvatarPanel UI · React NativeUser image with an initials fallback, a badge overlay, and a stack for a group of them.
• Avatar-01 - DefaultShadcn Space · ReactDefault avatar component
• Blob ProfileOpenSourceUI · React
• Client Carduselayouts · ReactA client CRM card with payment and deadline rings, plus a morphing avatar stack.
• Depth StackKinetics · HTML/CSSLayered cards fan apart on hover
• AvatarBoardUI · ReactUser photo with initials fallback.
• AvatarShadcn Dashboard · React
• Avatar CirclesAnimations (Svelte) · SvelteA component that displays overlapping avatar circles with optional count indicator for showing team members or…
• Social Proof AvatarsBadtz UI · ReactA component that displays user avatars with optional extra count and star ratings, ideal for showcasing social proof.
• AvatarObsidianUI · React
• Perplexity FaviconNotra · ReactA site favicon on shadcn Avatar with a gray fallback.
• Avatar StackGreatUI · React
• Avatars 08Oxbow UI · AstroAvatar Group (Dynamic +N)
• S
  Social ProofNexvyn UI · ReactNameAvatar: an abstract avatar generated from a name, token colored and SSR safe.
• AvatarShark UI · ReactDisplays a user's profile image with fallback.
• Ai Bot AvatarAI CSS · ReactAn animated AI bot avatar that follows the cursor with its eyes, blinks and reacts to attention.
• Avatar ShowcaseSona UI · ReactA recording-friendly avatar strip with count-aware pacing, deterministic sampling, staggered lanes, and reduced-motion…
• AvatarWatermelon UI · React
• AvatarArc Library · ReactA compact identity marker for people and accounts.
• Glass Contact Pillglasscn · ReactLiquid-glass contact chip with an avatar (image or initials fallback) and name, for messaging apps
• Avatar StackUI Lab · ReactFans open when you reach for it, with a name above each face.
• AvatarHextaUI · ReactUser photos with an initials fallback, status badges and stacked groups that collapse into a count.
• AvatarCojeev UI · ReactPortraits, identity rows and participant groups that keep the person recognizable—with artwork, initials and…
• AvatarROI UI · ReactAn image element with a fallback for representing the user.
• BasicFLX UI · ReactImage avatar with an initials fallback.
• Animated TooltipVelora UI · ReactAvatar row with springy name tooltips on hover.
• AvatarHalaska UI · React
• Basic Avatarsv-particles · Svelte
• AvatarMetal UI · React + SwiftUIA person as a small raised disc: initials, or a photo that fades in once loaded; presence as the LED; a group overlaps…
• AvatarSpaceUI · ReactDisplays user profile pictures, avatars, or fallback initials, giving users an easy way to identify people throughout…
• Aria AvatarReScript shadcn · ReScript
• Liquid AvatarLiquefy UI · ReactAvatar in liquid glass style. Avatar em estilo vidro líquido.
• AvatarD2Studio UI · ReactAn image element with a fallback for representing the user.
• AvatarEaseUI · ReactRound avatar in three sizes with an optional status dot. The image fades in on load and falls back to initials, and a…
• AvatarFibo · ReactA person's photo, or their initials when there's no photo.
• AvatarReactFrame · ReactA user avatar with image, initials or icon fallback, 5 sizes, circle, rounded and square shapes, a presence status dot…
• Animated TooltipAceternity UI · React
• Avatarark-cn · ReactA shadcn-style avatar component built with Ark UI primitives.
• Avatar GroupMUI / Material UI · React
• Avatar GroupHeroUI · ReactDisplay a stacked or grid group of avatars with overflow counting
• Avatar GroupReact Spectrum · ReactAn avatar group is a grouping of avatars that are related to each other.
• Comp 125Origin UI · React
• Basic avatar groupReUI · ReactBasic avatar group
• Group AvatarLobe UI · ReactGroupAvatar is a component that displays multiple user avatars in a grid layout with smooth corner styling. It…
• Account MenuKokonut UI · ReactAn account card that morphs into its own menu, with account switching, status, theme and hold-to-sign-out.
• Invite TeammatesSpectrum UI · ReactA one-seat team with an avatar rail, live invite field and copyable join link.
• Masked AvatarsVengeance UI · ReactStacked masked avatar list
• Avatar CropperPanel UI · React NativeFrame a photo under a circle, and get that circle back as an image.
• Avatar-02 - GroupShadcn Space · ReactGroup avatar component
• Presence DockOpenSourceUI · React
• Presence StackKinetics · HTML/CSSAvatars fan out with a live online pulse
• Spell Fallback AvatarAnimations (Svelte) · Svelte
• Perplexity Model IconNotra · ReactGrayscale provider logos for the model list.
• Avatars 10Oxbow UI · AstroAvatar with Badge Count
• Assignment ClusterSona UI · React
• Avatar 01Watermelon UI · React
• Avatar groupArc Library · ReactShow a team or set of contributors in a small space.
• Avatarglasscn · React
• MessageHextaUI · ReactA chat message row with an avatar, name, bubbles and status, where new messages rise in from the sender's side.
• Invite cardCojeev UI · ReactAn event invitation with participant avatars and a reversible local RSVP, composed from Cojeev primitives.
• Fallback initialsFLX UI · ReactMissing image falls back to initials.
• Avatar CirclesVelora UI · ReactStacked initials avatars with a +N badge — zero images.
• Avatar GroupHalaska UI · React
• Fallback Onlysv-particles · Svelte
• Avatar ExtendedSpaceUI · ReactExtended Avatar components with rings, status badges, indicators, icons, and a built-in procedural fallback powered by…
• Base AvatarReScript shadcn · ReScript
• Hero 01D2Studio UI · ReactStartup mentorship landing hero with a headline, call to action and mentor avatar group.
• Sticker AvatarFibo · ReactAn avatar cut out like a die-cut sticker, with a paper edge that follows its shape and a status told by shape.
• Avatar GroupReactFrame · ReactA stacked group of avatars with photo or initials, an overflow +N bubble, hover lift with name tooltips, a…
• List Item AvatarMUI / Material UI · React
• Comp 126Origin UI · React
• Avatar group with numerical countReUI · ReactAvatar group with numerical count
• Agent AvatarLobe UI · React
• Team SelectorKokonut UI · ReactSeat picker with a scrubbable number, generated avatars and an optional rolling price line.
• Profile DropdownSpectrum UI · Reactcomponent for the Profile Dropdown
• Shared Tooltip AvatarsVengeance UI · ReactAvatar stack with a sliding shared tooltip
• Web AvatarPanel UI · React Native
• Avatar-04 - BorderShadcn Space · ReactBorder avatar component
• User Menu DropdownOpenSourceUI · React
• Avatars 12Oxbow UI · AstroTrusted By + Avatars
• Prototype Avatar ShowcaseSona UI · React
• Avatar 02Watermelon UI · React
• User menuArc Library · ReactYour account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.
• Icon fallbackFLX UI · ReactGeneric user icon when there is no image or name.
• Wavy heroVelora UI · ReactBold centered hero over flowing waves, with a rotating headline word and avatar social proof.
• Large Overlapping Avatar Groupsv-particles · Svelte
• Avatar GroupSpaceUI · ReactA component for rendering a group of avatars, supporting different stacking directions and action buttons.
• Hero Section 01D2Studio UI · ReactPremium landing page hero with a serif accent headline, badge and mentor avatar group.
• Comp 226Origin UI · React
• Avatar group with an icon countReUI · ReactAvatar group with an icon count
• Base Ui AvatarLobe UI · React
• Waitlist FooterSpectrum UI · ReactWaitlist capture with an avatar stack and a live position counter.

Libraries with avatar components

• Origin UI
• ReUI
• Watermelon UI
• FLX UI
• sv-particles

Related categories

• React Avatar Components
• Tailwind CSS Avatar Components
• Svelte Avatar Components
• Animated Avatar Components
• shadcn/ui Avatar Components
• Data Display Components
• Card Components
• Chart Components
• Table Components
• List Components
• Stat Components
• Calendar Components
• Accordion Components
• Data Table Components
• Carousel Components
• Collapsible Components
• Avatar Group Components
• Stat Card Components
• Bar Chart Components
• Tree View Components
• Card Stack Components