Get help on Discord

How to increase the size of the container and add custom CSS in Sanity Studio.

3 replies
Last updated: Feb 15, 2024
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.

Great news: you can inject custom CSS into the Studio. Back news is that it isn’t documented and I’m not sure where you’d begin. I do know that it might not be pretty 😅
Great! I guess I’ll go and not read up on it then :lolsob:
I also ran into this issue, injecting css can be done by importing the css file at the top of your Sanity config:

https://stackoverflow.com/questions/76429882/how-to-import-custom-css-in-sanity-studio-v3
Using an SVG as the Icon you can then create a target and resize as needed. Not pretty
😂 ☝️ but it works!

div:has(> #studio-logo) {
  width: [someValue];
}

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?