Add an icon to your SharePoint column

Learn how to prettify your SharePoint column with an icon

I think that out of the box, the SharePoint list is very boring and not very user friendly to look at.

I like to apply a lot JSON/column formatting to my columns.

In this post we are going to learn about a simple column formatting, where we can add an icon to our column / text.

We are going to focus on the formatting marked in red below, but I choose to show you a bit more of my list.

See how diverse the list looks, compared to a standard SharePoint list.

The code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "background-color": "transparent"
  },
  "attributes": {
    "class": "ms-fontColor-neutralSecondary ms-fontColor-neutralDark--hover ms-font-m"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "CityNext2",
        "class": "ms-font-l"
      },
      "style": {
        "padding-right": "6px",
        "display": "=if(Number(@currentField) == 0, 'none', 'inline')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

To change the icon you must change CityNext2, you can find icons and their internal names here

A short explanation of the code

Font color

ms-fontColor-neutralSecondary ms-fontColor-neutralDark--hover ms-font-m

Here we are using the theme colors. Try to change ex. neutralSeconday with some of the colors listed below

themePrimary
themeLighterAlt
themeLighter
themeLight
themeTertiary
themeSecondary
themeDarkAlt
themeDark
themeDarker
neutralLighterAlt
neutralLighter
neutralLight
neutralQuaternaryAlt
neutralQuaternary
neutralTertiaryAlt
neutralTertiary
neutralSecondary
neutralPrimaryAlt
neutralPrimary
neutralDark
blackwhite

Icon size

"class": "ms-font-l"

Here you can control the size of the icon. You can try to change the l to and M or XL etc.

Hide icon

"display": "=if(Number(@currentField) == 0, 'none', 'inline')"

With the display property, we are making sure that if the user has not inserted anything into the column, we are not displaying the icon.

Note, if you are using the column formatting on a lookupField, you need to change the txtContent from @currentField to *@currentField.lookupValue

Community

You can find many other column formatting examples from the PNP community, right here 👇

PNP List-Formatting @ GitHub
‏