Hugeicons

https://hugeicons.com/docs
Admin
Hugeicons is a modern icon library offering 46,000+ icons across 10 unique styles with integrations...
Tokens:96,440
Snippets:930
Trust Score:9
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install and import a core icon package

Source: https://hugeicons.com/docs/core-packages

Two-step quick start: install a style package with npm, then import an icon. Requires a framework-specific package like @hugeicons/react alongside the core package.

```bash
# 1. Install your preferred style package
npm install @hugeicons-pro/core-stroke-rounded
 
# 2. Import the icon you need
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded'
```

--------------------------------

### Install with Dart Pub Get

Source: https://hugeicons.com/docs/integrations/flutter

Alternative command to install dependencies using Dart's package manager.

```bash
dart pub get
```

--------------------------------

### Install with Flutter Pub Get

Source: https://hugeicons.com/docs/integrations/flutter

Runs the Flutter package manager to install dependencies after adding the package.

```bash
flutter pub get
```

--------------------------------

### Install duotone, twotone, and bulk style Pro icon packages

Source: https://hugeicons.com/docs/integrations/angular/pro

Install the duotone, twotone, and bulk style Pro icon packages. You can install one or more of these packages.

```bash
npm install @hugeicons-pro/core-duotone-rounded
npm install @hugeicons-pro/core-duotone-standard
npm install @hugeicons-pro/core-twotone-rounded
npm install @hugeicons-pro/core-bulk-rounded
```

```bash
pnpm add @hugeicons-pro/core-duotone-rounded
pnpm add @hugeicons-pro/core-duotone-standard
pnpm add @hugeicons-pro/core-twotone-rounded
pnpm add @hugeicons-pro/core-bulk-rounded
```

```bash
yarn add @hugeicons-pro/core-duotone-rounded
yarn add @hugeicons-pro/core-duotone-standard
yarn add @hugeicons-pro/core-twotone-rounded
yarn add @hugeicons-pro/core-bulk-rounded
```

```bash
bun add @hugeicons-pro/core-duotone-rounded
bun add @hugeicons-pro/core-duotone-standard
bun add @hugeicons-pro/core-twotone-rounded
bun add @hugeicons-pro/core-bulk-rounded
```

--------------------------------

### Example prompts that route through the skill

Source: https://hugeicons.com/docs/integrations/skill

Once installed, these prompts automatically route through the skill. They show typical tasks: adding a search icon, replacing emoji with Hugeicons, and setting up Hugeicons in Flutter.

```text
"Add a search input with a Hugeicons search icon to the homepage."
```

```text
"Replace the emoji in the sidebar nav with Hugeicons equivalents."
```

```text
"Set up Hugeicons in this Flutter app and use a home icon in the bottom nav."
```

--------------------------------

### Example user prompts for Hugeicons MCP

Source: https://hugeicons.com/docs/integrations/mcp

Sample prompts a user might type in an MCP-compatible IDE to install Hugeicons on various platforms and add icons.

```text
“Install Hugeicons on React with their free icon package and add a search icon to the homepage with a search input using Hugeicons MCP.”
```

```text
“Install Hugeicons in a Vue 3 project and add a profile avatar icon to the top navigation using Hugeicons MCP.”
```

```text
“Set up Hugeicons Pro in a React Native app and show different styles for a settings icon using Hugeicons MCP.”
```

```text
“Use Hugeicons as a web font on a plain HTML page and add a heart icon next to a ‘Favorite’ button using Hugeicons MCP.”
```

--------------------------------

### Install @hugeicons/solid-js with Bun

Source: https://hugeicons.com/docs/integrations/solid-js/pro

Install the SolidJS component package using Bun.

```bash
bun add @hugeicons/solid-js
```

--------------------------------

### Install multiple style packages with bun

Source: https://hugeicons.com/docs/core-packages

Install both stroke-rounded and solid-rounded packages using bun.

```bash
bun add @hugeicons-pro/core-stroke-rounded @hugeicons-pro/core-solid-rounded
```

--------------------------------

### Install Solid Style Pro Packages with Bun

Source: https://hugeicons.com/docs/integrations/solid-js/pro

Install the three solid-style Pro icon packages using Bun.

