Icon + Text Label

The Icon + Text Label pairs a status word with a leading icon, so the meaning reads twice - once from the symbol and once from the word - even before color registers. It is built with a standard Microsoft List and a small piece of column-formatting JSON. Each status maps to a built-in SharePoint icon and a tinted pill - a check for Complete, a spinner for In Progress, a warning for At Risk, a block for Blocked - and an unmapped value falls back to a neutral information pill. The icon makes the status clearer and more accessible than color alone.

Author

SharePoint Maven

Built with

• Lists

Features

Choice Column, Date and Time Column, JSON, Person or Group Column, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Shows each status as a leading icon plus the status word inside a tinted pill
• The icon reinforces the meaning, so status is clear even for color-blind readers or in grayscale
• Icons come from SharePoint’s built-in Fluent icon set, so they stay crisp at any zoom and need nothing installed
• Each value maps to its own icon and color – a check for Complete, a spinner for In Progress, a warning for At Risk, a block for Blocked
• An unmapped or blank value falls back to a neutral information pill, so the column never looks broken
• Applied as column-formatting JSON using the current column, so the same pattern works on any status field without renaming

Common Use Cases

• Task or project status on a board
• Approval and review stages
• Ticket or case state
• Onboarding and offboarding steps
• Build, deployment, or release status
• Request handling stages

Details

• Design Pattern: Status & Indicator Badges
• Format Scope: Column

Required Columns

Prerequisites

1. Build a list with these columns before you paste the JSON.
2. Populate the list with data.
3. Because the JSON is applied at the column level, the Status column can use any name you want.
4. It matches each status word to an icon and color by exact text, so edit those short lists in the JSON to fit your own values; anything unmatched shows a neutral information pill.

How to Apply JSON code

1. On the Status column, open the column header menu, choose Column settings, then Format this column.
2. Switch to Advanced mode.
3. 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",
    "justify-content": "flex-start",
    "box-sizing": "border-box",
    "width": "100%",
    "max-width": "100%",
    "min-height": "34px",
    "padding": "0 10px",
    "border-radius": "8px",
    "overflow": "hidden",
    "background-color": "=if(@currentField == 'Complete', '#e7f3e8', if(@currentField == 'In Progress', '#eaf2fb', if(@currentField == 'At Risk', '#fdf3d6', if(@currentField == 'Blocked', '#fdeceb', if(@currentField == 'Not Started', '#f3f2f1', '#f3f2f1')))))"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "=if(@currentField == 'Complete', 'CompletedSolid', if(@currentField == 'In Progress', 'Sync', if(@currentField == 'At Risk', 'Warning', if(@currentField == 'Blocked', 'Blocked', if(@currentField == 'Not Started', 'CircleRing', 'Info')))))"
      },
      "style": {
        "font-size": "13px",
        "line-height": "1",
        "margin-right": "8px",
        "flex-shrink": "0",
        "color": "=if(@currentField == 'Complete', '#0b6a0b', if(@currentField == 'In Progress', '#0b5cab', if(@currentField == 'At Risk', '#7a5c00', if(@currentField == 'Blocked', '#a4262c', if(@currentField == 'Not Started', '#605e5c', '#605e5c')))))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "=if(@currentField == '', 'Not set', @currentField)",
      "style": {
        "font-size": "13px",
        "font-weight": "600",
        "line-height": "1.2",
        "white-space": "nowrap",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "color": "=if(@currentField == 'Complete', '#0b6a0b', if(@currentField == 'In Progress', '#0b5cab', if(@currentField == 'At Risk', '#7a5c00', if(@currentField == 'Blocked', '#a4262c', if(@currentField == 'Not Started', '#605e5c', '#605e5c')))))"
      }
    }
  ]
}

Common Questions About the Icon + Text Label