Adding Document Icon in Sanity Studio

Do you know that we can customize look and feel of Sanity headless CMS with simple Javascript. ? Let's dig into it.

In order to customizing Sanity studio UI, need to know some basic JS and Reactjs programming.

Document Icon

In our schema we can define a Icon field with Icon library. I prefer to use the React-Icon

On the top of the schema import the desired icon as follows

import { FcBusinesswoman } from "react-icons/fc";

In the document definition add the icon key and use the Icon as follows.

import { FcBusinesswoman } from "react-icons/fc";
 
export default {
    name:'user',
    type:'document',
    title:'User',
    icon:FcBusinesswoman,
    fields:[

The Icon should be now visible at Sanity Studio (content section). Let's run the sanity studio .

npx @sanity/client start