The Avatar (<jig-avatar>) is a compact, square-ish badge that represents a user or entity. It shows one of three things, in order of preference: projected content (e.g. an icon), an image, or initials. If an image fails to load it automatically falls back to the initials, so a broken URL never leaves an empty box.

Initials

Pass initials (and optionally bgColor) for a text avatar — the usual fallback when no photo is available. Up to four characters are shown; longer strings are truncated.

Image

Give an image URL to render a photo; combine it with initials so the text shows if the image can't be loaded. Always provide alt text for a meaningful image.

Size

size sets the diameter in pixels (default 48) and scales the whole avatar uniformly, keeping the image or initials centered.

Icon

Projected content wins over both image and initials, so you can drop an <jig-icon> (or any element) inside the avatar for a generic or role-based placeholder.

Group

Wrap several avatars in <jig-avatar-group> to render them as an overlapping, stacked cluster — the common pattern for showing the members of a team or the participants in a thread, often ending with a +N initials avatar for the overflow.