Stacked Avatars

The Stacked Avatars renders a multi-person column as a tidy row of overlapping profile photos, so who is assigned reads at a glance like the facepile on a shared document. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to a person column that allows multiple people. Each person shows their real Microsoft 365 profile photo, overlapped so a whole team fits in one compact cell.

Author

SharePoint Maven

Built with

Lists

Features

JSON, Person or Group Column, Single Line of Text Column

Common Use Cases

Assignees on tasks or projects
Reviewers or approvers on requests
Team members on initiatives
Attendees on events or sessions
Contacts on accounts or deals
Any multi-person column you want shown as avatars

Details

Design Pattern: People Cards
Format Scope: Column

Required Columns

Display name	Column type	Internal name
Task	Single line of text	`[Title]`
Assigned To	Person or Group	`[AssignedTo]`

Prerequisites

Build a list with a person column that allows multiple selections before you paste the JSON.
Then populate the list, choosing one or more people per row from the people picker.
Because the JSON is applied at the column level, the person column can use any name you want.
The photos come from each person’s Microsoft 365 profile – no extra setup is needed.
Profile-photo display depends on each user’s Microsoft 365 profile and tenant settings, not the JSON – if a photo is missing, SharePoint shows a plain person silhouette in its place, so verify with real licensed users who have profile photos before you rely on it.

How to Apply JSON code

On the Assigned To column, open the column header menu, choose Column settings, then Format this column.
Switch to Advanced mode.
Paste the JSON below and click Save.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "align-items": "center",
    "padding-left": "8px"
  },
  "children": [
    {
      "forEach": "person in @currentField",
      "elmType": "img",
      "attributes": {
        "src": "=getUserImage([$person.email], 'S')",
        "title": "[$person.title]"
      },
      "style": {
        "width": "28px",
        "height": "28px",
        "border-radius": "50%",
        "border": "2px solid #ffffff",
        "margin-left": "-8px"
      }
    }
  ]
}

Common Questions About the Stacked Avatars

What is the Stacked Avatars built with?

It is built with a standard Microsoft List (SharePoint list) and a small piece of column-formatting JSON. There is no custom development, no SPFx solution, and no third-party tools. It is the kind of clean, maintainable formatting Greg Zelfond builds for teams that want a person column that reads as a stack of avatars without ongoing development overhead.

What columns does it need?

It needs one Person column that allows multiple people, where the JSON is applied, plus any label column such as the task name. The avatars are read straight from the selected people.

Does this design use any custom development or third-party tools?

No. It uses only out-of-the-box SharePoint column formatting, which Microsoft supports natively. That keeps it stable and easy to maintain, and nothing breaks when SharePoint is updated. Out-of-the-box is the only way Greg builds, so you can own and extend the design yourself for years.

If LookBook 365 is code-free and out-of-the-box, why does this example include JSON?

Because SharePoint formatting JSON is not custom code – it is a native configuration feature built into lists and libraries. It is declarative: it only describes how an existing column looks, and cannot run scripts, reach external services, or change your data. Nothing is deployed and nothing breaks when Microsoft updates SharePoint, and you can edit or remove it anytime. That is why LookBook 365 treats it as out-of-the-box and low risk.

Where do the photos come from?

Each avatar is the person’s Microsoft 365 profile photo, pulled automatically. If someone has no photo, SharePoint simply shows a plain person icon – a silhouette in a circle – in its place.

Can Greg build a design like this for our lists?

Yes – this is exactly the kind of work Greg Zelfond does. As an independent SharePoint consultant and Microsoft MVP, he designs out-of-the-box list and library formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your lists.