Adding icons or custom images to text in Sanity.io

Yes, it's absolutely possible to add an icon near the text in your array of objects! In Sanity Studio, you can add icons to schema fields, including array items.

Adding Icons to Array Items

First, install the icon package you want to use:

npm install @sanity/icons
# or
yarn add @sanity/icons

Then, in your schema definition (make sure the file has a .jsx or .tsx extension), you can add icons to your array items like this:

import { DocumentIcon, ImageIcon, UserIcon } from '@sanity/icons'

export default {
  name: 'myDocument',
  type: 'document',
  fields: [
    {
      name: 'myArray',
      type: 'array',
      of: [
        {
          type: 'object',
          name: 'item1',
          title: 'Item Type 1',
          icon: DocumentIcon, // Icon appears next to the title
          fields: [
            {
              name: 'title',
              type: 'string',
              title: 'Title'
            }
          ]
        },
        {
          type: 'object',
          name: 'item2',
          title: 'Item Type 2',
          icon: ImageIcon, // Different icon for this type
          fields: [
            {
              name: 'title',
              type: 'string',
              title: 'Title'
            }
          ]
        }
      ]
    }
  ]
}

Icon Options

You have several options for icons:

1. @sanity/icons - Official Sanity icon package with icons that match Studio's design
2. react-icons - Large collection including Font Awesome, Material Design, and more
3. Custom SVG - Any React component that renders an icon

The icons will appear in the Studio UI next to each array item's title, making it easier to identify different types of objects at a glance. As mentioned in the Icons documentation, helpful icons can improve the editorial experience throughout the studio interface.

Important: Remember that any schema file with icons must have a .jsx or .tsx extension, not .js or .ts, since you're importing React components!