```bash
bun add @hugeicons-pro/core-solid-rounded
bun add @hugeicons-pro/core-solid-sharp
bun add @hugeicons-pro/core-solid-standard
```

--------------------------------

### Install @hugeicons/core-free-icons with bun

Source: https://hugeicons.com/docs/integrations/react-native/quick-start

Install the free icon pack using bun. This is an alternative to npm.

```bash
bun add @hugeicons/core-free-icons
```

--------------------------------

### Install multiple style packages with npm

Source: https://hugeicons.com/docs/core-packages

Install both stroke-rounded and solid-rounded packages using npm.

```bash
npm install @hugeicons-pro/core-stroke-rounded @hugeicons-pro/core-solid-rounded
```

--------------------------------

### Install Solid Style Pro Packages with npm

Source: https://hugeicons.com/docs/integrations/solid-js/pro

Install the three solid-style Pro icon packages using npm.

```bash
npm install @hugeicons-pro/core-solid-rounded
npm install @hugeicons-pro/core-solid-sharp
npm install @hugeicons-pro/core-solid-standard
```

--------------------------------

### Install @hugeicons-pro/core-stroke-rounded with bun

Source: https://hugeicons.com/docs/core-packages

Install the stroke-rounded icon package using bun.

```bash
bun add @hugeicons-pro/core-stroke-rounded
```

--------------------------------

### Install @hugeicons/solid-js with pnpm

Source: https://hugeicons.com/docs/integrations/solid-js/pro

Install the SolidJS component package using pnpm.

```bash
pnpm add @hugeicons/solid-js
```

--------------------------------

### Install solid style Pro icon packages

Source: https://hugeicons.com/docs/integrations/angular/pro

Install the solid style Pro icon packages. You can install one or more of the rounded, sharp, and standard variants.

```bash
npm install @hugeicons-pro/core-solid-rounded
npm install @hugeicons-pro/core-solid-sharp
npm install @hugeicons-pro/core-solid-standard
```

```bash
pnpm add @hugeicons-pro/core-solid-rounded
pnpm add @hugeicons-pro/core-solid-sharp
pnpm add @hugeicons-pro/core-solid-standard
```

```bash
yarn add @hugeicons-pro/core-solid-rounded
yarn add @hugeicons-pro/core-solid-sharp
yarn add @hugeicons-pro/core-solid-standard
```

```bash
bun add @hugeicons-pro/core-solid-rounded
bun add @hugeicons-pro/core-solid-sharp
bun add @hugeicons-pro/core-solid-standard
```

--------------------------------

### Install multiple style packages with pnpm

Source: https://hugeicons.com/docs/core-packages

Install both stroke-rounded and solid-rounded packages using pnpm.

```bash
pnpm add @hugeicons-pro/core-stroke-rounded @hugeicons-pro/core-solid-rounded
```

--------------------------------

### Install migration tool globally

Source: https://hugeicons.com/docs/migration-tool

Install the migration tool globally via npm.

```bash
npm install -g @hugeicons/migrate
```

--------------------------------

### Install @hugeicons/solid-js with Yarn

Source: https://hugeicons.com/docs/integrations/solid-js/pro

Install the SolidJS component package using Yarn.

```bash
yarn add @hugeicons/solid-js
```

--------------------------------

### Install Stroke Style Pro Packages with Bun

Source: https://hugeicons.com/docs/integrations/solid-js/pro

Install the three stroke-style Pro icon packages using Bun.

```bash
bun add @hugeicons-pro/core-stroke-rounded
bun add @hugeicons-pro/core-stroke-sharp
bun add @hugeicons-pro/core-stroke-standard
```

--------------------------------

### Install multiple style packages with yarn

Source: https://hugeicons.com/docs/core-packages

Install both stroke-rounded and solid-rounded packages using yarn.

```bash
yarn add @hugeicons-pro/core-stroke-rounded @hugeicons-pro/core-solid-rounded
```

--------------------------------

### Install Solid Style Pro Packages with pnpm

Source: https://hugeicons.com/docs/integrations/solid-js/pro

Install the three solid-style Pro icon packages using pnpm.

```bash
pnpm add @hugeicons-pro/core-solid-rounded
pnpm add @hugeicons-pro/core-solid-sharp
pnpm add @hugeicons-pro/core-solid-standard
```

