Images Badge

Stacked avatar/image pill that fans open on hover — ideal for team badges, social proof, avatar groups, and template galleries.

Motion Effectshoverspringavatarbadgesocial-proofhoverstackteamanimation

Images Badge — Variant 1

Introducing Marketing Template

hover the images to fan open

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

maxVisible

Images shown in the collapsed state.

revealCount

Extra images revealed on hover.

label

Optional text label after the stack.

size

Controls image diameter and pill height.

shape

Clipping shape applied to each image.

direction

Direction the stack fans out toward on hover.

imageClassName

Extra classes on every image wrapper.

Generated JSX

Copy this into your page.

<ImagesBadge
  maxVisible={3}
  revealCount={2}
  label=""
  size="md"
  shape="circle"
  direction="right"
  imageClassName=""
/>

Images Badge — Variant 2

12,000+ developers

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

maxVisible

Images shown in the collapsed state.

revealCount

Extra images revealed on hover.

label

Optional text label after the stack.

size

Controls image diameter and pill height.

shape

Clipping shape applied to each image.

direction

Direction the stack fans out toward on hover.

imageClassName

Extra classes on every image wrapper.

Generated JSX

Copy this into your page.

<ImagesBadge
  maxVisible={3}
  revealCount={2}
  label=""
  size="md"
  shape="circle"
  direction="right"
  imageClassName=""
/>

Images Badge — Variant 3

Felix, Aneka + 3 others liked your post

Milo, Zoe + 2 others commented

Kai started following you

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

maxVisible

Images shown in the collapsed state.

revealCount

Extra images revealed on hover.

label

Optional text label after the stack.

size

Controls image diameter and pill height.

shape

Clipping shape applied to each image.

direction

Direction the stack fans out toward on hover.

imageClassName

Extra classes on every image wrapper.

Generated JSX

Copy this into your page.

<ImagesBadge
  maxVisible={3}
  revealCount={2}
  label=""
  size="md"
  shape="circle"
  direction="right"
  imageClassName=""
/>

Images Badge — Variant 4

6 templates included

hover to fan all 6 open

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

maxVisible

Images shown in the collapsed state.

revealCount

Extra images revealed on hover.

label

Optional text label after the stack.

size

Controls image diameter and pill height.

shape

Clipping shape applied to each image.

direction

Direction the stack fans out toward on hover.

imageClassName

Extra classes on every image wrapper.

Generated JSX

Copy this into your page.

<ImagesBadge
  maxVisible={3}
  revealCount={2}
  label=""
  size="md"
  shape="circle"
  direction="right"
  imageClassName=""
/>

Animation effects

hoverspring

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Installation

Images Badge — Variant 1

Shape the component before you copy it.

Images Badge — Variant 2

Shape the component before you copy it.

Images Badge — Variant 3

Shape the component before you copy it.

Images Badge — Variant 4

Shape the component before you copy it.

Animation effects