I am trying to put the logo of my project in the navbar, however, despite the image being svg (so without background), and having assigned width of 50 and height of 115, Next still thinks the image has space around it and the logo looks super small.

Here is the code for the navbar component:

'use client'; import React, { useState } from "react"; import Link from "next/link"; import Image from "next/image"; import CategoriesMenu from "./categories-menu"; const Navbar = () => { const [ isDropdownVisible, setIsDropdownVisible ] = useState(false); const handleMouseEnter = () => { setIsDropdownVisible(true); } const handleMouseLeave = () => { setIsDropdownVisible(false); } return ( <div className="flex p-5 w-full place-self-center bg-remotify-db font-sans"> <div className=".logo__image"> <Link href="/" className=""><Image className="" alt="logo" src={'/logo.svg'} width={50} height={115} /></Link> </div> <div className="flex flex-row text-md items-center justify-center "> <div className="px-3"> <Link href="/featured">Featured</Link> </div> <div className="px-3 flex flex-col cursor-pointer relative items-center" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > <p className="">Categories </p> { isDropdownVisible && <CategoriesMenu />} </div> <div className="px-3"> <Link href="" >Companies</Link> </div> <div className="px-3"> <Link href="/pricing" className="hover:bg-remotify-lb border-1 border-remotify-lb bg-remotify-db text-white hover:text-slate-950 text-remotify-db px-6 rounded-md py-2">Post a Job</Link> </div> </div> </div> );