Application Logo Configuration

Replace the default logo with your brand's logo by updating a single React component - the logo automatically appears in the header, footer, auth pages, and sidebar.

The Next.js Prisma kit uses a centralized logo component at apps/web/components/app-logo-image.tsx. Update this one file and your logo appears everywhere: site header, footer, authentication pages, and the app sidebar. You can use SVG components, image files, or any React-renderable content.

The application logo is a React component that renders your brand's visual identifier. It's imported throughout the application wherever a logo is needed.

• Use an SVG component when: you need crisp rendering at all sizes, want to change colors via CSS, or need to minimize file size.
• Use an image file when: your logo has complex gradients, photos, or effects that don't translate well to SVG.

If unsure: SVG is usually the better choice for logos - it scales perfectly and can adapt to dark mode.

Logo Component Location

Updating the Logo

Option 1: SVG Component (Recommended)

Replace the content of app-logo-image.tsx with your SVG:

export function AppLogoImage({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 100 100"
      fill="currentColor"
    >
      {/* Your SVG paths here */}
      <path d="M50 10 L90 90 L10 90 Z" />
    </svg>
  );
}

Using currentColor allows the logo to inherit text color, adapting to light/dark mode automatically.

Option 2: Image File

Place your image in public/images/ and reference it:

import Image from 'next/image';
export function AppLogoImage({ className }: { className?: string }) {
  return (
    <Image
      src="/images/logo.png"
      alt="Your Company"
      width={120}
      height={40}
      className={className}
    />
  );
}

For dark mode support with images, use separate files:

import Image from 'next/image';
export function AppLogoImage({ className }: { className?: string }) {
  return (
    <>
      <Image
        src="/images/logo-light.png"
        alt="Your Company"
        width={120}
        height={40}
        className={`${className} dark:hidden`}
      />
      <Image
        src="/images/logo-dark.png"
        alt="Your Company"
        width={120}
        height={40}
        className={`${className} hidden dark:block`}
      />
    </>
  );
}

Where the Logo Appears

The logo component is used in:

• Site header: Marketing pages navigation
• Site footer: Footer branding
• Auth pages: Sign in, sign up, password reset
• App sidebar: Dashboard navigation (personal account mode)
• Email templates: Transactional emails (separate configuration)

Favicons

Favicons are the small icons shown in browser tabs and bookmarks.

All files are located in public/images/favicon/.

Generating Favicons

Use a favicon generator to create all required sizes from your logo:

1. Go to Favicon.io or RealFaviconGenerator
2. Upload your logo image (use a square version)
3. Download the generated package
4. Replace files in public/images/favicon/

Production Tip

Export SVGs from Figma with "Outline stroke" enabled - otherwise stroke-based logos render inconsistently across browsers, especially on Windows. This adds a few bytes to file size but eliminates a frustrating cross-browser issue.

Common Pitfalls

• Wrong aspect ratio: Design your logo for horizontal layouts (roughly 3:1 ratio works well in headers).
• Missing dark mode variant: Test your logo in both light and dark modes. White logos disappear on light backgrounds.
• Hardcoded colors in SVG: Use currentColor or CSS variables to allow theme adaptation.
• Forgetting favicons: Users notice missing favicons - they make bookmarks look broken.
• Large image files: Optimize logo images. SVGs should be under 5KB; PNGs under 20KB.

Related

• Branding Overview - Full branding customization guide
• Tailwind CSS Configuration - Theme and color customization
• Font Configuration - Typography customization

Next: Fonts →