Icons

Lucide

Our icon set is Lucide (free and open, ISC licensed). Icons are vendored into app/assets/svg/icons/lucide/ by the rails_icons gem and rendered inline as SVG, so the browser makes no extra request.

Render one with the icon helper, using the icon's Lucide name. Pass Tailwind classes (including the size) with class:, and anything else as HTML attributes. Here's an icon coloured with text-blue-500:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="size-6 text-blue-500" aria-hidden="true">
  <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
  <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
</svg>

Because Tailwind's preflight sets svg { display: block }, give icons that sit inline within text an inline-block and a vertical alignment (for example align-[-0.125em]); icons inside a flex container only need a size class.

Browse and search every available icon at /rails_icons (mounted in local environments only). To add or refresh icons after Lucide updates, run:

bin/rails generate rails_icons:sync --library=lucide