--------------------------------

### Install @hugeicons/solid-js

Source: https://hugeicons.com/docs/integrations/solid-js/quick-start

Install the SolidJS component package using your preferred package manager.

```bash
npm install @hugeicons/solid-js
```

```bash
pnpm add @hugeicons/solid-js
```

```bash
yarn add @hugeicons/solid-js
```

```bash
bun add @hugeicons/solid-js
```

--------------------------------

### Apply dry run example

Source: https://hugeicons.com/docs/migration-tool/commands

Dry run example: previews changes without applying them.

```bash
npx @hugeicons/migrate apply ./my-react-app
```

--------------------------------

### Install Solid Style Pro Packages with Yarn

Source: https://hugeicons.com/docs/integrations/solid-js/pro

Install the three solid-style Pro icon packages using Yarn.

```bash
yarn add @hugeicons-pro/core-solid-rounded
yarn add @hugeicons-pro/core-solid-sharp
yarn add @hugeicons-pro/core-solid-standard
```

--------------------------------

### Install @hugeicons/core-free-icons with pnpm

Source: https://hugeicons.com/docs/integrations/react-native/quick-start

Install the free icon pack using pnpm. This is an alternative to npm.

```bash
pnpm add @hugeicons/core-free-icons
```

--------------------------------

### Install @hugeicons/core-free-icons with yarn

Source: https://hugeicons.com/docs/integrations/react-native/quick-start

Install the free icon pack using yarn. This is an alternative to npm.

```bash
yarn add @hugeicons/core-free-icons
```

--------------------------------

### Install Stroke Style Pro Packages with npm

Source: https://hugeicons.com/docs/integrations/solid-js/pro

Install the three stroke-style Pro icon packages using npm.

```bash
npm install @hugeicons-pro/core-stroke-rounded
npm install @hugeicons-pro/core-stroke-sharp
npm install @hugeicons-pro/core-stroke-standard
```

--------------------------------

### Manual installation of Hugeicons packages

Source: https://hugeicons.com/docs/migration-tool/troubleshooting

Commands to manually install @hugeicons/react and @hugeicons/core-free-icons using npm, pnpm, or yarn.

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

--------------------------------

### Install Svelte component package with bun

Source: https://hugeicons.com/docs/integrations/svelte/pro

Install the base Svelte icon component package using bun.

```bash
bun add @hugeicons/svelte
```

--------------------------------

### Install Stroke Style Pro Packages with Yarn

Source: https://hugeicons.com/docs/integrations/solid-js/pro

Install the three stroke-style Pro icon packages using Yarn.

```bash
yarn add @hugeicons-pro/core-stroke-rounded
yarn add @hugeicons-pro/core-stroke-sharp
yarn add @hugeicons-pro/core-stroke-standard
```

--------------------------------

### Plan example with output

Source: https://hugeicons.com/docs/migration-tool/commands

Example of running the plan command on a React project, followed by its output showing icon mappings, files to modify, and required packages.

```bash
npx @hugeicons/migrate plan ./my-react-app
```

```text
Migration Plan

Icon Mappings:
  Home → Home01Icon
  Settings → Settings01Icon
  User → UserIcon
  Bell → Notification01Icon

Files to modify:
  - src/components/Header.tsx (4 icons)
  - src/components/Sidebar.tsx (8 icons)
  - src/pages/Dashboard.tsx (12 icons)

Required packages:
  - @hugeicons/react
  - @hugeicons/core-free-icons
```

--------------------------------

### Revert example with output

Source: https://hugeicons.com/docs/migration-tool/commands

Example of running the revert command on a React project, followed by its output showing available backups and successful restoration.

```bash
npx @hugeicons/migrate revert ./my-react-app
```

```text
Available Backups:

1. 2024-01-15_14-30-25 (2 hours ago)
2. 2024-01-15_10-15-10 (6 hours ago)
3. 2024-01-14_16-45-00 (yesterday)

Select backup to restore: 1

Successfully restored from backup
```

--------------------------------

### Install @hugeicons/vue with npm, pnpm, yarn, or bun

Source: https://hugeicons.com/docs/integrations/vue/quick-start

Install the Vue component package using your preferred package manager. The commands are alternatives; choose one based on your setup.

