Performance
The least work on every thread
We rendered the same 1,000 multicolor icons in a ScrollView with each library. Nano Icons did the least work on both threads and never stalled the main thread.
- react-native-nano-icons5.9× less than expo-image155ms
5.9× less UI-thread work than expo-image
- @expo/vector-icons (IcoMoon)370ms
- expo-image922ms
- react-native-svg292ms
Lower is better. iPhone 15 Pro · iOS 18 · Release build · New Architecture · React Native 0.84 · average of 20 runs, measured with Xcode Instruments. Full method →
Features
DX that keeps pace with design changes
Edit an SVG or drop a new one while the app runs. The icon set font rebuilds in milliseconds without a need for app rebuild.
Link the fonts however you like on production builds.
Your SVGs as native symbols
Native tab bars can't draw neither icon font nor SVGs. Nano Icons turns your custom SVGs into iOS SF Symbols and Android VectorDrawables.
Tinting, symbol effects and Liquid Glass in native tab bars — for icons you designed.
Icons that flow with text
A Nano Icon is text. It sits on the baseline in the middle of a sentence and scales with the user's font-size setting.
Easy use in chat messages, price tags, rating rows, inline badges.
Type-safe icon names
File names become icon names. Your editor autocompletes every icon in the set and flags a typo before it ships.
Add an SVG to the folder. It's a typed Nano Icon.
Ship it with OTA updates
Keep icons inside the app binary, or ship new ones over the air with your next update.
A built-in integrity check spots a font and icon map from different builds, and reports it to your error monitoring.
How multicolor icons work
<Icon name="microscope" />
This is one icon.
A multicolor microscope, rendered by Nano Icons.