Avatar — Vanilla

Avatar with vanilla HTML. Ensure Rizzo CSS is loaded.

Avatar

User avatar with initials or image. Sizes: avatar--sm, avatar--md, avatar--lg. Shape: avatar--circle, avatar--square.

Add this component

The command below includes <strong>Avatar</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Live example

HTML

html html 
<span class="avatar avatar--md avatar--circle" role="img" aria-label="Avatar: JD">
  <span class="avatar__initials" aria-hidden="true">JD</span>
</span>
<span class="avatar avatar--sm avatar--circle" role="img" aria-label="Avatar: AB"><span class="avatar__initials" aria-hidden="true">AB</span></span>
<span class="avatar avatar--lg avatar--square" role="img" aria-label="Avatar: XY"><span class="avatar__initials" aria-hidden="true">XY</span></span>
<!-- With image: <img class="avatar__img" src="..." alt="..." /> inside the span -->

Other frameworks: Astro · Svelte · Vue · React