SharePoint List Advanced Formatting - What classes and icons can we use?

One of the common attributes when formatting SharePoint lists are classes and icons. It can get confusing to know what are the actual values that are available to use, as the official documentation does not list this down.

Below is some guidance which will hopefully help.

Class

How to use?

Attribute: "class"

Example

  "attributes": {
        "class": "sp-field-severity--warning"
  }

Class Source

https://pnp.github.io/List-Formatting/groupings/classes/sp-field/

 

Icons

How to use?

Attribute: iconName

Example

"attributes": {
        "iconName": "CheckMark"
      }

In this example CheckMark is the name of the icon being used.
Note that the icon value is not case-sensitive, hence a lower-cased'checkmark' will still work.

Icon Source

https://developer.microsoft.com/en-us/fluentui#/styles/web/icons