PHPackages oliwol/filament-rich-editor-heroicons - 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. oliwol/filament-rich-editor-heroicons ActiveLibrary[Utility & Helpers](/categories/utility) oliwol/filament-rich-editor-heroicons ===================================== A seamless integration for Filament v4/v5 that allows users to insert Heroicons directly into the RichEditor (TipTap). Enhance your content by adding scalable vector icons with a dedicated picker button. v1.0.1(1mo ago)1417↓50%[4 issues](https://github.com/oliwol/filament-rich-editor-heroicons/issues)MITPHPPHP ^8.2CI passing Since Feb 4Pushed 1mo agoCompare [ Source](https://github.com/oliwol/filament-rich-editor-heroicons)[ Packagist](https://packagist.org/packages/oliwol/filament-rich-editor-heroicons)[ Docs](https://github.com/oliwol/filament-rich-editor-heroicons)[ GitHub Sponsors](https://github.com/oliwol)[ RSS](/packages/oliwol-filament-rich-editor-heroicons/feed)WikiDiscussions 1.x Synced 1mo ago READMEChangelog (5)Dependencies (16)Versions (21)Used By (0) 🦸 Filament Rich Editor Heroicons ================================ [](#-filament-rich-editor-heroicons) [![Latest Version on Packagist](https://camo.githubusercontent.com/c4fd04b4b74e2031f5c759e254f984b8ddbbd020f27209a2e70598c4f3c099c3/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f6c69776f6c2f66696c616d656e742d726963682d656469746f722d6865726f69636f6e732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/oliwol/filament-rich-editor-heroicons)[![GitHub Tests Action Status](https://camo.githubusercontent.com/629e269e8c5a7ff31f20d461c57ade386f4c5ae7ea41ab21bc28fcf9df07d0cd/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6f6c69776f6c2f66696c616d656e742d726963682d656469746f722d6865726f69636f6e732f74657374732e796d6c3f6c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/oliwol/filament-rich-editor-heroicons/actions)[![License](https://camo.githubusercontent.com/b5521389f3a57b76fb03b85074aedd48493a6e6efe055fabe5f4379ce2c0a253/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6f6c69776f6c2f66696c616d656e742d726963682d656469746f722d6865726f69636f6e732e7376673f7374796c653d666c61742d737175617265)](https://github.com/oliwol/filament-rich-editor-heroicons/blob/0.x/LICENSE.md) A Filament v4/v5 plugin that adds a Heroicon picker to the RichEditor (TipTap). [![Demo](art/demo.gif)](art/demo.gif) Search and insert Heroicons as inline SVGs directly into the editor content. Supports outline, solid, and mini styles with customizable size, alignment, and color. --- 🚀 Installation -------------- [](#-installation) Install the package via Composer: ``` composer require oliwol/filament-rich-editor-heroicons ``` ⚡️ Quick Start -------------- [](#️-quick-start) ``` use Filament\Forms\Components\RichEditor; use Oliwol\FilamentRichEditorHeroicons\FilamentRichEditorHeroicons; RichEditor::make('content') ->toolbarButtons([ 'bold', 'italic', 'link', 'addHeroicon', ]) ->plugins([ FilamentRichEditorHeroicons::make(), ]) ``` 🛠️ Usage -------- [](#️-usage) ### Editor Integration [](#editor-integration) Add `FilamentRichEditorHeroicons::make()` to the `plugins()` array of your `RichEditor` component and include `addHeroicon` in the `toolbarButtons()`: ``` use Filament\Forms\Components\RichEditor; use Oliwol\FilamentRichEditorHeroicons\FilamentRichEditorHeroicons; RichEditor::make('content') ->toolbarButtons([ 'bold', 'italic', 'underline', 'link', 'addHeroicon', // ... other buttons ]) ->plugins([ FilamentRichEditorHeroicons::make(), ]) ``` ### Rendering Stored Content [](#rendering-stored-content) When rendering stored content outside the editor (e.g. in a Blade view or model accessor), register the plugin with `RichContentRenderer`: ``` use Filament\Forms\Components\RichEditor\RichContentRenderer; use Oliwol\FilamentRichEditorHeroicons\FilamentRichEditorHeroicons; RichContentRenderer::make($this->html) ->plugins([ FilamentRichEditorHeroicons::make(), ]) ``` ### Styles [](#styles) By default, **outline**, **solid**, and **mini** styles are available. Mini icons use a 20x20 viewport, designed for smaller UI elements. To restrict to specific styles: ``` FilamentRichEditorHeroicons::make() ->styles(['outline', 'solid']) ``` ### Alignment & Size [](#alignment--size) The picker modal lets users choose alignment and size for each icon. You can customize the available sizes and default size via the plugin API: ``` FilamentRichEditorHeroicons::make() ->defaultSize('lg') ->sizes([ 'sm' => 16, 'md' => 24, 'lg' => 32, 'xl' => 48, ]) ``` **Alignment options:** Inline (default), Left, Center, Right **Size presets:** S (16px), M (24px, default), L (32px), XL (48px) ### Color [](#color) The picker modal includes a color picker to set the icon color. The default color is `#000000` (black). ### Editing Inserted Icons [](#editing-inserted-icons) Click on any inserted icon in the editor to re-open the picker modal pre-filled with the current settings. Changes update the icon in place. All settings are persisted in the editor content and applied consistently when rendering via `RichContentRenderer`. ⚙️ How it works --------------- [](#️-how-it-works) 1. Clicking the toolbar button opens a modal with a searchable dropdown of [Heroicons](https://heroicons.com/) with SVG previews. 2. Select a style (outline/solid/mini), alignment, size, and color. 3. The icon is rendered as an inline SVG element and inserted into the editor content. 4. Clicking an existing icon re-opens the modal for editing. 5. All properties are stored as data attributes and applied on render. 🌍 Translations -------------- [](#-translations) The package ships with translations for the following languages: LanguageCodeEnglish`en`German`de`French`fr`Spanish`es`Portuguese (Brazil)`pt_BR`Dutch`nl`Italian`it`Turkish`tr`Arabic`ar`Chinese (Simplified)`zh_CN`You can publish and customize them: ``` php artisan vendor:publish --tag="filament-rich-editor-heroicons-translations" ``` ✅ Testing --------- [](#-testing) ``` composer test ``` 📝 Changelog ----------- [](#-changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. 📄 License --------- [](#-license) This package is open-sourced software licensed under the [MIT license](LICENSE.md). ### Health Score 41 — FairBetter than 89% of packages Maintenance70 Regular maintenance activity Popularity19 Limited adoption so far Community8 Small or concentrated contributor base Maturity56 Maturing project, gaining track record Bus Factor1 Top contributor holds 95.1% 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 ~10 days Total 6 Last Release 53d ago Major Versions 0.x-dev → v1.0.02026-03-25 ### Community Maintainers ![](https://www.gravatar.com/avatar/e465cb66cf32c5bf0ed2bd6fa7ecf8247d429e9097228dcddb20a6a7fc0c18e3?d=identicon)[oliwol](/maintainers/oliwol) --- Top Contributors [![oliverwolschke](https://avatars.githubusercontent.com/u/226452870?v=4)](https://github.com/oliverwolschke "oliverwolschke (39 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)") --- Tags filamentfilamentphpheroiconstiptaptiptap-editorlaraveltiptapHeroiconsfilamentrich editoroliwolfilament-rich-editor-heroicons ### Code Quality TestsPest Static AnalysisPHPStan, Rector Code StyleLaravel Pint Type Coverage Yes ### Embed Badge ![Health badge](/badges/oliwol-filament-rich-editor-heroicons/health.svg) ``` [![Health](https://phpackages.com/badges/oliwol-filament-rich-editor-heroicons/health.svg)](https://phpackages.com/packages/oliwol-filament-rich-editor-heroicons) ``` ### Alternatives [pboivin/filament-peek Full-screen page preview modal for Filament 253319.6k12](/packages/pboivin-filament-peek)[dotswan/filament-map-picker Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications. 124139.3k2](/packages/dotswan-filament-map-picker)[creagia/filament-code-field A Filamentphp input field to edit or view code data. 58289.3k3](/packages/creagia-filament-code-field)[jibaymcs/filament-tour Bring the power of DriverJs to your Filament panels and start a tour ! 12247.8k](/packages/jibaymcs-filament-tour)[aymanalhattami/filament-context-menu context menu (right click menu) for filament 9838.0k](/packages/aymanalhattami-filament-context-menu)[schmeits/filament-character-counter This is a Filament character counter TextField and Textarea form field for Filament v4 and v5 33184.7k6](/packages/schmeits-filament-character-counter) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)