Huge icon at first render on NextJS

[yafkari]

Similarly to this issue, I have my icon being huge and black (so without the styles i guess) at first render, then afterwards it takes the size and the color I gave it (with tailwind classes).

Example code:

<div className="relative">
    <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
        <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
    </div>
    <input
        ...
    />
</div>

Not sure if this happens only in dev mode but didn't found anyone mentioning it for heroicons so still wanted to create this.

[adamwathan]

Hey! It sounds to me like your CSS is being loaded in an unusual way. Are you using the Tailwind CDN build by any chance? Or doing something that causes the CSS to be loaded after the initial document is loaded, and not as a render blocking resource?

[yafkari]

Not really, I just followed this guide, and everything works correctly, it is really just the icons that sometimes pop and that's a bit annoying when you want to see the state of the app while it's loading but the only thing you see is the icon 😄

[dnswd]

Hey I'm having the same issue on NextJS 15. I am using tailwind but not as CDN. Do you happen to find a workaround? @yafkari

[yafkari]

hey its been a while so i don't recall exactly what i did or if i did something at all. But from what i remember, it was only happening in dev mode so when deployed you should be fine.