Icons

How to format the size, color and appearance of Jumpstart's suite of icons. See all available icons graphics see the Icons Reference page.

Basic Usage

Heart Icon 
<!-- Using SVGInjector to inject SVG from img tag -->
<img class="icon" src="assets/img/icons/theme/general/heart.svg" alt="Heart icon" data-inject-svg />

<!-- Directly embedded SVG element -->
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M16.5 5C14.8905 5 13.0082 6.82463 12 8C10.9918 6.82463 9.1095 5 7.5 5C4.651 5 3 7.22218 3 10.0504C3 13.1835 6 16.5 12 20C18 16.5 21 13.25 21 10.25C21 7.42177 19.349 5 16.5 5Z" fill="#212529"></path>
</svg>
.icon

Apply to <svg> to format as an icon

Sizes

heart interface icon heart interface icon heart interface icon heart interface icon heart interface icon 
<!-- Using SVGInjector to inject SVG from img tag -->
<img class="icon icon-lg" src="assets/img/icons/theme/general/heart.svg" alt="Heart icon" data-inject-svg />

<!-- Directly embedded SVG element -->
<svg class="icon icon-lg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M16.5 5C14.8905 5 13.0082 6.82463 12 8C10.9918 6.82463 9.1095 5 7.5 5C4.651 5 3 7.22218 3 10.0504C3 13.1835 6 16.5 12 20C18 16.5 21 13.25 21 10.25C21 7.42177 19.349 5 16.5 5Z" fill="#212529"></path>
</svg>
.icon-sm

Apply to .icon to reduce default size

.icon-md

Apply to .icon to slightly increase default size

.icon-lg

Apply to .icon to greatly increase default size

Colors - Theme

homepod icon airpods icon watch-2 icon 
<!-- Using SVGInjector to inject SVG from img tag -->
<img class="icon bg-primary" src="assets/img/icons/theme/general/heart.svg" alt="Heart icon" data-inject-svg />

<!-- Directly embedded SVG element -->
<svg class="icon bg-primary" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M16.5 5C14.8905 5 13.0082 6.82463 12 8C10.9918 6.82463 9.1095 5 7.5 5C4.651 5 3 7.22218 3 10.0504C3 13.1835 6 16.5 12 20C18 16.5 21 13.25 21 10.25C21 7.42177 19.349 5 16.5 5Z" fill="#212529"></path>
</svg>
.bg-primary

Apply to .icon to adjust the icon's color

.bg-primary-2

Apply to .icon to adjust the icon's color

.bg-primary-3

Apply to .icon to adjust the icon's color

Colors - Bootstrap

thunder icon thunder icon thunder icon thunder icon thunder icon thunder icon thunder icon 
<!-- Using SVGInjector to inject SVG from img tag -->
<img class="icon bg-warning" src="assets/img/icons/theme/general/heart.svg" alt="Heart icon" data-inject-svg />

<!-- Directly embedded SVG element -->
<svg class="icon bg-warning" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M16.5 5C14.8905 5 13.0082 6.82463 12 8C10.9918 6.82463 9.1095 5 7.5 5C4.651 5 3 7.22218 3 10.0504C3 13.1835 6 16.5 12 20C18 16.5 21 13.25 21 10.25C21 7.42177 19.349 5 16.5 5Z" fill="#212529"></path>
</svg>
.bg-secondary

Apply to .icon to adjust the icon's color

.bg-success

Apply to .icon to adjust the icon's color

.bg-danger

Apply to .icon to adjust the icon's color

.bg-warning

Apply to .icon to adjust the icon's color

.bg-info

Apply to .icon to adjust the icon's color

.bg-dark

Apply to .icon to adjust the icon's color