Avatars

<x-avatar initials="PR" color="primary" appearance="solid" />
<x-avatar initials="SE" color="secondary" appearance="solid" />
<x-avatar initials="AC" color="accent" appearance="solid" />
<x-avatar initials="IN" color="info" appearance="solid" />
<x-avatar initials="SU" color="success" appearance="solid" />
<x-avatar initials="WA" color="warning" appearance="solid" />
<x-avatar initials="ER" color="error" appearance="solid" />

<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-primary text-primary-content"><span class="select-none leading-none tune-optical-center">PR</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-secondary text-secondary-content"><span class="select-none leading-none tune-optical-center">SE</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-accent text-accent-content"><span class="select-none leading-none tune-optical-center">AC</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-info text-info-content"><span class="select-none leading-none tune-optical-center">IN</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-success text-success-content"><span class="select-none leading-none tune-optical-center">SU</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-warning text-warning-content"><span class="select-none leading-none tune-optical-center">WA</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-error text-error-content"><span class="select-none leading-none tune-optical-center">ER</span></span></span>

<x-avatar initials="XY" size="xs" color="primary" appearance="solid" />
<x-avatar initials="XY" size="sm" color="primary" appearance="solid" />
<x-avatar initials="XY" size="md" color="primary" appearance="solid" />
<x-avatar initials="XY" size="lg" color="primary" appearance="solid" />
<x-avatar initials="XY" size="xl" color="primary" appearance="solid" />

<span class="relative inline-flex shrink-0 w-6 h-6 text-[0.625rem] rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-primary text-primary-content"><span class="select-none leading-none tune-optical-center">XY</span></span></span>
<span class="relative inline-flex shrink-0 w-8 h-8 text-xs rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-primary text-primary-content"><span class="select-none leading-none tune-optical-center">XY</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-primary text-primary-content"><span class="select-none leading-none tune-optical-center">XY</span></span></span>
<span class="relative inline-flex shrink-0 w-14 h-14 text-lg rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-primary text-primary-content"><span class="select-none leading-none tune-optical-center">XY</span></span></span>
<span class="relative inline-flex shrink-0 w-20 h-20 text-2xl rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-primary text-primary-content"><span class="select-none leading-none tune-optical-center">XY</span></span></span>

<x-avatar initials="PR" color="primary" appearance="soft" />
<x-avatar initials="SE" color="secondary" appearance="soft" />
<x-avatar initials="AC" color="accent" appearance="soft" />
<x-avatar initials="IN" color="info" appearance="soft" />
<x-avatar initials="SU" color="success" appearance="soft" />
<x-avatar initials="WA" color="warning" appearance="soft" />
<x-avatar initials="ER" color="error" appearance="soft" />

<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-primary/15 text-primary"><span class="select-none leading-none tune-optical-center">PR</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-secondary/15 text-secondary"><span class="select-none leading-none tune-optical-center">SE</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-accent/15 text-accent"><span class="select-none leading-none tune-optical-center">AC</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-info/15 text-info"><span class="select-none leading-none tune-optical-center">IN</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-success/15 text-success"><span class="select-none leading-none tune-optical-center">SU</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-warning/15 text-warning"><span class="select-none leading-none tune-optical-center">WA</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-error/15 text-error"><span class="select-none leading-none tune-optical-center">ER</span></span></span>

<x-avatar initials="PR" color="primary" appearance="outline" />
<x-avatar initials="SE" color="secondary" appearance="outline" />
<x-avatar initials="AC" color="accent" appearance="outline" />
<x-avatar initials="IN" color="info" appearance="outline" />
<x-avatar initials="SU" color="success" appearance="outline" />
<x-avatar initials="WA" color="warning" appearance="outline" />
<x-avatar initials="ER" color="error" appearance="outline" />

<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-transparent text-primary tune-border border-primary"><span class="select-none leading-none tune-optical-center">PR</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-transparent text-secondary tune-border border-secondary"><span class="select-none leading-none tune-optical-center">SE</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-transparent text-accent tune-border border-accent"><span class="select-none leading-none tune-optical-center">AC</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-transparent text-info tune-border border-info"><span class="select-none leading-none tune-optical-center">IN</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-transparent text-success tune-border border-success"><span class="select-none leading-none tune-optical-center">SU</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-transparent text-warning tune-border border-warning"><span class="select-none leading-none tune-optical-center">WA</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-transparent text-error tune-border border-error"><span class="select-none leading-none tune-optical-center">ER</span></span></span>

<x-avatar initials="CI" shape="circle" color="primary" appearance="soft" />
<x-avatar initials="RD" shape="rounded" color="primary" appearance="soft" />
<x-avatar initials="SQ" shape="square" color="primary" appearance="soft" />

<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-primary/15 text-primary"><span class="select-none leading-none tune-optical-center">CI</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-[var(--radius-field)]"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-[var(--radius-field)] bg-primary/15 text-primary"><span class="select-none leading-none tune-optical-center">RD</span></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-[var(--radius-box)]"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-[var(--radius-box)] bg-primary/15 text-primary"><span class="select-none leading-none tune-optical-center">SQ</span></span></span>

