✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

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
This is where you want to look https://www.sanity.io/docs/studio-components
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.

Was this answer helpful?