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

Modifying the Sanity logo on the backend in v3 and finding a GitHub example.

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?
Feb 16, 2024, 11:10 AM
You mean the logo in the top left of Sanity Studio?
Feb 16, 2024, 11:11 AM
yes! 😄
Feb 16, 2024, 11:12 AM
Hold on
Feb 16, 2024, 11:12 AM
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,
});
Feb 16, 2024, 11:13 AM
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>
);
Feb 16, 2024, 11:14 AM
You can also insert an image tag instead of the SVG, whet ever you need.
Feb 16, 2024, 11:14 AM
nice!! thank you so much!
Feb 16, 2024, 11:14 AM
Np!
Feb 16, 2024, 11:14 AM
I struggled a bit with this myself, but finally found the answer.
Feb 16, 2024, 11:14 AM
i am almost there!
I think that i have to make something at the end of studioLogo to export, right?
Feb 16, 2024, 11:35 AM
Add "export " in front of "const StudioLogo" and you should be good
Feb 16, 2024, 11:38 AM
I suspect that you might need to scale down the size as well. I think the optimal size is around 140px width.
Feb 16, 2024, 11:39 AM
yeah, works! thanks mate
Feb 16, 2024, 11:39 AM
Np, happy to help
Feb 16, 2024, 11:39 AM

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?