title: Next.js Image Styling through css
body: <p>I have a next JS component here:</p>
  <pre class="lang-js prettyprint-override"><code>import styles from '../styles/Navbar.module.css'
  import Image from 'next/image'
  
  export const Navbar = () =&gt; {
      &lt;div&gt;
          &lt;Image className={styles[&quot;navbar-home-icon&quot;]} src=&quot;/vercel.svg&quot;/&gt;
      &lt;/div&gt;
  }
  </code></pre>
  <p><code>Navbar.module.css</code>:</p>
  <pre class="lang-css prettyprint-override"><code>.navbar-home-icon {
      width: 60px;
      height: 60px;
      border: 5px solid red;
  }
  </code></pre>
  <p>The problem is, I can't use the <code>navbar-home-icon</code> class to set the width and height of the image. Not even the border shows up. It throws this error</p>
  <blockquote>
  <p>Error: Image with src &quot;/vercel.svg&quot; must use &quot;width&quot; and &quot;height&quot; properties o
  r &quot;layout='fill'&quot; property</p>
  </blockquote>
  <p>I know the css file is being detected because this is what shows up in the developer view:<a href="https://i.stack.imgur.com/0PhBP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0PhBP.png" alt="enter image description here" /></a></p>
  <p>If I add in <code>height</code> and <code>width</code> properties into the tag itself, the image shows up.</p>
  <p>I understand what the error is, but how do I control the width/height/any other property through my css file? - Instead of explicitly declaring them inside the Image tag?</p>