Avatars

User representation with images, initials, or icons. Supports sizes, colors, status indicators, rings, and grouping.

Image Sizes

Six sizes from .lp-avatar--xs (24px) to .lp-avatar--2xl (80px).

<p class="lp-text-sm lp-text-muted lp-mb-3">Six sizes from <code class="lp-text-danger">.lp-avatar--xs</code> (24px) to <code class="lp-text-danger">.lp-avatar--2xl</code> (80px).</p>
<div class="lp-demo-row lp-items-end">
    <div class="lp-avatar lp-avatar--xs"><img src="https://i.pravatar.cc/48?img=1" alt="XS"></div>
    <div class="lp-avatar lp-avatar--sm"><img src="https://i.pravatar.cc/64?img=1" alt="SM"></div>
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=1" alt="Default"></div>
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=1" alt="LG"></div>
    <div class="lp-avatar lp-avatar--xl"><img src="https://i.pravatar.cc/128?img=1" alt="XL"></div>
    <div class="lp-avatar lp-avatar--2xl"><img src="https://i.pravatar.cc/160?img=1" alt="2XL"></div>
</div>

Initials with Colors

Use text initials with .lp-avatar--{color} background colors.

<p class="lp-text-sm lp-text-muted lp-mb-3">Use text initials with <code class="lp-text-danger">.lp-avatar--{color}</code> background colors.</p>
<div class="lp-demo-row">
    <div class="lp-avatar lp-avatar--primary">AB</div>
    <div class="lp-avatar lp-avatar--secondary">CD</div>
    <div class="lp-avatar lp-avatar--success">EF</div>
    <div class="lp-avatar lp-avatar--danger">GH</div>
    <div class="lp-avatar lp-avatar--warning">IJ</div>
    <div class="lp-avatar lp-avatar--info">KL</div>
    <div class="lp-avatar lp-avatar--dark">MN</div>
    <div class="lp-avatar lp-avatar--light">OP</div>
</div>

Icon Avatars

person

check

support_agent

star

<div class="lp-demo-row">
    <div class="lp-avatar lp-avatar--primary"><span class="material-symbols-outlined">person</span></div>
    <div class="lp-avatar lp-avatar--success"><span class="material-symbols-outlined">check</span></div>
    <div class="lp-avatar lp-avatar--danger"><span class="material-symbols-outlined">close</span></div>
    <div class="lp-avatar lp-avatar--info"><span class="material-symbols-outlined">support_agent</span></div>
    <div class="lp-avatar lp-avatar--lg lp-avatar--warning"><span class="material-symbols-outlined">star</span></div>
</div>

Square Avatars

Add .lp-avatar--square for rounded-rectangle shape.

group

<p class="lp-text-sm lp-text-muted lp-mb-3">Add <code class="lp-text-danger">.lp-avatar--square</code> for rounded-rectangle shape.</p>
<div class="lp-demo-row">
    <div class="lp-avatar lp-avatar--square"><img src="https://i.pravatar.cc/80?img=8" alt="Square"></div>
    <div class="lp-avatar lp-avatar--square lp-avatar--primary">LP</div>
    <div class="lp-avatar lp-avatar--square lp-avatar--lg lp-avatar--success"><span class="material-symbols-outlined">group</span></div>
</div>

Avatar Ring / Border

Add .lp-avatar-ring or .lp-avatar-ring--{color} for a colored ring border.

<p class="lp-text-sm lp-text-muted lp-mb-3">Add <code class="lp-text-danger">.lp-avatar-ring</code> or <code class="lp-text-danger">.lp-avatar-ring--{color}</code> for a colored ring border.</p>
<div class="lp-demo-row">
    <div class="lp-avatar lp-avatar-ring"><img src="https://i.pravatar.cc/80?img=2" alt="Ring"></div>
    <div class="lp-avatar lp-avatar-ring--primary"><img src="https://i.pravatar.cc/80?img=3" alt="Primary Ring"></div>
    <div class="lp-avatar lp-avatar-ring--success"><img src="https://i.pravatar.cc/80?img=4" alt="Success Ring"></div>
    <div class="lp-avatar lp-avatar-ring--danger"><img src="https://i.pravatar.cc/80?img=5" alt="Danger Ring"></div>
    <div class="lp-avatar lp-avatar-ring--warning"><img src="https://i.pravatar.cc/80?img=6" alt="Warning Ring"></div>
    <div class="lp-avatar lp-avatar-ring--info"><img src="https://i.pravatar.cc/80?img=7" alt="Info Ring"></div>
    <div class="lp-avatar lp-avatar-ring--dark"><img src="https://i.pravatar.cc/80?img=9" alt="Dark Ring"></div>
    <div class="lp-avatar lp-avatar-ring--light"><img src="https://i.pravatar.cc/80?img=10" alt="Light Ring"></div>
