Hugeicons Pro Package Usage

Use this skill when the task is about Hugeicons' paid package path, especially registry authentication and style-package selection.

Scope

• Hugeicons Pro private-registry setup and authentication
• @hugeicons-pro/core-* style-package selection
• installing Pro packages alongside the correct framework wrapper
• mixing free and Pro icons in the same codebase
• CI/CD, token handling, and common install failures
• TypeScript and module-resolution issues for modern ESM packages

Routing cues

• Hugeicons Pro, paid Hugeicons, @hugeicons-pro/core-stroke-rounded, .npmrc, .yarnrc.yml, bunfig.toml, Universal License Key, private registry, npm.hugeicons.com, 404 from npmjs, unauthorized registry, Vercel private registry auth, mixed free and paid icon imports -> use this skill
• public free icon setup, wrapper props, or free-package-only work with @hugeicons/core-free-icons -> use hugeicons-free-package-usage

Workflow

1. Read references/private-registry-and-style-packages.md first.
2. Add project-level auth for @hugeicons-pro using .npmrc, .yarnrc.yml, or bunfig.toml, depending on the package manager.
3. Install the framework wrapper package if it is not already present.
4. Install only the Pro style packages the task actually needs.
5. Import icons from their exact style package and render them through the framework wrapper component.
6. If the task includes CI or install failures, read references/pro-troubleshooting-and-ci.md.
7. If the task is mostly about wrapper props, accessibility, or app-level icon abstractions after install is already solved, use hugeicons-free-package-usage as the companion skill.

Guardrails

• Pro core packages are private-registry packages. Without auth, installs will fall back to npmjs and fail.
• Pro core packages only contain icon assets. You still need the framework wrapper package such as @hugeicons/react or @hugeicons/vue.
• Keep the Universal License Key out of version control. Prefer environment-variable substitution or local config for shared projects and CI.
• Install one or a few styles intentionally. Do not pull in every style family by default.
• Use named imports instead of wildcard imports for tree-shaking and smaller bundles.
• If you use the same icon name from multiple style packages, alias the imports explicitly.
• Keep free and Pro imports separate so the source of each icon is obvious.
• If TypeScript cannot resolve Pro packages, move to a modern module-resolution mode such as bundler, node16, or nodenext.
• When registry errors appear, check for the exact scope @hugeicons-pro, project-level config presence, token freshness, and CI availability of the auth file.

Simple usage example

Project auth:

@hugeicons-pro:registry=https://npm.hugeicons.com/
//npm.hugeicons.com/:_authToken=${NPM_TOKEN}

React Pro usage:

import { HugeiconsIcon } from '@hugeicons/react'
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded'

export function SearchGlyph() {
  return <HugeiconsIcon icon={SearchIcon} size={24} color="currentColor" strokeWidth={1.5} />
}

Swap the wrapper package for the target framework, but keep Pro icon imports in the exact @hugeicons-pro/core-* style package you installed.

Canonical packages

• @hugeicons-pro/core-stroke-rounded
• @hugeicons-pro/core-stroke-sharp
• @hugeicons-pro/core-stroke-standard
• @hugeicons-pro/core-solid-rounded
• @hugeicons-pro/core-solid-sharp
• @hugeicons-pro/core-solid-standard
• @hugeicons-pro/core-bulk-rounded
• @hugeicons-pro/core-duotone-rounded
• @hugeicons-pro/core-duotone-standard
• @hugeicons-pro/core-twotone-rounded

Maintenance

• Snapshot date: 2026-03-10
• Public wrapper snapshot used by the Pro docs: @hugeicons/react@1.1.6, @hugeicons/react-native@1.0.13, @hugeicons/vue@1.0.5, @hugeicons/angular@1.0.7, @hugeicons/svelte@1.1.2
• Pro core snapshot: Hugeicons docs currently route Pro installs through https://npm.hugeicons.com/ and the @hugeicons-pro/core-* style families; package versions were not directly verified because the registry requires customer authentication

References

• references/private-registry-and-style-packages.md
• references/pro-troubleshooting-and-ci.md