Jumpstart docs logo Back to the app

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.

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:

  1. Create a Kit on FontAwesome's website. Make sure to edit your Kit to enable Pro icons.
  2. Edit 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.
  3. 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.

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" %>
icons/add-outline
icons/add-outline
icons/add-solid
icons/add-solid
icons/adjust
icons/adjust
icons/airplane
icons/airplane
icons/album
icons/album
icons/align-center
icons/align-center
icons/align-justified
icons/align-justified
icons/align-left
icons/align-left
icons/align-right
icons/align-right
icons/anchor
icons/anchor
icons/announcement
icons/announcement
icons/apparel
icons/apparel
icons/arrow-down
icons/arrow-down
icons/arrow-left
icons/arrow-left
icons/arrow-outline-down
icons/arrow-outline-down
icons/arrow-outline-left
icons/arrow-outline-left
icons/arrow-outline-right
icons/arrow-outline-right
icons/arrow-outline-up
icons/arrow-outline-up
icons/arrow-right
icons/arrow-right
icons/arrow-thick-down
icons/arrow-thick-down
icons/arrow-thick-left
icons/arrow-thick-left
icons/arrow-thick-right
icons/arrow-thick-right
icons/arrow-thick-up
icons/arrow-thick-up
icons/arrow-thin-down
icons/arrow-thin-down
icons/arrow-thin-left
icons/arrow-thin-left
icons/arrow-thin-right
icons/arrow-thin-right
icons/arrow-thin-up
icons/arrow-thin-up
icons/arrow-up
icons/arrow-up
icons/artist
icons/artist
icons/at-symbol
icons/at-symbol
icons/attachment
icons/attachment
icons/backspace
icons/backspace
icons/backward-step
icons/backward-step
icons/backward
icons/backward
icons/badge
icons/badge
icons/battery-full
icons/battery-full
icons/battery-half
icons/battery-half
icons/battery-low
icons/battery-low
icons/beverage
icons/beverage
icons/block
icons/block
icons/bluetooth
icons/bluetooth
icons/bolt
icons/bolt
icons/book-reference
icons/book-reference
icons/bookmark copy 2
icons/bookmark copy 2
icons/bookmark copy 3
icons/bookmark copy 3
icons/bookmark-outline-add
icons/bookmark-outline-add
icons/bookmark-outline
icons/bookmark-outline
icons/bookmark
icons/bookmark
icons/border-all
icons/border-all
icons/border-bottom
icons/border-bottom
icons/border-horizontal
icons/border-horizontal
icons/border-inner
icons/border-inner
icons/border-left
icons/border-left
icons/border-none
icons/border-none
icons/border-outer
icons/border-outer
icons/border-right
icons/border-right
icons/border-top
icons/border-top
icons/border-vertical
icons/border-vertical
icons/box
icons/box
icons/brightness-down
icons/brightness-down
icons/brightness-up
icons/brightness-up
icons/browser-window-new
icons/browser-window-new
icons/browser-window-open
icons/browser-window-open
icons/browser-window
icons/browser-window
icons/bug
icons/bug
icons/buoy
icons/buoy
icons/calculator
icons/calculator
icons/calendar
icons/calendar
icons/camera
icons/camera
icons/caret
icons/caret
icons/chart-bar
icons/chart-bar
icons/chart-pie
icons/chart-pie
icons/chart
icons/chart
icons/chat-bubble-dots
icons/chat-bubble-dots
icons/checkmark-outline
icons/checkmark-outline
icons/checkmark
icons/checkmark
icons/cheveron-down
icons/cheveron-down
icons/cheveron-left
icons/cheveron-left
icons/cheveron-outline-down
icons/cheveron-outline-down
icons/cheveron-outline-left
icons/cheveron-outline-left
icons/cheveron-outline-right
icons/cheveron-outline-right
icons/cheveron-outline-up
icons/cheveron-outline-up
icons/cheveron-right
icons/cheveron-right
icons/cheveron-up
icons/cheveron-up
icons/clipboard
icons/clipboard
icons/close-outline
icons/close-outline
icons/close-solid
icons/close-solid
icons/close
icons/close
icons/cloud-upload
icons/cloud-upload
icons/cloud
icons/cloud
icons/code>
icons/code
icons/coffee
icons/coffee
icons/cog
icons/cog
icons/color-palette
icons/color-palette
icons/compose
icons/compose
icons/computer-desktop
icons/computer-desktop
icons/computer-laptop
icons/computer-laptop
icons/conversation
icons/conversation
icons/copy
icons/copy
icons/credit-card
icons/credit-card
icons/currency-dollar
icons/currency-dollar
icons/dashboard
icons/dashboard
icons/date-add
icons/date-add
icons/dial-pad
icons/dial-pad
icons/directions
icons/directions
icons/document-add
icons/document-add
icons/document
icons/document
icons/dots-horizontal-double
icons/dots-horizontal-double
icons/dots-horizontal-triple
icons/dots-horizontal-triple
icons/download
icons/download
icons/duplicate
icons/duplicate
icons/edit-copy
icons/edit-copy
icons/edit-crop
icons/edit-crop
icons/edit-cut
icons/edit-cut
icons/edit-pencil
icons/edit-pencil
icons/education
icons/education
icons/envelope
icons/envelope
icons/exclamation-outline
icons/exclamation-outline
icons/exclamation-solid
icons/exclamation-solid
icons/explore
icons/explore
icons/factory
icons/factory
icons/fast-forward
icons/fast-forward
icons/fast-rewind
icons/fast-rewind
icons/film
icons/film
icons/filter
icons/filter
icons/flag
icons/flag
icons/flashlight
icons/flashlight
icons/folder-outline-add
icons/folder-outline-add
icons/folder-outline
icons/folder-outline
icons/folder
icons/folder
icons/format-bold
icons/format-bold
icons/format-font-size
icons/format-font-size
icons/format-italic
icons/format-italic
icons/format-text-size
icons/format-text-size
icons/format-underline
icons/format-underline
icons/forward-step
icons/forward-step
icons/forward
icons/forward
icons/gift
icons/gift
icons/globe
icons/globe
icons/hand-stop
icons/hand-stop
icons/hard-drive
icons/hard-drive
icons/headphones
icons/headphones
icons/heart
icons/heart
icons/home
icons/home
icons/hot
icons/hot
icons/hour-glass
icons/hour-glass
icons/inbox-check
icons/inbox-check
icons/inbox-download
icons/inbox-download
icons/inbox-full
icons/inbox-full
icons/inbox
icons/inbox
icons/indent-decrease
icons/indent-decrease
icons/indent-increase
icons/indent-increase
icons/information-outline
icons/information-outline
icons/information-solid
icons/information-solid
icons/key
icons/key
icons/keyboard
icons/keyboard
icons/layers
icons/layers
icons/library
icons/library
icons/light-bulb
icons/light-bulb
icons/link
icons/link
icons/list-add
icons/list-add
icons/list-bullet
icons/list-bullet
icons/list
icons/list
icons/load-balancer
icons/load-balancer
icons/location-current
icons/location-current
icons/location-food
icons/location-food
icons/location-gas-station
icons/location-gas-station
icons/location-hotel
icons/location-hotel
icons/location-marina
icons/location-marina
icons/location-park
icons/location-park
icons/location-restroom
icons/location-restroom
icons/location-shopping
icons/location-shopping
icons/location
icons/location
icons/lock-closed
icons/lock-closed
icons/lock-open
icons/lock-open
icons/map
icons/map
icons/menu
icons/menu
icons/mic
icons/mic
icons/minus-outline
icons/minus-outline
icons/minus-solid
icons/minus-solid
icons/mobile-devices
icons/mobile-devices
icons/mood-happy-outline
icons/mood-happy-outline
icons/mood-happy-solid
icons/mood-happy-solid
icons/mood-neutral-outline
icons/mood-neutral-outline
icons/mood-neutral-solid
icons/mood-neutral-solid
icons/mood-sad-outline
icons/mood-sad-outline
icons/mood-sad-solid
icons/mood-sad-solid
icons/mouse
icons/mouse
icons/music-album
icons/music-album
icons/music-artist
icons/music-artist
icons/music-notes
icons/music-notes
icons/music-playlist
icons/music-playlist
icons/navigation-more
icons/navigation-more
icons/network
icons/network
icons/news-paper
icons/news-paper
icons/notification
icons/notification
icons/notifications-outline
icons/notifications-outline
icons/notifications
icons/notifications
icons/paste
icons/paste
icons/pause-outline
icons/pause-outline
icons/pause-solid
icons/pause-solid
icons/pause
icons/pause
icons/pen-tool
icons/pen-tool
icons/person
icons/person
icons/phone
icons/phone
icons/photo
icons/photo
icons/php-elephant
icons/php-elephant
icons/pin
icons/pin
icons/play-outline
icons/play-outline
icons/play
icons/play
icons/playlist
icons/playlist
icons/plugin
icons/plugin
icons/portfolio
icons/portfolio
icons/printer
icons/printer
icons/pylon
icons/pylon
icons/question
icons/question
icons/queue
icons/queue
icons/radar copy 2
icons/radar copy 2
icons/radar
icons/radar
icons/radio
icons/radio
icons/refresh
icons/refresh
icons/reload
icons/reload
icons/reply-all
icons/reply-all
icons/reply
icons/reply
icons/repost
icons/repost
icons/save-disk
icons/save-disk
icons/screen-full
icons/screen-full
icons/search
icons/search
icons/send
icons/send
icons/servers
icons/servers
icons/share-01
icons/share-01
icons/share-alt
icons/share-alt
icons/share
icons/share
icons/shield
icons/shield
icons/shopping-cart
icons/shopping-cart
icons/show-sidebar
icons/show-sidebar
icons/shuffle
icons/shuffle
icons/spinner
icons/spinner
icons/stand-by
icons/stand-by
icons/star-full
icons/star-full
icons/station
icons/station
icons/step-backward
icons/step-backward
icons/step-forward
icons/step-forward
icons/stethoscope
icons/stethoscope
icons/store-front
icons/store-front
icons/stroke-width
icons/stroke-width
icons/subdirectory-left
icons/subdirectory-left
icons/subdirectory-right
icons/subdirectory-right
icons/swap
icons/swap
icons/tablet
icons/tablet
icons/tag
icons/tag
icons/target
icons/target
icons/text-box
icons/text-box
icons/text-decoration
icons/text-decoration
icons/thermometer
icons/thermometer
icons/thumbs-down
icons/thumbs-down
icons/thumbs-up
icons/thumbs-up
icons/ticket
icons/ticket
icons/time
icons/time
icons/timer
icons/timer
icons/tools copy
icons/tools copy
icons/translate
icons/translate
icons/trash
icons/trash
icons/travel-bus
icons/travel-bus
icons/travel-car
icons/travel-car
icons/travel-case
icons/travel-case
icons/travel-taxi-cab
icons/travel-taxi-cab
icons/travel-train
icons/travel-train
icons/travel-walk
icons/travel-walk
icons/travel
icons/travel
icons/trophy
icons/trophy
icons/tuning
icons/tuning
icons/twitter
icons/twitter
icons/upload
icons/upload
icons/usb
icons/usb
icons/user-add
icons/user-add
icons/user-group
icons/user-group
icons/user-solid-circle
icons/user-solid-circle
icons/user-solid-square
icons/user-solid-square
icons/user
icons/user
icons/vector
icons/vector
icons/video-camera
icons/video-camera
icons/view-carousel
icons/view-carousel
icons/view-column
icons/view-column
icons/view-hide
icons/view-hide
icons/view-list
icons/view-list
icons/view-show
icons/view-show
icons/view-tile
icons/view-tile
icons/volume-down
icons/volume-down
icons/volume-mute
icons/volume-mute
icons/volume-off
icons/volume-off
icons/volume-up
icons/volume-up
icons/wallet
icons/wallet
icons/watch
icons/watch
icons/window-new
icons/window-new
icons/window-open
icons/window-open
icons/window
icons/window
icons/wrench
icons/wrench
icons/yin-yang
icons/yin-yang
icons/zoom-in
icons/zoom-in
icons/zoom-out
icons/zoom-out