<div style="display:inline-flex;flex-shrink:0;width:64px;height:64px;">
<img src="https://i.pravatar.cc/128" alt="Danielle H" style="width:64px;height:64px;min-width:64px;border-radius:50%;object-fit:cover;display:block;">
</div>
<div style="display:inline-flex;flex-shrink:0;width:{{size}}px;height:{{size}}px;">
{{#if src}}
<img src="{{src}}" alt="{{alt}}" style="width:{{size}}px;height:{{size}}px;min-width:{{size}}px;border-radius:50%;object-fit:cover;display:block;">
{{else}}
<div style="width:{{size}}px;height:{{size}}px;min-width:{{size}}px;border-radius:50%;background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Satoshi';font-weight:700;font-size:{{initials_size}}px;">{{initials}}</div>
{{/if}}
</div>
{
"src": "https://i.pravatar.cc/128",
"alt": "Danielle H",
"initials": "DH",
"size": 64,
"initials_size": 20
}
Always circular. Falls back to initials on purple background when no image is available. Sizes: 32px (nav), 40px (default), 64px (profile page).
⚠️ The .ic-avatar CSS class hardcodes width/height: 40px — do not rely on it for sizing. Apply dimensions directly to the element instead.
Appears in: Sidebar footer (32px, showing current user), account/settings pages (64px), comment reply cards, Social Bio page, Achievements.