• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
    • Adding API Routes
    • Change Authentication strategy
    • Fetching the signed in User
    • Reading a Document
    • Creating a Document
    • Configuring Plans
    • Project Configuration
    • Updating the Navigation menu
    • Adding a new translation string
    • Guarding an API Route
    • Adding Pages
    • Updating the Sidebar menu
    • Require Email Verification
    • Fetching the selected Organization
    • Reading a list of Documents
    • Updating a Document
    • Running the Stripe Webhook locally
    • Branding
    • Setting a Default Language
    • Dark Theme
    • Theming
    • Calling API Routes from the client
    • Deleting a Document
    • Updating the Logo
    • Adding a new language in the Next.js Firebase SaaS Kit
    • Checking CSRF Tokens
    • Passing data from server to client
    • Updating the Fonts
    • Adding Pages
    • Guarding Pages
    • Using Lemon Squeezy instead of Stripe
    • Updating the Favicons
    • Using the Language Switcher
    • Environment variables
    • Detect current Locale
    • Setting up Emails

Updating the logo of your Makerkit site

Learn how to update the logos of your Makerkit site

Makerkit by default provides an SVG logo with the default Makerkit logo. In addition, we also provide a mini version of the logo that is used when the sidebar is collapsed.

You should change both the LogoImage and LogoImageMini to match your brand.

Where are the logos defined?

The logos are defined in two files:

  1. src/core/ui/Logo/LogoImage.tsx
  2. src/core/ui/Logo/LogoImageMini.tsx

Feel free to replace the default logo with your own logo.

What sizes should my logo be?

The optimal sizes for the logs are:

  1. The logos should be 20px tall to fit well in the header.
  2. The logo mini should be 20px tall and 20px wide.

I like Makerkit's logo! How can I reuse it for my own logo?

Download the Makerkit Figma file from here and use the logo from there.