Getting started

Quick start

Render icons from any library, pick variants, pass attributes.

Render an icon#

One capitalized method per library.

LucideIcon(:house)
HeroIcon(:check)
PhosphorIcon(:lock)
TablerIcon(:brand_github)
AnimatedIcon("faded-spinner")

Each call renders the SVG file inline — with the library's configured default CSS classes and attributes from your rails_icons initializer.

Names#

Names can be symbols or strings; underscores are dasherized, so :circle_check and "circle-check" both resolve to circle-check.svg. Dynamic names are fine too — LucideIcon(status_icon) — the RuboCop validation simply skips what it can't see statically.

Variants#

variant: selects the library variant directory. Without it, the library's default variant from your rails_icons/icons configuration applies (heroicons → outline, phosphor → regular, ...).

HeroIcon(:check)                    # heroicons/outline/check.svg
HeroIcon(:check, variant: :solid)   # heroicons/solid/check.svg
PhosphorIcon(:lock, variant: :bold) # phosphor/bold/lock.svg

Attributes#

Every other keyword is forwarded onto the <svg> tag — class:, data:, stroke_width:, anything:

LucideIcon(:house, class: "size-4 text-primary")
LucideIcon(:zap, stroke_width: 2, data: { controller: "sparkle" })

The generic component#

Icon(...) is the abstract base — it requires an explicit library: and raises ArgumentError without one. Prefer the library components; the Glyphs/PreferLibraryComponent cop autocorrects literal-library calls for you.

Icon(:house, library: :lucide) # works, but the cop rewrites it to:
LucideIcon(:house)