</div>

Status Indicators

Add a .lp-avatar-status element inside for online/away/busy/offline indicators.

<p class="lp-text-sm lp-text-muted lp-mb-3">Add a <code class="lp-text-danger">.lp-avatar-status</code> element inside for online/away/busy/offline indicators.</p>
<div class="lp-demo-row">
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=11" alt="Online"><span class="lp-avatar-status lp-avatar-status--online"></span></div>
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=12" alt="Away"><span class="lp-avatar-status lp-avatar-status--away"></span></div>
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=13" alt="Busy"><span class="lp-avatar-status lp-avatar-status--busy"></span></div>
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=14" alt="Offline"><span class="lp-avatar-status lp-avatar-status--offline"></span></div>
</div>

Status Positions

Position variants: --top-left, --top-right, --bottom-left, --bottom-right (default).

<p class="lp-text-sm lp-text-muted lp-mb-3">Position variants: <code class="lp-text-danger">--top-left</code>, <code class="lp-text-danger">--top-right</code>, <code class="lp-text-danger">--bottom-left</code>, <code class="lp-text-danger">--bottom-right</code> (default).</p>
<div class="lp-demo-row">
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=15" alt="Top Left"><span class="lp-avatar-status lp-avatar-status--online lp-avatar-status--top-left"></span></div>
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=16" alt="Top Right"><span class="lp-avatar-status lp-avatar-status--away lp-avatar-status--top-right"></span></div>
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=17" alt="Bottom Left"><span class="lp-avatar-status lp-avatar-status--busy lp-avatar-status--bottom-left"></span></div>
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=18" alt="Bottom Right"><span class="lp-avatar-status lp-avatar-status--offline lp-avatar-status--bottom-right"></span></div>
</div>

Sizes with Status

<div class="lp-demo-row lp-items-end">
    <div class="lp-avatar lp-avatar--xs lp-avatar--primary">A<span class="lp-avatar-status lp-avatar-status--online"></span></div>
    <div class="lp-avatar lp-avatar--sm lp-avatar--success">B<span class="lp-avatar-status lp-avatar-status--online"></span></div>
    <div class="lp-avatar lp-avatar--info">CD<span class="lp-avatar-status lp-avatar-status--away"></span></div>
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=20" alt="LG"><span class="lp-avatar-status lp-avatar-status--busy"></span></div>
    <div class="lp-avatar lp-avatar--xl"><img src="https://i.pravatar.cc/128?img=21" alt="XL"><span class="lp-avatar-status lp-avatar-status--online"></span></div>
    <div class="lp-avatar lp-avatar--2xl"><img src="https://i.pravatar.cc/160?img=22" alt="2XL"><span class="lp-avatar-status lp-avatar-status--offline"></span></div>
</div>

Avatar Group - Stacked

Overlapping avatars with .lp-avatar-group--stacked. Hover to lift.

+12

<p class="lp-text-sm lp-text-muted lp-mb-3">Overlapping avatars with <code class="lp-text-danger">.lp-avatar-group--stacked</code>. Hover to lift.</p>
<div class="lp-avatar-group lp-avatar-group--stacked">
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=23" alt="User 1"></div>
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=24" alt="User 2"></div>
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=25" alt="User 3"></div>
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=26" alt="User 4"></div>
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=27" alt="User 5"></div>
    <div class="lp-avatar-more">+12</div>
</div>

Status — Contextual Colors

Besides the 4 semantic states (online/away/busy/offline), status dots also accept all 8 color variants: .lp-avatar-status--primary, --success, etc.

<p class="lp-text-sm lp-text-muted lp-mb-3">Besides the 4 semantic states (online/away/busy/offline), status dots also accept all 8 color variants: <code class="lp-text-danger">.lp-avatar-status--primary</code>, <code class="lp-text-danger">--success</code>, etc.</p>
<div class="lp-demo-row">
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=30" alt="Primary"><span class="lp-avatar-status lp-avatar-status--primary"></span></div>
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=31" alt="Secondary"><span class="lp-avatar-status lp-avatar-status--secondary"></span></div>
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=32" alt="Success"><span class="lp-avatar-status lp-avatar-status--success"></span></div>
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=33" alt="Danger"><span class="lp-avatar-status lp-avatar-status--danger"></span></div>
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=34" alt="Warning"><span class="lp-avatar-status lp-avatar-status--warning"></span></div>
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=35" alt="Info"><span class="lp-avatar-status lp-avatar-status--info"></span></div>
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=36" alt="Dark"><span class="lp-avatar-status lp-avatar-status--dark"></span></div>
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=37" alt="Light"><span class="lp-avatar-status lp-avatar-status--light"></span></div>
</div>

