Heroicons look mangled when Javascript is disabled

[JoshElias]

I started receiving this issue on first load when loading my app with SSR in a dev environment. It was weird because when the hot reload server would detect a change and reload, the icons would fix themselves. Eventually I was able to reproduce it by disabling Javascript altogether. Seems to only exist when using the Heroicons library.

import { HiOutlineHome, HiOutlineBriefcase, HiOutlineFolder, HiOutlineNewspaper, HiOutlineChat, HiOutlineFire } from "solid-icons/hi";
const options = [
    {
        icon: <HiOutlineHome size={24} />,
    },
    {
        icon: <HiOutlineBriefcase size={24}/>,
    },
    {
        icon: <HiOutlineFolder size={24}/>,
    },
    {
        icon: <HiOutlineFire size={24}/>,
    },
    {
        icon: <HiOutlineNewspaper size={24}/>,
    },
]

function NavOption(props) {
    return (   
        <A href="#">
            {props.icon}
        </A>                   
    )
}

export default function NavBar() {
    return (      
        <nav class="mt-8 flex-1 space-y-1 px-2" aria-label="Sidebar">
              <For each={options}>
                      {(option) => 
                            <NavOption icon={option.icon} />
                       }
               </For>
         </nav>
         ...
     )
}