Filament Rich Editor Heroicons Laravel Package

Product Decisions This Supports

• Build vs. Buy: Buy – This package eliminates the need to build a custom icon picker for Filament’s RichEditor, saving ~3–6 weeks of dev time (estimation: frontend integration, accessibility compliance, and server-side rendering logic). The MIT license and active maintenance (releases in 2026) reduce long-term risk.
• Feature Roadmap:
  • Phase 1: Roll out to editorial teams for blog posts, documentation, or marketing pages where icons enhance readability (e.g., step indicators, alerts, or decorative accents).
  • Phase 2: Extend to internal tools (e.g., admin dashboards) to replace hardcoded icons in notifications or status cards, reducing CSS/JS dependencies.
  • Phase 3: Explore customizing the Heroicon set (e.g., adding brand-specific icons) by forking the package or building a wrapper layer.
• Use Cases:
  • Content-heavy applications: CMS-driven sites (e.g., Laravel Nova/Forge) where editors need to embed icons without touching code.
  • Design system adoption: Projects using Heroicons (or similar SVG icon libraries) to ensure consistency across frontend and backend interfaces.
  • Accessibility compliance: Automatically generate ARIA labels for icons, reducing manual reviews during QA.
  • Localization: Support for 10+ languages in the picker modal aligns with global product teams.

When to Consider This Package

• Adopt if:

  • Your product uses Filament v4/v5 and relies on the RichEditor for user-generated content (e.g., posts, docs, or admin panels).
  • You need scalable vector icons (Heroicons) with customizable styles/sizes/colors without SVG markup.
  • Accessibility is a priority, and you want to avoid manual ARIA label management for icons.
  • Your team lacks frontend resources to build a custom icon picker (or wants to avoid technical debt).
  • You’re already using Heroicons in your design system and want backend consistency.

• Look elsewhere if:

  • You’re not using Filament (this is a Filament-specific plugin).
  • You need non-Heroicon SVGs (e.g., custom or third-party icon sets). Consider alternatives like:
    • filament-spatie-media-library for image-based icons.
    • Custom TipTap extensions for broader SVG support.
  • Your content requires interactive icons (e.g., clickable tooltips or animations). This package focuses on static SVGs.
  • You’re on Filament v3 or earlier (incompatible).
  • Your use case demands real-time collaboration (e.g., Google Docs-style editing), as this is a client-side plugin.

How to Pitch It (Stakeholders)

For Executives/Business Leaders:

*"This package lets our content teams embed professional-grade icons (like Heroicons) directly into Filament’s editor—no coding required. It’s a 10-minute setup that:

• Saves time: Editors add icons in seconds instead of waiting for devs.
• Improves consistency: Uses our design system’s icons automatically, reducing visual errors.
• Boosts accessibility: Icons get proper labels for screen readers, cutting QA time.
• Low risk: MIT-licensed, actively maintained, and used in other Filament projects. For ~$0 cost, we can roll this out to [X teams] by [date], with ROI in faster content updates and fewer design system violations."

For Engineers/Tech Leads:

*"This is a drop-in plugin for Filament’s RichEditor that adds a Heroicon picker with:

• Zero backend changes: Works with existing RichEditor fields.
• Client-side magic: Uses TipTap’s extensibility to insert SVGs with data attributes (no manual HTML).
• Configurable: Restrict icon styles/sizes, add ARIA labels, or customize translations.
• Future-proof: Follows Filament’s plugin architecture—easy to fork or extend. Tradeoff: Tightly coupled to Heroicons (but we can scope this to internal use). Alternatives would require building a custom TipTap extension (~2–3 dev weeks)."*

For Design/Product Teams:

*"This solves two pain points:

1. Icon consistency: Editors can now pick from our design system’s Heroicons (outline/solid/mini) instead of uploading random images or using inconsistent fonts.
2. Effortless styling: Adjust size, color, and alignment in the editor—no CSS classes or dev handoffs. Example: Our blog team could add step indicators or alerts to tutorials without asking for dev support. We can also audit all icons for accessibility in one pass."*