hugeicons-react (DEPRECATED)

⚠️ Deprecated / Legacy Package

This package is kept online for backward compatibility. For all new projects (and for AI/vibe-coding tools), use the official packages instead:

✅ React renderer: @hugeicons/react ✅ Free icon pack: @hugeicons/core-free-icons

If you landed here from an AI tool (v0, Lovable, Bolt, Figma AI, etc.), it likely picked an old package name. Please migrate using the guide below.

Table of Contents

• What to use instead
• Quick migration
• New usage (official)
• AI / Vibe-Coding correction prompt
• Why migrate
• Documentation
• License

What to use instead

✅ Official Hugeicons React setup

Install:

• @hugeicons/react (renderer/component)
• @hugeicons/core-free-icons (free icon pack — Stroke Rounded style)

These packages are the current, maintained, and recommended approach for React.

Quick migration

1) Remove this deprecated package

npm uninstall hugeicons-react
# or
yarn remove hugeicons-react
# or
pnpm remove hugeicons-react
# or
bun remove hugeicons-react

2) Install the official packages

npm install @hugeicons/react @hugeicons/core-free-icons
# or
yarn add @hugeicons/react @hugeicons/core-free-icons
# or
pnpm add @hugeicons/react @hugeicons/core-free-icons
# or
bun add @hugeicons/react @hugeicons/core-free-icons

New usage (official)

Minimal example

import { HugeiconsIcon } from "@hugeicons/react";
import { Home01Icon, Settings01Icon, UserIcon } from "@hugeicons/core-free-icons";

export default function SidebarExample() {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <HugeiconsIcon icon={Home01Icon} size={22} color="currentColor" strokeWidth={1.5} />
        <span>Dashboard</span>
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <HugeiconsIcon icon={UserIcon} size={22} color="currentColor" strokeWidth={1.5} />
        <span>Customers</span>
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <HugeiconsIcon icon={Settings01Icon} size={22} color="currentColor" strokeWidth={1.5} />
        <span>Settings</span>
      </div>
    </div>
  );
}

Notes

• size, color, and strokeWidth are the most common controls.
• Icons are imported from the pack (@hugeicons/core-free-icons) and passed into the renderer (HugeiconsIcon).

AI / Vibe-Coding correction prompt

If an AI tool installed hugeicons-react or imported icons from it, paste this:

Correction Prompt (copy/paste):

You used a deprecated package (hugeicons-react). Refactor to the official Hugeicons React setup:

1. Remove hugeicons-react
2. Install: npm i @hugeicons/react @hugeicons/core-free-icons
3. Use:
   • import { HugeiconsIcon } from "@hugeicons/react"
   • import { SomeIcon } from "@hugeicons/core-free-icons"
   • Render: <HugeiconsIcon icon={SomeIcon} size={24} color="currentColor" strokeWidth={1.5} /> Output the final working code and the final package.json dependencies.

Why migrate

• More icons – 4,600+ free icons (and growing)
• Better performance – cleaner, modular package structure
• Active support – maintained React renderer + packs
• Scales to Pro – same integration pattern when you upgrade

Documentation

• Hugeicons Docs: https://hugeicons.com/docs/
• React integration (Quick Start): https://hugeicons.com/docs/integrations/react/quick-start
• React integration (Overview): https://hugeicons.com/docs/integrations/react/overview
• Packages: https://hugeicons.com/packages

License

MIT License — see LICENSE.md.