Icons Are Blurry

[selected-pixel-jameson]

The icons show up really blurry for me. All that I'm doing is copying and pasting the SVG code into my code.

<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-yellow-300" viewBox="0 0 20 20"
                  fill="currentColor">
                  <path fill-rule="evenodd"
                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
                    clip-rule="evenodd" />
                </svg>

[selected-pixel-jameson]

Is no one else having this issue? This happens on two different monitors. One that is very hi-res and one that is not. So it doesn't seem like it's an issue with my monitor.

[MarkBennett]

Same is happening for me. Chrome 103.0.5060.53 on Mac 12.4 and Windows.

[thelovesmith]

I am having a similar issue using:

"@heroicons/react": "^2.0.11",
 "next": "^13.4.10",
 "tailwindcss": "^3.1.8",