Skip to content

UI icons docs

Pro setup and your licence key

Your key lets npm, the Figma plugin and this site fetch Pro icons. Set it up once per project and once per build server.

DocsPro setup and licence key

Coming later. The Pro packages and the Figma plugin aren't out yet. Today your key unlocks Pro copying and downloads on this site (see below); the package setup here is how it will work.

Your key

After you pay, your order page shows your licence key once. It starts with iok_. Save it in your password manager: we only keep a fingerprint of it, so we can't show it again. If you lose it, roll a new one (see below).

Lost your order page? Use Find my order and we'll email you the link.

npm

Add a .npmrc file next to your package.json. It reads the key from an environment variable, so there's no secret in it and it's safe to commit.

.npmrc
@iconoven-pro:registry=https://npm.iconoven.com/
//npm.iconoven.com/:_authToken=${ICONOVEN_KEY}

Then set the variable in your shell (add it to ~/.zshrc or your shell profile so it stays) and install:

Terminal
export ICONOVEN_KEY=iok_your_key_here
Terminal
npm i @iconoven-pro/icons-stroke

pnpm

pnpm reads the same .npmrc. Nothing else to do.

Yarn 2 and later

Yarn Berry doesn't read .npmrc. Add the scope to .yarnrc.yml instead:

.yarnrc.yml
npmScopes:
  iconoven-pro:
    npmRegistryServer: "https://npm.iconoven.com"
    npmAuthToken: "${ICONOVEN_KEY}"

Yarn 1 uses .npmrc, like npm.

Bun

Bun reads .npmrc too. If you'd rather keep settings in bunfig.toml:

bunfig.toml
[install.scopes]
"@iconoven-pro" = { token = "$ICONOVEN_KEY", url = "https://npm.iconoven.com/" }

Build servers and hosting

Add ICONOVEN_KEY as a secret wherever your project installs packages:

  • GitHub Actions: Settings, Secrets and variables, Actions, New repository secret. Then pass it to the install step:
.github/workflows/build.yml
- run: npm ci
  env:
    ICONOVEN_KEY: ${{ secrets.ICONOVEN_KEY }}
  • Vercel: Project settings, Environment Variables. Tick every environment that builds.
  • Netlify: Site configuration, Environment variables.
  • Cloudflare Pages: Settings, Variables and Secrets, added as a secret.

Seat keys and the CI key

Pro has one seat, so one key: use it on your own machines and in your own builds.

Team has 5 seats. From your order page, give each person their own key with their name and email. Team also comes with a CI key for build servers. It doesn't use a seat, and it only works for package installs, not for Figma or this site. Using the CI key in pipelines means you never have to share someone's personal key.

Roll a key

If a key leaks, or someone leaves the team, open your order page and choose Roll key. The old key stops working straight away and you get a new one, shown once. Update it in your shell profile and CI secrets.

On this site and in Figma

Paste your key once in the icon browser to copy and download Pro icons; it's kept in your browser. The Figma plugin asks for it the same way. See Figma.

Something not working? See Troubleshooting.

Your cart

Your cart is empty.

Browse icons