Icons are not getting displayed with className="w-6" or smaller

[Tari Wiencke]

The Icon does show up with a width of 8 or higher (w-8). However with w-6 or lower it doesn't show up on the webpage. It does get rendered in the HTML-Tree:

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class=" w-6 text-blue-400 group-hover:text-white" aria-hidden="true"><path d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"></path></svg>

Thats how I used the Icon:

Imports:
import { ShoppingCartIcon } from '@heroicons/react/24/solid'

Implementation
return ( <Link href="/checkout" className='group border border-blue-400 text-blue-400 p-2 flex rounded-md w-32 justify-center hover:bg-blue-400 hover: hover:text-white'> {numberOfObjects} < ShoppingCartIcon className=" w-8 text-blue-400 group-hover:text-white" aria-hidden="true" /> </Link > )