```bash
npm install @hugeicons/vue
```

```bash
pnpm add @hugeicons/vue
```

```bash
yarn add @hugeicons/vue
```

```bash
bun add @hugeicons/vue
```

--------------------------------

### Install Duotone, Twotone & Bulk Pro Packages with Bun

Source: https://hugeicons.com/docs/integrations/solid-js/pro

Install the duotone, twotone, and bulk style Pro icon packages using Bun.

```bash
bun add @hugeicons-pro/core-duotone-rounded
bun add @hugeicons-pro/core-duotone-standard
bun add @hugeicons-pro/core-twotone-rounded
bun add @hugeicons-pro/core-bulk-rounded
```

--------------------------------

### GET /v1/icons

Source: https://hugeicons.com/docs/api-reference

Code examples for calling the HugeIcons API endpoint to retrieve icons, demonstrating authentication with an API key.

```APIDOC
## GET /v1/icons

### Description
Retrieves a list of icons from the HugeIcons API. Requires an API key for authentication.

### Method
GET

### Endpoint
https://api.hugeicons.com/v1/icons

### Authentication
- **x-api-key** (string) - Required - API key provided in the request header.

### Request Example
```
GET /v1/icons HTTP/1.1
Host: api.hugeicons.com
x-api-key: YOUR_API_KEY
```

### Response
#### Success Response (200)
- Returns a JSON object containing icon data.

#### Response Example
```json
{
  "data": []
}
```

### Error Handling
- **400** - Bad Request - Invalid parameters
- **401** - Unauthorized - Invalid or missing API key
- **404** - Not Found - Resource not found
- **429** - Too Many Requests - Rate limit exceeded
- **500** - Internal Server Error
```

--------------------------------

### Scan example with output

Source: https://hugeicons.com/docs/migration-tool/commands

Example of running the scan command on a React project, followed by its output showing detected libraries and files with icons.

```bash
npx @hugeicons/migrate scan ./my-react-app
```

```text
Scanning project...
Found lucide-react (42 usages in 8 files)
Found @heroicons/react (15 usages in 3 files)

Files with icons:
  - src/components/Header.tsx
  - src/components/Sidebar.tsx
  - src/pages/Dashboard.tsx
  ...
```

--------------------------------

### Quick Start: Display a Single-Layer Icon

Source: https://hugeicons.com/docs/integrations/swift

Basic setup for displaying a single-layer icon in a SwiftUI view. Imports SwiftUI, HugeiconsCore, and the chosen style module, then uses HugeiconsText with the style's font and a foreground color.

```swift
import SwiftUI
import HugeiconsCore
import HugeiconsSolidRounded
 
struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            // Single-layer icon
            HugeiconsText(
                "home-01",
                font: HugeiconsSolidRounded.hugeiconsFont(size: 32)
            )
            .foregroundColor(.blue)
        }
    }
}
```

--------------------------------

### Complete icon container system with CSS and HTML

Source: https://hugeicons.com/docs/icons-for-web/styling

A complete example combining multiple styling techniques: a reusable .icon-container class with hover effects and color variants (primary, success, danger) paired with the corresponding HTML markup. Use this as a starting point for consistent icon styling across your site.

```css
/* Icon container system */
.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 12px;
    background-color: #f3f4f6;
    transition: all 0.2s ease;
}
 
.icon-container:hover {
    background-color: #e5e7eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
 
.icon-container i {
    font-size: 24px;
    color: #1f2937;
}
 
.icon-container.primary i {
    color: #3b82f6;
}
 
.icon-container.success i {
    color: #10b981;
}
 
.icon-container.danger i {
    color: #ef4444;
}
```

```html
<div class="icon-container primary">
    <i class="hgi-stroke hgi-user"></i>
</div>
 
<div class="icon-container success">
    <i class="hgi-stroke hgi-check"></i>
</div>
 
<div class="icon-container danger">
    <i class="hgi-stroke hgi-alert"></i>
</div>
```

--------------------------------

### Install Hugeicons React and Style Package (Using the Icon Library)

Source: https://hugeicons.com/docs/features/icon-library

Install the framework component and a preferred style package as part of the usage steps.

```bash
# Install the framework component
npm install @hugeicons/react
 
# Install your preferred style package
npm install @hugeicons-pro/core-stroke-rounded
```

