Skip to main content

Icons

When searching for an icon pack, use an SVG-based icon library with proper tree shaking, not a font-based library.

Recommendation

  1. Take a folder (or multiple folders) of SVG icons

  2. For each icon, turn it into a component using react-native-svg in its own file.

    a. SVGR is a preferred tool for this. You can create a node script that handles this for you.

  3. Export each icon as its own module for proper tree shaking.

  4. Install react-native-svg (and any library which wraps it) and add them to transpilePackages in next.config.js. You'll need to rebuild your Expo Dev Client if you aren't using Expo Go.

You can also find many of these libraries on GitHub/NPM. Here are two open source examples (but there are many others too):

Those repositories have a generator script which you can fork to create your own icon packs. Or, you can install them from NPM.

If you decide to fork an existing icon repository, please credit and link back to it at the top of your Readme.

The usage will look like this:

tsx
// ✅ tree-shaken, SVG-based icons
import { Person } from '@nandorojo/heroicons'
const Icon = () => <Person />
tsx
// ✅ tree-shaken, SVG-based icons
import { Person } from '@nandorojo/heroicons'
const Icon = () => <Person />

This is better than a single entrypoint for icons like the one used by @expo/vector-icons.

Tamagui

If you are using Tamagui, you can use any of its SVG-based icon packs too.