A Simple Wrapper for @expo/vector-icons in React Native Projects

#reactnative #react #mobile

🖐

If you work with icons in Expo React Native projects, you're probably familiar with writing:

import { AntDesign, MaterialIcons, Ionicons } from '@expo/vector-icons'

Some context: @expo/vector-icons is a compatibility layer around @oblador/react-native-vector-icons (the entire community uses this) designed to work with the Expo asset system. If you're using bare React Native without Expo, you're likely using react-native-vector-icons directly and this package isn't for you.

But for Expo developers, I got tired of switching between documentation to figure out which icon belonged to which set and then importing the set. So I created a simple tiny wrapper:

import { Icon } from 'react-native-unified-icons'

<Icon select={{ from: "antdesign", name: "heart" }} size={24} />
<Icon select={{ from: "material-icons", name: "directions-bike" }} size={24} />
<Icon select={{ from: "ionicons", name: "airplane" }} size={24} />

Features

One import for all icon sets in @expo/vector-icons
TypeScript autocomplete for both icon sets and icon names
NativeWind compatible (className="text-primary")
Supports all 14 icon libraries available in @expo/vector-icons

Installation

npm install react-native-unified-icons
# or
yarn add react-native-unified-icons

Using with NativeWind

If you're using NativeWind for styling, you can use Tailwind classes:

<Icon 
  select={{ from: "antdesign", name: "heart" }}
  className="!text-primary"  // Uses your theme's primary color
  size={24}
/>

// Using important modifier
<Icon 
  select={{ from: "material-icons", name: "favorite" }}
  className="!text-secondary"  // Forces the secondary color
  size={24}
/>

Why I Made This

I'm currently working on a mobile app with Expo and I found myself constantly checking icon documentation to remember which icon was from which set. It became a small but constant friction. This wrapper simply makes the process more intuitive and provides better TypeScript support.

The package is tiny and has no additional dependencies beyond @expo/vector-icons (which you're already using in your Expo project).

Check it out: