Our recommended icon set is Heroicons. They're created by the TailwindCSS creators and come with solid, outline, and mini variations.
To use them, simply copy the SVG from Heroicons and paste it into your HTML. This saves your browser from having to make a separate request to render the icons.
Here's an example of an icon using text-primary-500
to change the icon to blue.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-primary-500">
<path fill-rule="evenodd" d="M6.32 2.577a49.255 49.255 0 0 1 11.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 0 1-1.085.67L12 18.089l-7.165 3.583A.75.75 0 0 1 3.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93Z" clip-rule="evenodd" />
</svg>
Font Awesome has an extensive icon set, so if you can't find something in Heroicons, you can probably find it in FontAwesome.
Using Font Awesome icons is as simple as:
fa_icon
helper or paste the FontAwesome HTML into your views.
<%= fa_icon "thumbs-up" %>