Square Avatars with Status

Status indicators work the same on square avatars.

check

<p class="lp-text-sm lp-text-muted lp-mb-3">Status indicators work the same on square avatars.</p>
<div class="lp-demo-row">
    <div class="lp-avatar lp-avatar--lg lp-avatar--square"><img src="https://i.pravatar.cc/96?img=40" alt="Online"><span class="lp-avatar-status lp-avatar-status--online"></span></div>
    <div class="lp-avatar lp-avatar--lg lp-avatar--square"><img src="https://i.pravatar.cc/96?img=41" alt="Away"><span class="lp-avatar-status lp-avatar-status--away"></span></div>
    <div class="lp-avatar lp-avatar--lg lp-avatar--square lp-avatar--primary">AB<span class="lp-avatar-status lp-avatar-status--busy"></span></div>
    <div class="lp-avatar lp-avatar--lg lp-avatar--square lp-avatar--success"><span class="material-symbols-outlined">check</span><span class="lp-avatar-status lp-avatar-status--online lp-avatar-status--top-right"></span></div>
</div>

Avatar Group - Stacked with Status

Stacked group where each avatar shows an active/away/busy state.

<p class="lp-text-sm lp-text-muted lp-mb-3">Stacked group where each avatar shows an active/away/busy state.</p>
<div class="lp-avatar-group lp-avatar-group--stacked">
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=50" alt="U1"><span class="lp-avatar-status lp-avatar-status--online"></span></div>
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=51" alt="U2"><span class="lp-avatar-status lp-avatar-status--away"></span></div>
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=52" alt="U3"><span class="lp-avatar-status lp-avatar-status--busy"></span></div>
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=53" alt="U4"><span class="lp-avatar-status lp-avatar-status--online"></span></div>
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=54" alt="U5"><span class="lp-avatar-status lp-avatar-status--offline"></span></div>
</div>

Avatar Group - Stacked Sizes

Stacked groups can match avatar sizes with .lp-avatar-group--xs, --sm, default, --lg, --xl. The overlap adjusts accordingly.

Extra Small

Small

Default (md)

+12

Large

<p class="lp-text-sm lp-text-muted lp-mb-3">Stacked groups can match avatar sizes with <code class="lp-text-danger">.lp-avatar-group--xs</code>, <code class="lp-text-danger">--sm</code>, default, <code class="lp-text-danger">--lg</code>, <code class="lp-text-danger">--xl</code>. The overlap adjusts accordingly.</p>

<p class="lp-text-xs lp-fw-semibold lp-text-muted lp-mb-2 lp-mt-3">Extra Small</p>
<div class="lp-avatar-group lp-avatar-group--stacked lp-avatar-group--xs">
    <div class="lp-avatar lp-avatar--xs"><img src="https://i.pravatar.cc/80?img=60" alt="U"></div>
    <div class="lp-avatar lp-avatar--xs"><img src="https://i.pravatar.cc/80?img=61" alt="U"></div>
    <div class="lp-avatar lp-avatar--xs"><img src="https://i.pravatar.cc/80?img=62" alt="U"></div>
    <div class="lp-avatar-more lp-avatar-more--xs">+4</div>
</div>

<p class="lp-text-xs lp-fw-semibold lp-text-muted lp-mb-2 lp-mt-3">Small</p>
<div class="lp-avatar-group lp-avatar-group--stacked lp-avatar-group--sm">
    <div class="lp-avatar lp-avatar--sm"><img src="https://i.pravatar.cc/80?img=63" alt="U"></div>
    <div class="lp-avatar lp-avatar--sm"><img src="https://i.pravatar.cc/80?img=64" alt="U"></div>
    <div class="lp-avatar lp-avatar--sm"><img src="https://i.pravatar.cc/80?img=65" alt="U"></div>
    <div class="lp-avatar-more lp-avatar-more--sm">+6</div>
</div>

<p class="lp-text-xs lp-fw-semibold lp-text-muted lp-mb-2 lp-mt-3">Default (md)</p>
<div class="lp-avatar-group lp-avatar-group--stacked">
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=66" alt="U"></div>
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=67" alt="U"></div>
    <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=68" alt="U"></div>
    <div class="lp-avatar-more">+12</div>
</div>

<p class="lp-text-xs lp-fw-semibold lp-text-muted lp-mb-2 lp-mt-3">Large</p>
<div class="lp-avatar-group lp-avatar-group--stacked lp-avatar-group--lg">
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=69" alt="U"></div>
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=70" alt="U"></div>
    <div class="lp-avatar lp-avatar--lg"><img src="https://i.pravatar.cc/96?img=29" alt="U"></div>
    <div class="lp-avatar-more lp-avatar-more--lg">+8</div>
