Avatar Group shows a row of round images or icons that overlap each other. Hover over the group and the items move apart. Image avatars can show a tooltip with a name, and every item can link somewhere.
Five Avatar Groups with different sizes, overlaps, borders and tooltips: customers, a project team, pets, room amenities as icons and a row of linked icons. Hover over a photo to see its tooltip.
Five round photos, 48px, overlapping by 14px with a 3px white border. Hover over the group to spread it, then over a face for the tooltip.
Bigger 72px avatars with rounded corners (16px radius) and an overlap of 22px. Each tooltip shows a name and role.
Northlight Studio · Kitchen extension, Hove · 4 people on this project
Pet photos at 60px with a warm 3px border and an amber tooltip. Useful for a customer wall or a loyalty page.
Icons or Images: Icons. Each icon has its own background and icon colour. 52px circles, 12px padding, 10px overlap and a white border.
The Harbour Hotel · King bed, fresh coffee, pool, spa, breakfast and a 24-hour front desk
Add your items, then set the size and overlap.
Drop Avatar Group onto your page and choose Images or Icons.
Add an image, title and link for each avatar, or an icon, colours and link for each icon.
Choose the size, how much the items overlap, and the borders and tooltip style.
A compact way to show people, partners or social links.
Items sit on top of each other in a neat row. You set the overlap in pixels.
When a visitor hovers over the group, the items move apart so each one is easy to see.
Image avatars show their title in a tooltip on hover. Style it or hide it.
Use photos for people, or icons for social networks and services.
Give each icon its own background colour and icon colour.
Add a link to any avatar or icon, such as a profile page or a social account.
Anywhere a row of faces or logos says more than a list.
Show who works on a project or service, with names on hover.
Put a row of customer photos next to a sign-up form or review score.
Group your social icons into one compact row.
List the authors of a post or the speakers at an event.
Show the tutors or students taking part.
Show a small group of partners or integrations.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Icons or Images | Choose whether the group shows images or icons. | — |
| Items (images) | Image, link and title for each avatar. The title is used for the tooltip. | — |
| Icon items (icons) | Icon, background colour, icon colour and link for each icon. | — |
| Design (images) | ||
| Overlap | How far each avatar overlaps the one before it, in pixels. | 12 |
| Image Width / Height | Size of each avatar. | 55px |
| Borders | Border and corner radius for the images. | 2px white, round |
| Tooltip (images) | ||
| Hide Tooltips | Turn the hover tooltips off. | Off |
| Typography | Tooltip text style. | — |
| Borders | Tooltip border and radius. | — |
| Background Color | Tooltip background. | #333 |
| Icon Design (icons) | ||
| Icon Size | Size of each icon circle. | 55px |
| Padding | Space around the icon inside its circle. | 10px |
| Overlap | How far each icon overlaps the one before it, in pixels. | 12 |
| Borders | Border settings for the icon circles. | — |
No. Each group shows either images or icons. Use two Avatar Group elements side by side if you need both.
The tooltip shows the Title you enter for each image avatar. Leave the title empty for no text, or turn on Hide Tooltips.
Yes. Every image and every icon has its own link setting.
Yes. Set Image Width and Height, or Icon Size, to change the size. Lower the Overlap value to give each item more room.
Yes. Set the border radius in the Borders control. The team demo uses a 16px radius for rounded squares, the others are fully round.
Avatar Group is included with Phox Elements, along with 140+ other premium elements for Breakdance.