Back to the app
Get Started
Backend
- Accounts & Multitenancy
- Action Cable
- Action Mailbox
- Action Text
- Active Storage
- Admin
- Announcements
- API
- 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
FontAwesome
FontAwesome Free is already included in Jumpstart 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.
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" %>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.