Back to the app
Get Started
Backend
- Accounts & Multitenancy
- Action Cable
- Action Mailbox
- Action Text
- Active Storage
- Admin
- Announcements
- API
- API Clients
- Authentication
- Background Workers
- Billing & Payments
- Credentials
- Cron & Scheduled Jobs
- Databases
- Development
- Internationalization (I18n)
- Notifications
- Scaffolds
- Users
Frontend
- Alerts & Notices
- Branding
- Buttons
- Cards
- Forms
- Icons
- JavaScript
- Pagination
- Pills
- TailwindCSS
- Typography
- Wells
Extras
Turbo Native (iOS & Android)
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 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>FontAwesome
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" %>FontAwesome Pro
To use FontAwesome Pro, you can easily add it to your Jumpstart Pro application:
- Create a Kit on FontAwesome's website. Make sure to edit your Kit to enable Pro icons.
- Edit
app/views/layouts/application.html.erband 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. - Refresh your page and you're good to go.
Zondicons
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.
The helper is found in app/helpers/application_helper.rb.
def render_svg(name, options = {})
options[:title] ||= name.underscore.humanize
options[:aria] = true
options[:nocomment] = true
options[:class] = options.fetch(:styles, "fill-current text-gray-500")
filename = "#{name}.svg"
inline_svg_tag(filename, options)
endPass 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" %>icons/add-outline
icons/add-solid
icons/adjust
icons/airplane
icons/album
icons/align-center
icons/align-justified
icons/align-left
icons/align-right
icons/anchor
icons/announcement
icons/apparel
icons/arrow-down
icons/arrow-left
icons/arrow-outline-down
icons/arrow-outline-left
icons/arrow-outline-right
icons/arrow-outline-up
icons/arrow-right
icons/arrow-thick-down
icons/arrow-thick-left
icons/arrow-thick-right
icons/arrow-thick-up
icons/arrow-thin-down
icons/arrow-thin-left
icons/arrow-thin-right
icons/arrow-thin-up
icons/arrow-up
icons/artist
icons/at-symbol
icons/attachment
icons/backspace
icons/backward-step
icons/backward
icons/badge
icons/battery-full
icons/battery-half
icons/battery-low
icons/beverage
icons/block
icons/bluetooth
icons/bolt
icons/book-reference
icons/bookmark copy 2
icons/bookmark copy 3
icons/bookmark-outline-add
icons/bookmark-outline
icons/bookmark
icons/border-all
icons/border-bottom
icons/border-horizontal
icons/border-inner
icons/border-left
icons/border-none
icons/border-outer
icons/border-right
icons/border-top
icons/border-vertical
icons/box
icons/brightness-down
icons/brightness-up
icons/browser-window-new
icons/browser-window-open
icons/browser-window
icons/bug
icons/buoy
icons/calculator
icons/calendar
icons/camera
icons/caret
icons/chart-bar
icons/chart-pie
icons/chart
icons/chat-bubble-dots
icons/checkmark-outline
icons/checkmark
icons/cheveron-down
icons/cheveron-left
icons/cheveron-outline-down
icons/cheveron-outline-left
icons/cheveron-outline-right
icons/cheveron-outline-up
icons/cheveron-right
icons/cheveron-up
icons/clipboard
icons/close-outline
icons/close-solid
icons/close
icons/cloud-upload
icons/cloud
icons/code
icons/coffee
icons/cog
icons/color-palette
icons/compose
icons/computer-desktop
icons/computer-laptop
icons/conversation
icons/copy
icons/credit-card
icons/currency-dollar
icons/dashboard
icons/date-add
icons/dial-pad
icons/directions
icons/document-add
icons/document
icons/dots-horizontal-double
icons/dots-horizontal-triple
icons/download
icons/duplicate
icons/edit-copy
icons/edit-crop
icons/edit-cut
icons/edit-pencil
icons/education
icons/envelope
icons/exclamation-outline
icons/exclamation-solid
icons/explore
icons/factory
icons/fast-forward
icons/fast-rewind
icons/film
icons/filter
icons/flag
icons/flashlight
icons/folder-outline-add
icons/folder-outline
icons/folder
icons/format-bold
icons/format-font-size
icons/format-italic
icons/format-text-size
icons/format-underline
icons/forward-step
icons/forward
icons/gift
icons/globe
icons/hand-stop
icons/hard-drive
icons/headphones
icons/heart
icons/home
icons/hot
icons/hour-glass
icons/inbox-check
icons/inbox-download
icons/inbox-full
icons/inbox
icons/indent-decrease
icons/indent-increase
icons/information-outline
icons/information-solid
icons/key
icons/keyboard
icons/layers
icons/library
icons/light-bulb
icons/link
icons/list-add
icons/list-bullet
icons/list
icons/load-balancer
icons/location-current
icons/location-food
icons/location-gas-station
icons/location-hotel
icons/location-marina
icons/location-park
icons/location-restroom
icons/location-shopping
icons/location
icons/lock-closed
icons/lock-open
icons/map
icons/menu
icons/mic
icons/minus-outline
icons/minus-solid
icons/mobile-devices
icons/mood-happy-outline
icons/mood-happy-solid
icons/mood-neutral-outline
icons/mood-neutral-solid
icons/mood-sad-outline
icons/mood-sad-solid
icons/mouse
icons/music-album
icons/music-artist
icons/music-notes
icons/music-playlist
icons/navigation-more
icons/network
icons/news-paper
icons/notification
icons/notifications-outline
icons/notifications
icons/paste
icons/pause-outline
icons/pause-solid
icons/pause
icons/pen-tool
icons/person
icons/phone
icons/photo
icons/php-elephant
icons/pin
icons/play-outline
icons/play
icons/playlist
icons/plugin
icons/portfolio
icons/printer
icons/pylon
icons/question
icons/queue
icons/radar copy 2
icons/radar
icons/radio
icons/refresh
icons/reload
icons/reply-all
icons/reply
icons/repost
icons/save-disk
icons/screen-full
icons/search
icons/send
icons/servers
icons/share-01
icons/share-alt
icons/share
icons/shield
icons/shopping-cart
icons/show-sidebar
icons/shuffle
icons/spinner
icons/stand-by
icons/star-full
icons/station
icons/step-backward
icons/step-forward
icons/stethoscope
icons/store-front
icons/stroke-width
icons/subdirectory-left
icons/subdirectory-right
icons/swap
icons/tablet
icons/tag
icons/target
icons/text-box
icons/text-decoration
icons/thermometer
icons/thumbs-down
icons/thumbs-up
icons/ticket
icons/time
icons/timer
icons/tools copy
icons/translate
icons/trash
icons/travel-bus
icons/travel-car
icons/travel-case
icons/travel-taxi-cab
icons/travel-train
icons/travel-walk
icons/travel
icons/trophy
icons/tuning
icons/twitter
icons/upload
icons/usb
icons/user-add
icons/user-group
icons/user-solid-circle
icons/user-solid-square
icons/user
icons/vector
icons/video-camera
icons/view-carousel
icons/view-column
icons/view-hide
icons/view-list
icons/view-show
icons/view-tile
icons/volume-down
icons/volume-mute
icons/volume-off
icons/volume-up
icons/wallet
icons/watch
icons/window-new
icons/window-open
icons/window
icons/wrench
icons/yin-yang
icons/zoom-in
icons/zoom-out
Heroicons
Another option for icons is Hericons from Steve Schoger. You can copy paste the SVGs into your template as needed.