PHPackages abduns/hugeicons-flux - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. abduns/hugeicons-flux ActiveLibrary[Templating & Views](/categories/templating) abduns/hugeicons-flux ===================== Use any Hugeicons icon as a native <flux:icon.hugeicons.\*> component in Flux UI — the free Stroke Rounded set bundled, or generate all 9 Pro styles from your own Hugeicons licence. v1.0.5(2w ago)0341↓18.4%MITBladePHP ^8.3CI passing Since May 15Pushed 1w agoCompare [ Source](https://github.com/abduns/hugeicons-flux)[ Packagist](https://packagist.org/packages/abduns/hugeicons-flux)[ RSS](/packages/abduns-hugeicons-flux/feed)WikiDiscussions main Synced 1w ago READMEChangelog (1)Dependencies (11)Versions (8)Used By (0) hugeicons-flux ============== [](#hugeicons-flux) Use any Hugeicons icon as a native flux:icon.hugeicons.\* component in Flux UI — the free Stroke Rounded set bundled, or generate all 9 Pro styles from your own Hugeicons licence. [![Tests](https://github.com/abduns/hugeicons-flux/actions/workflows/ci.yml/badge.svg)](https://github.com/abduns/hugeicons-flux/actions)[![Version](https://camo.githubusercontent.com/74d904a94b80bc74df46a6206011d6e87b151342ddef3e2d6d7a95f5b0b55fe4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f616264756e732f6875676569636f6e732d666c75782e737667)](https://packagist.org/packages/abduns/hugeicons-flux)[![Downloads](https://camo.githubusercontent.com/b7e2cf208320262b864860b64c39c47d5bcd8b7d45e37846cd00ec380b92b022/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f616264756e732f6875676569636f6e732d666c75782e737667)](https://packagist.org/packages/abduns/hugeicons-flux)[![License](https://camo.githubusercontent.com/6ec3b84044ae0c6b5222896a743c6d2dc86040b48cf71cae49230a64233c2d58/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f616264756e732f6875676569636f6e732d666c75782e737667)](LICENSE.md) --- Features -------- [](#features) - Modern PHP support - Lightweight and fast - Integrates Hugeicons seamlessly with Flux UI - Bundled with 5,100+ free Stroke Rounded icons - Automatically generate Pro styles from your own license - Agent Skill included for Laravel Boost, Codex, and Claude Code workflows --- Installation ------------ [](#installation) ``` composer require abduns/hugeicons-flux ``` --- Quick Start ----------- [](#quick-start) ``` // Use it directly in your Blade views ``` Example output: ``` ``` --- Laravel Boost ------------- [](#laravel-boost) This package ships a Laravel Boost Agent Skill at: ``` resources/boost/skills/hugeicons-flux/SKILL.md ``` Laravel Boost can discover it during `boost:install` or `boost:update --discover`. If you want to publish the skill into your application's `.ai/skills` directory for customization, run: ``` php artisan hugeicons:boost-skill ``` Use `--force` to replace an existing local copy. --- Why This Package? ----------------- [](#why-this-package) - Missing modern PHP features - Poor developer experience - Too framework-coupled This package focuses on simplicity, interoperability, and modern developer ergonomics to integrate Hugeicons into Laravel Flux UI effortlessly. --- Usage ----- [](#usage) ### Basic Usage [](#basic-usage) Every icon is `flux:icon.hugeicons.{name}`, where `{name}` is the kebab-case Hugeicons name (`Home01Icon` → `home-01`, `AiSearch02Icon` → `ai-search-02`). ``` {{-- Default --}} {{-- Sizing & colour — like any Flux icon --}} {{-- As an `icon` prop on other Flux components --}} Dashboard ``` ### Advanced Usage [](#advanced-usage) The `variant` prop accepts the real Hugeicons style names, **plus** Flux's own `outline` / `solid` / `mini` / `micro` as aliases: ``` ``` `variant`Resolves to`outline` (default), `mini`, `micro`, `stroke`, `stroke-rounded``stroke-rounded``solid`, `solid-rounded``solid-rounded``bulk-rounded`, `duotone-rounded`, `twotone-rounded`, `*-sharp`, …the matching Hugeicons styleIf an icon has not been built with a requested style (e.g. you only have the free set), the `variant` gracefully falls back to `stroke-rounded`. ### Configuration (Pro Icons) [](#configuration-pro-icons) To use Pro icon styles you need to: 1. Tell npm where to download Hugeicons Pro packages from (`.npmrc`) 2. Provide your licence key as an environment variable 3. Install the Pro packages and generate the icons #### Step 1 — Create or edit `.npmrc` [](#step-1--create-or-edit-npmrc) `.npmrc` is a plain-text config file that npm reads before installing packages. Create (or open) a file called **`.npmrc`** in the **root of your project** (same folder as `package.json`) and add these two lines: ``` @hugeicons-pro:registry=https://npm.hugeicons.com/ //npm.hugeicons.com/:_authToken=${HUGEICONS_PRO_LICENSE_KEY} ``` > **What this does** > > - Line 1 tells npm to fetch every `@hugeicons-pro/*` package from the Hugeicons registry instead of the public npm registry. > - Line 2 authenticates you with your licence key. The `${HUGEICONS_PRO_LICENSE_KEY}` placeholder is replaced automatically by npm using the environment variable of the same name — **you never hard-code your key in this file**. > **Tip — commit `.npmrc`, never your key**It is safe (and recommended) to commit `.npmrc` to version control because it contains no secrets — only the `${…}` placeholder. Your actual key lives only in the environment. --- #### Step 2 — Set the `HUGEICONS_PRO_LICENSE_KEY` environment variable [](#step-2--set-the-hugeicons_pro_license_key-environment-variable) Your licence key is available in your [Hugeicons dashboard](https://hugeicons.com). Choose the method that fits your workflow: **macOS / Linux — current terminal session** ``` export HUGEICONS_PRO_LICENSE_KEY="your-licence-key-here" ``` Run this once per terminal session before you run `npm install`. The key is gone when you close the tab. **macOS / Linux — permanent (shell profile)** Add the export line to your shell config so it is always available: ``` # ~/.zshrc (zsh, default on modern macOS) # ~/.bashrc (bash) echo 'export HUGEICONS_PRO_LICENSE_KEY="your-licence-key-here"' >> ~/.zshrc source ~/.zshrc ``` **Windows — PowerShell (current session)** ``` $env:HUGEICONS_PRO_LICENSE_KEY = "your-licence-key-here" ``` **Windows — permanent (System Environment Variables)** 1. Open **Start → search "Environment Variables" → Edit the system environment variables** 2. Click **Environment Variables…** 3. Under *User variables*, click **New** 4. Variable name: `HUGEICONS_PRO_LICENSE_KEY` 5. Variable value: `your-licence-key-here` 6. Click **OK** and restart your terminal **CI / CD (GitHub Actions, etc.)** Store the key as a repository secret (e.g. `HUGEICONS_PRO_LICENSE_KEY`) and expose it as an environment variable in your workflow: ``` - name: Install dependencies run: npm ci env: HUGEICONS_PRO_LICENSE_KEY: ${{ secrets.HUGEICONS_PRO_LICENSE_KEY }} ``` **.env file (Laravel)** If you prefer keeping all project secrets in one place, add it to your Laravel `.env` file: ``` HUGEICONS_PRO_LICENSE_KEY=your-licence-key-here ``` Then export it for npm by running: ``` export HUGEICONS_PRO_LICENSE_KEY="$(grep HUGEICONS_PRO_LICENSE_KEY .env | cut -d '=' -f2)" ``` > **Never commit `.env`** — it is already in `.gitignore` by default in Laravel projects. --- #### Step 3 — Install the Pro packages and build [](#step-3--install-the-pro-packages-and-build) With `.npmrc` in place and the environment variable set, run: ``` npm install --save-optional \ @hugeicons-pro/core-stroke-rounded \ @hugeicons-pro/core-solid-rounded php artisan hugeicons:build ``` Available Pro packages (install only the styles you need): PackageStyle`@hugeicons-pro/core-stroke-rounded`Stroke Rounded`@hugeicons-pro/core-solid-rounded`Solid Rounded`@hugeicons-pro/core-bulk-rounded`Bulk Rounded`@hugeicons-pro/core-duotone-rounded`Duotone Rounded`@hugeicons-pro/core-twotone-rounded`Twotone RoundedAfter `hugeicons:build` completes, the generated Blade components are ready to use via the `variant` prop. --- Standards / Specifications -------------------------- [](#standards--specifications) References: - --- Supported Features ------------------ [](#supported-features) FeatureSupportFree Stroke Rounded Set✅Pro Styles Generator✅Laravel Boost Agent Skill✅Claude Code Skill✅--- Compatibility ------------- [](#compatibility) PlatformSupportedPHP 8.2+✅Laravel 11.0+✅Flux UI 2✅--- Design Goals ------------ [](#design-goals) - Developer experience first - Predictable APIs - Minimal dependencies - Strong typing - Extensibility - Interoperability --- Architecture ------------ [](#architecture) - Blade anonymous-component integration - Zero footprint for unused Pro icons - Deferred service provider registration for overriding --- Performance ----------- [](#performance) OperationTimeRender component< 1ms--- Testing ------- [](#testing) ``` composer test ``` --- Contributing ------------ [](#contributing) Contributions, issues, and discussions are welcome. --- Security -------- [](#security) If you discover security issues, please report them responsibly. --- License ------- [](#license) MIT ### Health Score 46 — FairBetter than 92% of packages Maintenance97 Actively maintained with recent releases Popularity17 Limited adoption so far Community8 Small or concentrated contributor base Maturity53 Maturing project, gaining track record Bus Factor1 Top contributor holds 80% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~2 days Total 5 Last Release 19d ago PHP version history (2 changes)v1.0.1PHP ^8.2 v1.0.5PHP ^8.3 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/28977075?v=4)[Abdun](/maintainers/abduns)[@abduns](https://github.com/abduns) --- Top Contributors [![abduns](https://avatars.githubusercontent.com/u/28977075?v=4)](https://github.com/abduns "abduns (12 commits)")[![Copilot](https://avatars.githubusercontent.com/in/1143301?v=4)](https://github.com/Copilot "Copilot (3 commits)") --- Tags laraveliconsbladefluxlivewireHugeiconsfluxui ### Code Quality TestsPest Static AnalysisPHPStan Code StylePHP CS Fixer Type Coverage Yes ### Embed Badge ![Health badge](/badges/abduns-hugeicons-flux/health.svg) ``` [![Health](https://phpackages.com/badges/abduns-hugeicons-flux/health.svg)](https://phpackages.com/packages/abduns-hugeicons-flux) ``` ### Alternatives [tightenco/jigsaw Simple static sites with Laravel's Blade. 2.2k449.3k30](/packages/tightenco-jigsaw)[laravel/ai The official AI SDK for Laravel. 9782.1M153](/packages/laravel-ai)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9732.3M121](/packages/roots-acorn)[illuminate/queue The Illuminate Queue package. 20432.2M1.5k](/packages/illuminate-queue)[blade-ui-kit/blade-icons A package to easily make use of icons in your Laravel Blade views. 2.5k39.5M381](/packages/blade-ui-kit-blade-icons)[spatie/laravel-health Monitor the health of a Laravel application 88011.3M149](/packages/spatie-laravel-health) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)