Get help on Discord

How to increase custom logo size in Sanity Studio 3.27.1?

3 replies
Last updated: Dec 1, 2025
Hi all.Recently updated to the latest version of the studio (from 3.19 to 3.27.1) and my custom logo in the top left has gone.

Now fixed it using the 
icon
as mentioned here .
Is it possible to increase the size of the container?

Hate to be my own annoying client and demand
I make the logo bigger but it is a legitimate use case this time 😅
and/or write some custom css to target that section?
AI Update

Good news – you're on the right track! After updating from Studio 3.19 to 3.27.1, the workspace icon property is indeed the correct way to set your logo. Here's how to make it bigger:

Using Custom CSS (Quickest Solution)

The simplest approach is to target the navbar with custom CSS. Create a CSS file and import it in your sanity.config.ts:

/* styles/custom-logo.css */
[data-ui="Navbar"] [data-ui="Button"] svg {
  width: 40px !important;
  height: 40px !important;
}

/* Give the container more space too */
[data-ui="Navbar"] [data-ui="Button"] {
  width: auto !important;
  padding: 8px 16px !important;
}

Then in your config:

import './styles/custom-logo.css'

export default defineConfig({
  // ... rest of config
})

Using a Custom Icon Component

You can also render your logo as a React component with custom sizing directly in the icon property:

import {defineConfig} from 'sanity'

const LogoIcon = () => (
  <img 
    src="/your-logo.svg" 
    alt="Logo" 
    style={{height: '32px', width: 'auto'}}
  />
)

export default defineConfig({
  name: 'default',
  title: 'My Studio',
  icon: LogoIcon,
  // ... rest of config
})

Advanced: Override the Navbar Component

For complete control, you can override the entire navbar using the studio components API:

import {defineConfig} from 'sanity'

function MyCustomNavbar(props) {
  return (
    <div style={{display: 'flex', alignItems: 'center', gap: '1rem', padding: '1rem'}}>
      <img src="/your-logo.svg" alt="Logo" style={{height: '60px'}} />
      {props.renderDefault(props)}
    </div>
  )
}

export default defineConfig({
  // ... other config
  studio: {
    components: {
      navbar: MyCustomNavbar
    }
  }
})

The CSS approach is usually the quickest win for just making the logo bigger, while the component override gives you full creative control. Totally legitimate use case – make that logo shine! 😄

Note: If your config file contains JSX (like the component examples above), make sure it has a .tsx or .jsx extension, as Vite requires this for files with JSX syntax.

Show original thread
3 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.

Get started for freeExplore the demo

Was this answer helpful?