Rails Icons

# Using the default icon library
<%= icon "check", class: "text-gray-500" %>

# Using any custom library, like https://simpleicons.org/
<%= icon "apple", library: "simple_icons", class: "text-black" %>

The icons are pulled from their respective GitHub repositories, keeping Rails icons’ core lightweight.

Install

Add the rails_icons gem:

bundle add rails_icons

Install, choosing one of the supported libraries

rails generate rails_icons:install --libraries=herocions

# Or multiple at once
rails generate rails_icons:install --libraries=heroicons lucide

Usage

# Uses the default library and variant defined in config/initializer/rails_icons.rb
icon "check"

# Use another variant
icon "check", variant: "solid"

# Set library explictly
icon "check", library: "heroicons"

# Add CSS
icon "check", class: "text-green-500"

# Add data attributes
icon "check", data: { controller: "swap" }

# Set the stroke-width
icon "check", stroke_width: 2

First-party libraries

• Feather
• Heroicons
• Lucide
• Tabler

Animated icons

Rails Icons also includes a few animated icons. Great for loading states and so on. These are currently included:

• faded-spinner
• trailing-spinner
• fading-dots
• bouncing-dots

Use like this: icon "faded-spinner", library: "animated". The same attributes as other libraries are available.

Custom icon library

Need to use an icon from another library?

1. run rails generate rails_icons:initializer --custom=simple_icons;
2. add the (SVG) icons to the created directory app/assets/svg/icons/simple_icons;

Every custom icon can now be used with the same interface as first-party icon libraries.

icon "apple", library: "simple_icons", class: "text-black"

Sync icons

If a library gets updated, sync the icons with

rails generate rails_icons:sync --libraries=heroicons

# Or multiple at once
rails generate rails_icons:sync --libraries=heroicons lucide