Pro packages

The free npm packages contain Line. With a Pro plan, the Pro styles install from HubToolify's own npm registry, under the @hubtoolify-pro scope. The registry checks your plan on every install.

1. Sign in once#

Use your HubToolify email and password. This saves a read-only token for the @hubtoolify-pro scope in your own npm config. The token is never printed.

npx @hubtoolify/icons login

2. Point the scope at HubToolify#

Add one line to your project's .npmrc. It holds no secret, so it is safe to commit:

@hubtoolify-pro:registry=https://hubtoolify.com/api/npm/

3. Install and import#

npm install @hubtoolify-pro/icons-react         # React components, one subpath per style
npm install @hubtoolify-pro/icons-react-native  # React Native components, one path per icon
npm install @hubtoolify-pro/icons-svelte        # Svelte components, one subpath per style
npm install @hubtoolify-pro/icons-angular       # Angular <hti-pro-icon>, one subpath per style
npm install @hubtoolify-pro/icons               # the Pro CSS kit and SVG files

import { HtiHome } from '@hubtoolify-pro/icons-react/slab';

<HtiHome size={32} color="#1766f2" />

<script>
  import { HtiHome } from '@hubtoolify-pro/icons-svelte/slab';
</script>

<HtiHome size={32} color="#1766f2" />

import { HtiProIcon } from '@hubtoolify-pro/icons-angular';
import { htiHome } from '@hubtoolify-pro/icons-angular/slab';

@Component({
  standalone: true,
  imports: [HtiProIcon],
  template: `<hti-pro-icon [icon]="home" [size]="32" color="#1766f2" />`,
})
export class NavComponent {
  home = htiHome;
}

import HtiHome from '@hubtoolify-pro/icons-react-native/slab/home';

<HtiHome size={32} color="#1766f2" />

Each Pro style is its own subpath, such as /slab, /mellow or /pixel, in every package. React Native imports one icon per path (/slab/home), because Metro does not drop unused icons. The components take size, color, secondaryColor and secondaryOpacity (for the two-tone styles) and title, like the free React, React Native, Svelte and Angular packages. Jass and Lineal keep their fixed palette, and Duo and Flat start in each icon's own colour. 3D is a rendered image, not a component: download it from the icon library.

Flutter uses pub, not npm. The Pro package, hubtoolify_icons_pro, comes from HubToolify's own pub repository and works with a Flutter token from your Connected apps page. See Flutter: Pro styles.

Tokens#

• A token lasts 365 days and stops working when the plan ends.
• See and revoke your tokens on your account's npm page. Changing your password revokes all of them.
• A token belongs to the person whose plan it is. Do not share it with other people.

Builds and CI#

The registry checks the plan on every install, so a build fails if the plan has lapsed. The sturdiest setup is to pack the version you use once and keep the tarball in your private repository or private registry (never a public one: the licence does not allow Pro files there):

npm pack @hubtoolify-pro/icons-react
npm install ./hubtoolify-pro-icons-react-*.tgz

To install from the registry in CI instead, print a token and store it as a CI secret. Treat it like a password:

npx @hubtoolify/icons login --print-token