Lists - Person Column with profile face and name together

[Rob O'Keefe]

How do you format a List column to have both an icon and a name? Is there sample JSON to do this? Does it require two columns?

[#2]

@Rob O'Keefe if it's just a single line of text column you can do this with the following JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "sp-field-severity--good"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "12px 4px"
      },
      "attributes": {
        "iconName": "Emoji2"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

which gives the following result (in the StaffMember column):

If you have a Person column type then things get more complicated and I'll need to investigate what the JSON for that would be.

Rob
Los Gallardos
Microsoft Power Automate Community Super User.
If I've answered your question or solved your problem, please mark this question as answered. This helps others who have the same question find a solution quickly via the forum search. If you liked my response, please consider giving it a thumbs up. Thanks.

[#3]

@Rob Elliott 

Thanks for fast reply! Sorry my original wording probably threw you off... i meant the small face circle from someone's O365 profile (i used the word icon, but i guess maybe it is avatar?). [I edited the post title to be more clear]

So I am thinking a Person column, not text, which i think is complicated.

In some of the previews they have face and name if it is one person, and if it is multiple people just the row of faces. That might be in Planner List view that I saw that. That would be more advanced obviously. 

[#4]

You can find best list formatting samples here:
- https://github.com/pnp/sp-dev-list-formatting
- https://pnp.github.io/sp-dev-list-formatting/

[#5]

@Juan Carlos González Martín Thanks! I have been through those and found one to show the profile image but not BOTH the profile image and name togetehr in one column. 

This page is where i found the profile image:

https://pnp.github.io/sp-dev-list-formatting/groupings/columntype/