# 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

    <!-- 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

    <!-- 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

    <!-- 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

    <!-- 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