<div style="display:inline-flex;flex-shrink:0;width:40px;height:40px;">
<div style="width:40px;height:40px;min-width:40px;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:14px;">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": 40,
"initials_size": 14
}
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.