</div>

Avatar Group - Vertical

Vertical layout with .lp-avatar-group--vertical. All avatars stack straight down the column, aligned to the same starting point.

<p class="lp-text-sm lp-text-muted lp-mb-3">Vertical layout with <code class="lp-text-danger">.lp-avatar-group--vertical</code>. All avatars stack straight down the column, aligned to the same starting point.</p>

<div class="lp-d-flex lp-items-start lp-gap-5">
    <div class="lp-avatar-group lp-avatar-group--vertical">
        <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=42" alt="User 1"><span class="lp-avatar-status lp-avatar-status--online"></span></div>
        <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=43" alt="User 2"><span class="lp-avatar-status lp-avatar-status--away"></span></div>
        <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=44" alt="User 3"><span class="lp-avatar-status lp-avatar-status--busy"></span></div>
        <div class="lp-avatar"><img src="https://i.pravatar.cc/80?img=45" alt="User 4"><span class="lp-avatar-status lp-avatar-status--offline"></span></div>
    </div>

    <div class="lp-avatar-group lp-avatar-group--vertical">
        <div class="lp-avatar lp-avatar--primary">JD</div>
        <div class="lp-avatar lp-avatar--success">AB</div>
        <div class="lp-avatar lp-avatar--info">CD</div>
    </div>
</div>

Avatar Group - Grid

Grid layout with .lp-avatar-group--grid.

<p class="lp-text-sm lp-text-muted lp-mb-3">Grid layout with <code class="lp-text-danger">.lp-avatar-group--grid</code>.</p>
<div class="lp-avatar-group lp-avatar-group--grid" style="max-width: 220px;">
    <div class="lp-avatar lp-avatar--primary">AB</div>
    <div class="lp-avatar lp-avatar--success">CD</div>
    <div class="lp-avatar lp-avatar--danger">EF</div>
    <div class="lp-avatar lp-avatar--info">GH</div>
    <div class="lp-avatar lp-avatar--warning">IJ</div>
    <div class="lp-avatar lp-avatar--secondary">KL</div>
</div>

"+N" Counter Colors

The .lp-avatar-more counter accepts all 8 color variants.

+12

+20

<p class="lp-text-sm lp-text-muted lp-mb-3">The <code class="lp-text-danger">.lp-avatar-more</code> counter accepts all 8 color variants.</p>
<div class="lp-demo-row">
    <div class="lp-avatar-more">+3</div>
    <div class="lp-avatar-more lp-avatar-more--primary">+5</div>
    <div class="lp-avatar-more lp-avatar-more--success">+12</div>
    <div class="lp-avatar-more lp-avatar-more--danger">+2</div>
    <div class="lp-avatar-more lp-avatar-more--warning">+9</div>
    <div class="lp-avatar-more lp-avatar-more--info">+7</div>
    <div class="lp-avatar-more lp-avatar-more--dark">+20</div>
</div>

CSS Reference

Class	Description
`.lp-avatar`	Base avatar (40px, circular)
`.lp-avatar--xs`	Extra small (24px)
`.lp-avatar--sm`	Small (32px)
`.lp-avatar--lg`	Large (48px)
`.lp-avatar--xl`	Extra large (64px)
`.lp-avatar--2xl`	2X large (80px)
`.lp-avatar--{color}`	Background color for initials/icons
`.lp-avatar--square`	Rounded rectangle instead of circle
`.lp-avatar-ring`	Default ring border (primary)
`.lp-avatar-ring--{color}`	Colored ring border variant
`.lp-avatar-status`	Status dot indicator (base)
`.lp-avatar-status--online`	Green online status
`.lp-avatar-status--away`	Yellow away status
`.lp-avatar-status--busy`	Red busy status
`.lp-avatar-status--offline`	Grey offline status
`.lp-avatar-status--{color}`	Contextual color status (8 colors)
`.lp-avatar-status--{position}`	Position: top-left, top-right, bottom-left, bottom-right
`.lp-avatar-group--stacked`	Overlapping avatar group
`.lp-avatar-group--{xs\|sm\|lg\|xl}`	Group size modifier (tunes overlap + grid cell size)
`.lp-avatar-group--vertical`	Vertical avatar list
`.lp-avatar-group--grid`	Grid layout avatar group
`.lp-avatar-more`	"+N" counter in avatar group
`.lp-avatar-more--{xs\|sm\|lg\|xl\|2xl}`	Counter size modifier
`.lp-avatar-more--{color}`	Counter color variant (8 colors)