Custom icons for dynamic sections with rich text editor in Sanity

Yes, it is possible to have a custom icon for each section in your rich text editor! Based on the documentation, you can add custom icons to block types in your Sanity schema.

How to Add Custom Icons

When defining custom block types in your Portable Text array, you can specify an icon property. Here's how:

{
  title: 'Rich text',
  type: 'array',
  of: [
    {type: 'block'},
    {
      type: 'myCustomSection',
      icon: MyCustomIcon  // Your custom icon component
    },
    {
      type: 'anotherSection',
      icon: AnotherIcon
    }
  ]
}

Using Icons from @sanity/icons

Sanity provides a comprehensive icon library through @sanity/icons. You can import and use these icons:

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

{
  title: 'Content sections',
  type: 'array',
  of: [
    {type: 'block'},
    {
      type: 'textSection',
      icon: DocumentIcon
    },
    {
      type: 'imageSection', 
      icon: ImageIcon
    }
  ]
}

Custom Icon Components

You can also create your own icon components. The icon property accepts a React component:

{
  type: 'specialSection',
  icon: () => <span style={{fontSize: '1.5em'}}>⭐</span>
}

The icons will appear in the Insert menu and toolbar of the Portable Text Editor, making it easy for content editors to identify and insert different section types. Note that these icon customizations only affect how content appears in the Studio interface - they won't affect how the content is rendered on your frontend (that's handled separately through portable text serialization).