PHPackages ympact/flux-icons - 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. [Utility & Helpers](/categories/utility) 4. / 5. ympact/flux-icons ActiveLibrary[Utility & Helpers](/categories/utility) ympact/flux-icons ================= A package to provide icons from different vendors for Livewire Flux. v1.1.0(8mo ago)116.2k↑160.6%3[2 issues](https://github.com/Ympact/flux-icons/issues)MITPHPPHP ^8.1CI passing Since Oct 12Pushed 1mo ago1 watchersCompare [ Source](https://github.com/Ympact/flux-icons)[ Packagist](https://packagist.org/packages/ympact/flux-icons)[ RSS](/packages/ympact-flux-icons/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (9)Versions (20)Used By (0) Flux Icons ========== [](#flux-icons) This is a laravel package to customize the icons for [Livewire Flux](https://github.com/livewire/flux). It builds the icons from various vendors into a `flux:icon` component. [![Packagist Version](https://camo.githubusercontent.com/20d1c9774e0a177f617b348fb1b78f80834ffe51f63f60febb51f66dac41d196/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f796d706163742f666c75782d69636f6e73)](https://packagist.org/packages/ympact/flux-icons) Installation ------------ [](#installation) Generally you want to install this package only in your local development environment and build and publish the icons you need. ``` composer require --dev ympact/flux-icons ``` Icon Vendor Support ------------------- [](#icon-vendor-support) VendorNamespacePreview / RepoNotesBootstrap`bootstrap`[Preview](https://icons.getbootstrap.com/#icons)Stroke width of outline icons cannot be adjustedVSC Codicons`codicons`[Repo](https://github.com/microsoft/vscode-codicons/)Only outline icons available, but stroke width cannot be adjustedFlowbite`flowbite`[Preview](https://flowbite.com/icons/)Flags`flags`[Repo](https://github.com/lipis/flag-icons/)There is only one variant (solid and outline show the same flag). Currently the 4x3 AR version is configured. The rectangle version can also be used by adjusting the configFluent UI`fluent`[Preview (unofficial)](https://fluenticons.co/) - [Repo](https://github.com/microsoft/fluentui-system-icons)Stroke width of outline icons cannot be adjustedGoogle Material Design Icons`material-icons`[Preview](https://fonts.google.com/icons)Stroke width of outline icons cannot be adjustedGoogle Material Symbols (300)`material-symbols`[Preview](https://fonts.google.com/icons?icon.set=Material+Symbols)Stroke width of outline icons cannot be adjustedHealthicons`healthicons`[Preview](https://healthicons.org)Stroke width cannot be adjusted.Lucide`lucide`[Preview](https://lucide.dev/icons/)Only outline icons availableMDI`mdi`[Preview](https://pictogrammers.com/library/mdi/)Stroke width of outline icons cannot be adjustedTabler`tabler`[Preview](https://tabler.io/icons)Building icons -------------- [](#building-icons) You will need to build the icons yourself once the package is installed. This can be done using the artisan command `flux-icons:build`. You can optionally pass the vendor name as the first argument. ``` php artisan flux-icons:build tabler --icons=confetti,confetti-off ``` The artisan script will try to install the vendor's icon package for you using `npm install`. In case you did not provide any arguments, the script will walk you through all options [![php artisan flux-icons:build](screenshot-cli.png)](screenshot-cli.png) ### Options [](#options) OptionDescription`--icons=`The icons to build (single or comma separated list). Cannot be used in combination with `--all`.`-m|--merge`Merge the icons listed in the `--icons` option with the icons defined in the config. Cannot be used in combination with `--all`.`-a|--all`Build all icons from the vendor. **Note:** this might generate over thousands of files and cause `npm run dev` to crash due to memory issues.`-v|--verbose`Show additional messages during build.### Usage [](#usage) Since this package publishes all icons to `resources/views/flux/icon/{vendor}/` you can simply use the Blade convention of referencing the icons within your `flux:icon` component. So for example: ``` or ``` Publish config -------------- [](#publish-config) You can publish the config file to adjust settings for a specific vendor or add your own vendor. For example adjusting the stroke width of outline icons. In case you add your own vendor, please share or make a PR so others can use it too! ``` php artisan vendor:publish --tag=flux-icons-config ``` ### Publish specific vendor callbacks [](#publish-specific-vendor-callbacks) For some vendors callbacks str defined (see the [config](/config/flux-icons.php)). Adjusting these callbacks can be done by publishing the class using the following command: ``` php artisan flux-icons:publish {vendor} ``` When adjusting the callback for a vendor, make sure you also publish the config file and reference the correct class. Advanced configuration ---------------------- [](#advanced-configuration) ### General config [](#general-config) OptionValaueDescription`icons``null` or `['vendorName' => ['icon-name', ...] ]`A list of icons that will be build/updated by default in case no icons are passed to `flux-icons:build` command.`default_stroke_width``float`For outline icons a default stroke width can be configured. The default Flux Heroicons uses a width of 1.5.### Vendor specific configuration [](#vendor-specific-configuration) The vendor specific configuration sits within the `vendors` key. Each vendor should have a key. That key will be used as directory name when exporting the icons. ``` 'vendors' => [ 'tabler' => [ 'vendor' => 'Tabler', 'namespace' => 'tabler', 'package' => '@tabler/icons', 'variants' => [ //... ] ] ] ``` OptionValueDefaultDescription`vendor``string`Human readable name of the vendor.`namespace``string`The namespace for the Flux icon, in case omitted, the vendor name will be used.`package``string`The npm package that should be installed to retrieve the icons.`baseVariant``string``outline`The default variant to use as basis. This is usually the vendor's variant that has the most icons available.`variants``array`The configuration for each of the variants (outline, solid, mini, micro).`icon_name``[class, method]``null`A callback to adjust the name of the svg.`attributes``[class, method]``null`A callback to adjust the attributes on the SVG.`transform``[class, method]``null`A callback to transform the SVG path data.`stroke_width``[class, method]``null`A callback to determine the whether the stroke width should be changed on this icon.#### Variants [](#variants) ``` 'variants' => [ 'outline' => [ 'source' => [], // see config options below 'template' => 'outline', 'fallback' => 'default', 'stroke_width' => false, 'size' => 24, 'attributes' = [] ], 'solid' => [ 'source' => [], ], 'mini' => [ 'base' => 'solid' ], 'micro' => [ 'base' => 'solid' ], ] ``` OptionValueDefaultDescription`source``string|callable array`define the source directory. See the details [below](#source).`template``outline` or `solid`The svg-tag template for the specific variant. Mini and micro variants use the solid template by default. Commonly the outline icon may be set to solid as the outline icon was designed as solids and not using strokes.`fallback``string|callable array`Determine the fallback icon to use if it the source was not found for the specific variant. See [details below](#fallbacks-for-icon-variants).`stroke_width``int|float`Determine the stroke width for the icon. Works only in case the `outline` template is used`size``int`...Determine the size of the icon variant. By default we'll use the Flux implementaton (outline/solid = 24px, mini = 20px and micro = 16px)`attributes``array``[]`Add or remove (null) specific attributes to the svg html tag of the icon.`base``string``null`Determine what the base settings are for the `mini` and `micro` variants. By default the `solid` settings are used.`raw``bool``false`Determine whether the inner contents of the icon's svg should simply be copied into the Flux icon and explicitly prevent any transformations.#### Source [](#source) The source directories specify where the script can find the outline and solid versions of the icons you want to build. In case the vendor uses a prefix or suffix for the icons, we want to configure it here to determine the basename of the icon and make them easier accessible in flux. ``` [ 'dir' => 'node_modules/vendor/icons/...', 'prefix' => null, 'suffix' => null 'filter' => [ Ympact\FluxIcons\Services\Vendor\VendorName::class, 'filter'] ] ``` ##### Filter [](#filter) An optional `filter` callback can be defined to indicate whether a file in the directory should be used as outline or solid respectively. The function gets three arguments passed: `$file`, `$icons`, `$variant`: - `$file` - `icons` is an array of icons that the user requested to build. This is passed by reference in case this array needs to be adjusted. See the [Mdi class](src/Services/Vendors/Mdi.php) as example. - `$variant` Optionally callbacks can be defined on `dir`, `prefix` and `suffix` to adjust these according to the icon variant. The `$variant` passed to the callback defines which variant is currently build (`outline`, `solid`, `mini`, `micro`). ``` 'solid' => [ [ 'dir' => 'node_modules/vendor/icons/icons/filled', 'prefix' => null, 'suffix' => [ Ympact\FluxIcons\Services\Vendor\VendorName::class, 'sourceSolidSuffix'] ], ], ``` #### Fallbacks for icon variants [](#fallbacks-for-icon-variants) Due to the way the flux icon component is made, it requires 4 variants: an outline and preferably a solid of three sizes: - solid - 24px - mini - 20px - micro - 16px Using the configuration of the vendor, you can determine how to handle the building of the icon when there is no source file for a certain variant. The options are: ValueDescription`false`No fallback is used, this will cause the entire icon not to be build.`default`Use the base variant (usually the `outline` icon).`{variant}`Any of the variants`callback array`A callback to determine that should return any of the options above.#### Callbacks [](#callbacks) The configuration file provides various options on which callback can be defined. To keep the config file serializable, the callbacks should be defined in a separate class and referenced as above. See [vendor.php.stub](resources/stubs/vendor.php.stub) for reference of the available callbacks. Additional icons ---------------- [](#additional-icons) This package also provide some custom icons that can be published: They can be published using ``` php artisan vendor:publish --tag=flux-icons-icons ``` - An empty icon, can be useful for simple logic in your blade or components: ``` ``` - A placeholder avatar icon, using an icon or initials ``` ``` This icon has additional properties: - **icon** `(void|string)`: uses the Heroicon user icon as image. - **name** `(string)`: instead of an icon two initials of a name will be shown. You can pass the full name (Maurits Korse) or just the initials (MK) - **color** `(string)`: colorizing the icon using the same as Flux badges Roadmap ------- [](#roadmap) - Add/Improve command for updating/rebuilding icons - Adding more vendors - Helper script to create configurations for new vendors - Improving testing - Documentation - Support other variants (duotone, etc.) ### Health Score 47 — FairBetter than 94% of packages Maintenance73 Regular maintenance activity Popularity34 Limited adoption so far Community12 Small or concentrated contributor base Maturity57 Maturing project, gaining track record Bus Factor1 Top contributor holds 97% 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 ~25 days Recently: every ~72 days Total 18 Last Release 158d ago Major Versions v0.3.0 → v1.0.0-beta2024-11-18 v1.1.0 → v2.x-dev2025-12-11 PHP version history (2 changes)0.0.1PHP ^8.1 v2.x-devPHP ^8.2 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/3665483?v=4)[Maurits Korse](/maintainers/mauritskorse)[@mauritskorse](https://github.com/mauritskorse) --- Top Contributors [![mauritskorse](https://avatars.githubusercontent.com/u/3665483?v=4)](https://github.com/mauritskorse "mauritskorse (160 commits)")[![RyanPaiva56](https://avatars.githubusercontent.com/u/595049?v=4)](https://github.com/RyanPaiva56 "RyanPaiva56 (3 commits)")[![BrookeDot](https://avatars.githubusercontent.com/u/150348?v=4)](https://github.com/BrookeDot "BrookeDot (2 commits)") --- Tags laraveluicomponentsiconsfluxlivewire ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/ympact-flux-icons/health.svg) ``` [![Health](https://phpackages.com/badges/ympact-flux-icons/health.svg)](https://phpackages.com/packages/ympact-flux-icons) ``` ### Alternatives [livewire/flux The official UI component library for Livewire. 9475.0M86](/packages/livewire-flux)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[glhd/conveyor-belt 14797.0k](/packages/glhd-conveyor-belt)[flarum/core Delightfully simple forum software. 211.3M1.9k](/packages/flarum-core)[aedart/athenaeum Athenaeum is a mono repository; a collection of various PHP packages 245.2k](/packages/aedart-athenaeum) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)