Can I use non-SVG icons and detect dark/light mode in Sanity config?

Great questions about customizing the Studio icon! Let me address both:

1. Icon Format - Not Limited to SVG

The icon property in defineConfig accepts React components, which gives you flexibility beyond just SVG. While SVG is common and recommended, you can use any React component that returns JSX.

Here's how it works:

import {defineConfig} from 'sanity'

// You can use a functional component that returns an SVG
const MyIcon = () => (
  <svg viewBox="0 0 100 100">
    {/* your svg paths */}
  </svg>
)

export default defineConfig({
  projectId: '<projectId>',
  dataset: 'production',
  icon: MyIcon, // Pass the component
  // ... other config
})

You can also use icons from @sanity/icons which are SVG-based React components that integrate well with Sanity's design system.

2. Detecting Dark/Light Mode for Theme-Aware Icons

Yes, you can detect the Studio's theme! The @sanity/ui package provides usePrefersDark(), which returns whether the user prefers dark mode based on the Sanity UI theme context (not just the system preference).

Since the icon property accepts a React component, you can create a theme-aware wrapper:

import {defineConfig} from 'sanity'
import {usePrefersDark} from '@sanity/ui'

const ThemeAwareIcon = () => {
  const prefersDark = usePrefersDark()
  
  return prefersDark ? (
    <svg viewBox="0 0 100 100">
      {/* Light-colored icon for dark mode */}
    </svg>
  ) : (
    <svg viewBox="0 0 100 100">
      {/* Dark-colored icon for light mode */}
    </svg>
  )
}

export default defineConfig({
  icon: ThemeAwareIcon,
  // ... other config
})

Even Simpler: Use currentColor

The easiest approach is to use currentColor in your SVG's fill or stroke attributes. This automatically adapts to Sanity's theme without any conditional logic:

const StudioIcon = () => (
  <svg viewBox="0 0 100 100" fill="currentColor">
    {/* your svg paths */}
  </svg>
)

export default defineConfig({
  icon: StudioIcon,
  // ... other config
})

With currentColor, Sanity UI's theming system automatically applies the appropriate color - your icon will be dark in light mode and light in dark mode, perfectly matching the Studio's appearance!