--------------------------------

### Install Duotone, Twotone & Bulk Pro Packages with pnpm

Source: https://hugeicons.com/docs/integrations/solid-js/pro

Install the duotone, twotone, and bulk style Pro icon packages using pnpm.

```bash
pnpm add @hugeicons-pro/core-duotone-rounded
pnpm add @hugeicons-pro/core-duotone-standard
pnpm add @hugeicons-pro/core-twotone-rounded
pnpm add @hugeicons-pro/core-bulk-rounded
```

--------------------------------

### Install stroke style Pro icon packages

Source: https://hugeicons.com/docs/integrations/angular/pro

Install the stroke style Pro icon packages. You can install one or more of the rounded, sharp, and standard variants.

```bash
npm install @hugeicons-pro/core-stroke-rounded
npm install @hugeicons-pro/core-stroke-sharp
npm install @hugeicons-pro/core-stroke-standard
```

```bash
pnpm add @hugeicons-pro/core-stroke-rounded
pnpm add @hugeicons-pro/core-stroke-sharp
pnpm add @hugeicons-pro/core-stroke-standard
```

```bash
yarn add @hugeicons-pro/core-stroke-rounded
yarn add @hugeicons-pro/core-stroke-sharp
yarn add @hugeicons-pro/core-stroke-standard
```

```bash
bun add @hugeicons-pro/core-stroke-rounded
bun add @hugeicons-pro/core-stroke-sharp
bun add @hugeicons-pro/core-stroke-standard
```

--------------------------------

### Command line mode commands

Source: https://hugeicons.com/docs/migration-tool/quick-start

Command line mode examples for the Hugeicons migration tool. Shows how to scan a project, generate a plan, preview changes, apply changes, and revert to a backup.

```bash
# Scan your project for icon usage
npx @hugeicons/migrate scan ./my-project
 
# Generate a migration plan
npx @hugeicons/migrate plan ./my-project
 
# Preview changes (dry run)
npx @hugeicons/migrate apply ./my-project
 
# Apply changes
npx @hugeicons/migrate apply ./my-project --write
 
# Revert to backup
npx @hugeicons/migrate revert ./my-project
```

--------------------------------

### Install Duotone, Twotone & Bulk Pro Packages with Yarn

Source: https://hugeicons.com/docs/integrations/solid-js/pro

Install the duotone, twotone, and bulk style Pro icon packages using Yarn.

```bash
yarn add @hugeicons-pro/core-duotone-rounded
yarn add @hugeicons-pro/core-duotone-standard
yarn add @hugeicons-pro/core-twotone-rounded
yarn add @hugeicons-pro/core-bulk-rounded
```

--------------------------------

### Install @hugeicons-pro/core-stroke-rounded with yarn

Source: https://hugeicons.com/docs/core-packages

Install the stroke-rounded icon package using yarn.

```bash
yarn add @hugeicons-pro/core-stroke-rounded
```

--------------------------------

### Install @hugeicons-pro/core-stroke-rounded with pnpm

Source: https://hugeicons.com/docs/core-packages

Install the stroke-rounded icon package using pnpm.

```bash
pnpm add @hugeicons-pro/core-stroke-rounded
```

--------------------------------

### Install @hugeicons-pro/core-stroke-rounded with npm

Source: https://hugeicons.com/docs/core-packages

Install the stroke-rounded icon package using npm.

```bash
npm install @hugeicons-pro/core-stroke-rounded
```

--------------------------------

### GitHub Actions install step with secret

Source: https://hugeicons.com/docs/license/activate-license

GitHub Actions install step that passes the HUGEICONS_LICENSE_KEY repository secret to npm ci. Replace with yarn install or the pnpm 10+ command as needed.

```yaml
- run: npm ci
  env:
    HUGEICONS_LICENSE_KEY: ${{ secrets.HUGEICONS_LICENSE_KEY }}

```

--------------------------------

### Install the Hugeicons agent skill with npx

Source: https://hugeicons.com/docs/integrations/skill

Run this from the root of your project to install the skill locally. The agent loads it whenever the task involves Hugeicons.

```bash
npx skills add https://github.com/hugeicons/hugeicons --skill hugeicons
```
Tokens:
Raw