twbs · bastienmoulia · May 23, 2020
diff --git a/bootstrap-icons.svg b/bootstrap-icons.svg
diff --git a/config.yml b/config.yml
@@ -31,6 +31,8 @@ module:
       target:           static/apple-touch-icon.png
     - source:           docs/static/assets/img/favicons/favicon.ico
       target:           static/favicon.ico
+    - source:           bootstrap-icons.svg
+      target:           static/bootstrap-icons.svg
 
 params:
   description:          "Official open source SVG icon library for Bootstrap"

diff --git a/docs/content/_index.md b/docs/content/_index.md
@@ -42,6 +42,20 @@ Embed your icons within the HTML of your page (as opposed to an external image f
   </div>
 </div>
 
+<div class="row my-4">
+  <div class="col-md-4 col-xl-3">
+{{< md >}}
+### Sprite
+Reference the sprite file containing all the icons with the `<use>` element. And select the symbol with the fragment identifer. Here it's `#heart-fill`.
+{{< /md >}}
+  </div>
+  <div class="col-md-8 col-xl-9">
+    {{< example >}}<svg class="bi" width="32" height="32" fill="currentColor">
+  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
+</svg>{{< /example >}}
+  </div>
+</div>
+
 <div class="row my-4">
   <div class="col-md-4 col-xl-3">
 {{< md >}}