How to use Nuqta Icons in React

Nuqta Icons ships as typed React components. You import each icon by name, next to one small NuqtaIcon component.

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 @nuqta/icons-stroke-round

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

3. Use an icon

Every icon is exported as NameIcon. The calendar icon is CalendarIcon, the add circle icon is AddCircleIcon.

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

export function DateButton() {
  return (
    <button>
      <NuqtaIcon icon={CalendarIcon} size={20} color="currentColor" />
      Pick a date
    </button>
  );
}

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.

Switch style or corners

Swap the core package to change the look, without touching the rest of your code. Styles: stroke (Stroke), light (Light), bold (Bold), solid (Filled), duotone (Duotone), twotone (Twotone), tint (Tint), shift (Shift). Corners: round, classic, sharp.

import { CalendarIcon } from '@nuqta/icons-duotone-sharp';

Works the same in Next.js, Remix, Vite and Create React App. In the Next.js App Router, use icons inside client components (files that start with 'use client').