Components

Avatar

A single avatar or an overlapping group with a “+N” counter — image or initials, status dots, shapes and sizes.

Live demo

See it in action

Avatar Group

Stacked, overlapping, with a “+N” counter

2K+

Single Designs

Plain · Accent Ring · Soft Shadow · Bordered · Soft Tint

User Chip

Show the name + role beside the avatar

Ava ReedProduct Designer

Size Scale

One slider drives the whole component (32 → 128px)

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12">
				<div class="fw-avatar-sc av-4cfa8adf fw-avatar--plain design-plain fw-avatar--shape-circle fw-avatar--mode-single" style="--av-size:56px;">
					<span class="fw-avatar" title="Ava Reed"><img class="fw-avatar__img" src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-8b7d96c92184-112x112.jpg" alt="Ava Reed" width="56" height="56" loading="lazy" decoding="async" /></span>
				</div>
			</div>
		</div>
	</div>
</section>

To learn more about the Avatar shortcode, please check out the online manual here.

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free