Join us live Sept. 27 – How Sanity and Vercel powered Morning Brew's transformation –>
Skip to content
Share your own snippet

Hide Icons For Array Items

By RD Pennell

Prefer to have no image next to your array items? This can help!

To be added to the array item's schema

// import React at the top of the document

preview: {
  select: {
    title: // your title field,
    subtitle: // your subtitle field
  },
  prepare({ title, subtitle }) {
    return {
      title: title,
      subtitle: subtitle,
      media: <span />
    }
  }
}

The icon for an item in an array is based off of the preview in that item’s schema and can be customized using Previews/List Views.

Completely removing the icon isn't as straightforward, though (since setting media to null or an empty string defaults back to the original icon). If you're set on having no icon at all rendering an empty span or div can get you there.

Contributor

Other schemas by author