Icon

A wrapper around lucide-rails with shadcn sizes and accessible semantics.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add icon --yes

The icon registry item installs these files:

app/components/ui_component.rb
app/components/ui/icon_component.rb
app/helpers/ui/icon_helper.rb
vendor/shadwire/shadwire.css

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

Names use Lucide's kebab-case, such as "chevron-down".

<%= ui_icon("download") %>
<%= ui_icon("bell", label: "Notifications") %>

Or render Ui::IconComponent directly:

<%= render Ui::IconComponent.new("download", size: :lg) %>

Examples

Decorative and labelled

Icons are decorative by default; pass label: when the icon carries meaning.

<div class="flex items-center gap-4">
  <%= ui_icon("download") %>
  <%= ui_icon("bell", label: "Notifications") %>
  <%= ui_button(variant: :outline, size: :sm) do %>
    <%= ui_icon("mail") %>
    Message
  <% end %>
  <%= ui_button(size: :icon, variant: :secondary) do %>

<div class="flex items-center gap-4">
  <%= ui_icon("download") %>
  <%= ui_icon("bell", label: "Notifications") %>
  <%= ui_button(variant: :outline, size: :sm) do %>
    <%= ui_icon("mail") %>
    Message
  <% end %>
  <%= ui_button(size: :icon, variant: :secondary) do %>
    <%= ui_icon("plus", label: "Add item") %>
  <% end %>
</div>

API reference

ui_icon(name, **options) wraps Ui::IconComponent.new(name, **options).

Argument	Type	Default	Description
`name`	String	Required	The Lucide icon name, in kebab-case.
`size`	Symbol/String	`:default`	`:sm`, `:default`, `:lg` or `:xl`.
`label`	String	`nil`	When present, exposes the SVG with `role="img"` and `aria-label`.
`**attrs`	Hash	`{}`	Free-form HTML attributes for the SVG.