Icon

Use a beautiful set of 1500+ open-source SVG icons powered by the excellent Lucide icon library.

Installation Required

The Icon component requires the lucide-rails gem to be installed. Installation process will automatically add it to your Gemfile. Or you can add it manually:

# Add to Gemfile
gem 'lucide-rails'

# Install
bundle install

Key Features

1500+ Icons, Full Lucide icon library support
Flexible Rendering, Standalone or nested within components
Color System, Full color palette with semantic colors
Size Variants, Five sizes from xs to xl
Stroke Width, Customizable stroke width for line weight
Smart Inheritance, Automatically inherits parent color when nested
Color Override, Explicit color parameter for custom colors
Accessibility, Proper ARIA attributes and semantic SVG

Basic Usage

<%= rui_icon :heart %>
<%= rui_icon :check %>
<%= rui_icon :star %>
<%= rui_icon :"arrow-right" %>
<%= rui_icon :search %>

Sizes

Icons support 10 different sizes from extra small to extra large.

<%= rui_icon :star, size: :xs %>    
<%= rui_icon :star, size: :sm %>    
<%= rui_icon :star, size: :base %>  
<%= rui_icon :star, size: :lg %>    
<%= rui_icon :star, size: :xl %>    
<%= rui_icon :star, size: :xl2 %>   
<%= rui_icon :star, size: :xl3 %>   
<%= rui_icon :star, size: :xl4 %>   
<%= rui_icon :star, size: :xl5 %>   
<%= rui_icon :star, size: :xl6 %>

Colors

Semantic Colors

<%= rui_icon :circle, color: :primary %>
<%= rui_icon :circle, color: :success %>
<%= rui_icon :circle, color: :danger %>

Tailwind Colors

Full Tailwind color support (22+ colors) with automatic dark mode variants.

Red, Amber, Orange, Yellow

Lime, Emerald, Green, Cyan

Blue, Indigo, Purple, Pink

Rose, Slate, Gray, Zinc

Inherit Color

Use color: :inherit or standalone: false to inherit color from parent element.

Blue text

Red text

Green text

<div class="text-blue-600">
  <%= rui_icon :heart, color: :inherit %>
</div>

Position

Control icon positioning in flex containers (especially useful in buttons).

Leading icon (default)

Trailing icon

<%= rui_icon :"arrow-left", position: :leading %>  
<%= rui_icon :"arrow-right", position: :trailing %>

Standalone vs Inherited Colors

Standalone (Default)

Uses explicit color. Icon maintains its color regardless of parent.

Blue parent, red icon

<%= rui_icon :heart,
    color: :danger,
    standalone: true %>

Inherited

Inherits color from parent element using currentColor.

Both blue

<%= rui_icon :heart,
    standalone: false %>

Using Icons in Buttons

Icons automatically inherit button colors when used with the icon slot.

Leading Icons

<%= rui_button("Save", color: :success) do |button| %>
  <% button.with_icon(name: :save) %>
<% end %>

Trailing Icons

<%= rui_button("Continue", color: :primary) do |button| %>
  <% button.with_icon(name: :"arrow-right", position: :trailing) %>
<% end %>

With Button To (RESTful Actions)

<%= rui_button_to("Delete", post_path(@post),
                  method: :delete,
                  color: :danger) do |button| %>
  <% button.with_icon(name: :"trash-2") %>
<% end %>

Common Icon Patterns

Success

Error

Warning

Info

Settings

Favorite

Star/Rating

Upload

Download

Delete

Edit

Accessibility

Icons follow WAI-ARIA best practices for accessible iconography.

ARIA Attributes

Automatic aria-label generated from icon name (e.g., "arrow-right" → "Arrow right")
Custom aria_label option for context-specific descriptions
aria_hidden: true for decorative icons that should be ignored
role="img" applied for proper semantic interpretation

Semantic HTML

Inline <svg> elements for crisp, scalable graphics
Semantic color mapping via CSS custom properties
Lucide icon library with 1500+ consistent, well-designed icons

Screen Reader Support

Meaningful icons announced by screen readers with descriptive labels
Decorative icons hidden from assistive technology
Icons paired with text provide redundant meaning for clarity

Example: Accessible Icon Patterns

Icon Accessibility Examples

<%# Automatic aria-label from icon name %>
<%= rui_icon :"arrow-right" %>
<%# Renders with aria-label="Arrow right" %>

<%# Custom aria-label for better context %>
<%= rui_icon :heart, aria_label: "Add to favorites" %>

<%# Decorative icon hidden from screen readers %>
<%= rui_icon :star, aria_hidden: true %>

API Reference

rui_icon

Display 1500+ Lucide icons with color inheritance and size options

Parameter	Type	Default	Description
name*	Symbol/String	—	Lucide icon name (e.g., :heart, "arrow-right")

Appearance

Visual styling options

Parameter	Type	Default	Description
size	Symbol	`:base`	Icon size `:xs` `:sm` `:base` `:lg` `:xl` `:xl2` `:xl3` `:xl4` `:xl5` `:xl6`
color	Symbol	`:inherit`	Icon color - any Tailwind color or :inherit from parent
position	Symbol	`:leading`	Position in flex containers `:leading` `:trailing`

Behavior

Color inheritance options

Parameter	Type	Default	Description
standalone	Boolean	`true`	When true, icon manages its own color. When false, inherits from parent (e.g., button color)