Icons

Heroicons

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>

FontAwesome

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:

1. Create a Kit on FontAwesome's website.
2. Include their embed code in the head tag of each layout.
3. Use the fa_icon helper or paste the FontAwesome HTML into your views.

   <%= fa_icon "thumbs-up" %>