I am getting an error Module not found: Error: Can't resolve '@heroicons/react/solid'

Question

I have run

npm install @heroicons/react

and my package.json looks like this:

"dependencies": {
"@headlessui/react": "^1.6.6",
"@heroicons/react": "^2.0.0",
...

but for some reason I cannot get it to work!

I am still getting this error

Please help me out here. I don't understand what is the issue here?

Answer 1

In version 2.0.0, according to the docs, the icons should be imported from:

• @heroicons/react/20/solid
• @heroicons/react/24/outline
• @heroicons/react/24/solid

For example:

import { AcademicCapIcon } from '@heroicons/react/20/solid';
import { BeakerIcon } from '@heroicons/react/24/outline';
import { PlayIcon } from '@heroicons/react/24/solid';

function Preview() {
  return (
    <div>
      <AcademicCapIcon />
      <BeakerIcon />
      <PlayIcon />
    </div>
  )
}