> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/react-icons/react-icons/llms.txt
> Use this file to discover all available pages before exploring further.

# Migrating from v4 to v5

> Learn about changes and improvements in React Icons v5

# Migrating from Version 4 to Version 5

Version 5 of React Icons is largely compatible with version 4, with some updated icon libraries and minor improvements. Most projects can upgrade with minimal changes.

## What's New in v5

<CardGroup cols={2}>
  <Card title="Updated Icon Libraries" icon="arrows-rotate">
    Many icon packs have been updated to their latest versions
  </Card>

  <Card title="New Icon Packs" icon="square-plus">
    Additional icon libraries have been added
  </Card>

  <Card title="Improved TypeScript" icon="code">
    Enhanced type definitions and stricter typing
  </Card>

  <Card title="Performance" icon="gauge-high">
    Build optimizations and smaller bundle sizes
  </Card>
</CardGroup>

## Breaking Changes

<Info>
  Version 5 maintains backward compatibility with v4 for most use cases. The changes below primarily affect specific icon packs.
</Info>

### Updated Icon Pack Versions

The following icon packs have been updated to newer versions:

| Icon Pack      | v4 Version | v5 Version | Notable Changes             |
| -------------- | ---------- | ---------- | --------------------------- |
| Font Awesome 6 | 6.4.x      | 6.5.x      | New icons added             |
| Lucide         | 0.x        | 5.1.x      | Icon names may have changed |
| Tabler Icons   | 2.x        | 3.2.x      | New variants added          |
| Phosphor Icons | 2.0.x      | 2.1.x      | Additional icons            |
| Simple Icons   | 11.x       | 12.14.x    | Brand icon updates          |

### Icon Name Changes

Some icon libraries have renamed or removed certain icons in their updates:

<Warning>
  If you're using Lucide icons, check the [Lucide changelog](https://github.com/lucide-icons/lucide/releases) as some icon names may have changed between versions.
</Warning>

## Migration Steps

<Steps>
  <Step title="Update the package version">
    Update react-icons to version 5:

    <CodeGroup>
      ```bash npm theme={null}
      npm install react-icons@latest
      ```

      ```bash yarn theme={null}
      yarn add react-icons@latest
      ```

      ```bash pnpm theme={null}
      pnpm add react-icons@latest
      ```
    </CodeGroup>
  </Step>

  <Step title="Test your application">
    Run your test suite to ensure all icons still render:

    ```bash theme={null}
    npm test
    ```

    Pay special attention to any tests involving the updated icon packs.
  </Step>

  <Step title="Check for icon availability">
    If any icons are not rendering, they may have been renamed or removed. Check the specific icon pack's changelog:

    * [Font Awesome 6 Changelog](https://github.com/FortAwesome/Font-Awesome/blob/6.x/CHANGELOG.md)
    * [Lucide Releases](https://github.com/lucide-icons/lucide/releases)
    * [Tabler Icons Changelog](https://github.com/tabler/tabler-icons/releases)
  </Step>

  <Step title="Update TypeScript types (if needed)">
    If you have custom type definitions that reference icon components, you may need to update them:

    ```tsx theme={null}
    import { IconType } from "react-icons";

    // Your icon type definitions should continue to work
    type IconProps = {
      icon: IconType;
      size?: number;
    };
    ```
  </Step>

  <Step title="Build and deploy">
    Build your application and verify everything works:

    ```bash theme={null}
    npm run build
    ```
  </Step>
</Steps>

## New Features

### Additional Icon Libraries

Version 5 maintains support for 30+ icon packs. Check the [All Libraries](/icon-libraries/all-libraries) page for the complete list.

### Improved Build Performance

Version 5 includes optimizations that may reduce your build times:

```bash theme={null}
# Before (v4)
Build time: 45s

# After (v5)
Build time: 38s
```

<Tip>
  The actual improvement depends on your project size and which icons you're using.
</Tip>

### Enhanced TypeScript Support

TypeScript users benefit from improved type inference:

```tsx theme={null}
import { IconContext } from "react-icons";
import { FaBeer } from "react-icons/fa";

// Better type inference for context values
<IconContext.Provider value={{ 
  color: "blue",  // string type inferred
  size: "2em"     // string | number
}}>
  <FaBeer />
</IconContext.Provider>
```

## Common Issues

<AccordionGroup>
  <Accordion title="Icon not found after upgrade">
    The icon may have been renamed or removed in the newer version of its pack. Check the icon pack's changelog and find the new name or a suitable replacement.

    ```jsx theme={null}
    // Example: If an icon was renamed
    import { LuOldName } from "react-icons/lu";  // ❌ May not exist
    import { LuNewName } from "react-icons/lu";  // ✅ Check documentation
    ```
  </Accordion>

  <Accordion title="Bundle size increased">
    Ensure you're using named imports and that your bundler supports tree-shaking:

    ```jsx theme={null}
    // ✅ Correct
    import { FaBeer } from "react-icons/fa";

    // ❌ Wrong - imports everything
    import * as Icons from "react-icons/fa";
    ```

    See [Performance Optimization](/guides/performance) for more tips.
  </Accordion>

  <Accordion title="TypeScript errors">
    Clear your TypeScript cache and rebuild:

    ```bash theme={null}
    rm -rf node_modules/.cache
    npm run build
    ```
  </Accordion>
</AccordionGroup>

## Rollback if Needed

If you encounter issues, you can temporarily roll back to v4:

<CodeGroup>
  ```bash npm theme={null}
  npm install react-icons@^4.0.0
  ```

  ```bash yarn theme={null}
  yarn add react-icons@^4.0.0
  ```

  ```bash pnpm theme={null}
  pnpm add react-icons@^4.0.0
  ```
</CodeGroup>

<Warning>
  Make sure to report any issues on the [GitHub repository](https://github.com/react-icons/react-icons/issues) to help improve future releases.
</Warning>

## Next Steps

<CardGroup cols={2}>
  <Card title="Changelog" icon="clock-rotate-left" href="/resources/changelog">
    View detailed version history
  </Card>

  <Card title="FAQ" icon="question" href="/resources/faq">
    Common questions and answers
  </Card>
</CardGroup>