Hugeicons Free Package Usage

Use this skill when the task is about Hugeicons' public npm packages rather than Pro/private-registry setup.

Scope

• public Hugeicons package setup for React, React Native, Vue, Angular, and Svelte
• @hugeicons/core-free-icons installation and named imports
• wrapper component usage: HugeiconsIcon or HugeiconsIconComponent
• common wrapper props: icon, altIcon, showAlt, size, color, strokeWidth
• accessibility, tree-shaking, and app-level icon wrapper patterns

Routing cues

• free Hugeicons, @hugeicons/core-free-icons, @hugeicons/react, @hugeicons/vue, @hugeicons/angular, @hugeicons/svelte, @hugeicons/react-native, HugeiconsIcon, icon wrapper props, free icon setup, icon-only buttons, tree-shaking -> use this skill
• private registry, .npmrc, .yarnrc.yml, bunfig.toml, license key, @hugeicons-pro/core-*, CI auth, 404 from npm registry -> use hugeicons-pro-package-usage

Workflow

1. Read references/framework-matrix.md first to choose the right framework wrapper.
2. Install the framework wrapper package and @hugeicons/core-free-icons.
3. Import icons from @hugeicons/core-free-icons, not from the wrapper package.
4. Render icons with the framework wrapper component and only the props you actually need.
5. If the task needs app-wide icon conventions, accessibility, or bundle-size guidance, read references/free-usage-patterns.md.
6. If the task needs more than the free Stroke Rounded pack or requires private-registry auth, switch to hugeicons-pro-package-usage.

Guardrails

• The free package is the public starter path and only covers the free icon set in the Stroke Rounded style.
• Keep wrapper-package choice framework-specific: React uses @hugeicons/react, React Native uses @hugeicons/react-native, Vue uses @hugeicons/vue, Angular uses @hugeicons/angular, and Svelte uses @hugeicons/svelte.
• Do not import icons from the wrapper package itself; import them from @hugeicons/core-free-icons.
• Prefer named icon imports over wildcard imports so bundlers can tree-shake unused icons.
• strokeWidth is only meaningful for stroke icons; do not expect it to affect solid styles later if a task upgrades to Pro.
• Use currentColor unless the task explicitly wants a fixed color token.
• For icon-only controls, pair the icon with visible text or an accessible label.
• When toggling between two icon states, prefer altIcon + showAlt over duplicating wrapper instances.
• Respect framework prop differences: React uses className, Vue/Svelte use class, and Angular passes the icon via [icon] on HugeiconsIconComponent.

Simple usage example

React free setup:

import { HugeiconsIcon } from '@hugeicons/react'
import { Notification03Icon } from '@hugeicons/core-free-icons'

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

Adapt the wrapper import to the target framework, but keep the icon import source as @hugeicons/core-free-icons.

Canonical packages

• @hugeicons/core-free-icons
• @hugeicons/react
• @hugeicons/react-native
• @hugeicons/vue
• @hugeicons/angular
• @hugeicons/svelte

Maintenance

• Snapshot date: 2026-03-10
• Public package snapshot: @hugeicons/core-free-icons@4.0.0, @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
• Docs snapshot: Hugeicons integration docs still split each framework into Overview, Quick Start, Wrapper, Best Practices, Examples, and Pro

References

• references/framework-matrix.md
• references/free-usage-patterns.md