@theexperiencecompany/gaia-icons

A standalone React icon library extracted from HugeIcons Pro with zero runtime dependencies (except React). All SVG code is directly embedded in React components for optimal tree-shaking and bundle size.

Features

✅ Standalone components - No HugeIcons runtime dependency ✅ Perfect tree-shaking - Only bundle icons you actually use ✅ Individual icon imports - Import specific icons for minimal bundle size ✅ 9 icon styles - All HugeIcons Pro variants included ✅ TypeScript support - Full type definitions ✅ Next.js 13+ ready - Includes "use client" directive

Installation

Install the package using your preferred package manager:

pnpm add @theexperiencecompany/gaia-icons
# or
npm install @theexperiencecompany/gaia-icons
# or
yarn add @theexperiencecompany/gaia-icons

Usage

Import from style barrel (convenient, still tree-shakeable)

import { Home01Icon, UserIcon } from '@theexperiencecompany/gaia-icons/solid-rounded';

<Home01Icon size={24} color="red" />
<UserIcon size={32} strokeWidth={2} />

Import individual icons (optimal tree-shaking)

import { Home01Icon } from "@theexperiencecompany/gaia-icons/solid-rounded/Home01";
import { UserIcon } from "@theexperiencecompany/gaia-icons/solid-rounded/User";

<Home01Icon size={24} />;

Import all styles (not recommended for production)

import { solid_rounded, stroke_rounded } from '@theexperiencecompany/gaia-icons';

<solid_rounded.Home01Icon size={24} />
<stroke_rounded.Home01Icon size={24} />

Icon Props

All icons accept standard SVG props along with:

interface IconProps extends React.SVGProps<SVGSVGElement> {
  size?: number; // Default: 24
  color?: string; // Default: "currentColor"
  strokeWidth?: number | string; // Default: varies by style
  className?: string;
  // ...all other SVG props
}

Available Variants

• solid-rounded - Solid icons with rounded corners
• stroke-rounded - Stroke icons with rounded corners
• solid-sharp - Solid icons with sharp corners
• stroke-sharp - Stroke icons with sharp corners
• solid-standard - Solid icons standard style
• stroke-standard - Stroke icons standard style
• bulk-rounded - Bulk/duo-tone solid icons
• duotone-rounded - Duotone icons
• twotone-rounded - Two-tone icons

Development

Generate icons from HugeIcons Pro

pnpm generate

This extracts actual SVG content from HugeIcons packages and creates standalone React components.

Build the library

pnpm build

Generates optimized ESM and CJS bundles with TypeScript definitions.

How It Works

Unlike wrapper libraries, GAIA Icons extracts the actual SVG code from HugeIcons Pro packages during build time:

1. pnpm generate reads HugeIcons Pro packages
2. Extracts SVG paths and attributes from icon objects
3. Generates standalone React components with embedded SVG
4. Creates both index files (barrel exports) and individual files
5. pnpm build bundles everything with optimal tree-shaking

Result: Zero runtime dependency on HugeIcons, perfect tree-shaking, minimal bundle size.