How to Add a Logo to Sanity Studio

You can add a custom logo to your Sanity Studio by using the icon property in your workspace configuration. This is the modern approach in Sanity Studio v3 (specifically since v3.23.0).

In your sanity.config.ts (or .js) file, add an icon property to your workspace configuration:

import {defineConfig} from 'sanity'
import {MyCustomLogo} from './components/MyCustomLogo'

export default defineConfig({
  name: 'default',
  title: 'My Project',
  projectId: 'your-project-id',
  dataset: 'production',
  
  // Add your custom icon/logo here
  icon: MyCustomLogo,
  
  plugins: [
    // your plugins
  ],
  
  schema: {
    types: [
      // your schema types
    ],
  },
})

Your logo component should be a React component that returns an SVG or other image element:

// components/MyCustomLogo.tsx
export function MyCustomLogo() {
  return (
    <img 
      src="/path-to-your-logo.svg" 
      alt="My Company Logo"
      style={{width: '100%', height: '100%'}}
    />
  )
}

Important note: The old approach using studio.components.logo no longer works as of Studio v3.23.0. If you're using multiple workspaces, you can set a different icon for each workspace by adding the icon property to each workspace object in your configuration array.

The icon appears in the top-left corner of your Studio interface where the Sanity logo normally appears. For more details on Studio configuration options, check out the Configuration API documentation.