Logo

How to change the logo in the Next.js starter kit.

The logo is located in packages/ui/src/logo/logo.tsx.

This file contains the full Logo including text and logomark. And also includes a LogoIcon component for the logomark.

Both components render a svg wrapped with a Chakra UI Box.

To change the logo, you can either modify the existing components or create your own.

It's recommended to use svg images for the logo, so it can scale properly on any device and also be styled easily with Chakra UI props. Make sure to set fill or stroke to currentColor so the logo picks up the color from the color prop and can support both light and dark themes.

import { Box, type BoxProps } from '@chakra-ui/react'

export function Logo(props: BoxProps) {
  return (
    <Box as="svg" viewBox="0 0 100 100" {...props}>
      <path d="M 0 0 L 100 0 L 100 100 L 0 100 Z" fill="currentColor" />
    </Box>
  )
}

Favicons#

Favicons are located in public/favicons and are generated using services like favicon.io.

Icons can be configured using Metadata in your layout or page. Learn more about icons in Next.js.

export const metadata: Metadata = {
  icons: {
    icon: '/favicons/favicon.ico',
  },
}

Usage#

To use the logo in your application, you can import the Logo component from the @acme/ui/logo.

import { Logo, LogoIcon } from '@acme/ui/logo'

Since the component renders a Box component, you can pass any valid Box props to the component.

<Logo color="red" width="100px" />