Switching from @expo/vector-icons to React Native's official icon packages can cut your bundle size by 4MB or more. Here's how to make the change and why Expo now recommends it.

If you've built React Native apps with Expo, you've probably used @expo/vector-icons. It's been the go-to solution for icons, but that's changing. Expo now recommends switching to the official @react-native-vector-icons packages, and for good reason.

The Problem with @expo/vector-icons

When Expo first created @expo/vector-icons, it solved a real problem. The original react-native-vector-icons didn't work well with Expo projects, especially in Expo Go or with over-the-air updates. So Expo built a wrapper that used expo-font to load icon fonts dynamically.

But this solution came with baggage. To support libraries that expected react-native-vector-icons, Expo had to alias it to @expo/vector-icons using Babel transforms. This created complexity and maintenance overhead.

More importantly, maintaining icon font packages isn't what Expo does best. They focus on platform-level capabilities, not wrapping third-party icon sets.

The New Approach Works Better

The latest @react-native-vector-icons packages (different from the old deprecated react-native-vector-icons package) now integrate directly with expo-font. They call the native font loading API when needed, so they work everywhere: Expo Go, development builds, and production apps.

Since these packages handle Expo integration natively, there's no need for Expo's wrapper anymore. Expo plans to deprecate @expo/vector-icons in a future SDK release.

What You Get from Migrating

Smaller bundles: Apps often accidentally bundle all icon fonts, even when they only use one or two sets. Our test app shrank by 4MB just by changing imports and dependencies.

Latest icon sets: Access to newer versions and icon sets that weren't available in @expo/vector-icons, like Lucide.

Better tooling: You can now type-check icon names when using createIconSetFromFontello or createIconSetFromIcoMoon. Creating custom icon sets is easier with the generator.

Cleaner setup: No more aliasing configuration or version drift between packages.

Making the Switch

Expo provides a codemod that handles most of the migration automatically:

Run npx @react-native-vector-icons/codemod in your project root. Check the changes it makes before committing.

Verify the migration worked by running npx expo doctor. This checks that old packages aren't lingering in your project.

Make sure expo-font is installed and configured properly. Don't add font paths from node_modules/@react-native-vector-icons/ to the expo-font config plugin—this will break your build.

If you use custom fonts, double-check any icons created with createIconSetFromIcoMoon or similar helpers.

Watch Out for These Issues

Font conflicts: If your project mixes old and new icon packages, you might see icons render as ? or empty squares. The expo doctor command warns about these conflicts.

Dependency confusion: Some libraries might still expect the old package names. Most should work fine, but check your dependencies if you see unexpected behavior.

About 60% of apps on EAS Build currently use @expo/vector-icons, so Expo knows this affects many projects. That's why they built the codemod and will maintain the old package during the transition period.

The Migration is Worth It

This change reduces complexity in your project and can significantly shrink your bundle size. It's part of Expo's broader effort to simplify the ecosystem while improving performance.

The new packages give you direct access to the latest icon sets and better development tools. Plus, you're future-proofing your app since Expo will eventually deprecate the old wrapper.

If you run into problems during migration, Expo wants to hear about them. The smoother this transition goes, the better it is for the entire React Native ecosystem.

This post is based on content from the Expo blog. Follow @expo for more React Native content.