How to use Nuqta Icons in React Native

The React Native package draws icons with react-native-svg, so they stay sharp on every screen density.

1. Point npm at the Nuqta registry

Create a file called .npmrc in your project root, next to package.json. It works for npm, pnpm and Yarn 1.

@nuqta:registry=https://nuqtaicons.com/npm/

That is all you need for the free Stroke style. For the Pro styles, log in with the email you bought with, copy your access token from the License page, add the token line too, and keep the token itself in an environment variable:

@nuqta:registry=https://nuqtaicons.com/npm/
//nuqtaicons.com/npm/:_authToken=${NUQTA_TOKEN}

export NUQTA_TOKEN=your-access-token

On Vercel, Netlify or any CI, add NUQTA_TOKEN as an environment variable instead. Never paste the token itself into .npmrc.

2. Install a style

Each style and corner shape is its own small package, named @nuqta/icons-<style>-<corner>. Install the component package and the style you want:

npm i @nuqta/react-native @nuqta/icons-stroke-round react-native-svg

With pnpm: pnpm add @nuqta/react-native @nuqta/icons-stroke-round react-native-svg. With Yarn: yarn add @nuqta/react-native @nuqta/icons-stroke-round react-native-svg.

On Expo, install react-native-svg with npx expo install react-native-svg so you get the matching version.

3. Use an icon

import { NuqtaIcon } from '@nuqta/react-native';
import { CalendarIcon } from '@nuqta/icons-stroke-round';

<NuqtaIcon icon={CalendarIcon} size={24} color="#14161C" />

Props

icon: the icon to draw, imported from a core package.
size: width and height in pixels. Default 24.
color: the main color.
accentColor: the second color in the Twotone and Shift styles.
strokeWidth: line weight. The default is 1.5 on a 24px icon.

How to use Nuqta Icons in React Native

1. Point npm at the Nuqta registry

2. Install a style

3. Use an icon

Props

More guides

105K+ icons, ready for your next screen.