Icons are needed in almost any app. They add visual interest, while also helping users navigate your app easier.

All icons in Rails Designer’s components are added inline like so:

  <svg xmlns="" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="w-4 h-4">
    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>

This allows for, for example, to change the color by changing the parent element’s class, eg. adding text-sky-500 will also make the SVG’s stroke this color.

All icons in use are from the Heroicons library.