How to use a custom image as an Icon in Sanity?

You can use a custom image as an icon in Sanity Studio by returning a React component (including an <img> tag) from the prepare function in your schema's preview configuration. The media property accepts React components, not just image field references.

Here's how to use a custom image as an icon:

Using an Image from Your Project

If you want to use an image file from your project (like from a public or static folder):

export default {
  name: 'myDocument',
  type: 'document',
  fields: [...],
  preview: {
    select: {
      title: 'title',
    },
    prepare({ title }) {
      return {
        title: title,
        media: <img src="/path/to/your/image.png" alt="Custom icon" style={{width: '100%', height: '100%', objectFit: 'cover'}} />
      }
    }
  }
}

Using an Image from an External URL

preview: {
  select: {
    title: 'title',
  },
  prepare({ title }) {
    return {
      title: title,
      media: <img src="https://example.com/icon.png" alt="Custom icon" />
    }
  }
}

Using an Image Field from the Document

If you want to use an image that's stored in the document itself, you can reference it directly in the select object without needing a custom component:

preview: {
  select: {
    title: 'title',
    media: 'customIcon' // Reference to an image field in your schema
  }
}

Important Notes

• The media property in the prepare function accepts any React component, so you can render custom JSX including <img> tags, SVGs, or even styled components
• When using local images, make sure they're in your public folder (or equivalent static folder depending on your setup) so they're accessible at runtime
• The preview system will handle the rendering and sizing automatically, but you may want to add inline styles to control how your image displays
• For Studio v3, this approach works in list views within the document pane, but custom preview components may not display in the top-level Structure tool document list

You can find more details in the Sanity documentation on rendering React components in previews.