<div style="display:inline-flex;flex-shrink:0;width:32px;height:32px;">
<div style="width:32px;height:32px;min-width:32px;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:11px;">DH</div>
</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": null,
"alt": "User avatar",
"initials": "DH",
"size": 32,
"initials_size": 11
}
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.