Lucide Icons in Rails

Render Lucide icons as inline SVGs via the lucide-rails gem. Icons use currentColor so they inherit text color automatically.

When To Use This Skill

• Adding icons to a Rails view (buttons, nav, badges, empty states)
• Choosing the right Lucide icon name for a UI element
• Making icons accessible (decorative vs interactive)
• Styling or sizing SVG icons with CSS

Philosophy

1. Icons are decoration until they aren't — Decorative icons need no label. Interactive icons (buttons, links) MUST have accessible text.
2. Size intentionally — Always pass size:. The default 24px is too large for most inline contexts.
3. Let CSS handle color — Icons inherit currentColor. Style the parent, not the SVG.
4. Use the helper, never raw SVGs — lucide_icon keeps icons consistent, cacheable, and updatable.
5. kebab-case names only — It's "chevron-right", never "chevronRight" or "ChevronRight".