Skip to main content

File Type Icon (Column JSON)

The File Type Icon shows a colored badge with the file extension next to each file name, so a document library reads at a glance by type instead of as a wall of similar rows. It is built with a standard SharePoint document library and a small piece of column-formatting JSON. Each file gets a colored tag - red for PDF, blue for Word, green for Excel, and so on - keyed to its extension, and folders are marked too.
Author
SharePoint Maven
Built with
Features
JSON
Category
Formatting

Want one like this?

Talk to Greg

Overview

  • Shows a colored extension badge beside each file name
  • The color is keyed to the file type, so PDFs, Word, Excel, and images are easy to tell apart
  • Reads the file extension automatically from the file, so nothing extra is stored
  • Folders are tagged too, so they stand out from files
  • Applied as column-formatting JSON on the Name column, so it changes nothing about the files
  • Works on any document library, and the colors are easy to adapt

Common Use Cases

  • Mixed document libraries
  • Project file repositories
  • Policy and procedure libraries
  • Shared team drives
  • Asset and download libraries
  • Any library with many file types

Details

  • Design Pattern: File & Library Display
  • Format Scope: Column

Prerequisites

  1. Open your document library (or create one and upload a few files).
  2. Internal column names (in brackets) must match the JSON exactly.
  3. Use a SharePoint document library, not a standard Microsoft List – the badge reads the file metadata that a library supplies.
  4. SharePoint may still show its own small built-in file icon next to the name; that icon comes from the library interface and is separate from this formatter.

How to Apply JSON code

  1. On the Name 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

JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "align-items": "center",
    "height": "100%",
    "width": "100%",
    "min-height": "32px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "align-items": "center",
        "justify-content": "center",
        "width": "38px",
        "height": "26px",
        "border-radius": "4px",
        "flex-shrink": "0",
        "margin-right": "10px",
        "background-color": "=if([$File_x0020_Type] == 'pdf', '#d13438', if([$File_x0020_Type] == 'doc', '#2b579a', if([$File_x0020_Type] == 'docx', '#2b579a', if([$File_x0020_Type] == 'xls', '#217346', if([$File_x0020_Type] == 'xlsx', '#217346', if([$File_x0020_Type] == 'ppt', '#c43e1c', if([$File_x0020_Type] == 'pptx', '#c43e1c', if([$File_x0020_Type] == 'png', '#8764b8', if([$File_x0020_Type] == 'jpg', '#8764b8', if([$File_x0020_Type] == 'jpeg', '#8764b8', if([$File_x0020_Type] == 'gif', '#8764b8', if([$File_x0020_Type] == 'txt', '#595959', if([$File_x0020_Type] == 'zip', '#8a8886', if([$File_x0020_Type] == 'csv', '#217346', '#605e5c'))))))))))))))"
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "font-size": "10px",
            "font-weight": "700",
            "color": "#fff36b",
            "letter-spacing": "0.3px"
          },
          "txtContent": "=if([$File_x0020_Type] == '', 'DIR', toUpperCase([$File_x0020_Type]))"
        }
      ]
    },
    {
      "elmType": "span",
      "style": {
        "font-size": "14px",
        "font-weight": "500",
        "line-height": "20px",
        "color": "#1f1f1f",
        "letter-spacing": "0.1px"
      },
      "txtContent": "[$FileLeafRef]"
    }
  ]
}

Common Questions About the File Type Icon

What is the File Type Icon built with?

It is built with a standard SharePoint document library and a small piece of column-formatting JSON applied to the Name column. 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 tidier library without ongoing development overhead.

How does it know the file type?

It reads each file’s extension from SharePoint, so a file ending in .pdf shows a PDF tag and a .xlsx file shows an Excel tag. Nothing extra is stored – the badge is drawn from the file itself.

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 existing columns and views look, 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.

Can I change the colors or add more types?

Yes. The extension-to-color map is a short list inside the JSON, so you can add file types, change a color, or match your brand. Anything not in the list falls back to a neutral tag.

Can Greg build this for our library?

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 library.