PHPackages datomatic/nova-icon-field - 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. datomatic/nova-icon-field ActiveLibrary[Utility & Helpers](/categories/utility) datomatic/nova-icon-field ========================= A icon selector field for Laravel Nova 2.1.1(2mo ago)21.9k↓18.8%[2 issues](https://github.com/datomatic/nova-icon-field/issues)MITPHPPHP ^8.2 Since Apr 11Pushed 2mo ago2 watchersCompare [ Source](https://github.com/datomatic/nova-icon-field)[ Packagist](https://packagist.org/packages/datomatic/nova-icon-field)[ RSS](/packages/datomatic-nova-icon-field/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (3)Dependencies (4)Versions (7)Used By (0) Nova Icon Field =============== [](#nova-icon-field) > A Laravel Nova 5 Field for svg icon selection. --- [![Nova Icon Field Screenshot Light](docs/form-light.png)](docs/form-light.png)[![Nova Icon Field Screenshot Light](docs/modal-light.png)](docs/modal-light.png)[![Nova Icon Field Screenshot Dark](docs/form-dark.png)](docs/form-dark.png)[![Nova Icon Field Screenshot Dark](docs/modal-dark.png)](docs/modal-dark.png) This package allows you to create a svg icon set in your storage, and allow your users to select any icon from a field on Laravel Nova. For example, you can use it to store FontAwesome icons (or similar, such as Heroicons, or even your own icons!) in svg format on your storage, and directly use the SVGs in your frontend to avoid bundling the entire icon set. This will be extremely more lightweight with respect to importing all the icons from a webfont file. Installation: ------------- [](#installation) You can install the package in to a Laravel app that uses Nova via composer: ``` composer require datomatic/nova-icon-field ``` Publish the translations to set the labels of the icon's styles: ``` php artisan vendor:publish --provider="Datomatic\NovaIconField\FieldServiceProvider" --tag="translations" ``` Publish the configuration file and edit it to your preference: ``` php artisan vendor:publish --provider="Datomatic\NovaIconField\FieldServiceProvider" --tag="config" ``` In particular, you have to set a storage disk in which all the icons are stored. You can create one in your `config/filesystems.php`, for example: ``` 'nova-icon-field' => [ 'driver' => 'local', 'root' => storage_path('icons'), 'throw' => false, ], ``` The expected directory structure has directories on the root defining the available styles and in each directory the icons in svg format for that specific style. For example: ``` fontawesome-solid/ abacus.svg album.svg angel.svg ... heroicons/ arrow-down.svg arrow-up.svg bars.svg ... ... ``` The storage will be explored just once, and the results will be cached in your Laravel cache. If you make some changes on the files (e.g., add/remove an icon or a directory), you have to press the "update" button on the icon picker to see the changes. You can also warm the cache from the command line: ``` php artisan nova-icon-field:cache ``` This will flush the existing cache and re-cache all styles, icons and the master index. You can add this command to your deployment script to ensure the cache is always warm after a deploy. Styles and icons will be considered depending on the folder and file names (without extension), transformed in kebab-case. So if your icon file is named `Your Beautiful Icon.svg`, the icon name will be `your-beautiful-icon`. Usage: ------ [](#usage) Add the field in your Nova resources fields: ``` use Datomatic\NovaIconField\NovaIconField; NovaIconField::make('Icon') ``` You can override the text for the field button like so: ``` NovaIconField::make('Icon') ->addButtonText('Click me!') ``` You can set a default icon for when an icon has not been set like so. First parameter is the style and the second is the icon name: ``` NovaIconField::make('Icon') ->defaultIcon('solid', 'check-circle') ``` If you want to persist the default icon (when they press clear it brings back the default, so it can't be empty) then add the following: ``` NovaIconField::make('Icon') ->defaultIcon('solid', 'check-circle') ->persistDefaultIcon() ``` You can limit the icons the user can choose from like so: ``` NovaIconField::make('Icon')->only([ 'solid', // enables all the icons with style `solid` or name `solid` ['style' => 'solid'], // enable all the icons with style `solid` ['icon' => 'arrow-up'], // enable all the icons with name `arrow-up` 'solid arrow-down', // enables the icon with style `solid` and name `arrow-down` ['style' => 'solid', 'icon' => 'arrow-down'], // enables the icon with style `solid` and name `arrow-down` ]) ``` The selected icon will be stored in database as a string composed by the selected style in kebab-case and the selected icon in kebab-case separated by a space (e.g, `solid arrow-up`). You can choose to add a prefix or a suffix applied to the style and/or to the icon stored in the database by changing the config. For example, by setting: ``` // config/nova-icon-field.php return [ // ... 'style_prefix' => 'fa-', 'icon_prefix' => 'fa-', // ... ]; ``` The stored icon will be saved as `fa-solid fa-arrow-up` (which can be directly used as a FontAwesome class name). In your code (i.e., while setting `only([...])` or `defaultIcon(...)`), you'll always be referring the icons and styles without any prefix/suffix. The prefixes/suffixes are just used in visualization and on (de-)hydration from (to) db. ### Security [](#security) If needed, from the config file you can set which middlewares are going to be used to secure the endpoints used by this library (to obtain styles, icon list, purge the cache and obtaining the SVGs). The routes used only on nova (to obtain styles, icon list and purge the cache) and the route used to obtain the SVG of a given icon are treated separately (so that you can use it also from your frontend). You can also choose to set additional headers (for the nova requests) or query params (for the icon's svg request) to the requests. One possible approach is to set a middleware which verifies the presence of a secret token on the header of the request. If you want to set a rate limiter on the svg requests, remember that you have to skip the throttling when requesting the icons from the icon picker (since lots of icons will be loaded from there). To achieve that, you can, for example, create a custom middleware which, depending on the presence of a query parameter with a secret token, disables/enables the rate limiter. ### Visualize selected icons on the frontend [](#visualize-selected-icons-on-the-frontend) The selected icon will be stored in database as a string composed by the selected style in kebab-case and the selected icon in kebab-case separated by a space, together with (if set in the config) additional prefixes and suffixes (e.g, `solid arrow-up`). In your frontend, you can obtain the SVG by using the endpoint: ``` http(s)://{host}/nova-icon-field/{style}/{icon} ``` You can change the `nova-icon-field` part of the url from the config. `{style}` and `{icon}` should be provided without prefixes/suffixes. To visualize the svg there are several alternatives: you can insert it via a `` tag, an `` tag, or also by using some framework-specific libraries such as: - Vue: [vue-inline-svg](https://www.npmjs.com/package/vue-inline-svg) - React: [react-svg](https://www.npmjs.com/package/react-svg) There are also many other ways. You should find by yourself which solution is more suited for your needs and your framework. License: -------- [](#license) The MIT License (MIT). Please see [License File](LICENSE) for more information. ### Health Score 43 — FairBetter than 91% of packages Maintenance67 Regular maintenance activity Popularity23 Limited adoption so far Community10 Small or concentrated contributor base Maturity61 Established project with proven stability Bus Factor1 Top contributor holds 92.9% 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 ~214 days Recently: every ~267 days Total 6 Last Release 63d ago Major Versions 1.0.2 → 2.0.02026-03-16 PHP version history (2 changes)v1.0.0PHP ^8.0|^8.1|^8.2 2.0.0PHP ^8.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/02bc4061ab3f6bd8c3dd9de9fbc3e9560838d88bb398adc54d4e779261650642?d=identicon)[RobertoNegro](/maintainers/RobertoNegro) --- Top Contributors [![RobertoNegro](https://avatars.githubusercontent.com/u/28984898?v=4)](https://github.com/RobertoNegro "RobertoNegro (13 commits)")[![trippo](https://avatars.githubusercontent.com/u/497169?v=4)](https://github.com/trippo "trippo (1 commits)") --- Tags laraveliconssvgHeroiconsiconFontAwesomenova ### Embed Badge ![Health badge](/badges/datomatic-nova-icon-field/health.svg) ``` [![Health](https://phpackages.com/badges/datomatic-nova-icon-field/health.svg)](https://phpackages.com/packages/datomatic-nova-icon-field) ``` ### Alternatives [optimistdigital/nova-sortable This Laravel Nova package allows you to reorder models in a Nova resource's index view using drag & drop. 2872.1M6](/packages/optimistdigital-nova-sortable)[outl1ne/nova-sortable This Laravel Nova package allows you to reorder models in a Nova resource's index view using drag & drop. 2861.8M9](/packages/outl1ne-nova-sortable)[optimistdigital/nova-multiselect-field A multiple select field for Laravel Nova. 3403.5M7](/packages/optimistdigital-nova-multiselect-field)[outl1ne/nova-menu-builder This Laravel Nova package allows you to create and manage menus and menu items. 243246.0k3](/packages/outl1ne-nova-menu-builder)[alexazartsev/heroicon A Laravel Nova field for managing icons. 10122.4k](/packages/alexazartsev-heroicon)[outl1ne/nova-simple-repeatable A Laravel Nova simple repeatable rows field. 74356.3k](/packages/outl1ne-nova-simple-repeatable) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)