Skip to content

UI icons docs

Pro setup and your licence key

Your key lets npm and this site fetch Pro icons. Set it up once per project and once per build server. The Swift package needs no key.

DocsPro setup and licence key

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

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.

Swift

The Swift package is free and needs no key. It carries the Stroke style. For Pro styles in an Apple app, download the Pro zip from your order page and add the SVGs you need to your asset catalog, or download any icon as an SF Symbol from its page.

Seat keys and the CI key

Each seat has one key: use it on your own machines and in your own builds.

With more than one seat, give each person their own key with their name and email from your order page. Max 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

Paste your key once in the icon browser to copy and download Pro icons; it's kept in your browser.

Something not working? Write to us.

Your cart

Your cart is empty.

Browse icons