Get help on Discord

Sanity: Setting document title and preview icons not working

21 replies
Last updated: Dec 14, 2022
Multiple questions thread:
1. How can i create a proper title for this single page document? Ive added a 
title
, wont seem to be enough. 2. Why isn’t my icons working as the preview for the objects?
AI Update

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.

Show original thread
21 replies

import {FaListUl, FaColumns} from 'react-icons/fa'
import {AiFillFileText, AiFillHome} from 'react-icons/ai'

export default {
  title: 'Content',
  name: 'contentList',
  type: 'array',
  of: [
    {
      type: 'introObject',
      name: 'introObject',
      title: 'Intro',
      icon: AiFillHome,
    },
    {
      name: 'listColumn',
      title: 'List Columns',
      type: 'object',
      icon: FaListUl,
      fields: [
        {
          name: 'listTitle',
          title: 'List Title',
          type: 'string',
          description: 'This title is for Sanity only.',
        },
        {
          name: 'listObject',
          type: 'listObject',
          title: 'List Columns',
          preview: {
            title: 'List Column',
          },
        },
      ],
    },
    {
      name: 'bodyObject',
      title: 'Body',
      type: 'object',
      icon: AiFillFileText,
      fields: [
        {
          name: 'bodyTitle',
          title: 'Title of Section',
          type: 'string',
          icon: AiFillFileText,
          description: 'This title is for Sanity only.',
        },
        {
          name: 'body1',
          type: 'body',
          title: 'Body',
        },
      ],
     
    },
    {
      name: 'column',
      type: 'column',
      title: 'Columns',
      icons: FaColumns,
    },
  ],
}
This is the entire content section.
And this is my About page.
Also forgot to add a picture of the single page title which is the About page^^
I’m pretty sure you can’t add icons to the fields. The icon is added to the array. I think the fields can have an icon added to the media section of the preview in the event the Array is it’s own object schema.

https://www.sanity.io/docs/previews-list-views
In order to add a title to that document, it’d need to be a document with a field that is an array within it.

import { UserIcon } from '@sanity/icons';


export default defineType({

name: 'documentExample',

title: 'Document',

icon: UserIcon,

type: 'document',

fields: [

// add title field

{

name: 'title',

title: 'Title',

type: 'string',

},

{

name: 'fieldArray',

title: 'Field Array',

type: 'array',

of: [

{

type: 'string',

},

],

},

],

}

);
If he would like to add a title but avoid making multiple documents, he can configure the desk structure afterwards.
Agreed.
Thought i sent the desk structure^^But its fixed by adding a title field.
This is how i solved the icons.
 preview: {
        select: {
          title:'listTitle',
        },
        prepare(selection: { title: TitledListValue }){
          const {title} = selection
          return {
            title: title,
            icon: FaListUl,
          }
        }
      }
It's interesting how you don't have it set up as a document though. I'm curious how it would show in the studio. Would it just show under the other lists, in the first column?
What isnt a document?
You have the type exported as an array instead of a document
I always thought you must first set it up as a type document when you export it to the index.js
Im guessing you guys didnt understand me. The first object ive sent is NOT the document
The first object ive sent is where i needed help with the icons (that’s on me for not being clear)
The object i sent is inside the document (document is the screenshot of «About»
The question I asked was just off topic. It was just more out of curiosity since I'm still learning about Sanity. But I understand now
My bad lol. but no its a document and not an array
the array you see is my 
pagebuilder
lol your good. Thanks for clearing that up though🙏

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?