New

5 demos, 10+ applications, 50+ blocks, 30+ pages & much more

Documentation

Browse and explore docs

React JS — Change Logo

Change Logo

To change the logo in the React JS version, edit: src/layouts/full/shared/logo/FullLogo.tsx

Put your logo image inside src/assets/images/logos/ folder.

// src/layouts/full/shared/logo/FullLogo.tsx
import { Link } from 'react-router';
import Logo from 'src/assets/images/logos/darklogo.svg';
import Logowhite from 'src/assets/images/logos/whitelogo.svg';

const FullLogo = () => {
  return (
    <Link to={'/'} className="max-w-[40px] block lg:max-w-[120px] overflow-hidden">
      {/* Light mode logo */}
      <img src={Logo} alt='logo' width={100} height={32}
        className='block dark:hidden max-w-[120px] rtl:scale-x-[-1]' />
      {/* Dark mode logo */}
      <img src={Logowhite} alt='logo' width={100} height={32}
        className='hidden dark:block max-w-[120px] rtl:scale-x-[-1]' />
    </Link>
  );
};

export default FullLogo;