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-code">.lp-avatar-xs</code> (24px) to <code class="lp-code">.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-code">.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-rounded">person</span></div>
    <div class="lp-avatar lp-avatar-success"><span class="material-symbols-rounded">check</span></div>
    <div class="lp-avatar lp-avatar-danger"><span class="material-symbols-rounded">close</span></div>
    <div class="lp-avatar lp-avatar-info"><span class="material-symbols-rounded">support_agent</span></div>
    <div class="lp-avatar lp-avatar-lg lp-avatar-warning"><span class="material-symbols-rounded">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-code">.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-rounded">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-code">.lp-avatar-ring</code> or <code class="lp-code">.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-code">.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-code">--top-left</code>, <code class="lp-code">--top-right</code>, <code class="lp-code">--bottom-left</code>, <code class="lp-code">--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-code">.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-code">.lp-avatar-status-primary</code>, <code class="lp-code">--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-rounded">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-code">.lp-avatar-group-xs</code>, <code class="lp-code">--sm</code>, default, <code class="lp-code">--lg</code>, <code class="lp-code">--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-code">.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-code">.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-code">.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)