How to replace the default Sanity logo in the studio with a custom logo.

7 replies

Last updated: Mar 21, 2024

Hi ,I want to replace the default sanity logo in the top left corner of my studio to my custom logo.
Anybody has tried it?
thanks

Mar 21, 2024, 11:47 AM

Yeah, they updated the way this was done in v3.23.0
You now need to specify it as

icon

in your workspace config.
Something like this in

sanity.config.{ts,js}

import { MyLogo } from './components/MyLogo';
export default defineConfig({
  icon: MyLogo,
  ...restOfTheConfig
});

MyLogo.{tsx,jsx}

import logo from './logo.png?url';

export const MyLogo = (
  <img src={logo} alt='My Logo' width={25} height={25} />
);

Mar 21, 2024, 12:05 PM

Thank you for the solution.can we also increase the width of the icon? because its very small

Mar 21, 2024, 1:25 PM

No, it’s locked to a square - you can create a ‘wrapper’ for the studio and design your own toolbar if you’d like though

Mar 21, 2024, 2:00 PM

oh okay, thanks for the reply but its sound lil complicated.could you give me an example? or guide which i can follow
that would be super helpful

Mar 21, 2024, 2:07 PM

This is what mine looks like

Mar 21, 2024, 2:08 PM

its looks cool thanks for sharing, is there any guide available for customizing studio toolbar like you did?

Mar 21, 2024, 2:18 PM

Mar 21, 2024, 2:39 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.