Components Icon circle

Icon circle

An icon inside a tinted circle — the small "system avatar" in the notification feed and the What's-new list. Put a <koala-icon> in the body.

Canonical

<koala-icon-circle>
    <koala-icon name="Flag" size="Small" />
</koala-icon-circle>

2 sizes

Default (36px)

Small (20px)

<koala-icon-circle size="Small">
    <koala-icon name="Check" size="ExtraSmall" />
</koala-icon-circle>

3 inputs

Attribute	Values	Notes
size	Small, Default	20px or 36px circle. Defaults to Default.
class	string?	Extra classes (e.g. `mt-0.5` alignment).
(content)	slot	The `<koala-icon>` (or type icon) shown inside.

Do Use it for a system/notification icon bullet where there's no person avatar.

Don't Don't use it to represent a person — that's <koala-avatar> (initials/photo).