Remove icons from Studio top nav

6 replies
Last updated: Jan 28, 2026
How would I go about removing the icons from the Studio top nav?
AI Update

To remove icons from the Studio top navigation, you'll need to create a custom navbar component using Sanity Studio's component customization API. Here's how:

Customizing the Navbar

The Studio allows you to override the default navbar by providing a custom component in your configuration. You can use the studio.components property in your sanity.config.js file:

// sanity.config.js
import {defineConfig} from 'sanity'

// Custom navbar component
function CustomNavbar(props) {
  // You can either:
  // 1. Return null to hide the navbar entirely
  // 2. Use renderDefault with modified props
  // 3. Build your own navbar from scratch
  
  return props.renderDefault(props)
}

export default defineConfig({
  // ...rest of config
  studio: {
    components: {
      navbar: CustomNavbar,
    },
  },
})

Approaches to Remove Icons

Option 1: Use CSS to hide specific icons The simplest approach is to use custom CSS to hide the icons you don't want:

function CustomNavbar(props) {
  return (
    <div className="custom-navbar">
      <style>{`
        .custom-navbar [data-ui="IconButton"] {
          display: none;
        }
      `}</style>
      {props.renderDefault(props)}
    </div>
  )
}

Option 2: Build a minimal navbar Create your own navbar component that only includes what you need. You can reference the default navbar structure and selectively include elements.

Option 3: Use renderDefault with filtered children Intercept and modify the navbar's rendered output to remove specific elements before they're displayed.

Important Notes

  • The navbar customization uses a middleware pattern, so calling renderDefault(props) renders the default navbar with any modifications you've made to the props
  • If you completely replace the navbar without calling renderDefault, you'll break the middleware chain, which might affect plugins
  • You can access Sanity UI components to build your custom navbar

For more detailed information, check out the Studio Components documentation and the Studio Components API reference.

Show original thread
6 replies

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.

Was this answer helpful?