Sanity: Setting document title and preview icons not working

I'll help you with both questions about document titles and icon previews in Sanity Studio!

1. Creating a proper title for single page documents

For singleton documents (single-page documents), just adding a title field isn't enough to show a meaningful title in the Studio interface. You need to configure the preview settings in your schema.

Here's how to set it up:

export default defineType({
  name: 'settings',
  type: 'document',
  title: 'Site Settings',
  fields: [
    {
      name: 'title',
      type: 'string',
      title: 'Site Title'
    },
    // ... other fields
  ],
  preview: {
    prepare() {
      return {
        title: 'Site Settings'  // This is what appears in Studio lists
      }
    }
  }
})

For singletons, since there's only one document, you typically want to hardcode the display title in the prepare function rather than using a field value. This ensures your singleton always shows a consistent, meaningful name in the Studio interface.

2. Getting icons to work in preview

Icons need to be properly configured in the preview.prepare() function. The preview configuration requires you to return the icon in the media property. Here's the correct pattern:

import { CogIcon } from '@sanity/icons'

export default defineType({
  name: 'settings',
  type: 'document',
  icon: CogIcon,  // This shows in structure/navigation
  preview: {
    prepare() {
      return {
        title: 'Site Settings',
        media: CogIcon  // This shows in lists and references
      }
    }
  }
})

If you want to use an icon as a fallback when an image field might be empty:

import { BlockContentIcon } from '@sanity/icons'

export default defineType({
  name: 'article',
  type: 'object',
  preview: {
    select: {
      title: 'title',
      media: 'image'
    },
    prepare({title, media}) {
      return {
        title: title,
        media: media ?? BlockContentIcon  // Icon fallback if no image
      }
    }
  }
})

Common issues:

• Make sure you're importing icons from @sanity/icons
• The icon property at the schema root level is different from media in the preview
• Icons must be React components, not strings or image URLs

Both of these work together - the root-level icon property shows in your structure navigation, while the media in the preview configuration shows in document lists and reference fields. You can also learn more about creating richer preview configurations for more complex use cases.