Customize Your Application Logo | Next.js Supabase SaaS Kit

Replace the default Makerkit logo with your own brand logo using SVG, image files, or custom React components.

Replace the default Makerkit logo by editing the AppLogo component at apps/web/components/app-logo.tsx. This single component controls the logo across your entire application: authentication pages, site header, footer, sidebar, and email templates.

Quick Start

Open apps/web/components/app-logo.tsx and replace the existing SVG with your logo:

import Link from 'next/link';
import { cn } from '@kit/ui/utils';
function LogoImage({ className }: { className?: string }) {
  return (
    <img
      src="/images/logo.svg"
      alt="Your Company Name"
      className={cn('w-[80px] lg:w-[95px]', className)}
    />
  );
}
export function AppLogo({
  href,
  label,
  className,
}: {
  href?: string | null;
  className?: string;
  label?: string;
}) {
  if (href === null) {
    return <LogoImage className={className} />;
  }
  return (
    <Link aria-label={label ?? 'Home Page'} href={href ?? '/'}>
      <LogoImage className={className} />
    </Link>
  );
}

Place your logo file in apps/web/public/images/ and update the src path accordingly.

Logo Implementation Options

Inline SVGs provide the best performance and allow dynamic styling with Tailwind classes:

function LogoImage({ className }: { className?: string }) {
  return (
    <svg
      className={cn('w-[95px] h-auto', className)}
      viewBox="0 0 100 32"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        className="fill-primary dark:fill-white"
        d="M10 5h80v22H10z"
      />
      {/* Your SVG paths */}
    </svg>
  );
}

Benefits:

  • Supports fill-primary for automatic theme color adaptation
  • Responds to dark mode with dark:fill-white
  • Scales without quality loss
  • No additional HTTP requests

Option 2: Next.js Image Component

For PNG, JPG, or WebP logos, use next/image for automatic optimization:

import Image from 'next/image';
function LogoImage({ className }: { className?: string }) {
  return (
    <Image
      src="/images/logo.png"
      alt="Your Company Name"
      width={95}
      height={32}
      className={cn('w-[80px] lg:w-[95px] h-auto', className)}
      priority
    />
  );
}

Option 3: Dark Mode Variants

When your logo needs different versions for light and dark modes:

import Image from 'next/image';
import { cn } from '@kit/ui/utils';
function LogoImage({ className }: { className?: string }) {
  return (
    <>
      <Image
        src="/images/logo-dark.svg"
        alt="Your Company Name"
        width={95}
        height={32}
        className={cn('hidden dark:block w-[80px] lg:w-[95px]', className)}
        priority
      />
      <Image
        src="/images/logo-light.svg"
        alt="Your Company Name"
        width={95}
        height={32}
        className={cn('block dark:hidden w-[80px] lg:w-[95px]', className)}
        priority
      />
    </>
  );
}

Where the Logo Appears

The AppLogo component renders in these locations:

LocationFile PathNotes
Site Headerpackages/ui/src/makerkit/marketing/header.tsxMarketing pages
Site Footerpackages/ui/src/makerkit/marketing/footer.tsxAll pages
Auth Pagesapps/web/app/auth/layout.tsxSign in, sign up
App Sidebarpackages/ui/src/makerkit/sidebar.tsxDashboard (when team accounts disabled)
Email Templatespackages/mailers/src/components/Transactional emails

Favicon and Social Images

Update these additional brand assets in apps/web/app/:

apps/web/app/
├── favicon.ico          # Browser tab icon (32x32)
├── icon.png             # PWA icon (512x512)
├── apple-icon.png       # iOS home screen (180x180)
└── opengraph-image.png  # Social sharing (1200x630)

Generate these from your logo using tools like RealFaviconGenerator or Favicon.io.

Common Mistakes

Using low-resolution images: Logos appear blurry on high-DPI displays. Always use SVG when possible, or provide 2x/3x image assets.

Forgetting alt text: Screen readers need descriptive alt text. Use your company name, not "logo".

Hard-coded dimensions: Use responsive classes like w-[80px] lg:w-[95px] instead of fixed pixel widths to ensure the logo scales appropriately on mobile.

Missing priority attribute: Add priority to Next.js Image components for above-the-fold logos to prevent layout shift.

Verification

After updating your logo:

  1. Check the marketing header at http://localhost:3000
  2. Verify the auth pages at http://localhost:3000/auth/sign-in
  3. Test dark mode toggle to confirm logo visibility
  4. Inspect mobile viewport (375px width) for proper sizing

Frequently Asked Questions

How do I make my SVG logo change color with the theme?
Use Tailwind's fill classes on your SVG paths: fill-primary for the default theme color, or dark:fill-white to change in dark mode. Remove any hardcoded fill attributes from the SVG.
What size should my logo be?
Design for 95px width on desktop and 80px on mobile. SVGs scale automatically. For raster images, export at 2x resolution (190x64 pixels minimum) to support high-DPI displays.
Can I use different logos in different parts of the app?
Yes. You can modify the AppLogo component to accept a variant prop or create separate components. However, maintaining brand consistency is recommended.
How do I update the logo in email templates?
Email templates use the same AppLogo component where possible, but some email clients require inline images. Check packages/mailers/src/components/ for email-specific logo handling.

Next Steps