<x-avatar icon="user" color="neutral" appearance="soft" />
<x-avatar icon="crown" color="warning" appearance="soft" />
<x-avatar icon="bell" color="info" appearance="soft" />
<x-avatar icon="shield-check" color="success" appearance="soft" />

<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-base-content/15 text-base-content"><svg class="w-[60%] h-[60%]" viewbox="0 0 24 24">
<circle cx="12" cy="6" r="4" fill="currentColor"></circle>
<path fill="currentColor" d="M20 17.5c0 2.485 0 4.5-8 4.5s-8-2.015-8-4.5S7.582 13 12 13s8 2.015 8 4.5" opacity=".3"></path></svg></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-warning/15 text-warning"><svg class="w-[60%] h-[60%]" viewbox="0 0 24 24">
<path fill="currentColor" fill-rule="evenodd" d="m19.687 14.093l.184-1.704c.097-.91.162-1.51.111-1.889a1.5 1.5 0 0 1-1.117-.52c-.327.201-.753.626-1.394 1.265c-.495.493-.742.739-1.018.777a.83.83 0 0 1-.45-.063c-.254-.112-.424-.416-.763-1.025l-1.79-3.209c-.209-.375-.384-.69-.542-.942c-.273.139-.581.217-.908.217s-.635-.078-.908-.217c-.158.253-.333.567-.543.942L8.76 10.934c-.34.609-.51.913-.764 1.025a.83.83 0 0 1-.45.063c-.275-.038-.522-.284-1.017-.777c-.641-.639-1.067-1.064-1.393-1.265a1.5 1.5 0 0 1-1.118.52c-.051.378.014.979.111 1.889l.184 1.704l.089.85c.252 2.435.46 4.45 1.31 5.21c.946.847 2.364.847 5.2.847h2.176c2.836 0 4.254 0 5.2-.847c.85-.76 1.058-2.775 1.31-5.21q.043-.417.09-.85" clip-rule="evenodd" opacity=".3"></path>
<path fill="currentColor" d="M20 10.5a1.5 1.5 0 1 0-.018 0zM12 3a2 2 0 1 0 0 4a2 2 0 0 0 0-4M2.5 9A1.5 1.5 0 0 0 4 10.5h.018A1.497 1.497 0 0 0 5.5 9a1.5 1.5 0 1 0-3 0m2.349 9.25a18 18 0 0 1-.246-1.5h14.794c-.07.545-.148 1.05-.246 1.5z"></path></svg></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-info/15 text-info"><svg class="w-[60%] h-[60%]" viewbox="0 0 24 24">
<path fill="currentColor" d="M18.75 9v.704c0 .845.24 1.671.692 2.374l1.108 1.723c1.011 1.574.239 3.713-1.52 4.21a25.8 25.8 0 0 1-14.06 0c-1.759-.497-2.531-2.636-1.52-4.21l1.108-1.723a4.4 4.4 0 0 0 .693-2.374V9c0-3.866 3.022-7 6.749-7s6.75 3.134 6.75 7" opacity=".3"></path>
<path fill="currentColor" d="M7.243 18.545a5.002 5.002 0 0 0 9.513 0c-3.145.59-6.367.59-9.513 0"></path></svg></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-success/15 text-success"><svg class="w-[60%] h-[60%]" viewbox="0 0 24 24">
<path fill="currentColor" d="M3.378 5.082C3 5.62 3 7.22 3 10.417v1.574c0 5.638 4.239 8.375 6.899 9.536c.721.315 1.082.473 2.101.473c1.02 0 1.38-.158 2.101-.473C16.761 20.365 21 17.63 21 11.991v-1.574c0-3.198 0-4.797-.378-5.335c-.377-.537-1.88-1.052-4.887-2.081l-.573-.196C13.595 2.268 12.812 2 12 2s-1.595.268-3.162.805L8.265 3c-3.007 1.03-4.51 1.545-4.887 2.082" opacity=".3"></path>
<path fill="currentColor" d="M15.06 10.5a.75.75 0 0 0-1.12-1l-3.011 3.374l-.87-.974a.75.75 0 0 0-1.118 1l1.428 1.6a.75.75 0 0 0 1.119 0z"></path></svg></span></span>

<x-avatar initials="ON" color="primary" appearance="solid" status="online" />
<x-avatar initials="AW" color="warning" appearance="soft" status="away" />
<x-avatar initials="BU" color="error" appearance="soft" status="busy" />
<x-avatar initials="OF" color="neutral" appearance="soft" status="offline" />

<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-primary text-primary-content"><span class="select-none leading-none tune-optical-center">ON</span></span>
<span class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-success rounded-full ring-2 ring-base-100"></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-warning/15 text-warning"><span class="select-none leading-none tune-optical-center">AW</span></span>
<span class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-warning rounded-full ring-2 ring-base-100"></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-error/15 text-error"><span class="select-none leading-none tune-optical-center">BU</span></span>
<span class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-error rounded-full ring-2 ring-base-100"></span></span>
<span class="relative inline-flex shrink-0 w-10 h-10 text-sm rounded-full"><span class="w-full h-full flex items-center justify-center font-semibold overflow-hidden rounded-full bg-base-content/15 text-base-content"><span class="select-none leading-none tune-optical-center">OF</span></span>
<span class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-neutral rounded-full ring-2 ring-base-100"></span></span>