App Logo

The AppLogo component displays your application’s logo in a clean and reusable way. It uses an optimized Image component and can be placed in various areas such as the TopBar, Footer, or authentication screens like Sign In and Sign Up.

Built for Next.js and React.js projects, it ensures your branding remains consistent across all parts of your website.

App Logo preview

1. Setup codes

Create (or update) file constants/routes.ts

js
export const ROUTES = {
  homePage: "/",
};

Create a new file components/ui/AppLogo.tsx, then paste the codes below

jsx
import Image from "next/image";
import Link from "next/link";

import { ROUTES } from "@/constants/routes";

type AppLogoProps = {
  width?: number;
  height?: number;
  className?: string;
};

const AppLogo = ({ width = 200, height = 50, className }: AppLogoProps) => {
  return (
    <Link href={ROUTES.homePage}>
      <Image
        src="/images/app-logo.png"
        alt="App Logo"
        width={width}
        height={height}
        className={className}
      />
    </Link>
  );
};

export default AppLogo;

Add your app logo image in public/images/app-logo.png.

2. Usages

2.1 Basic usages

You can now use the AppLogo component in various places such as the top navigation, footer, or sign-in/sign-up forms.

jsx
import AppLogo from "@/components/ui/AppLogo";

...

<AppLogo />

The UI like that

At the TopBar Navigation

At the Footer

2.1 Custom with and height

You can custom width and height of App Logo component:

jsx
import AppLogo from "@/components/ui/AppLogo";

...

<AppLogo width={150} height={40} />