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

*i tried installing the '@heroicons/react@v1'* . So have you installed it? — Jonathan Ciapetti, Sep 28 '22 at 04:23
here's my skype if you want to know more. live:.cid.53db31c4d7f5c85c — Ritam Arya, Sep 30 '22 at 00:16

score 7 · Answer 1 · edited Oct 09 '22 at 17:46

7

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

edited Oct 09 '22 at 17:46

juliomalves

42,130
20
150
146

answered Oct 02 '22 at 04:59

faucacius

101
4

score 1 · Answer 2 · answered Dec 15 '22 at 20:34

If anyone facing same issue, this might help, If the component name is not renamed in later version. Source

You'll have to add the size in your import (import { SearchIcon } from '@heroicons/react/24/outline').

As you can read here: https://github.com/tailwindlabs/heroicons#react

score 0 · Answer 3 · answered Mar 02 '23 at 08:41

I'm had the same issues, using version 2.0.16 and have updated my import to the recommended @heroicons/react/24/outline but alas.

I had to update my Rollup file name to rollup.config.mjs :shrug::skin-tone-3:

Otherwise, see the new naming if icons here in case yours has been renamed https://unpkg.com/browse/@heroicons/react@2.0.16/24/outline/

This might have some more useful info if you still have the issue https://bobbyhadz.com/blog/module-not-found-cant-resolve-heroicons-react-solid

score 0 · Answer 4 · answered Mar 04 '23 at 18:24

0

Faced the same issue when working inside a Next.js project. The problem occured when one branch of the project was using v1 and the other branch had already switched to v2.

Solved by removing .next folder, seems that there is a caching problem.

answered Mar 04 '23 at 18:24

Kll Yakovlev

1
2

score 0 · Answer 5 · answered Aug 13 '23 at 13:54

reply to: Install @heroicons/react@v1 to resolve this error.

npm i @heroicons/react@v1

answered Sep 29, 2022 at 20:41 masete Thank you masete! this one WORK for my case. see below for ref:

import {
  SearchIcon,
  MenuIcon,
} from "@heroicons/react/outline";



 <div>
   <SearchIcon className="h-5 w-5 text-gray-500" />
  </div>

score -2 · Answer 6 · answered Sep 29 '22 at 20:41

-2

Install @heroicons/react@v1 to resolve this error. npm i @heroicons/react@v1

answered Sep 29 '22 at 20:41

masete

39
7

i have it installed, still says the same thing – Ritam Arya Sep 30 '22 at 00:11

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

6 Answers6

Linked