Get help on Discord

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 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?