simply like:

import { IoSettingsOutline } from 'react-icons/io'
class Home extends Component{
    render(){
        return (
            <div className="app">
                <Link to='/settings'>
                <IoSettingsOutline className="settings-icon"/>
                </Link>
            </div>
       )
    }
};

I get the error:

./src/Home.js Attempted import error: 'IoSettingsOutline' is not exported from 'react-icons/io'.

And what's funny about this is, I've imported every other icon just like this, switching out the name and the ending of 'react-icons/io'

What is happening and how can I fix this?

I've installed the react-icons module correctly with npm, and everything is working great. I can import icons without any errors, but sadly whenever I try and import an icon with Io before it like

simply like:

import { IoSettingsOutline } from 'react-icons/io'
class Home extends Component{
    render(){
        return (
            <div className="app">
                <Link to='/settings'>
                <IoSettingsOutline className="settings-icon"/>
                </Link>
            </div>
       )
    }
};

I get the error:

./src/Home.js Attempted import error: 'IoSettingsOutline' is not exported from 'react-icons/io'.

And what's funny about this is, I've imported every other icon just like this, switching out the name and the ending of 'react-icons/io'

What is happening and how can I fix this?

• javascript
• html
• reactjs
• importerror
• react-icons

• 2 There are different Ionicons versions. You'll either want to import from io (which is Ionicons v4) or io5. Click on the links provided to see which icons are supported for each version. In your case, IoSettingsOutline es from io5. – Matt Carlotta Commented Jul 13, 2021 at 21:24
• Ok that makes sense! – Buddy Bob Commented Jul 13, 2021 at 21:35

2 Answers 2

as @Matt Carlotta said: "There are different Ionicons Ionicons v4 io5"

try:

import { IoSettingsOutline } from 'react-icons/io5'

The below import worked for me,

import { IoSettingsOutline } from 'react-icons/io5'