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 the solid thumbs up icon using fill-current text-blue-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 fill-current text-blue-500">
<path d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 016 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75 2.25 2.25 0 012.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23h-.777zM2.331 10.977a11.969 11.969 0 00-.831 4.398 12 12 0 00.52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 01-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227z" />
</svg>Font Awesome's free icon set is also included in Jumpstart Pro by default. They have 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 embedding the HTML for it:
<i class="far fa-thumbs-up"></i>Or you can use our fa_icon helper in ApplicationHelper:
<%= fa_icon "thumbs-up" %>To use FontAwesome Pro, you can easily add it to your Jumpstart Pro application:
app/views/layouts/application.html.erb and paste in your Kit html into the head tag. You can remove the FontAwesome link for the free version. You won't need that anymore.The icons shipping with Jumpstart are from the Zondicons library from Steve Schoger. Find them in app/images/icons. We use a SVG render function that hooks into the inline_svg gem. In doing so you can pass styles. title, and name attributes which are all optional.
Pass in both fill-current & a text color class from Tailwind CSS to alter the colors respectively. Use the helper like the following for SVG-based icons/images
<%= render_svg "icon-name", styles: "fill-current text-color-black icon-lg", title: "my icon" %>