Get help on Discord

How to modify Sanity logo in backend on v3?

14 replies
Last updated: Feb 16, 2024
Hey Everyone! Is there a way to modify the sanity logo on the backend on v3? any github example to see how is made?
AI Update

Yes! In Sanity Studio v3, you can customize the logo in the backend by adding an icon property to your workspace configuration in sanity.config.ts (or .js). This approach was introduced in v3.23.0.

Here's how to do it:

In your sanity.config.ts file:

import { defineConfig } from 'sanity'
import { MyLogo } from './components/MyLogo'

export default defineConfig({
  icon: MyLogo,
  // ...rest of your config
})

Create your logo component (MyLogo.tsx or MyLogo.jsx):

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

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

Important notes:

  • The icon is locked to a square format by default, so keep your logo dimensions balanced
  • If you need more control over the navbar appearance (like a wider logo), you can create a custom navbar component using the Studio Components API, though this is more complex

You can find working examples on GitHub by searching for sanity.config.ts files with the icon: property. The defineConfig documentation also covers workspace configuration options in detail.

Show original thread
14 replies
You mean the logo in the top left of Sanity Studio?
yes! 😄
Hold on
So in sanity.config.js

import StudioLogo from './components/StudioLogo';
export default defineConfig({
  icon: StudioLogo,
  name: 'my-project',
  title: 'My project',
  projectId: process.env.SANITY_STUDIO_PROJECT_ID,
  dataset: process.env.SANITY_STUDIO_DATASET,
});
In StudioLogo.tsx:

const StudioLogo = (props: any) => (
  <svg xmlns="<http://www.w3.org/2000/svg>" width={25} height={25} {...props}>
     Insert SVG-contents here
  </svg>
);
You can also insert an image tag instead of the SVG, whet ever you need.
nice!! thank you so much!
Np!
I struggled a bit with this myself, but finally found the answer.
i am almost there!
I think that i have to make something at the end of studioLogo to export, right?
Add "export " in front of "const StudioLogo" and you should be good
I suspect that you might need to scale down the size as well. I think the optimal size is around 140px width.
yeah, works! thanks mate
Np, happy to help

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?