# Nano Icons – the fastest way to render icons in React Native & Expo > Turn your SVGs into native icons that render like text. Multicolor, typed, inline with text, native tab bar symbols with blazing-fast performance. ## Links - [Docs](https://github.com/software-mansion-labs/react-native-nano-icons#readme) - [GitHub](https://github.com/software-mansion-labs/react-native-nano-icons) - [Contact](https://swmansion.com/contact) ## The fastest way to render icons in React Native & Expo ```bash npm i react-native-nano-icons ``` ## 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. ## FAQ ### Should I just use it for all my SVG assets? No. Nano Icons renders simple icons the fastest, like the ones that make up a design system's icon set. For detailed vector art with hundreds of colors and details, use [expo-image](https://docs.expo.dev/versions/latest/sdk/image/). If you need control over single paths, for example to animate them with [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/), use react-native-svg. ### How is this different from react-native-vector-icons? Those are font-based too, which is why they are fast, and they ship popular monochrome icon packs. Nano Icons builds the font from your own custom SVGs automatically, keeps multicolor icons on every Android version, and types the icon names from your files. ### Should I only use it for multicolor icons? No. Nano Icons renders single-color icons the fastest too, so you get the same performance gain with them. ### Which platforms are supported? iOS, Android, web and tvOS, on React Native's New Architecture. Expo and bare React Native both work. Expo Go shows a plain text fallback, and a development build uses the native renderer. ### Will it grow my app in memory size? No, it shrinks. The 2,191 Material Two-tone SVGs weigh 1 MB. Nano Icons turns them into a 461 KB font plus a 124 KB glyph map, and Android stores the font compressed at 236 KB. ### Can my icons appear in the native tab bar? Yes. The same SVGs become iOS SF Symbols and Android VectorDrawables for native tab bars, headers and drawers. ### Can I ship new icons over the air? Yes, except for the native symbol ones, as they always require native asset linking. For the font-based sets, just mark an icon set for runtime delivery and publish your update as usual. ### Which SVGs won't convert? Filters, masks and embedded bitmaps — fonts can't represent them. For detailed illustrations with hundreds of colors or filters, [expo-image](https://docs.expo.dev/versions/latest/sdk/image/) is the better fit. ### Is React Native Nano Icons free and open source? Yes. Nano Icons is MIT-licensed and built by Software Mansion. The source is on [GitHub](https://github.com/software-mansion-labs/react-native-nano-icons). ## We are Software Mansion React Native core contributors and the team behind Reanimated, Gesture Handler, Screens and react-native-svg. Need help making your app faster? Let's talk. [Contact us](https://swmansion.com/contact)