Skip to content

Avatar

An image, initials or icon representing a person or entity. Sizes, shapes, presence and stacked groups.

CSS only JSON Markdown Registry item

Images and initials

Ana Popescu Kenji Sato LT RB

Sizes

XS SM MD LG XL

Presence and group

Mira Ion
A B C +9

Installation

Everything ships in one stylesheet. There is nothing to import per component.

<link rel="stylesheet" href="https://mian.ro/dist/mian.css">

Prefer to own the files? /r/avatar.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.

Class reference

Class / attributeDescription
mn-avatarBase.
mn-avatar-xs · sm · lg · xlSizes.
mn-avatar-squareRounded square.
mn-avatar-groupOverlapping stack.
mn-avatar-wrap + mn-presenceStatus dot: mn-online, mn-busy, mn-away.

Accessibility

  • Give images meaningful alt text, or alt="" when the name is printed next to it.
  • Presence dots are visual: include the status in text or a label.
Pages
Introduction Installation Theming & noodles Frameworks Accessibility Designing websites AI agents, API & MCP All components All noodles All templates
Templates
Ledger Pipeline Quanta Beacon Relay Forma Tessera Noir Villa Orsola Nido Casa Hana Kiln Nove Circle Field Notes Lumen Pace Aldini Studio Ito Orto Dot One Mist Signal 26
Actions
Button Button group Toggle group Dropdown menu Copy button Swap Hold to confirm
Forms
Field Input Textarea Select Checkbox Radio Switch Slider File input Input group Number input OTP input Rating Combobox Calendar Tag input Password field Swatch picker Time slots Seat map Option cards Date range Task list Duration picker
Data display
Typography Avatar Badge Chip Card Table List Kbd Code Stat Chart Timeline Accordion Description list Divider Skeleton Empty state Indicator Chat Tree view Kanban board Usage meter Notification list Invoice Funnel Leaderboard Product gallery Review summary Social post Profile header Comment thread Filter bar Bulk actions Curriculum Listing card KPI card Heatmap Gauge Breakdown Uptime Voice note
Feedback
Alert Toast Progress Radial progress Spinner Banner Onboarding checklist Loader Cookie consent
Overlays
Modal Drawer Popover Tooltip Command palette Hover card Context menu
Navigation
Navbar Tabs Breadcrumbs Pagination Steps Sidebar Dock Stories bar Page header
Layout & utilities
Collapse Carousel Theme controller Scroll area Mockup Dashboard grid Gradient backdrop Motion
Sections
Slides Jobs list Work grid Comparison table Changelog Integrations Contact section Page layout Site header Hero Logo cloud Feature grid Bento grid Media Testimonial Pricing Call to action Site footer Article App shell Docs layout Sign-in page Price list Team Product card Story card Agenda FAQ section Figures Process
Noodles
Mian Yangchun Linguine Penne Chitarra Shio Spaghetti Bucatini Hofun Hiyamugi Ramyeon Fettuccine Lasagne Pappardelle Paccheri Farfalle Yinzhen Quadretti Acini di pepe Kalguksu Sanuki Hakata Ditalini Juksing Kishimen LaMian Somen Capellini Longxu Misua Bún Kuzukiri Sotanghon Harusame Fensi Tokoroten Nagashi Liangfen Dangmyeon Woonsen Shirataki Cha Soba Daoxiao Pici Naengmyeon Hōtō Ramen Biangbiang Maccheroni Rigatoni Fusilli Jjajang Laksa Soba Tagliatelle Tajarin Mafaldine Corzetti Inaniwa Yifu Udon Gnocchi Cavatelli Orecchiette Mee Mixian Pho
↑↓navigate↵openescclose
Choose a noodle

Minimal

Flat

Pixel

Linear

Thin

Glass

Textured

Bold

Elegant

Rounded
On this page