You're trying to import `@heroicons/react/outline/SearchIcon` from Heroicons v1 but have installed Heroicons v2. Install `@heroicons/react@v1`

Question

i've been trying to use heroicons and keep facing errors i tried installing the '@heroicons/react@v1', i tried importing from "@heroicons/react/outline" and "@heroicons/react/24/outline" too, it sometimes work on phone and if i refresh it doesn't anymore even on phone. i tried using the command prompt separately, didn't help much either. and it keeps saying:

Server Error Error: You're trying to import @heroicons/react/outline/SearchIcon from Heroicons v1 but have installed Heroicons v2. Install @heroicons/react@v1 to resolve this error.

This error happened while generating the page. Any console logs will be displayed in the terminal window. Source components\Header.js (35:25) @ Header

import React from 'react'
import Image from 'next/image'
import {
    SearchIcon,
    PlusCircleIcon,
    UserGroupIcon,
    HeartIcon,
    PaperAirplaneIcon,
    MenuIcon
} from "@heroicons/react/outline";
import {HomeIcon} from "@heroicons/react/solid"

function Header() {
  return (
    <div className='shadow-sm border-b bg-white sticky top-0 z-50'>
        <div className='flex justify-between max-w-6xl mx-5 lg:mx-auto'>
            {/* Left */}
            <div className="relative hidden lg:inline-grid h-24 w-24 cursor-pointer">
                <Image src="https://links.papareact.com/ocw" 
                layout="fill" 
                objectFit='contain'
                />
            </div>
            <div className="relative w-10 lg:hidden flex-shrink-0 cursor-pointer">
                <Image src="https://links.papareact.com/jjm" 
                layout="fill" 
                objectFit='contain'
                />
            </div>

            {/* Middle */}
            <div className='max-w-xs'>
                <div className='relative mt-1 p-3 rounded-md '>
                    <div className='absolute insert-y-0 pl-3 flex items-center pointer-events-none pt-2.5'>
                        <SearchIcon className='h-5 w-5 text-gray-500'/> 
                    </div>
                    <input className="bg-gray-50 w-full pl-10 sm:text-sm border-gray-300 focus:ring-black focus:border-black rounded-md"            type="text" placeholder='Search'/>
                </div>
            </div>
            
            {/* Right */}
            <div className='flex items-center justify-end space-x-4'>
                <MenuIcon className='h-6 w-6 md:hidden cursor-pointer'/>
                <HomeIcon className='navBtn'/>
                <div className='relative navbtn'>
                    <PaperAirplaneIcon className='navBtn rotate-45'/>
                    <div className='hidden first-letter:absolute -top-1 -right-2 text-xs w-5 h-5 bg-red-500 rounded-full flex items-center justify-center text-white'>3</div>
                </div>
                <PlusCircleIcon className='navBtn'/>
                <UserGroupIcon className='navBtn'/>
                <HeartIcon className='navBtn'/>
                <img src='https://media.newstracklive.com/uploads/entertainment-news/bollywood-news/Nov/18/big_thumb/rajpal-yadav-3_5dd2562ba99a5.jpg' alt="profile pic" 
                className='hidden h-10 w-10 rounded-full cursor-pointer'/>
            </div>
        </div>
    </div>
  )
}

export default Header

Answer 1

SearchIcon is called MagnifyingGlassIcon In @heroicons/react/@v2.

So, use MagnifyingGlassIcon for the same functionality.

Bonus tip: import like this =>

import {iconName} from "@heroicons/react/24/solid";
// or
import {iconName} from "@heroicons/react/24/outline";
// 24 denotes 24x24 sized icons newly released by heroicons