From c4de6b46ba92b8d1796df7ddd2d27d5736b1ba92 Mon Sep 17 00:00:00 2001
From: Pander <pander@users.sourceforge.net>
Date: Thu, 19 Oct 2023 17:11:41 +0200
Subject: [PATCH] replaced deprecated color muted with secondary

---
 examples/bootstrap4/templates/icons.html      | 4100 ++++++++---------
 examples/bootstrap5/templates/icons.html      | 4100 ++++++++---------
 examples/update-icons.py                      |    2 +-
 .../templates/bootstrap5/form.html            |    8 +-
 tests/test_bootstrap5/test_render_form.py     |    2 +-
 5 files changed, 4106 insertions(+), 4106 deletions(-)

diff --git a/examples/bootstrap4/templates/icons.html b/examples/bootstrap4/templates/icons.html
index bdb27565..969c5028 100644
--- a/examples/bootstrap4/templates/icons.html
+++ b/examples/bootstrap4/templates/icons.html
@@ -12,7 +12,7 @@ <h2>Icons</h2>
 {{ render_icon('0-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">0-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">0-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/0-circle-fill/">
@@ -20,7 +20,7 @@ <h2>Icons</h2>
 {{ render_icon('0-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">0-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">0-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/0-square/">
@@ -28,7 +28,7 @@ <h2>Icons</h2>
 {{ render_icon('0-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">0-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">0-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/0-square-fill/">
@@ -36,7 +36,7 @@ <h2>Icons</h2>
 {{ render_icon('0-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">0-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">0-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/1-circle/">
@@ -44,7 +44,7 @@ <h2>Icons</h2>
 {{ render_icon('1-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">1-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">1-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/1-circle-fill/">
@@ -52,7 +52,7 @@ <h2>Icons</h2>
 {{ render_icon('1-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">1-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">1-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/1-square/">
@@ -60,7 +60,7 @@ <h2>Icons</h2>
 {{ render_icon('1-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">1-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">1-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/1-square-fill/">
@@ -68,7 +68,7 @@ <h2>Icons</h2>
 {{ render_icon('1-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">1-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">1-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/123/">
@@ -76,7 +76,7 @@ <h2>Icons</h2>
 {{ render_icon('123', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">123</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">123</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/2-circle/">
@@ -84,7 +84,7 @@ <h2>Icons</h2>
 {{ render_icon('2-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">2-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">2-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/2-circle-fill/">
@@ -92,7 +92,7 @@ <h2>Icons</h2>
 {{ render_icon('2-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">2-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">2-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/2-square/">
@@ -100,7 +100,7 @@ <h2>Icons</h2>
 {{ render_icon('2-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">2-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">2-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/2-square-fill/">
@@ -108,7 +108,7 @@ <h2>Icons</h2>
 {{ render_icon('2-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">2-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">2-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/3-circle/">
@@ -116,7 +116,7 @@ <h2>Icons</h2>
 {{ render_icon('3-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">3-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">3-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/3-circle-fill/">
@@ -124,7 +124,7 @@ <h2>Icons</h2>
 {{ render_icon('3-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">3-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">3-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/3-square/">
@@ -132,7 +132,7 @@ <h2>Icons</h2>
 {{ render_icon('3-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">3-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">3-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/3-square-fill/">
@@ -140,7 +140,7 @@ <h2>Icons</h2>
 {{ render_icon('3-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">3-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">3-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/4-circle/">
@@ -148,7 +148,7 @@ <h2>Icons</h2>
 {{ render_icon('4-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">4-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">4-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/4-circle-fill/">
@@ -156,7 +156,7 @@ <h2>Icons</h2>
 {{ render_icon('4-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">4-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">4-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/4-square/">
@@ -164,7 +164,7 @@ <h2>Icons</h2>
 {{ render_icon('4-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">4-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">4-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/4-square-fill/">
@@ -172,7 +172,7 @@ <h2>Icons</h2>
 {{ render_icon('4-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">4-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">4-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/5-circle/">
@@ -180,7 +180,7 @@ <h2>Icons</h2>
 {{ render_icon('5-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">5-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">5-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/5-circle-fill/">
@@ -188,7 +188,7 @@ <h2>Icons</h2>
 {{ render_icon('5-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">5-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">5-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/5-square/">
@@ -196,7 +196,7 @@ <h2>Icons</h2>
 {{ render_icon('5-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">5-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">5-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/5-square-fill/">
@@ -204,7 +204,7 @@ <h2>Icons</h2>
 {{ render_icon('5-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">5-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">5-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/6-circle/">
@@ -212,7 +212,7 @@ <h2>Icons</h2>
 {{ render_icon('6-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">6-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">6-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/6-circle-fill/">
@@ -220,7 +220,7 @@ <h2>Icons</h2>
 {{ render_icon('6-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">6-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">6-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/6-square/">
@@ -228,7 +228,7 @@ <h2>Icons</h2>
 {{ render_icon('6-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">6-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">6-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/6-square-fill/">
@@ -236,7 +236,7 @@ <h2>Icons</h2>
 {{ render_icon('6-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">6-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">6-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/7-circle/">
@@ -244,7 +244,7 @@ <h2>Icons</h2>
 {{ render_icon('7-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">7-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">7-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/7-circle-fill/">
@@ -252,7 +252,7 @@ <h2>Icons</h2>
 {{ render_icon('7-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">7-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">7-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/7-square/">
@@ -260,7 +260,7 @@ <h2>Icons</h2>
 {{ render_icon('7-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">7-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">7-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/7-square-fill/">
@@ -268,7 +268,7 @@ <h2>Icons</h2>
 {{ render_icon('7-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">7-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">7-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/8-circle/">
@@ -276,7 +276,7 @@ <h2>Icons</h2>
 {{ render_icon('8-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">8-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">8-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/8-circle-fill/">
@@ -284,7 +284,7 @@ <h2>Icons</h2>
 {{ render_icon('8-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">8-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">8-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/8-square/">
@@ -292,7 +292,7 @@ <h2>Icons</h2>
 {{ render_icon('8-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">8-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">8-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/8-square-fill/">
@@ -300,7 +300,7 @@ <h2>Icons</h2>
 {{ render_icon('8-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">8-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">8-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/9-circle/">
@@ -308,7 +308,7 @@ <h2>Icons</h2>
 {{ render_icon('9-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">9-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">9-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/9-circle-fill/">
@@ -316,7 +316,7 @@ <h2>Icons</h2>
 {{ render_icon('9-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">9-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">9-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/9-square/">
@@ -324,7 +324,7 @@ <h2>Icons</h2>
 {{ render_icon('9-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">9-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">9-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/9-square-fill/">
@@ -332,7 +332,7 @@ <h2>Icons</h2>
 {{ render_icon('9-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">9-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">9-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/activity/">
@@ -340,7 +340,7 @@ <h2>Icons</h2>
 {{ render_icon('activity', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">activity</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">activity</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/airplane/">
@@ -348,7 +348,7 @@ <h2>Icons</h2>
 {{ render_icon('airplane', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">airplane</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">airplane</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/airplane-engines/">
@@ -356,7 +356,7 @@ <h2>Icons</h2>
 {{ render_icon('airplane-engines', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">airplane-engines</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">airplane-engines</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/airplane-engines-fill/">
@@ -364,7 +364,7 @@ <h2>Icons</h2>
 {{ render_icon('airplane-engines-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">airplane-engines-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">airplane-engines-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/airplane-fill/">
@@ -372,7 +372,7 @@ <h2>Icons</h2>
 {{ render_icon('airplane-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">airplane-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">airplane-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/alarm/">
@@ -380,7 +380,7 @@ <h2>Icons</h2>
 {{ render_icon('alarm', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">alarm</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">alarm</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/alarm-fill/">
@@ -388,7 +388,7 @@ <h2>Icons</h2>
 {{ render_icon('alarm-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">alarm-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">alarm-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/alexa/">
@@ -396,7 +396,7 @@ <h2>Icons</h2>
 {{ render_icon('alexa', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">alexa</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">alexa</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/align-bottom/">
@@ -404,7 +404,7 @@ <h2>Icons</h2>
 {{ render_icon('align-bottom', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">align-bottom</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">align-bottom</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/align-center/">
@@ -412,7 +412,7 @@ <h2>Icons</h2>
 {{ render_icon('align-center', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">align-center</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">align-center</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/align-end/">
@@ -420,7 +420,7 @@ <h2>Icons</h2>
 {{ render_icon('align-end', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">align-end</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">align-end</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/align-middle/">
@@ -428,7 +428,7 @@ <h2>Icons</h2>
 {{ render_icon('align-middle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">align-middle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">align-middle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/align-start/">
@@ -436,7 +436,7 @@ <h2>Icons</h2>
 {{ render_icon('align-start', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">align-start</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">align-start</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/align-top/">
@@ -444,7 +444,7 @@ <h2>Icons</h2>
 {{ render_icon('align-top', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">align-top</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">align-top</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/alipay/">
@@ -452,7 +452,7 @@ <h2>Icons</h2>
 {{ render_icon('alipay', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">alipay</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">alipay</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/alphabet/">
@@ -460,7 +460,7 @@ <h2>Icons</h2>
 {{ render_icon('alphabet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">alphabet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">alphabet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/alphabet-uppercase/">
@@ -468,7 +468,7 @@ <h2>Icons</h2>
 {{ render_icon('alphabet-uppercase', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">alphabet-uppercase</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">alphabet-uppercase</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/alt/">
@@ -476,7 +476,7 @@ <h2>Icons</h2>
 {{ render_icon('alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/amazon/">
@@ -484,7 +484,7 @@ <h2>Icons</h2>
 {{ render_icon('amazon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">amazon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">amazon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/amd/">
@@ -492,7 +492,7 @@ <h2>Icons</h2>
 {{ render_icon('amd', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">amd</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">amd</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/android/">
@@ -500,7 +500,7 @@ <h2>Icons</h2>
 {{ render_icon('android', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">android</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">android</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/android2/">
@@ -508,7 +508,7 @@ <h2>Icons</h2>
 {{ render_icon('android2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">android2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">android2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/app/">
@@ -516,7 +516,7 @@ <h2>Icons</h2>
 {{ render_icon('app', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">app</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">app</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/app-indicator/">
@@ -524,7 +524,7 @@ <h2>Icons</h2>
 {{ render_icon('app-indicator', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">app-indicator</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">app-indicator</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/apple/">
@@ -532,7 +532,7 @@ <h2>Icons</h2>
 {{ render_icon('apple', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">apple</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">apple</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/archive/">
@@ -540,7 +540,7 @@ <h2>Icons</h2>
 {{ render_icon('archive', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">archive</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">archive</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/archive-fill/">
@@ -548,7 +548,7 @@ <h2>Icons</h2>
 {{ render_icon('archive-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">archive-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">archive-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-90deg-down/">
@@ -556,7 +556,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-90deg-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-90deg-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-90deg-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-90deg-left/">
@@ -564,7 +564,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-90deg-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-90deg-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-90deg-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-90deg-right/">
@@ -572,7 +572,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-90deg-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-90deg-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-90deg-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-90deg-up/">
@@ -580,7 +580,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-90deg-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-90deg-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-90deg-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-bar-down/">
@@ -588,7 +588,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-bar-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-bar-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-bar-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-bar-left/">
@@ -596,7 +596,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-bar-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-bar-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-bar-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-bar-right/">
@@ -604,7 +604,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-bar-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-bar-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-bar-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-bar-up/">
@@ -612,7 +612,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-bar-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-bar-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-bar-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-clockwise/">
@@ -620,7 +620,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-clockwise', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-clockwise</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-clockwise</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-counterclockwise/">
@@ -628,7 +628,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-counterclockwise', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-counterclockwise</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-counterclockwise</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down/">
@@ -636,7 +636,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-circle/">
@@ -644,7 +644,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-circle-fill/">
@@ -652,7 +652,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-left/">
@@ -660,7 +660,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-left-circle/">
@@ -668,7 +668,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-left-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-left-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-left-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-left-circle-fill/">
@@ -676,7 +676,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-left-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-left-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-left-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-left-square/">
@@ -684,7 +684,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-left-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-left-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-left-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-left-square-fill/">
@@ -692,7 +692,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-left-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-left-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-left-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-right/">
@@ -700,7 +700,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-right-circle/">
@@ -708,7 +708,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-right-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-right-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-right-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-right-circle-fill/">
@@ -716,7 +716,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-right-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-right-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-right-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-right-square/">
@@ -724,7 +724,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-right-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-right-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-right-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-right-square-fill/">
@@ -732,7 +732,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-right-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-right-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-right-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-short/">
@@ -740,7 +740,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-short', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-short</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-short</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-square/">
@@ -748,7 +748,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-square-fill/">
@@ -756,7 +756,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-up/">
@@ -764,7 +764,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-left/">
@@ -772,7 +772,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-left-circle/">
@@ -780,7 +780,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-left-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-left-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-left-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-left-circle-fill/">
@@ -788,7 +788,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-left-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-left-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-left-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-left-right/">
@@ -796,7 +796,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-left-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-left-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-left-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-left-short/">
@@ -804,7 +804,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-left-short', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-left-short</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-left-short</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-left-square/">
@@ -812,7 +812,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-left-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-left-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-left-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-left-square-fill/">
@@ -820,7 +820,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-left-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-left-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-left-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-repeat/">
@@ -828,7 +828,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-repeat', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-repeat</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-repeat</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-return-left/">
@@ -836,7 +836,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-return-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-return-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-return-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-return-right/">
@@ -844,7 +844,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-return-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-return-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-return-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-right/">
@@ -852,7 +852,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-right-circle/">
@@ -860,7 +860,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-right-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-right-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-right-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-right-circle-fill/">
@@ -868,7 +868,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-right-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-right-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-right-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-right-short/">
@@ -876,7 +876,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-right-short', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-right-short</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-right-short</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-right-square/">
@@ -884,7 +884,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-right-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-right-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-right-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-right-square-fill/">
@@ -892,7 +892,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-right-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-right-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-right-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-through-heart/">
@@ -900,7 +900,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-through-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-through-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-through-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-through-heart-fill/">
@@ -908,7 +908,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-through-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-through-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-through-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up/">
@@ -916,7 +916,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-circle/">
@@ -924,7 +924,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-circle-fill/">
@@ -932,7 +932,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-left/">
@@ -940,7 +940,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-left-circle/">
@@ -948,7 +948,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-left-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-left-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-left-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-left-circle-fill/">
@@ -956,7 +956,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-left-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-left-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-left-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-left-square/">
@@ -964,7 +964,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-left-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-left-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-left-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-left-square-fill/">
@@ -972,7 +972,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-left-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-left-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-left-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-right/">
@@ -980,7 +980,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-right-circle/">
@@ -988,7 +988,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-right-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-right-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-right-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-right-circle-fill/">
@@ -996,7 +996,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-right-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-right-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-right-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-right-square/">
@@ -1004,7 +1004,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-right-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-right-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-right-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-right-square-fill/">
@@ -1012,7 +1012,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-right-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-right-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-right-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-short/">
@@ -1020,7 +1020,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-short', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-short</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-short</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-square/">
@@ -1028,7 +1028,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-square-fill/">
@@ -1036,7 +1036,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows/">
@@ -1044,7 +1044,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-angle-contract/">
@@ -1052,7 +1052,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-angle-contract', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-angle-contract</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-angle-contract</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-angle-expand/">
@@ -1060,7 +1060,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-angle-expand', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-angle-expand</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-angle-expand</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-collapse/">
@@ -1068,7 +1068,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-collapse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-collapse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-collapse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-collapse-vertical/">
@@ -1076,7 +1076,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-collapse-vertical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-collapse-vertical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-collapse-vertical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-expand/">
@@ -1084,7 +1084,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-expand', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-expand</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-expand</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-expand-vertical/">
@@ -1092,7 +1092,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-expand-vertical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-expand-vertical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-expand-vertical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-fullscreen/">
@@ -1100,7 +1100,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-fullscreen', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-fullscreen</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-fullscreen</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-move/">
@@ -1108,7 +1108,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-move', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-move</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-move</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-vertical/">
@@ -1116,7 +1116,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-vertical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-vertical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-vertical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/aspect-ratio/">
@@ -1124,7 +1124,7 @@ <h2>Icons</h2>
 {{ render_icon('aspect-ratio', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">aspect-ratio</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">aspect-ratio</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/aspect-ratio-fill/">
@@ -1132,7 +1132,7 @@ <h2>Icons</h2>
 {{ render_icon('aspect-ratio-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">aspect-ratio-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">aspect-ratio-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/asterisk/">
@@ -1140,7 +1140,7 @@ <h2>Icons</h2>
 {{ render_icon('asterisk', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">asterisk</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">asterisk</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/at/">
@@ -1148,7 +1148,7 @@ <h2>Icons</h2>
 {{ render_icon('at', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">at</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">at</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/award/">
@@ -1156,7 +1156,7 @@ <h2>Icons</h2>
 {{ render_icon('award', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">award</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">award</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/award-fill/">
@@ -1164,7 +1164,7 @@ <h2>Icons</h2>
 {{ render_icon('award-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">award-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">award-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/back/">
@@ -1172,7 +1172,7 @@ <h2>Icons</h2>
 {{ render_icon('back', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">back</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">back</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backpack/">
@@ -1180,7 +1180,7 @@ <h2>Icons</h2>
 {{ render_icon('backpack', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backpack</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backpack</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backpack-fill/">
@@ -1188,7 +1188,7 @@ <h2>Icons</h2>
 {{ render_icon('backpack-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backpack-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backpack-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backpack2/">
@@ -1196,7 +1196,7 @@ <h2>Icons</h2>
 {{ render_icon('backpack2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backpack2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backpack2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backpack2-fill/">
@@ -1204,7 +1204,7 @@ <h2>Icons</h2>
 {{ render_icon('backpack2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backpack2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backpack2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backpack3/">
@@ -1212,7 +1212,7 @@ <h2>Icons</h2>
 {{ render_icon('backpack3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backpack3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backpack3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backpack3-fill/">
@@ -1220,7 +1220,7 @@ <h2>Icons</h2>
 {{ render_icon('backpack3-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backpack3-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backpack3-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backpack4/">
@@ -1228,7 +1228,7 @@ <h2>Icons</h2>
 {{ render_icon('backpack4', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backpack4</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backpack4</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backpack4-fill/">
@@ -1236,7 +1236,7 @@ <h2>Icons</h2>
 {{ render_icon('backpack4-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backpack4-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backpack4-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backspace/">
@@ -1244,7 +1244,7 @@ <h2>Icons</h2>
 {{ render_icon('backspace', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backspace</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backspace</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backspace-fill/">
@@ -1252,7 +1252,7 @@ <h2>Icons</h2>
 {{ render_icon('backspace-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backspace-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backspace-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backspace-reverse/">
@@ -1260,7 +1260,7 @@ <h2>Icons</h2>
 {{ render_icon('backspace-reverse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backspace-reverse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backspace-reverse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backspace-reverse-fill/">
@@ -1268,7 +1268,7 @@ <h2>Icons</h2>
 {{ render_icon('backspace-reverse-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backspace-reverse-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backspace-reverse-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-3d/">
@@ -1276,7 +1276,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-3d', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-3d</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-3d</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-3d-fill/">
@@ -1284,7 +1284,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-3d-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-3d-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-3d-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-4k/">
@@ -1292,7 +1292,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-4k', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-4k</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-4k</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-4k-fill/">
@@ -1300,7 +1300,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-4k-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-4k-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-4k-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-8k/">
@@ -1308,7 +1308,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-8k', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-8k</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-8k</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-8k-fill/">
@@ -1316,7 +1316,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-8k-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-8k-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-8k-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-ad/">
@@ -1324,7 +1324,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-ad', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-ad</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-ad</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-ad-fill/">
@@ -1332,7 +1332,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-ad-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-ad-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-ad-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-ar/">
@@ -1340,7 +1340,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-ar', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-ar</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-ar</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-ar-fill/">
@@ -1348,7 +1348,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-ar-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-ar-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-ar-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-cc/">
@@ -1356,7 +1356,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-cc', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-cc</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-cc</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-cc-fill/">
@@ -1364,7 +1364,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-cc-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-cc-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-cc-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-hd/">
@@ -1372,7 +1372,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-hd', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-hd</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-hd</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-hd-fill/">
@@ -1380,7 +1380,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-hd-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-hd-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-hd-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-sd/">
@@ -1388,7 +1388,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-sd', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-sd</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-sd</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-sd-fill/">
@@ -1396,7 +1396,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-sd-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-sd-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-sd-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-tm/">
@@ -1404,7 +1404,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-tm', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-tm</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-tm</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-tm-fill/">
@@ -1412,7 +1412,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-tm-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-tm-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-tm-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-vo/">
@@ -1420,7 +1420,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-vo', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-vo</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-vo</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-vo-fill/">
@@ -1428,7 +1428,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-vo-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-vo-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-vo-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-vr/">
@@ -1436,7 +1436,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-vr', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-vr</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-vr</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-vr-fill/">
@@ -1444,7 +1444,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-vr-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-vr-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-vr-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-wc/">
@@ -1452,7 +1452,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-wc', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-wc</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-wc</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-wc-fill/">
@@ -1460,7 +1460,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-wc-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-wc-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-wc-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag/">
@@ -1468,7 +1468,7 @@ <h2>Icons</h2>
 {{ render_icon('bag', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-check/">
@@ -1476,7 +1476,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-check-fill/">
@@ -1484,7 +1484,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-dash/">
@@ -1492,7 +1492,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-dash-fill/">
@@ -1500,7 +1500,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-dash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-dash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-dash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-fill/">
@@ -1508,7 +1508,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-heart/">
@@ -1516,7 +1516,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-heart-fill/">
@@ -1524,7 +1524,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-plus/">
@@ -1532,7 +1532,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-plus-fill/">
@@ -1540,7 +1540,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-x/">
@@ -1548,7 +1548,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-x-fill/">
@@ -1556,7 +1556,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/balloon/">
@@ -1564,7 +1564,7 @@ <h2>Icons</h2>
 {{ render_icon('balloon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">balloon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">balloon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/balloon-fill/">
@@ -1572,7 +1572,7 @@ <h2>Icons</h2>
 {{ render_icon('balloon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">balloon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">balloon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/balloon-heart/">
@@ -1580,7 +1580,7 @@ <h2>Icons</h2>
 {{ render_icon('balloon-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">balloon-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">balloon-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/balloon-heart-fill/">
@@ -1588,7 +1588,7 @@ <h2>Icons</h2>
 {{ render_icon('balloon-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">balloon-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">balloon-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ban/">
@@ -1596,7 +1596,7 @@ <h2>Icons</h2>
 {{ render_icon('ban', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ban</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ban</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ban-fill/">
@@ -1604,7 +1604,7 @@ <h2>Icons</h2>
 {{ render_icon('ban-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ban-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ban-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bandaid/">
@@ -1612,7 +1612,7 @@ <h2>Icons</h2>
 {{ render_icon('bandaid', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bandaid</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bandaid</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bandaid-fill/">
@@ -1620,7 +1620,7 @@ <h2>Icons</h2>
 {{ render_icon('bandaid-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bandaid-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bandaid-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bank/">
@@ -1628,7 +1628,7 @@ <h2>Icons</h2>
 {{ render_icon('bank', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bank</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bank</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bank2/">
@@ -1636,7 +1636,7 @@ <h2>Icons</h2>
 {{ render_icon('bank2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bank2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bank2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bar-chart/">
@@ -1644,7 +1644,7 @@ <h2>Icons</h2>
 {{ render_icon('bar-chart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bar-chart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bar-chart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bar-chart-fill/">
@@ -1652,7 +1652,7 @@ <h2>Icons</h2>
 {{ render_icon('bar-chart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bar-chart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bar-chart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bar-chart-line/">
@@ -1660,7 +1660,7 @@ <h2>Icons</h2>
 {{ render_icon('bar-chart-line', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bar-chart-line</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bar-chart-line</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bar-chart-line-fill/">
@@ -1668,7 +1668,7 @@ <h2>Icons</h2>
 {{ render_icon('bar-chart-line-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bar-chart-line-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bar-chart-line-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bar-chart-steps/">
@@ -1676,7 +1676,7 @@ <h2>Icons</h2>
 {{ render_icon('bar-chart-steps', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bar-chart-steps</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bar-chart-steps</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/basket/">
@@ -1684,7 +1684,7 @@ <h2>Icons</h2>
 {{ render_icon('basket', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">basket</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">basket</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/basket-fill/">
@@ -1692,7 +1692,7 @@ <h2>Icons</h2>
 {{ render_icon('basket-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">basket-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">basket-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/basket2/">
@@ -1700,7 +1700,7 @@ <h2>Icons</h2>
 {{ render_icon('basket2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">basket2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">basket2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/basket2-fill/">
@@ -1708,7 +1708,7 @@ <h2>Icons</h2>
 {{ render_icon('basket2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">basket2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">basket2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/basket3/">
@@ -1716,7 +1716,7 @@ <h2>Icons</h2>
 {{ render_icon('basket3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">basket3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">basket3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/basket3-fill/">
@@ -1724,7 +1724,7 @@ <h2>Icons</h2>
 {{ render_icon('basket3-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">basket3-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">basket3-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/battery/">
@@ -1732,7 +1732,7 @@ <h2>Icons</h2>
 {{ render_icon('battery', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">battery</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">battery</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/battery-charging/">
@@ -1740,7 +1740,7 @@ <h2>Icons</h2>
 {{ render_icon('battery-charging', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">battery-charging</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">battery-charging</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/battery-full/">
@@ -1748,7 +1748,7 @@ <h2>Icons</h2>
 {{ render_icon('battery-full', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">battery-full</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">battery-full</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/battery-half/">
@@ -1756,7 +1756,7 @@ <h2>Icons</h2>
 {{ render_icon('battery-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">battery-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">battery-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/behance/">
@@ -1764,7 +1764,7 @@ <h2>Icons</h2>
 {{ render_icon('behance', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">behance</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">behance</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bell/">
@@ -1772,7 +1772,7 @@ <h2>Icons</h2>
 {{ render_icon('bell', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bell</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bell</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bell-fill/">
@@ -1780,7 +1780,7 @@ <h2>Icons</h2>
 {{ render_icon('bell-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bell-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bell-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bell-slash/">
@@ -1788,7 +1788,7 @@ <h2>Icons</h2>
 {{ render_icon('bell-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bell-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bell-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bell-slash-fill/">
@@ -1796,7 +1796,7 @@ <h2>Icons</h2>
 {{ render_icon('bell-slash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bell-slash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bell-slash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bezier/">
@@ -1804,7 +1804,7 @@ <h2>Icons</h2>
 {{ render_icon('bezier', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bezier</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bezier</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bezier2/">
@@ -1812,7 +1812,7 @@ <h2>Icons</h2>
 {{ render_icon('bezier2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bezier2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bezier2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bicycle/">
@@ -1820,7 +1820,7 @@ <h2>Icons</h2>
 {{ render_icon('bicycle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bicycle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bicycle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bing/">
@@ -1828,7 +1828,7 @@ <h2>Icons</h2>
 {{ render_icon('bing', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bing</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bing</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/binoculars/">
@@ -1836,7 +1836,7 @@ <h2>Icons</h2>
 {{ render_icon('binoculars', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">binoculars</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">binoculars</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/binoculars-fill/">
@@ -1844,7 +1844,7 @@ <h2>Icons</h2>
 {{ render_icon('binoculars-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">binoculars-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">binoculars-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/blockquote-left/">
@@ -1852,7 +1852,7 @@ <h2>Icons</h2>
 {{ render_icon('blockquote-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">blockquote-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">blockquote-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/blockquote-right/">
@@ -1860,7 +1860,7 @@ <h2>Icons</h2>
 {{ render_icon('blockquote-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">blockquote-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">blockquote-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bluetooth/">
@@ -1868,7 +1868,7 @@ <h2>Icons</h2>
 {{ render_icon('bluetooth', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bluetooth</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bluetooth</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/body-text/">
@@ -1876,7 +1876,7 @@ <h2>Icons</h2>
 {{ render_icon('body-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">body-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">body-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/book/">
@@ -1884,7 +1884,7 @@ <h2>Icons</h2>
 {{ render_icon('book', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">book</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">book</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/book-fill/">
@@ -1892,7 +1892,7 @@ <h2>Icons</h2>
 {{ render_icon('book-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">book-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">book-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/book-half/">
@@ -1900,7 +1900,7 @@ <h2>Icons</h2>
 {{ render_icon('book-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">book-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">book-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark/">
@@ -1908,7 +1908,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-check/">
@@ -1916,7 +1916,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-check-fill/">
@@ -1924,7 +1924,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-dash/">
@@ -1932,7 +1932,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-dash-fill/">
@@ -1940,7 +1940,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-dash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-dash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-dash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-fill/">
@@ -1948,7 +1948,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-heart/">
@@ -1956,7 +1956,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-heart-fill/">
@@ -1964,7 +1964,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-plus/">
@@ -1972,7 +1972,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-plus-fill/">
@@ -1980,7 +1980,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-star/">
@@ -1988,7 +1988,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-star', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-star</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-star</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-star-fill/">
@@ -1996,7 +1996,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-star-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-star-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-star-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-x/">
@@ -2004,7 +2004,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-x-fill/">
@@ -2012,7 +2012,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmarks/">
@@ -2020,7 +2020,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmarks', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmarks</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmarks</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmarks-fill/">
@@ -2028,7 +2028,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmarks-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmarks-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmarks-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookshelf/">
@@ -2036,7 +2036,7 @@ <h2>Icons</h2>
 {{ render_icon('bookshelf', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookshelf</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookshelf</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/boombox/">
@@ -2044,7 +2044,7 @@ <h2>Icons</h2>
 {{ render_icon('boombox', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">boombox</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">boombox</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/boombox-fill/">
@@ -2052,7 +2052,7 @@ <h2>Icons</h2>
 {{ render_icon('boombox-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">boombox-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">boombox-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bootstrap/">
@@ -2060,7 +2060,7 @@ <h2>Icons</h2>
 {{ render_icon('bootstrap', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bootstrap</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bootstrap</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bootstrap-fill/">
@@ -2068,7 +2068,7 @@ <h2>Icons</h2>
 {{ render_icon('bootstrap-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bootstrap-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bootstrap-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bootstrap-reboot/">
@@ -2076,7 +2076,7 @@ <h2>Icons</h2>
 {{ render_icon('bootstrap-reboot', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bootstrap-reboot</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bootstrap-reboot</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border/">
@@ -2084,7 +2084,7 @@ <h2>Icons</h2>
 {{ render_icon('border', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-all/">
@@ -2092,7 +2092,7 @@ <h2>Icons</h2>
 {{ render_icon('border-all', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-all</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-all</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-bottom/">
@@ -2100,7 +2100,7 @@ <h2>Icons</h2>
 {{ render_icon('border-bottom', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-bottom</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-bottom</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-center/">
@@ -2108,7 +2108,7 @@ <h2>Icons</h2>
 {{ render_icon('border-center', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-center</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-center</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-inner/">
@@ -2116,7 +2116,7 @@ <h2>Icons</h2>
 {{ render_icon('border-inner', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-inner</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-inner</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-left/">
@@ -2124,7 +2124,7 @@ <h2>Icons</h2>
 {{ render_icon('border-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-middle/">
@@ -2132,7 +2132,7 @@ <h2>Icons</h2>
 {{ render_icon('border-middle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-middle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-middle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-outer/">
@@ -2140,7 +2140,7 @@ <h2>Icons</h2>
 {{ render_icon('border-outer', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-outer</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-outer</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-right/">
@@ -2148,7 +2148,7 @@ <h2>Icons</h2>
 {{ render_icon('border-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-style/">
@@ -2156,7 +2156,7 @@ <h2>Icons</h2>
 {{ render_icon('border-style', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-style</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-style</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-top/">
@@ -2164,7 +2164,7 @@ <h2>Icons</h2>
 {{ render_icon('border-top', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-top</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-top</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-width/">
@@ -2172,7 +2172,7 @@ <h2>Icons</h2>
 {{ render_icon('border-width', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-width</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-width</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bounding-box/">
@@ -2180,7 +2180,7 @@ <h2>Icons</h2>
 {{ render_icon('bounding-box', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bounding-box</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bounding-box</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bounding-box-circles/">
@@ -2188,7 +2188,7 @@ <h2>Icons</h2>
 {{ render_icon('bounding-box-circles', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bounding-box-circles</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bounding-box-circles</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box/">
@@ -2196,7 +2196,7 @@ <h2>Icons</h2>
 {{ render_icon('box', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-down/">
@@ -2204,7 +2204,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-down-left/">
@@ -2212,7 +2212,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-down-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-down-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-down-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-down-right/">
@@ -2220,7 +2220,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-down-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-down-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-down-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-in-down/">
@@ -2228,7 +2228,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-in-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-in-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-in-down-left/">
@@ -2236,7 +2236,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-in-down-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-down-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-in-down-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-in-down-right/">
@@ -2244,7 +2244,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-in-down-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-down-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-in-down-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-in-left/">
@@ -2252,7 +2252,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-in-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-in-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-in-right/">
@@ -2260,7 +2260,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-in-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-in-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-in-up/">
@@ -2268,7 +2268,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-in-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-in-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-in-up-left/">
@@ -2276,7 +2276,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-in-up-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-up-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-in-up-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-in-up-right/">
@@ -2284,7 +2284,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-in-up-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-up-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-in-up-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-left/">
@@ -2292,7 +2292,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-right/">
@@ -2300,7 +2300,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-up/">
@@ -2308,7 +2308,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-up-left/">
@@ -2316,7 +2316,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-up-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-up-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-up-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-up-right/">
@@ -2324,7 +2324,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-up-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-up-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-up-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-fill/">
@@ -2332,7 +2332,7 @@ <h2>Icons</h2>
 {{ render_icon('box-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-seam/">
@@ -2340,7 +2340,7 @@ <h2>Icons</h2>
 {{ render_icon('box-seam', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-seam</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-seam</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-seam-fill/">
@@ -2348,7 +2348,7 @@ <h2>Icons</h2>
 {{ render_icon('box-seam-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-seam-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-seam-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box2/">
@@ -2356,7 +2356,7 @@ <h2>Icons</h2>
 {{ render_icon('box2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box2-fill/">
@@ -2364,7 +2364,7 @@ <h2>Icons</h2>
 {{ render_icon('box2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box2-heart/">
@@ -2372,7 +2372,7 @@ <h2>Icons</h2>
 {{ render_icon('box2-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box2-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box2-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box2-heart-fill/">
@@ -2380,7 +2380,7 @@ <h2>Icons</h2>
 {{ render_icon('box2-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box2-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box2-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/boxes/">
@@ -2388,7 +2388,7 @@ <h2>Icons</h2>
 {{ render_icon('boxes', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">boxes</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">boxes</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/braces/">
@@ -2396,7 +2396,7 @@ <h2>Icons</h2>
 {{ render_icon('braces', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">braces</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">braces</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/braces-asterisk/">
@@ -2404,7 +2404,7 @@ <h2>Icons</h2>
 {{ render_icon('braces-asterisk', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">braces-asterisk</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">braces-asterisk</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bricks/">
@@ -2412,7 +2412,7 @@ <h2>Icons</h2>
 {{ render_icon('bricks', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bricks</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bricks</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/briefcase/">
@@ -2420,7 +2420,7 @@ <h2>Icons</h2>
 {{ render_icon('briefcase', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">briefcase</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">briefcase</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/briefcase-fill/">
@@ -2428,7 +2428,7 @@ <h2>Icons</h2>
 {{ render_icon('briefcase-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">briefcase-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">briefcase-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brightness-alt-high/">
@@ -2436,7 +2436,7 @@ <h2>Icons</h2>
 {{ render_icon('brightness-alt-high', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brightness-alt-high</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brightness-alt-high</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brightness-alt-high-fill/">
@@ -2444,7 +2444,7 @@ <h2>Icons</h2>
 {{ render_icon('brightness-alt-high-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brightness-alt-high-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brightness-alt-high-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brightness-alt-low/">
@@ -2452,7 +2452,7 @@ <h2>Icons</h2>
 {{ render_icon('brightness-alt-low', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brightness-alt-low</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brightness-alt-low</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brightness-alt-low-fill/">
@@ -2460,7 +2460,7 @@ <h2>Icons</h2>
 {{ render_icon('brightness-alt-low-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brightness-alt-low-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brightness-alt-low-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brightness-high/">
@@ -2468,7 +2468,7 @@ <h2>Icons</h2>
 {{ render_icon('brightness-high', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brightness-high</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brightness-high</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brightness-high-fill/">
@@ -2476,7 +2476,7 @@ <h2>Icons</h2>
 {{ render_icon('brightness-high-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brightness-high-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brightness-high-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brightness-low/">
@@ -2484,7 +2484,7 @@ <h2>Icons</h2>
 {{ render_icon('brightness-low', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brightness-low</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brightness-low</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brightness-low-fill/">
@@ -2492,7 +2492,7 @@ <h2>Icons</h2>
 {{ render_icon('brightness-low-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brightness-low-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brightness-low-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brilliance/">
@@ -2500,7 +2500,7 @@ <h2>Icons</h2>
 {{ render_icon('brilliance', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brilliance</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brilliance</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/broadcast/">
@@ -2508,7 +2508,7 @@ <h2>Icons</h2>
 {{ render_icon('broadcast', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">broadcast</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">broadcast</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/broadcast-pin/">
@@ -2516,7 +2516,7 @@ <h2>Icons</h2>
 {{ render_icon('broadcast-pin', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">broadcast-pin</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">broadcast-pin</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/browser-chrome/">
@@ -2524,7 +2524,7 @@ <h2>Icons</h2>
 {{ render_icon('browser-chrome', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">browser-chrome</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">browser-chrome</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/browser-edge/">
@@ -2532,7 +2532,7 @@ <h2>Icons</h2>
 {{ render_icon('browser-edge', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">browser-edge</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">browser-edge</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/browser-firefox/">
@@ -2540,7 +2540,7 @@ <h2>Icons</h2>
 {{ render_icon('browser-firefox', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">browser-firefox</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">browser-firefox</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/browser-safari/">
@@ -2548,7 +2548,7 @@ <h2>Icons</h2>
 {{ render_icon('browser-safari', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">browser-safari</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">browser-safari</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brush/">
@@ -2556,7 +2556,7 @@ <h2>Icons</h2>
 {{ render_icon('brush', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brush</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brush</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brush-fill/">
@@ -2564,7 +2564,7 @@ <h2>Icons</h2>
 {{ render_icon('brush-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brush-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brush-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bucket/">
@@ -2572,7 +2572,7 @@ <h2>Icons</h2>
 {{ render_icon('bucket', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bucket</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bucket</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bucket-fill/">
@@ -2580,7 +2580,7 @@ <h2>Icons</h2>
 {{ render_icon('bucket-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bucket-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bucket-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bug/">
@@ -2588,7 +2588,7 @@ <h2>Icons</h2>
 {{ render_icon('bug', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bug</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bug</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bug-fill/">
@@ -2596,7 +2596,7 @@ <h2>Icons</h2>
 {{ render_icon('bug-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bug-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bug-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building/">
@@ -2604,7 +2604,7 @@ <h2>Icons</h2>
 {{ render_icon('building', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-add/">
@@ -2612,7 +2612,7 @@ <h2>Icons</h2>
 {{ render_icon('building-add', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-add</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-add</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-check/">
@@ -2620,7 +2620,7 @@ <h2>Icons</h2>
 {{ render_icon('building-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-dash/">
@@ -2628,7 +2628,7 @@ <h2>Icons</h2>
 {{ render_icon('building-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-down/">
@@ -2636,7 +2636,7 @@ <h2>Icons</h2>
 {{ render_icon('building-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-exclamation/">
@@ -2644,7 +2644,7 @@ <h2>Icons</h2>
 {{ render_icon('building-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill/">
@@ -2652,7 +2652,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-add/">
@@ -2660,7 +2660,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-add', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-add</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-add</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-check/">
@@ -2668,7 +2668,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-dash/">
@@ -2676,7 +2676,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-down/">
@@ -2684,7 +2684,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-exclamation/">
@@ -2692,7 +2692,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-gear/">
@@ -2700,7 +2700,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-gear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-gear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-gear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-lock/">
@@ -2708,7 +2708,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-slash/">
@@ -2716,7 +2716,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-up/">
@@ -2724,7 +2724,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-x/">
@@ -2732,7 +2732,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-gear/">
@@ -2740,7 +2740,7 @@ <h2>Icons</h2>
 {{ render_icon('building-gear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-gear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-gear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-lock/">
@@ -2748,7 +2748,7 @@ <h2>Icons</h2>
 {{ render_icon('building-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-slash/">
@@ -2756,7 +2756,7 @@ <h2>Icons</h2>
 {{ render_icon('building-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-up/">
@@ -2764,7 +2764,7 @@ <h2>Icons</h2>
 {{ render_icon('building-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-x/">
@@ -2772,7 +2772,7 @@ <h2>Icons</h2>
 {{ render_icon('building-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/buildings/">
@@ -2780,7 +2780,7 @@ <h2>Icons</h2>
 {{ render_icon('buildings', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">buildings</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">buildings</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/buildings-fill/">
@@ -2788,7 +2788,7 @@ <h2>Icons</h2>
 {{ render_icon('buildings-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">buildings-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">buildings-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bullseye/">
@@ -2796,7 +2796,7 @@ <h2>Icons</h2>
 {{ render_icon('bullseye', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bullseye</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bullseye</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bus-front/">
@@ -2804,7 +2804,7 @@ <h2>Icons</h2>
 {{ render_icon('bus-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bus-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bus-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bus-front-fill/">
@@ -2812,7 +2812,7 @@ <h2>Icons</h2>
 {{ render_icon('bus-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bus-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bus-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/c-circle/">
@@ -2820,7 +2820,7 @@ <h2>Icons</h2>
 {{ render_icon('c-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">c-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">c-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/c-circle-fill/">
@@ -2828,7 +2828,7 @@ <h2>Icons</h2>
 {{ render_icon('c-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">c-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">c-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/c-square/">
@@ -2836,7 +2836,7 @@ <h2>Icons</h2>
 {{ render_icon('c-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">c-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">c-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/c-square-fill/">
@@ -2844,7 +2844,7 @@ <h2>Icons</h2>
 {{ render_icon('c-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">c-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">c-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cake/">
@@ -2852,7 +2852,7 @@ <h2>Icons</h2>
 {{ render_icon('cake', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cake</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cake</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cake-fill/">
@@ -2860,7 +2860,7 @@ <h2>Icons</h2>
 {{ render_icon('cake-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cake-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cake-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cake2/">
@@ -2868,7 +2868,7 @@ <h2>Icons</h2>
 {{ render_icon('cake2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cake2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cake2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cake2-fill/">
@@ -2876,7 +2876,7 @@ <h2>Icons</h2>
 {{ render_icon('cake2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cake2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cake2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calculator/">
@@ -2884,7 +2884,7 @@ <h2>Icons</h2>
 {{ render_icon('calculator', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calculator</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calculator</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calculator-fill/">
@@ -2892,7 +2892,7 @@ <h2>Icons</h2>
 {{ render_icon('calculator-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calculator-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calculator-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar/">
@@ -2900,7 +2900,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-check/">
@@ -2908,7 +2908,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-check-fill/">
@@ -2916,7 +2916,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-date/">
@@ -2924,7 +2924,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-date', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-date</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-date</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-date-fill/">
@@ -2932,7 +2932,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-date-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-date-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-date-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-day/">
@@ -2940,7 +2940,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-day', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-day</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-day</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-day-fill/">
@@ -2948,7 +2948,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-day-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-day-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-day-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-event/">
@@ -2956,7 +2956,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-event', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-event</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-event</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-event-fill/">
@@ -2964,7 +2964,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-event-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-event-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-event-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-fill/">
@@ -2972,7 +2972,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-heart/">
@@ -2980,7 +2980,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-heart-fill/">
@@ -2988,7 +2988,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-minus/">
@@ -2996,7 +2996,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-minus-fill/">
@@ -3004,7 +3004,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-month/">
@@ -3012,7 +3012,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-month', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-month</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-month</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-month-fill/">
@@ -3020,7 +3020,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-month-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-month-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-month-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-plus/">
@@ -3028,7 +3028,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-plus-fill/">
@@ -3036,7 +3036,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-range/">
@@ -3044,7 +3044,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-range', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-range</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-range</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-range-fill/">
@@ -3052,7 +3052,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-range-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-range-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-range-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-week/">
@@ -3060,7 +3060,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-week', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-week</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-week</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-week-fill/">
@@ -3068,7 +3068,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-week-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-week-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-week-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-x/">
@@ -3076,7 +3076,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-x-fill/">
@@ -3084,7 +3084,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2/">
@@ -3092,7 +3092,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-check/">
@@ -3100,7 +3100,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-check-fill/">
@@ -3108,7 +3108,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-date/">
@@ -3116,7 +3116,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-date', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-date</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-date</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-date-fill/">
@@ -3124,7 +3124,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-date-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-date-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-date-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-day/">
@@ -3132,7 +3132,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-day', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-day</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-day</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-day-fill/">
@@ -3140,7 +3140,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-day-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-day-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-day-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-event/">
@@ -3148,7 +3148,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-event', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-event</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-event</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-event-fill/">
@@ -3156,7 +3156,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-event-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-event-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-event-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-fill/">
@@ -3164,7 +3164,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-heart/">
@@ -3172,7 +3172,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-heart-fill/">
@@ -3180,7 +3180,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-minus/">
@@ -3188,7 +3188,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-minus-fill/">
@@ -3196,7 +3196,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-month/">
@@ -3204,7 +3204,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-month', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-month</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-month</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-month-fill/">
@@ -3212,7 +3212,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-month-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-month-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-month-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-plus/">
@@ -3220,7 +3220,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-plus-fill/">
@@ -3228,7 +3228,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-range/">
@@ -3236,7 +3236,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-range', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-range</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-range</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-range-fill/">
@@ -3244,7 +3244,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-range-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-range-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-range-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-week/">
@@ -3252,7 +3252,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-week', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-week</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-week</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-week-fill/">
@@ -3260,7 +3260,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-week-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-week-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-week-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-x/">
@@ -3268,7 +3268,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-x-fill/">
@@ -3276,7 +3276,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar3/">
@@ -3284,7 +3284,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar3-event/">
@@ -3292,7 +3292,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar3-event', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar3-event</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar3-event</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar3-event-fill/">
@@ -3300,7 +3300,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar3-event-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar3-event-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar3-event-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar3-fill/">
@@ -3308,7 +3308,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar3-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar3-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar3-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar3-range/">
@@ -3316,7 +3316,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar3-range', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar3-range</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar3-range</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar3-range-fill/">
@@ -3324,7 +3324,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar3-range-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar3-range-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar3-range-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar3-week/">
@@ -3332,7 +3332,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar3-week', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar3-week</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar3-week</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar3-week-fill/">
@@ -3340,7 +3340,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar3-week-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar3-week-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar3-week-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar4/">
@@ -3348,7 +3348,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar4', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar4</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar4</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar4-event/">
@@ -3356,7 +3356,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar4-event', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar4-event</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar4-event</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar4-range/">
@@ -3364,7 +3364,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar4-range', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar4-range</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar4-range</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar4-week/">
@@ -3372,7 +3372,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar4-week', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar4-week</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar4-week</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera/">
@@ -3380,7 +3380,7 @@ <h2>Icons</h2>
 {{ render_icon('camera', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera-fill/">
@@ -3388,7 +3388,7 @@ <h2>Icons</h2>
 {{ render_icon('camera-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera-reels/">
@@ -3396,7 +3396,7 @@ <h2>Icons</h2>
 {{ render_icon('camera-reels', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera-reels</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera-reels</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera-reels-fill/">
@@ -3404,7 +3404,7 @@ <h2>Icons</h2>
 {{ render_icon('camera-reels-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera-reels-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera-reels-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera-video/">
@@ -3412,7 +3412,7 @@ <h2>Icons</h2>
 {{ render_icon('camera-video', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera-video</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera-video</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera-video-fill/">
@@ -3420,7 +3420,7 @@ <h2>Icons</h2>
 {{ render_icon('camera-video-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera-video-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera-video-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera-video-off/">
@@ -3428,7 +3428,7 @@ <h2>Icons</h2>
 {{ render_icon('camera-video-off', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera-video-off</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera-video-off</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera-video-off-fill/">
@@ -3436,7 +3436,7 @@ <h2>Icons</h2>
 {{ render_icon('camera-video-off-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera-video-off-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera-video-off-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera2/">
@@ -3444,7 +3444,7 @@ <h2>Icons</h2>
 {{ render_icon('camera2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/capslock/">
@@ -3452,7 +3452,7 @@ <h2>Icons</h2>
 {{ render_icon('capslock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">capslock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">capslock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/capslock-fill/">
@@ -3460,7 +3460,7 @@ <h2>Icons</h2>
 {{ render_icon('capslock-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">capslock-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">capslock-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/capsule/">
@@ -3468,7 +3468,7 @@ <h2>Icons</h2>
 {{ render_icon('capsule', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">capsule</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">capsule</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/capsule-pill/">
@@ -3476,7 +3476,7 @@ <h2>Icons</h2>
 {{ render_icon('capsule-pill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">capsule-pill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">capsule-pill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/car-front/">
@@ -3484,7 +3484,7 @@ <h2>Icons</h2>
 {{ render_icon('car-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">car-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">car-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/car-front-fill/">
@@ -3492,7 +3492,7 @@ <h2>Icons</h2>
 {{ render_icon('car-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">car-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">car-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/card-checklist/">
@@ -3500,7 +3500,7 @@ <h2>Icons</h2>
 {{ render_icon('card-checklist', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">card-checklist</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">card-checklist</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/card-heading/">
@@ -3508,7 +3508,7 @@ <h2>Icons</h2>
 {{ render_icon('card-heading', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">card-heading</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">card-heading</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/card-image/">
@@ -3516,7 +3516,7 @@ <h2>Icons</h2>
 {{ render_icon('card-image', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">card-image</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">card-image</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/card-list/">
@@ -3524,7 +3524,7 @@ <h2>Icons</h2>
 {{ render_icon('card-list', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">card-list</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">card-list</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/card-text/">
@@ -3532,7 +3532,7 @@ <h2>Icons</h2>
 {{ render_icon('card-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">card-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">card-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-down/">
@@ -3540,7 +3540,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-down-fill/">
@@ -3548,7 +3548,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-down-square/">
@@ -3556,7 +3556,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-down-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-down-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-down-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-down-square-fill/">
@@ -3564,7 +3564,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-down-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-down-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-down-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-left/">
@@ -3572,7 +3572,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-left-fill/">
@@ -3580,7 +3580,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-left-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-left-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-left-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-left-square/">
@@ -3588,7 +3588,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-left-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-left-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-left-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-left-square-fill/">
@@ -3596,7 +3596,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-left-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-left-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-left-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-right/">
@@ -3604,7 +3604,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-right-fill/">
@@ -3612,7 +3612,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-right-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-right-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-right-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-right-square/">
@@ -3620,7 +3620,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-right-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-right-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-right-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-right-square-fill/">
@@ -3628,7 +3628,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-right-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-right-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-right-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-up/">
@@ -3636,7 +3636,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-up-fill/">
@@ -3644,7 +3644,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-up-square/">
@@ -3652,7 +3652,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-up-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-up-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-up-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-up-square-fill/">
@@ -3660,7 +3660,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-up-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-up-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-up-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart/">
@@ -3668,7 +3668,7 @@ <h2>Icons</h2>
 {{ render_icon('cart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-check/">
@@ -3676,7 +3676,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-check-fill/">
@@ -3684,7 +3684,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-dash/">
@@ -3692,7 +3692,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-dash-fill/">
@@ -3700,7 +3700,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-dash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-dash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-dash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-fill/">
@@ -3708,7 +3708,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-plus/">
@@ -3716,7 +3716,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-plus-fill/">
@@ -3724,7 +3724,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-x/">
@@ -3732,7 +3732,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-x-fill/">
@@ -3740,7 +3740,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart2/">
@@ -3748,7 +3748,7 @@ <h2>Icons</h2>
 {{ render_icon('cart2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart3/">
@@ -3756,7 +3756,7 @@ <h2>Icons</h2>
 {{ render_icon('cart3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart4/">
@@ -3764,7 +3764,7 @@ <h2>Icons</h2>
 {{ render_icon('cart4', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart4</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart4</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cash/">
@@ -3772,7 +3772,7 @@ <h2>Icons</h2>
 {{ render_icon('cash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cash-coin/">
@@ -3780,7 +3780,7 @@ <h2>Icons</h2>
 {{ render_icon('cash-coin', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cash-coin</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cash-coin</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cash-stack/">
@@ -3788,7 +3788,7 @@ <h2>Icons</h2>
 {{ render_icon('cash-stack', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cash-stack</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cash-stack</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cassette/">
@@ -3796,7 +3796,7 @@ <h2>Icons</h2>
 {{ render_icon('cassette', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cassette</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cassette</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cassette-fill/">
@@ -3804,7 +3804,7 @@ <h2>Icons</h2>
 {{ render_icon('cassette-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cassette-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cassette-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cast/">
@@ -3812,7 +3812,7 @@ <h2>Icons</h2>
 {{ render_icon('cast', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cast</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cast</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cc-circle/">
@@ -3820,7 +3820,7 @@ <h2>Icons</h2>
 {{ render_icon('cc-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cc-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cc-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cc-circle-fill/">
@@ -3828,7 +3828,7 @@ <h2>Icons</h2>
 {{ render_icon('cc-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cc-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cc-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cc-square/">
@@ -3836,7 +3836,7 @@ <h2>Icons</h2>
 {{ render_icon('cc-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cc-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cc-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cc-square-fill/">
@@ -3844,7 +3844,7 @@ <h2>Icons</h2>
 {{ render_icon('cc-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cc-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cc-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat/">
@@ -3852,7 +3852,7 @@ <h2>Icons</h2>
 {{ render_icon('chat', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-dots/">
@@ -3860,7 +3860,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-dots', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-dots</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-dots</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-dots-fill/">
@@ -3868,7 +3868,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-dots-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-dots-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-dots-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-fill/">
@@ -3876,7 +3876,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-heart/">
@@ -3884,7 +3884,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-heart-fill/">
@@ -3892,7 +3892,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left/">
@@ -3900,7 +3900,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-dots/">
@@ -3908,7 +3908,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-dots', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-dots</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-dots</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-dots-fill/">
@@ -3916,7 +3916,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-dots-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-dots-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-dots-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-fill/">
@@ -3924,7 +3924,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-heart/">
@@ -3932,7 +3932,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-heart-fill/">
@@ -3940,7 +3940,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-quote/">
@@ -3948,7 +3948,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-quote', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-quote</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-quote</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-quote-fill/">
@@ -3956,7 +3956,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-quote-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-quote-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-quote-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-text/">
@@ -3964,7 +3964,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-text-fill/">
@@ -3972,7 +3972,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-text-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-text-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-text-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-quote/">
@@ -3980,7 +3980,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-quote', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-quote</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-quote</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-quote-fill/">
@@ -3988,7 +3988,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-quote-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-quote-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-quote-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right/">
@@ -3996,7 +3996,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-dots/">
@@ -4004,7 +4004,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-dots', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-dots</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-dots</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-dots-fill/">
@@ -4012,7 +4012,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-dots-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-dots-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-dots-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-fill/">
@@ -4020,7 +4020,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-heart/">
@@ -4028,7 +4028,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-heart-fill/">
@@ -4036,7 +4036,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-quote/">
@@ -4044,7 +4044,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-quote', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-quote</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-quote</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-quote-fill/">
@@ -4052,7 +4052,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-quote-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-quote-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-quote-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-text/">
@@ -4060,7 +4060,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-text-fill/">
@@ -4068,7 +4068,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-text-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-text-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-text-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square/">
@@ -4076,7 +4076,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-dots/">
@@ -4084,7 +4084,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-dots', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-dots</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-dots</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-dots-fill/">
@@ -4092,7 +4092,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-dots-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-dots-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-dots-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-fill/">
@@ -4100,7 +4100,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-heart/">
@@ -4108,7 +4108,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-heart-fill/">
@@ -4116,7 +4116,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-quote/">
@@ -4124,7 +4124,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-quote', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-quote</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-quote</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-quote-fill/">
@@ -4132,7 +4132,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-quote-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-quote-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-quote-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-text/">
@@ -4140,7 +4140,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-text-fill/">
@@ -4148,7 +4148,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-text-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-text-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-text-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-text/">
@@ -4156,7 +4156,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-text-fill/">
@@ -4164,7 +4164,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-text-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-text-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-text-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check/">
@@ -4172,7 +4172,7 @@ <h2>Icons</h2>
 {{ render_icon('check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check-all/">
@@ -4180,7 +4180,7 @@ <h2>Icons</h2>
 {{ render_icon('check-all', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check-all</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check-all</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check-circle/">
@@ -4188,7 +4188,7 @@ <h2>Icons</h2>
 {{ render_icon('check-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check-circle-fill/">
@@ -4196,7 +4196,7 @@ <h2>Icons</h2>
 {{ render_icon('check-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check-lg/">
@@ -4204,7 +4204,7 @@ <h2>Icons</h2>
 {{ render_icon('check-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check-square/">
@@ -4212,7 +4212,7 @@ <h2>Icons</h2>
 {{ render_icon('check-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check-square-fill/">
@@ -4220,7 +4220,7 @@ <h2>Icons</h2>
 {{ render_icon('check-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check2/">
@@ -4228,7 +4228,7 @@ <h2>Icons</h2>
 {{ render_icon('check2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check2-all/">
@@ -4236,7 +4236,7 @@ <h2>Icons</h2>
 {{ render_icon('check2-all', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check2-all</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check2-all</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check2-circle/">
@@ -4244,7 +4244,7 @@ <h2>Icons</h2>
 {{ render_icon('check2-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check2-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check2-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check2-square/">
@@ -4252,7 +4252,7 @@ <h2>Icons</h2>
 {{ render_icon('check2-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check2-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check2-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-bar-contract/">
@@ -4260,7 +4260,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-bar-contract', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-contract</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-bar-contract</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-bar-down/">
@@ -4268,7 +4268,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-bar-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-bar-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-bar-expand/">
@@ -4276,7 +4276,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-bar-expand', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-expand</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-bar-expand</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-bar-left/">
@@ -4284,7 +4284,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-bar-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-bar-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-bar-right/">
@@ -4292,7 +4292,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-bar-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-bar-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-bar-up/">
@@ -4300,7 +4300,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-bar-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-bar-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-compact-down/">
@@ -4308,7 +4308,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-compact-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-compact-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-compact-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-compact-left/">
@@ -4316,7 +4316,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-compact-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-compact-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-compact-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-compact-right/">
@@ -4324,7 +4324,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-compact-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-compact-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-compact-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-compact-up/">
@@ -4332,7 +4332,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-compact-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-compact-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-compact-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-contract/">
@@ -4340,7 +4340,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-contract', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-contract</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-contract</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-double-down/">
@@ -4348,7 +4348,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-double-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-double-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-double-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-double-left/">
@@ -4356,7 +4356,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-double-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-double-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-double-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-double-right/">
@@ -4364,7 +4364,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-double-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-double-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-double-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-double-up/">
@@ -4372,7 +4372,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-double-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-double-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-double-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-down/">
@@ -4380,7 +4380,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-expand/">
@@ -4388,7 +4388,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-expand', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-expand</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-expand</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-left/">
@@ -4396,7 +4396,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-right/">
@@ -4404,7 +4404,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-up/">
@@ -4412,7 +4412,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/circle/">
@@ -4420,7 +4420,7 @@ <h2>Icons</h2>
 {{ render_icon('circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/circle-fill/">
@@ -4428,7 +4428,7 @@ <h2>Icons</h2>
 {{ render_icon('circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/circle-half/">
@@ -4436,7 +4436,7 @@ <h2>Icons</h2>
 {{ render_icon('circle-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">circle-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">circle-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/circle-square/">
@@ -4444,7 +4444,7 @@ <h2>Icons</h2>
 {{ render_icon('circle-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">circle-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">circle-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard/">
@@ -4452,7 +4452,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-check/">
@@ -4460,7 +4460,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-check-fill/">
@@ -4468,7 +4468,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-data/">
@@ -4476,7 +4476,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-data', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-data</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-data</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-data-fill/">
@@ -4484,7 +4484,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-data-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-data-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-data-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-fill/">
@@ -4492,7 +4492,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-heart/">
@@ -4500,7 +4500,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-heart-fill/">
@@ -4508,7 +4508,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-minus/">
@@ -4516,7 +4516,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-minus-fill/">
@@ -4524,7 +4524,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-plus/">
@@ -4532,7 +4532,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-plus-fill/">
@@ -4540,7 +4540,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-pulse/">
@@ -4548,7 +4548,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-pulse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-pulse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-pulse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-x/">
@@ -4556,7 +4556,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-x-fill/">
@@ -4564,7 +4564,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2/">
@@ -4572,7 +4572,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-check/">
@@ -4580,7 +4580,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-check-fill/">
@@ -4588,7 +4588,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-data/">
@@ -4596,7 +4596,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-data', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-data</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-data</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-data-fill/">
@@ -4604,7 +4604,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-data-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-data-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-data-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-fill/">
@@ -4612,7 +4612,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-heart/">
@@ -4620,7 +4620,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-heart-fill/">
@@ -4628,7 +4628,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-minus/">
@@ -4636,7 +4636,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-minus-fill/">
@@ -4644,7 +4644,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-plus/">
@@ -4652,7 +4652,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-plus-fill/">
@@ -4660,7 +4660,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-pulse/">
@@ -4668,7 +4668,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-pulse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-pulse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-pulse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-pulse-fill/">
@@ -4676,7 +4676,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-pulse-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-pulse-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-pulse-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-x/">
@@ -4684,7 +4684,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-x-fill/">
@@ -4692,7 +4692,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clock/">
@@ -4700,7 +4700,7 @@ <h2>Icons</h2>
 {{ render_icon('clock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clock-fill/">
@@ -4708,7 +4708,7 @@ <h2>Icons</h2>
 {{ render_icon('clock-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clock-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clock-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clock-history/">
@@ -4716,7 +4716,7 @@ <h2>Icons</h2>
 {{ render_icon('clock-history', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clock-history</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clock-history</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud/">
@@ -4724,7 +4724,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-arrow-down/">
@@ -4732,7 +4732,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-arrow-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-arrow-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-arrow-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-arrow-down-fill/">
@@ -4740,7 +4740,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-arrow-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-arrow-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-arrow-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-arrow-up/">
@@ -4748,7 +4748,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-arrow-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-arrow-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-arrow-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-arrow-up-fill/">
@@ -4756,7 +4756,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-arrow-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-arrow-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-arrow-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-check/">
@@ -4764,7 +4764,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-check-fill/">
@@ -4772,7 +4772,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-download/">
@@ -4780,7 +4780,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-download', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-download</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-download</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-download-fill/">
@@ -4788,7 +4788,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-download-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-download-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-download-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-drizzle/">
@@ -4796,7 +4796,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-drizzle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-drizzle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-drizzle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-drizzle-fill/">
@@ -4804,7 +4804,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-drizzle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-drizzle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-drizzle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-fill/">
@@ -4812,7 +4812,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-fog/">
@@ -4820,7 +4820,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-fog', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-fog</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-fog</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-fog-fill/">
@@ -4828,7 +4828,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-fog-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-fog-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-fog-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-fog2/">
@@ -4836,7 +4836,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-fog2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-fog2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-fog2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-fog2-fill/">
@@ -4844,7 +4844,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-fog2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-fog2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-fog2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-hail/">
@@ -4852,7 +4852,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-hail', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-hail</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-hail</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-hail-fill/">
@@ -4860,7 +4860,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-hail-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-hail-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-hail-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-haze/">
@@ -4868,7 +4868,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-haze', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-haze</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-haze</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-haze-fill/">
@@ -4876,7 +4876,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-haze-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-haze-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-haze-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-haze2/">
@@ -4884,7 +4884,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-haze2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-haze2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-haze2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-haze2-fill/">
@@ -4892,7 +4892,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-haze2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-haze2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-haze2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-lightning/">
@@ -4900,7 +4900,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-lightning', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-lightning</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-lightning</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-lightning-fill/">
@@ -4908,7 +4908,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-lightning-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-lightning-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-lightning-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-lightning-rain/">
@@ -4916,7 +4916,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-lightning-rain', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-lightning-rain</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-lightning-rain</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-lightning-rain-fill/">
@@ -4924,7 +4924,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-lightning-rain-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-lightning-rain-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-lightning-rain-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-minus/">
@@ -4932,7 +4932,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-minus-fill/">
@@ -4940,7 +4940,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-moon/">
@@ -4948,7 +4948,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-moon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-moon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-moon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-moon-fill/">
@@ -4956,7 +4956,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-moon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-moon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-moon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-plus/">
@@ -4964,7 +4964,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-plus-fill/">
@@ -4972,7 +4972,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-rain/">
@@ -4980,7 +4980,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-rain', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-rain</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-rain</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-rain-fill/">
@@ -4988,7 +4988,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-rain-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-rain-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-rain-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-rain-heavy/">
@@ -4996,7 +4996,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-rain-heavy', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-rain-heavy</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-rain-heavy</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-rain-heavy-fill/">
@@ -5004,7 +5004,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-rain-heavy-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-rain-heavy-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-rain-heavy-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-slash/">
@@ -5012,7 +5012,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-slash-fill/">
@@ -5020,7 +5020,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-slash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-slash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-slash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-sleet/">
@@ -5028,7 +5028,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-sleet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-sleet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-sleet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-sleet-fill/">
@@ -5036,7 +5036,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-sleet-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-sleet-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-sleet-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-snow/">
@@ -5044,7 +5044,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-snow', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-snow</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-snow</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-snow-fill/">
@@ -5052,7 +5052,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-snow-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-snow-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-snow-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-sun/">
@@ -5060,7 +5060,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-sun', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-sun</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-sun</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-sun-fill/">
@@ -5068,7 +5068,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-sun-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-sun-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-sun-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-upload/">
@@ -5076,7 +5076,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-upload', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-upload</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-upload</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-upload-fill/">
@@ -5084,7 +5084,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-upload-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-upload-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-upload-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clouds/">
@@ -5092,7 +5092,7 @@ <h2>Icons</h2>
 {{ render_icon('clouds', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clouds</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clouds</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clouds-fill/">
@@ -5100,7 +5100,7 @@ <h2>Icons</h2>
 {{ render_icon('clouds-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clouds-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clouds-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloudy/">
@@ -5108,7 +5108,7 @@ <h2>Icons</h2>
 {{ render_icon('cloudy', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloudy</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloudy</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloudy-fill/">
@@ -5116,7 +5116,7 @@ <h2>Icons</h2>
 {{ render_icon('cloudy-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloudy-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloudy-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/code/">
@@ -5124,7 +5124,7 @@ <h2>Icons</h2>
 {{ render_icon('code', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">code</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">code</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/code-slash/">
@@ -5132,7 +5132,7 @@ <h2>Icons</h2>
 {{ render_icon('code-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">code-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">code-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/code-square/">
@@ -5140,7 +5140,7 @@ <h2>Icons</h2>
 {{ render_icon('code-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">code-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">code-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/coin/">
@@ -5148,7 +5148,7 @@ <h2>Icons</h2>
 {{ render_icon('coin', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">coin</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">coin</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/collection/">
@@ -5156,7 +5156,7 @@ <h2>Icons</h2>
 {{ render_icon('collection', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">collection</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">collection</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/collection-fill/">
@@ -5164,7 +5164,7 @@ <h2>Icons</h2>
 {{ render_icon('collection-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">collection-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">collection-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/collection-play/">
@@ -5172,7 +5172,7 @@ <h2>Icons</h2>
 {{ render_icon('collection-play', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">collection-play</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">collection-play</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/collection-play-fill/">
@@ -5180,7 +5180,7 @@ <h2>Icons</h2>
 {{ render_icon('collection-play-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">collection-play-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">collection-play-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/columns/">
@@ -5188,7 +5188,7 @@ <h2>Icons</h2>
 {{ render_icon('columns', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">columns</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">columns</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/columns-gap/">
@@ -5196,7 +5196,7 @@ <h2>Icons</h2>
 {{ render_icon('columns-gap', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">columns-gap</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">columns-gap</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/command/">
@@ -5204,7 +5204,7 @@ <h2>Icons</h2>
 {{ render_icon('command', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">command</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">command</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/compass/">
@@ -5212,7 +5212,7 @@ <h2>Icons</h2>
 {{ render_icon('compass', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">compass</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">compass</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/compass-fill/">
@@ -5220,7 +5220,7 @@ <h2>Icons</h2>
 {{ render_icon('compass-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">compass-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">compass-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cone/">
@@ -5228,7 +5228,7 @@ <h2>Icons</h2>
 {{ render_icon('cone', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cone</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cone</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cone-striped/">
@@ -5236,7 +5236,7 @@ <h2>Icons</h2>
 {{ render_icon('cone-striped', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cone-striped</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cone-striped</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/controller/">
@@ -5244,7 +5244,7 @@ <h2>Icons</h2>
 {{ render_icon('controller', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">controller</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">controller</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cookie/">
@@ -5252,7 +5252,7 @@ <h2>Icons</h2>
 {{ render_icon('cookie', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cookie</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cookie</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/copy/">
@@ -5260,7 +5260,7 @@ <h2>Icons</h2>
 {{ render_icon('copy', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">copy</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">copy</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cpu/">
@@ -5268,7 +5268,7 @@ <h2>Icons</h2>
 {{ render_icon('cpu', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cpu</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cpu</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cpu-fill/">
@@ -5276,7 +5276,7 @@ <h2>Icons</h2>
 {{ render_icon('cpu-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cpu-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cpu-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/credit-card/">
@@ -5284,7 +5284,7 @@ <h2>Icons</h2>
 {{ render_icon('credit-card', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">credit-card</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">credit-card</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/credit-card-2-back/">
@@ -5292,7 +5292,7 @@ <h2>Icons</h2>
 {{ render_icon('credit-card-2-back', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">credit-card-2-back</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">credit-card-2-back</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/credit-card-2-back-fill/">
@@ -5300,7 +5300,7 @@ <h2>Icons</h2>
 {{ render_icon('credit-card-2-back-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">credit-card-2-back-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">credit-card-2-back-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/credit-card-2-front/">
@@ -5308,7 +5308,7 @@ <h2>Icons</h2>
 {{ render_icon('credit-card-2-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">credit-card-2-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">credit-card-2-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/credit-card-2-front-fill/">
@@ -5316,7 +5316,7 @@ <h2>Icons</h2>
 {{ render_icon('credit-card-2-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">credit-card-2-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">credit-card-2-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/credit-card-fill/">
@@ -5324,7 +5324,7 @@ <h2>Icons</h2>
 {{ render_icon('credit-card-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">credit-card-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">credit-card-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/crop/">
@@ -5332,7 +5332,7 @@ <h2>Icons</h2>
 {{ render_icon('crop', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">crop</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">crop</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/crosshair/">
@@ -5340,7 +5340,7 @@ <h2>Icons</h2>
 {{ render_icon('crosshair', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">crosshair</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">crosshair</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/crosshair2/">
@@ -5348,7 +5348,7 @@ <h2>Icons</h2>
 {{ render_icon('crosshair2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">crosshair2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">crosshair2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cup/">
@@ -5356,7 +5356,7 @@ <h2>Icons</h2>
 {{ render_icon('cup', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cup</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cup</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cup-fill/">
@@ -5364,7 +5364,7 @@ <h2>Icons</h2>
 {{ render_icon('cup-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cup-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cup-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cup-hot/">
@@ -5372,7 +5372,7 @@ <h2>Icons</h2>
 {{ render_icon('cup-hot', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cup-hot</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cup-hot</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cup-hot-fill/">
@@ -5380,7 +5380,7 @@ <h2>Icons</h2>
 {{ render_icon('cup-hot-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cup-hot-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cup-hot-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cup-straw/">
@@ -5388,7 +5388,7 @@ <h2>Icons</h2>
 {{ render_icon('cup-straw', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cup-straw</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cup-straw</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/currency-bitcoin/">
@@ -5396,7 +5396,7 @@ <h2>Icons</h2>
 {{ render_icon('currency-bitcoin', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">currency-bitcoin</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">currency-bitcoin</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/currency-dollar/">
@@ -5404,7 +5404,7 @@ <h2>Icons</h2>
 {{ render_icon('currency-dollar', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">currency-dollar</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">currency-dollar</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/currency-euro/">
@@ -5412,7 +5412,7 @@ <h2>Icons</h2>
 {{ render_icon('currency-euro', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">currency-euro</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">currency-euro</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/currency-exchange/">
@@ -5420,7 +5420,7 @@ <h2>Icons</h2>
 {{ render_icon('currency-exchange', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">currency-exchange</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">currency-exchange</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/currency-pound/">
@@ -5428,7 +5428,7 @@ <h2>Icons</h2>
 {{ render_icon('currency-pound', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">currency-pound</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">currency-pound</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/currency-rupee/">
@@ -5436,7 +5436,7 @@ <h2>Icons</h2>
 {{ render_icon('currency-rupee', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">currency-rupee</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">currency-rupee</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/currency-yen/">
@@ -5444,7 +5444,7 @@ <h2>Icons</h2>
 {{ render_icon('currency-yen', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">currency-yen</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">currency-yen</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cursor/">
@@ -5452,7 +5452,7 @@ <h2>Icons</h2>
 {{ render_icon('cursor', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cursor</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cursor</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cursor-fill/">
@@ -5460,7 +5460,7 @@ <h2>Icons</h2>
 {{ render_icon('cursor-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cursor-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cursor-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cursor-text/">
@@ -5468,7 +5468,7 @@ <h2>Icons</h2>
 {{ render_icon('cursor-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cursor-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cursor-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dash/">
@@ -5476,7 +5476,7 @@ <h2>Icons</h2>
 {{ render_icon('dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dash-circle/">
@@ -5484,7 +5484,7 @@ <h2>Icons</h2>
 {{ render_icon('dash-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dash-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dash-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dash-circle-dotted/">
@@ -5492,7 +5492,7 @@ <h2>Icons</h2>
 {{ render_icon('dash-circle-dotted', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dash-circle-dotted</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dash-circle-dotted</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dash-circle-fill/">
@@ -5500,7 +5500,7 @@ <h2>Icons</h2>
 {{ render_icon('dash-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dash-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dash-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dash-lg/">
@@ -5508,7 +5508,7 @@ <h2>Icons</h2>
 {{ render_icon('dash-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dash-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dash-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dash-square/">
@@ -5516,7 +5516,7 @@ <h2>Icons</h2>
 {{ render_icon('dash-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dash-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dash-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dash-square-dotted/">
@@ -5524,7 +5524,7 @@ <h2>Icons</h2>
 {{ render_icon('dash-square-dotted', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dash-square-dotted</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dash-square-dotted</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dash-square-fill/">
@@ -5532,7 +5532,7 @@ <h2>Icons</h2>
 {{ render_icon('dash-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dash-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dash-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database/">
@@ -5540,7 +5540,7 @@ <h2>Icons</h2>
 {{ render_icon('database', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-add/">
@@ -5548,7 +5548,7 @@ <h2>Icons</h2>
 {{ render_icon('database-add', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-add</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-add</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-check/">
@@ -5556,7 +5556,7 @@ <h2>Icons</h2>
 {{ render_icon('database-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-dash/">
@@ -5564,7 +5564,7 @@ <h2>Icons</h2>
 {{ render_icon('database-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-down/">
@@ -5572,7 +5572,7 @@ <h2>Icons</h2>
 {{ render_icon('database-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-exclamation/">
@@ -5580,7 +5580,7 @@ <h2>Icons</h2>
 {{ render_icon('database-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill/">
@@ -5588,7 +5588,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-add/">
@@ -5596,7 +5596,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-add', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-add</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-add</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-check/">
@@ -5604,7 +5604,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-dash/">
@@ -5612,7 +5612,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-down/">
@@ -5620,7 +5620,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-exclamation/">
@@ -5628,7 +5628,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-gear/">
@@ -5636,7 +5636,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-gear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-gear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-gear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-lock/">
@@ -5644,7 +5644,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-slash/">
@@ -5652,7 +5652,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-up/">
@@ -5660,7 +5660,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-x/">
@@ -5668,7 +5668,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-gear/">
@@ -5676,7 +5676,7 @@ <h2>Icons</h2>
 {{ render_icon('database-gear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-gear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-gear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-lock/">
@@ -5684,7 +5684,7 @@ <h2>Icons</h2>
 {{ render_icon('database-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-slash/">
@@ -5692,7 +5692,7 @@ <h2>Icons</h2>
 {{ render_icon('database-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-up/">
@@ -5700,7 +5700,7 @@ <h2>Icons</h2>
 {{ render_icon('database-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-x/">
@@ -5708,7 +5708,7 @@ <h2>Icons</h2>
 {{ render_icon('database-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/device-hdd/">
@@ -5716,7 +5716,7 @@ <h2>Icons</h2>
 {{ render_icon('device-hdd', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">device-hdd</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">device-hdd</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/device-hdd-fill/">
@@ -5724,7 +5724,7 @@ <h2>Icons</h2>
 {{ render_icon('device-hdd-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">device-hdd-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">device-hdd-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/device-ssd/">
@@ -5732,7 +5732,7 @@ <h2>Icons</h2>
 {{ render_icon('device-ssd', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">device-ssd</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">device-ssd</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/device-ssd-fill/">
@@ -5740,7 +5740,7 @@ <h2>Icons</h2>
 {{ render_icon('device-ssd-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">device-ssd-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">device-ssd-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/diagram-2/">
@@ -5748,7 +5748,7 @@ <h2>Icons</h2>
 {{ render_icon('diagram-2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">diagram-2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">diagram-2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/diagram-2-fill/">
@@ -5756,7 +5756,7 @@ <h2>Icons</h2>
 {{ render_icon('diagram-2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">diagram-2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">diagram-2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/diagram-3/">
@@ -5764,7 +5764,7 @@ <h2>Icons</h2>
 {{ render_icon('diagram-3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">diagram-3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">diagram-3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/diagram-3-fill/">
@@ -5772,7 +5772,7 @@ <h2>Icons</h2>
 {{ render_icon('diagram-3-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">diagram-3-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">diagram-3-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/diamond/">
@@ -5780,7 +5780,7 @@ <h2>Icons</h2>
 {{ render_icon('diamond', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">diamond</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">diamond</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/diamond-fill/">
@@ -5788,7 +5788,7 @@ <h2>Icons</h2>
 {{ render_icon('diamond-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">diamond-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">diamond-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/diamond-half/">
@@ -5796,7 +5796,7 @@ <h2>Icons</h2>
 {{ render_icon('diamond-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">diamond-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">diamond-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-1/">
@@ -5804,7 +5804,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-1', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-1</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-1</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-1-fill/">
@@ -5812,7 +5812,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-1-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-1-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-1-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-2/">
@@ -5820,7 +5820,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-2-fill/">
@@ -5828,7 +5828,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-3/">
@@ -5836,7 +5836,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-3-fill/">
@@ -5844,7 +5844,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-3-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-3-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-3-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-4/">
@@ -5852,7 +5852,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-4', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-4</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-4</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-4-fill/">
@@ -5860,7 +5860,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-4-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-4-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-4-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-5/">
@@ -5868,7 +5868,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-5', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-5</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-5</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-5-fill/">
@@ -5876,7 +5876,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-5-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-5-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-5-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-6/">
@@ -5884,7 +5884,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-6', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-6</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-6</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-6-fill/">
@@ -5892,7 +5892,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-6-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-6-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-6-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/disc/">
@@ -5900,7 +5900,7 @@ <h2>Icons</h2>
 {{ render_icon('disc', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">disc</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">disc</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/disc-fill/">
@@ -5908,7 +5908,7 @@ <h2>Icons</h2>
 {{ render_icon('disc-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">disc-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">disc-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/discord/">
@@ -5916,7 +5916,7 @@ <h2>Icons</h2>
 {{ render_icon('discord', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">discord</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">discord</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/display/">
@@ -5924,7 +5924,7 @@ <h2>Icons</h2>
 {{ render_icon('display', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">display</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">display</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/display-fill/">
@@ -5932,7 +5932,7 @@ <h2>Icons</h2>
 {{ render_icon('display-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">display-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">display-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/displayport/">
@@ -5940,7 +5940,7 @@ <h2>Icons</h2>
 {{ render_icon('displayport', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">displayport</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">displayport</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/displayport-fill/">
@@ -5948,7 +5948,7 @@ <h2>Icons</h2>
 {{ render_icon('displayport-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">displayport-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">displayport-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/distribute-horizontal/">
@@ -5956,7 +5956,7 @@ <h2>Icons</h2>
 {{ render_icon('distribute-horizontal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">distribute-horizontal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">distribute-horizontal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/distribute-vertical/">
@@ -5964,7 +5964,7 @@ <h2>Icons</h2>
 {{ render_icon('distribute-vertical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">distribute-vertical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">distribute-vertical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/door-closed/">
@@ -5972,7 +5972,7 @@ <h2>Icons</h2>
 {{ render_icon('door-closed', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">door-closed</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">door-closed</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/door-closed-fill/">
@@ -5980,7 +5980,7 @@ <h2>Icons</h2>
 {{ render_icon('door-closed-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">door-closed-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">door-closed-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/door-open/">
@@ -5988,7 +5988,7 @@ <h2>Icons</h2>
 {{ render_icon('door-open', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">door-open</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">door-open</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/door-open-fill/">
@@ -5996,7 +5996,7 @@ <h2>Icons</h2>
 {{ render_icon('door-open-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">door-open-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">door-open-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dot/">
@@ -6004,7 +6004,7 @@ <h2>Icons</h2>
 {{ render_icon('dot', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dot</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dot</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/download/">
@@ -6012,7 +6012,7 @@ <h2>Icons</h2>
 {{ render_icon('download', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">download</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">download</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dpad/">
@@ -6020,7 +6020,7 @@ <h2>Icons</h2>
 {{ render_icon('dpad', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dpad</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dpad</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dpad-fill/">
@@ -6028,7 +6028,7 @@ <h2>Icons</h2>
 {{ render_icon('dpad-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dpad-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dpad-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dribbble/">
@@ -6036,7 +6036,7 @@ <h2>Icons</h2>
 {{ render_icon('dribbble', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dribbble</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dribbble</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dropbox/">
@@ -6044,7 +6044,7 @@ <h2>Icons</h2>
 {{ render_icon('dropbox', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dropbox</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dropbox</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/droplet/">
@@ -6052,7 +6052,7 @@ <h2>Icons</h2>
 {{ render_icon('droplet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">droplet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">droplet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/droplet-fill/">
@@ -6060,7 +6060,7 @@ <h2>Icons</h2>
 {{ render_icon('droplet-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">droplet-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">droplet-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/droplet-half/">
@@ -6068,7 +6068,7 @@ <h2>Icons</h2>
 {{ render_icon('droplet-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">droplet-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">droplet-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/duffle/">
@@ -6076,7 +6076,7 @@ <h2>Icons</h2>
 {{ render_icon('duffle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">duffle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">duffle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/duffle-fill/">
@@ -6084,7 +6084,7 @@ <h2>Icons</h2>
 {{ render_icon('duffle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">duffle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">duffle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ear/">
@@ -6092,7 +6092,7 @@ <h2>Icons</h2>
 {{ render_icon('ear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ear-fill/">
@@ -6100,7 +6100,7 @@ <h2>Icons</h2>
 {{ render_icon('ear-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ear-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ear-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/earbuds/">
@@ -6108,7 +6108,7 @@ <h2>Icons</h2>
 {{ render_icon('earbuds', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">earbuds</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">earbuds</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/easel/">
@@ -6116,7 +6116,7 @@ <h2>Icons</h2>
 {{ render_icon('easel', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">easel</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">easel</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/easel-fill/">
@@ -6124,7 +6124,7 @@ <h2>Icons</h2>
 {{ render_icon('easel-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">easel-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">easel-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/easel2/">
@@ -6132,7 +6132,7 @@ <h2>Icons</h2>
 {{ render_icon('easel2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">easel2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">easel2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/easel2-fill/">
@@ -6140,7 +6140,7 @@ <h2>Icons</h2>
 {{ render_icon('easel2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">easel2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">easel2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/easel3/">
@@ -6148,7 +6148,7 @@ <h2>Icons</h2>
 {{ render_icon('easel3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">easel3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">easel3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/easel3-fill/">
@@ -6156,7 +6156,7 @@ <h2>Icons</h2>
 {{ render_icon('easel3-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">easel3-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">easel3-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/egg/">
@@ -6164,7 +6164,7 @@ <h2>Icons</h2>
 {{ render_icon('egg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">egg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">egg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/egg-fill/">
@@ -6172,7 +6172,7 @@ <h2>Icons</h2>
 {{ render_icon('egg-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">egg-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">egg-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/egg-fried/">
@@ -6180,7 +6180,7 @@ <h2>Icons</h2>
 {{ render_icon('egg-fried', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">egg-fried</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">egg-fried</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eject/">
@@ -6188,7 +6188,7 @@ <h2>Icons</h2>
 {{ render_icon('eject', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eject</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eject</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eject-fill/">
@@ -6196,7 +6196,7 @@ <h2>Icons</h2>
 {{ render_icon('eject-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eject-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eject-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-angry/">
@@ -6204,7 +6204,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-angry', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-angry</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-angry</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-angry-fill/">
@@ -6212,7 +6212,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-angry-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-angry-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-angry-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-astonished/">
@@ -6220,7 +6220,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-astonished', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-astonished</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-astonished</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-astonished-fill/">
@@ -6228,7 +6228,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-astonished-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-astonished-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-astonished-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-dizzy/">
@@ -6236,7 +6236,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-dizzy', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-dizzy</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-dizzy</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-dizzy-fill/">
@@ -6244,7 +6244,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-dizzy-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-dizzy-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-dizzy-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-expressionless/">
@@ -6252,7 +6252,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-expressionless', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-expressionless</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-expressionless</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-expressionless-fill/">
@@ -6260,7 +6260,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-expressionless-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-expressionless-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-expressionless-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-frown/">
@@ -6268,7 +6268,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-frown', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-frown</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-frown</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-frown-fill/">
@@ -6276,7 +6276,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-frown-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-frown-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-frown-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-grimace/">
@@ -6284,7 +6284,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-grimace', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-grimace</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-grimace</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-grimace-fill/">
@@ -6292,7 +6292,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-grimace-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-grimace-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-grimace-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-grin/">
@@ -6300,7 +6300,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-grin', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-grin</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-grin</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-grin-fill/">
@@ -6308,7 +6308,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-grin-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-grin-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-grin-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-heart-eyes/">
@@ -6316,7 +6316,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-heart-eyes', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-heart-eyes</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-heart-eyes</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-heart-eyes-fill/">
@@ -6324,7 +6324,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-heart-eyes-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-heart-eyes-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-heart-eyes-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-kiss/">
@@ -6332,7 +6332,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-kiss', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-kiss</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-kiss</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-kiss-fill/">
@@ -6340,7 +6340,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-kiss-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-kiss-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-kiss-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-laughing/">
@@ -6348,7 +6348,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-laughing', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-laughing</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-laughing</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-laughing-fill/">
@@ -6356,7 +6356,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-laughing-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-laughing-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-laughing-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-neutral/">
@@ -6364,7 +6364,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-neutral', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-neutral</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-neutral</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-neutral-fill/">
@@ -6372,7 +6372,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-neutral-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-neutral-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-neutral-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-smile/">
@@ -6380,7 +6380,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-smile', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-smile</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-smile</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-smile-fill/">
@@ -6388,7 +6388,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-smile-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-smile-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-smile-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-smile-upside-down/">
@@ -6396,7 +6396,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-smile-upside-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-smile-upside-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-smile-upside-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-smile-upside-down-fill/">
@@ -6404,7 +6404,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-smile-upside-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-smile-upside-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-smile-upside-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-sunglasses/">
@@ -6412,7 +6412,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-sunglasses', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-sunglasses</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-sunglasses</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-sunglasses-fill/">
@@ -6420,7 +6420,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-sunglasses-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-sunglasses-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-sunglasses-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-surprise/">
@@ -6428,7 +6428,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-surprise', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-surprise</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-surprise</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-surprise-fill/">
@@ -6436,7 +6436,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-surprise-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-surprise-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-surprise-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-tear/">
@@ -6444,7 +6444,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-tear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-tear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-tear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-tear-fill/">
@@ -6452,7 +6452,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-tear-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-tear-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-tear-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-wink/">
@@ -6460,7 +6460,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-wink', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-wink</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-wink</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-wink-fill/">
@@ -6468,7 +6468,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-wink-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-wink-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-wink-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope/">
@@ -6476,7 +6476,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-arrow-down/">
@@ -6484,7 +6484,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-arrow-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-arrow-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-arrow-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-arrow-down-fill/">
@@ -6492,7 +6492,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-arrow-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-arrow-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-arrow-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-arrow-up/">
@@ -6500,7 +6500,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-arrow-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-arrow-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-arrow-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-arrow-up-fill/">
@@ -6508,7 +6508,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-arrow-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-arrow-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-arrow-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-at/">
@@ -6516,7 +6516,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-at', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-at</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-at</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-at-fill/">
@@ -6524,7 +6524,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-at-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-at-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-at-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-check/">
@@ -6532,7 +6532,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-check-fill/">
@@ -6540,7 +6540,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-dash/">
@@ -6548,7 +6548,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-dash-fill/">
@@ -6556,7 +6556,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-dash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-dash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-dash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-exclamation/">
@@ -6564,7 +6564,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-exclamation-fill/">
@@ -6572,7 +6572,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-exclamation-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-exclamation-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-exclamation-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-fill/">
@@ -6580,7 +6580,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-heart/">
@@ -6588,7 +6588,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-heart-fill/">
@@ -6596,7 +6596,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-open/">
@@ -6604,7 +6604,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-open', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-open</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-open</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-open-fill/">
@@ -6612,7 +6612,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-open-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-open-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-open-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-open-heart/">
@@ -6620,7 +6620,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-open-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-open-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-open-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-open-heart-fill/">
@@ -6628,7 +6628,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-open-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-open-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-open-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-paper/">
@@ -6636,7 +6636,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-paper', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-paper</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-paper</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-paper-fill/">
@@ -6644,7 +6644,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-paper-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-paper-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-paper-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-paper-heart/">
@@ -6652,7 +6652,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-paper-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-paper-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-paper-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-paper-heart-fill/">
@@ -6660,7 +6660,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-paper-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-paper-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-paper-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-plus/">
@@ -6668,7 +6668,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-plus-fill/">
@@ -6676,7 +6676,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-slash/">
@@ -6684,7 +6684,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-slash-fill/">
@@ -6692,7 +6692,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-slash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-slash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-slash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-x/">
@@ -6700,7 +6700,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-x-fill/">
@@ -6708,7 +6708,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eraser/">
@@ -6716,7 +6716,7 @@ <h2>Icons</h2>
 {{ render_icon('eraser', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eraser</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eraser</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eraser-fill/">
@@ -6724,7 +6724,7 @@ <h2>Icons</h2>
 {{ render_icon('eraser-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eraser-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eraser-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/escape/">
@@ -6732,7 +6732,7 @@ <h2>Icons</h2>
 {{ render_icon('escape', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">escape</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">escape</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ethernet/">
@@ -6740,7 +6740,7 @@ <h2>Icons</h2>
 {{ render_icon('ethernet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ethernet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ethernet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ev-front/">
@@ -6748,7 +6748,7 @@ <h2>Icons</h2>
 {{ render_icon('ev-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ev-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ev-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ev-front-fill/">
@@ -6756,7 +6756,7 @@ <h2>Icons</h2>
 {{ render_icon('ev-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ev-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ev-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ev-station/">
@@ -6764,7 +6764,7 @@ <h2>Icons</h2>
 {{ render_icon('ev-station', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ev-station</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ev-station</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ev-station-fill/">
@@ -6772,7 +6772,7 @@ <h2>Icons</h2>
 {{ render_icon('ev-station-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ev-station-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ev-station-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation/">
@@ -6780,7 +6780,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-circle/">
@@ -6788,7 +6788,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-circle-fill/">
@@ -6796,7 +6796,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-diamond/">
@@ -6804,7 +6804,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-diamond', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-diamond</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-diamond</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-diamond-fill/">
@@ -6812,7 +6812,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-diamond-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-diamond-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-diamond-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-lg/">
@@ -6820,7 +6820,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-octagon/">
@@ -6828,7 +6828,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-octagon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-octagon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-octagon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-octagon-fill/">
@@ -6836,7 +6836,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-octagon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-octagon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-octagon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-square/">
@@ -6844,7 +6844,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-square-fill/">
@@ -6852,7 +6852,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-triangle/">
@@ -6860,7 +6860,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-triangle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-triangle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-triangle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-triangle-fill/">
@@ -6868,7 +6868,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-triangle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-triangle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-triangle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclude/">
@@ -6876,7 +6876,7 @@ <h2>Icons</h2>
 {{ render_icon('exclude', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclude</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclude</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/explicit/">
@@ -6884,7 +6884,7 @@ <h2>Icons</h2>
 {{ render_icon('explicit', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">explicit</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">explicit</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/explicit-fill/">
@@ -6892,7 +6892,7 @@ <h2>Icons</h2>
 {{ render_icon('explicit-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">explicit-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">explicit-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exposure/">
@@ -6900,7 +6900,7 @@ <h2>Icons</h2>
 {{ render_icon('exposure', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exposure</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exposure</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eye/">
@@ -6908,7 +6908,7 @@ <h2>Icons</h2>
 {{ render_icon('eye', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eye</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eye</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eye-fill/">
@@ -6916,7 +6916,7 @@ <h2>Icons</h2>
 {{ render_icon('eye-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eye-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eye-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eye-slash/">
@@ -6924,7 +6924,7 @@ <h2>Icons</h2>
 {{ render_icon('eye-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eye-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eye-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eye-slash-fill/">
@@ -6932,7 +6932,7 @@ <h2>Icons</h2>
 {{ render_icon('eye-slash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eye-slash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eye-slash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eyedropper/">
@@ -6940,7 +6940,7 @@ <h2>Icons</h2>
 {{ render_icon('eyedropper', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eyedropper</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eyedropper</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eyeglasses/">
@@ -6948,7 +6948,7 @@ <h2>Icons</h2>
 {{ render_icon('eyeglasses', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eyeglasses</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eyeglasses</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/facebook/">
@@ -6956,7 +6956,7 @@ <h2>Icons</h2>
 {{ render_icon('facebook', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">facebook</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">facebook</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fan/">
@@ -6964,7 +6964,7 @@ <h2>Icons</h2>
 {{ render_icon('fan', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fan</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fan</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fast-forward/">
@@ -6972,7 +6972,7 @@ <h2>Icons</h2>
 {{ render_icon('fast-forward', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fast-forward</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fast-forward</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fast-forward-btn/">
@@ -6980,7 +6980,7 @@ <h2>Icons</h2>
 {{ render_icon('fast-forward-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fast-forward-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fast-forward-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fast-forward-btn-fill/">
@@ -6988,7 +6988,7 @@ <h2>Icons</h2>
 {{ render_icon('fast-forward-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fast-forward-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fast-forward-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fast-forward-circle/">
@@ -6996,7 +6996,7 @@ <h2>Icons</h2>
 {{ render_icon('fast-forward-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fast-forward-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fast-forward-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fast-forward-circle-fill/">
@@ -7004,7 +7004,7 @@ <h2>Icons</h2>
 {{ render_icon('fast-forward-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fast-forward-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fast-forward-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fast-forward-fill/">
@@ -7012,7 +7012,7 @@ <h2>Icons</h2>
 {{ render_icon('fast-forward-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fast-forward-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fast-forward-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/feather/">
@@ -7020,7 +7020,7 @@ <h2>Icons</h2>
 {{ render_icon('feather', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">feather</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">feather</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/feather2/">
@@ -7028,7 +7028,7 @@ <h2>Icons</h2>
 {{ render_icon('feather2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">feather2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">feather2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file/">
@@ -7036,7 +7036,7 @@ <h2>Icons</h2>
 {{ render_icon('file', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-arrow-down/">
@@ -7044,7 +7044,7 @@ <h2>Icons</h2>
 {{ render_icon('file-arrow-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-arrow-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-arrow-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-arrow-down-fill/">
@@ -7052,7 +7052,7 @@ <h2>Icons</h2>
 {{ render_icon('file-arrow-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-arrow-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-arrow-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-arrow-up/">
@@ -7060,7 +7060,7 @@ <h2>Icons</h2>
 {{ render_icon('file-arrow-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-arrow-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-arrow-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-arrow-up-fill/">
@@ -7068,7 +7068,7 @@ <h2>Icons</h2>
 {{ render_icon('file-arrow-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-arrow-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-arrow-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-bar-graph/">
@@ -7076,7 +7076,7 @@ <h2>Icons</h2>
 {{ render_icon('file-bar-graph', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-bar-graph</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-bar-graph</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-bar-graph-fill/">
@@ -7084,7 +7084,7 @@ <h2>Icons</h2>
 {{ render_icon('file-bar-graph-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-bar-graph-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-bar-graph-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-binary/">
@@ -7092,7 +7092,7 @@ <h2>Icons</h2>
 {{ render_icon('file-binary', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-binary</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-binary</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-binary-fill/">
@@ -7100,7 +7100,7 @@ <h2>Icons</h2>
 {{ render_icon('file-binary-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-binary-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-binary-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-break/">
@@ -7108,7 +7108,7 @@ <h2>Icons</h2>
 {{ render_icon('file-break', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-break</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-break</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-break-fill/">
@@ -7116,7 +7116,7 @@ <h2>Icons</h2>
 {{ render_icon('file-break-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-break-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-break-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-check/">
@@ -7124,7 +7124,7 @@ <h2>Icons</h2>
 {{ render_icon('file-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-check-fill/">
@@ -7132,7 +7132,7 @@ <h2>Icons</h2>
 {{ render_icon('file-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-code/">
@@ -7140,7 +7140,7 @@ <h2>Icons</h2>
 {{ render_icon('file-code', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-code</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-code</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-code-fill/">
@@ -7148,7 +7148,7 @@ <h2>Icons</h2>
 {{ render_icon('file-code-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-code-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-code-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-diff/">
@@ -7156,7 +7156,7 @@ <h2>Icons</h2>
 {{ render_icon('file-diff', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-diff</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-diff</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-diff-fill/">
@@ -7164,7 +7164,7 @@ <h2>Icons</h2>
 {{ render_icon('file-diff-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-diff-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-diff-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark/">
@@ -7172,7 +7172,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-arrow-down/">
@@ -7180,7 +7180,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-arrow-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-arrow-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-arrow-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-arrow-down-fill/">
@@ -7188,7 +7188,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-arrow-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-arrow-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-arrow-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-arrow-up/">
@@ -7196,7 +7196,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-arrow-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-arrow-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-arrow-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-arrow-up-fill/">
@@ -7204,7 +7204,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-arrow-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-arrow-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-arrow-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-bar-graph/">
@@ -7212,7 +7212,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-bar-graph', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-bar-graph</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-bar-graph</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-bar-graph-fill/">
@@ -7220,7 +7220,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-bar-graph-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-bar-graph-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-bar-graph-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-binary/">
@@ -7228,7 +7228,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-binary', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-binary</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-binary</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-binary-fill/">
@@ -7236,7 +7236,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-binary-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-binary-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-binary-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-break/">
@@ -7244,7 +7244,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-break', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-break</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-break</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-break-fill/">
@@ -7252,7 +7252,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-break-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-break-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-break-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-check/">
@@ -7260,7 +7260,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-check-fill/">
@@ -7268,7 +7268,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-code/">
@@ -7276,7 +7276,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-code', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-code</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-code</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-code-fill/">
@@ -7284,7 +7284,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-code-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-code-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-code-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-diff/">
@@ -7292,7 +7292,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-diff', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-diff</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-diff</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-diff-fill/">
@@ -7300,7 +7300,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-diff-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-diff-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-diff-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-easel/">
@@ -7308,7 +7308,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-easel', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-easel</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-easel</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-easel-fill/">
@@ -7316,7 +7316,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-easel-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-easel-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-easel-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-excel/">
@@ -7324,7 +7324,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-excel', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-excel</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-excel</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-excel-fill/">
@@ -7332,7 +7332,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-excel-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-excel-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-excel-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-fill/">
@@ -7340,7 +7340,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-font/">
@@ -7348,7 +7348,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-font', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-font</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-font</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-font-fill/">
@@ -7356,7 +7356,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-font-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-font-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-font-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-image/">
@@ -7364,7 +7364,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-image', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-image</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-image</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-image-fill/">
@@ -7372,7 +7372,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-image-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-image-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-image-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-lock/">
@@ -7380,7 +7380,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-lock-fill/">
@@ -7388,7 +7388,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-lock-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-lock-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-lock-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-lock2/">
@@ -7396,7 +7396,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-lock2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-lock2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-lock2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-lock2-fill/">
@@ -7404,7 +7404,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-lock2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-lock2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-lock2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-medical/">
@@ -7412,7 +7412,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-medical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-medical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-medical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-medical-fill/">
@@ -7420,7 +7420,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-medical-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-medical-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-medical-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-minus/">
@@ -7428,7 +7428,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-minus-fill/">
@@ -7436,7 +7436,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-music/">
@@ -7444,7 +7444,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-music', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-music</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-music</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-music-fill/">
@@ -7452,7 +7452,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-music-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-music-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-music-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-pdf/">
@@ -7460,7 +7460,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-pdf', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-pdf</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-pdf</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-pdf-fill/">
@@ -7468,7 +7468,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-pdf-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-pdf-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-pdf-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-person/">
@@ -7476,7 +7476,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-person', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-person</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-person</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-person-fill/">
@@ -7484,7 +7484,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-person-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-person-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-person-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-play/">
@@ -7492,7 +7492,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-play', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-play</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-play</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-play-fill/">
@@ -7500,7 +7500,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-play-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-play-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-play-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-plus/">
@@ -7508,7 +7508,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-plus-fill/">
@@ -7516,7 +7516,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-post/">
@@ -7524,7 +7524,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-post', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-post</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-post</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-post-fill/">
@@ -7532,7 +7532,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-post-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-post-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-post-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-ppt/">
@@ -7540,7 +7540,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-ppt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-ppt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-ppt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-ppt-fill/">
@@ -7548,7 +7548,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-ppt-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-ppt-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-ppt-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-richtext/">
@@ -7556,7 +7556,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-richtext', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-richtext</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-richtext</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-richtext-fill/">
@@ -7564,7 +7564,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-richtext-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-richtext-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-richtext-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-ruled/">
@@ -7572,7 +7572,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-ruled', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-ruled</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-ruled</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-ruled-fill/">
@@ -7580,7 +7580,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-ruled-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-ruled-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-ruled-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-slides/">
@@ -7588,7 +7588,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-slides', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-slides</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-slides</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-slides-fill/">
@@ -7596,7 +7596,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-slides-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-slides-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-slides-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-spreadsheet/">
@@ -7604,7 +7604,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-spreadsheet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-spreadsheet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-spreadsheet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-spreadsheet-fill/">
@@ -7612,7 +7612,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-spreadsheet-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-spreadsheet-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-spreadsheet-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-text/">
@@ -7620,7 +7620,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-text-fill/">
@@ -7628,7 +7628,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-text-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-text-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-text-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-word/">
@@ -7636,7 +7636,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-word', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-word</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-word</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-word-fill/">
@@ -7644,7 +7644,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-word-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-word-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-word-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-x/">
@@ -7652,7 +7652,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-x-fill/">
@@ -7660,7 +7660,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-zip/">
@@ -7668,7 +7668,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-zip', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-zip</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-zip</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-zip-fill/">
@@ -7676,7 +7676,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-zip-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-zip-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-zip-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-easel/">
@@ -7684,7 +7684,7 @@ <h2>Icons</h2>
 {{ render_icon('file-easel', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-easel</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-easel</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-easel-fill/">
@@ -7692,7 +7692,7 @@ <h2>Icons</h2>
 {{ render_icon('file-easel-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-easel-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-easel-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-excel/">
@@ -7700,7 +7700,7 @@ <h2>Icons</h2>
 {{ render_icon('file-excel', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-excel</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-excel</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-excel-fill/">
@@ -7708,7 +7708,7 @@ <h2>Icons</h2>
 {{ render_icon('file-excel-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-excel-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-excel-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-fill/">
@@ -7716,7 +7716,7 @@ <h2>Icons</h2>
 {{ render_icon('file-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-font/">
@@ -7724,7 +7724,7 @@ <h2>Icons</h2>
 {{ render_icon('file-font', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-font</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-font</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-font-fill/">
@@ -7732,7 +7732,7 @@ <h2>Icons</h2>
 {{ render_icon('file-font-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-font-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-font-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-image/">
@@ -7740,7 +7740,7 @@ <h2>Icons</h2>
 {{ render_icon('file-image', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-image</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-image</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-image-fill/">
@@ -7748,7 +7748,7 @@ <h2>Icons</h2>
 {{ render_icon('file-image-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-image-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-image-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-lock/">
@@ -7756,7 +7756,7 @@ <h2>Icons</h2>
 {{ render_icon('file-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-lock-fill/">
@@ -7764,7 +7764,7 @@ <h2>Icons</h2>
 {{ render_icon('file-lock-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-lock-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-lock-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-lock2/">
@@ -7772,7 +7772,7 @@ <h2>Icons</h2>
 {{ render_icon('file-lock2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-lock2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-lock2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-lock2-fill/">
@@ -7780,7 +7780,7 @@ <h2>Icons</h2>
 {{ render_icon('file-lock2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-lock2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-lock2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-medical/">
@@ -7788,7 +7788,7 @@ <h2>Icons</h2>
 {{ render_icon('file-medical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-medical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-medical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-medical-fill/">
@@ -7796,7 +7796,7 @@ <h2>Icons</h2>
 {{ render_icon('file-medical-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-medical-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-medical-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-minus/">
@@ -7804,7 +7804,7 @@ <h2>Icons</h2>
 {{ render_icon('file-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-minus-fill/">
@@ -7812,7 +7812,7 @@ <h2>Icons</h2>
 {{ render_icon('file-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-music/">
@@ -7820,7 +7820,7 @@ <h2>Icons</h2>
 {{ render_icon('file-music', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-music</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-music</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-music-fill/">
@@ -7828,7 +7828,7 @@ <h2>Icons</h2>
 {{ render_icon('file-music-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-music-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-music-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-pdf/">
@@ -7836,7 +7836,7 @@ <h2>Icons</h2>
 {{ render_icon('file-pdf', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-pdf</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-pdf</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-pdf-fill/">
@@ -7844,7 +7844,7 @@ <h2>Icons</h2>
 {{ render_icon('file-pdf-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-pdf-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-pdf-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-person/">
@@ -7852,7 +7852,7 @@ <h2>Icons</h2>
 {{ render_icon('file-person', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-person</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-person</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-person-fill/">
@@ -7860,7 +7860,7 @@ <h2>Icons</h2>
 {{ render_icon('file-person-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-person-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-person-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-play/">
@@ -7868,7 +7868,7 @@ <h2>Icons</h2>
 {{ render_icon('file-play', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-play</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-play</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-play-fill/">
@@ -7876,7 +7876,7 @@ <h2>Icons</h2>
 {{ render_icon('file-play-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-play-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-play-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-plus/">
@@ -7884,7 +7884,7 @@ <h2>Icons</h2>
 {{ render_icon('file-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-plus-fill/">
@@ -7892,7 +7892,7 @@ <h2>Icons</h2>
 {{ render_icon('file-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-post/">
@@ -7900,7 +7900,7 @@ <h2>Icons</h2>
 {{ render_icon('file-post', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-post</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-post</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-post-fill/">
@@ -7908,7 +7908,7 @@ <h2>Icons</h2>
 {{ render_icon('file-post-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-post-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-post-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-ppt/">
@@ -7916,7 +7916,7 @@ <h2>Icons</h2>
 {{ render_icon('file-ppt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-ppt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-ppt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-ppt-fill/">
@@ -7924,7 +7924,7 @@ <h2>Icons</h2>
 {{ render_icon('file-ppt-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-ppt-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-ppt-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-richtext/">
@@ -7932,7 +7932,7 @@ <h2>Icons</h2>
 {{ render_icon('file-richtext', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-richtext</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-richtext</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-richtext-fill/">
@@ -7940,7 +7940,7 @@ <h2>Icons</h2>
 {{ render_icon('file-richtext-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-richtext-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-richtext-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-ruled/">
@@ -7948,7 +7948,7 @@ <h2>Icons</h2>
 {{ render_icon('file-ruled', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-ruled</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-ruled</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-ruled-fill/">
@@ -7956,7 +7956,7 @@ <h2>Icons</h2>
 {{ render_icon('file-ruled-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-ruled-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-ruled-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-slides/">
@@ -7964,7 +7964,7 @@ <h2>Icons</h2>
 {{ render_icon('file-slides', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-slides</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-slides</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-slides-fill/">
@@ -7972,7 +7972,7 @@ <h2>Icons</h2>
 {{ render_icon('file-slides-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-slides-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-slides-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-spreadsheet/">
@@ -7980,7 +7980,7 @@ <h2>Icons</h2>
 {{ render_icon('file-spreadsheet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-spreadsheet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-spreadsheet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-spreadsheet-fill/">
@@ -7988,7 +7988,7 @@ <h2>Icons</h2>
 {{ render_icon('file-spreadsheet-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-spreadsheet-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-spreadsheet-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-text/">
@@ -7996,7 +7996,7 @@ <h2>Icons</h2>
 {{ render_icon('file-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-text-fill/">
@@ -8004,7 +8004,7 @@ <h2>Icons</h2>
 {{ render_icon('file-text-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-text-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-text-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-word/">
@@ -8012,7 +8012,7 @@ <h2>Icons</h2>
 {{ render_icon('file-word', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-word</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-word</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-word-fill/">
@@ -8020,7 +8020,7 @@ <h2>Icons</h2>
 {{ render_icon('file-word-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-word-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-word-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-x/">
@@ -8028,7 +8028,7 @@ <h2>Icons</h2>
 {{ render_icon('file-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-x-fill/">
@@ -8036,7 +8036,7 @@ <h2>Icons</h2>
 {{ render_icon('file-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-zip/">
@@ -8044,7 +8044,7 @@ <h2>Icons</h2>
 {{ render_icon('file-zip', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-zip</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-zip</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-zip-fill/">
@@ -8052,7 +8052,7 @@ <h2>Icons</h2>
 {{ render_icon('file-zip-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-zip-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-zip-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/files/">
@@ -8060,7 +8060,7 @@ <h2>Icons</h2>
 {{ render_icon('files', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">files</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">files</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/files-alt/">
@@ -8068,7 +8068,7 @@ <h2>Icons</h2>
 {{ render_icon('files-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">files-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">files-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-aac/">
@@ -8076,7 +8076,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-aac', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-aac</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-aac</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-ai/">
@@ -8084,7 +8084,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-ai', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-ai</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-ai</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-bmp/">
@@ -8092,7 +8092,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-bmp', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-bmp</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-bmp</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-cs/">
@@ -8100,7 +8100,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-cs', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-cs</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-cs</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-css/">
@@ -8108,7 +8108,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-css', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-css</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-css</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-csv/">
@@ -8116,7 +8116,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-csv', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-csv</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-csv</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-doc/">
@@ -8124,7 +8124,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-doc', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-doc</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-doc</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-docx/">
@@ -8132,7 +8132,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-docx', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-docx</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-docx</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-exe/">
@@ -8140,7 +8140,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-exe', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-exe</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-exe</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-gif/">
@@ -8148,7 +8148,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-gif', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-gif</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-gif</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-heic/">
@@ -8156,7 +8156,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-heic', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-heic</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-heic</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-html/">
@@ -8164,7 +8164,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-html', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-html</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-html</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-java/">
@@ -8172,7 +8172,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-java', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-java</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-java</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-jpg/">
@@ -8180,7 +8180,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-jpg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-jpg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-jpg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-js/">
@@ -8188,7 +8188,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-js', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-js</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-js</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-json/">
@@ -8196,7 +8196,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-json', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-json</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-json</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-jsx/">
@@ -8204,7 +8204,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-jsx', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-jsx</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-jsx</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-key/">
@@ -8212,7 +8212,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-key', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-key</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-key</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-m4p/">
@@ -8220,7 +8220,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-m4p', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-m4p</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-m4p</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-md/">
@@ -8228,7 +8228,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-md', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-md</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-md</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-mdx/">
@@ -8236,7 +8236,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-mdx', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-mdx</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-mdx</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-mov/">
@@ -8244,7 +8244,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-mov', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-mov</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-mov</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-mp3/">
@@ -8252,7 +8252,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-mp3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-mp3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-mp3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-mp4/">
@@ -8260,7 +8260,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-mp4', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-mp4</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-mp4</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-otf/">
@@ -8268,7 +8268,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-otf', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-otf</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-otf</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-pdf/">
@@ -8276,7 +8276,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-pdf', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-pdf</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-pdf</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-php/">
@@ -8284,7 +8284,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-php', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-php</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-php</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-png/">
@@ -8292,7 +8292,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-png', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-png</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-png</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-ppt/">
@@ -8300,7 +8300,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-ppt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-ppt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-ppt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-pptx/">
@@ -8308,7 +8308,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-pptx', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-pptx</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-pptx</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-psd/">
@@ -8316,7 +8316,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-psd', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-psd</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-psd</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-py/">
@@ -8324,7 +8324,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-py', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-py</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-py</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-raw/">
@@ -8332,7 +8332,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-raw', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-raw</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-raw</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-rb/">
@@ -8340,7 +8340,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-rb', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-rb</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-rb</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-sass/">
@@ -8348,7 +8348,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-sass', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-sass</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-sass</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-scss/">
@@ -8356,7 +8356,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-scss', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-scss</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-scss</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-sh/">
@@ -8364,7 +8364,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-sh', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-sh</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-sh</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-sql/">
@@ -8372,7 +8372,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-sql', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-sql</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-sql</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-svg/">
@@ -8380,7 +8380,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-svg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-svg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-svg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-tiff/">
@@ -8388,7 +8388,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-tiff', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-tiff</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-tiff</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-tsx/">
@@ -8396,7 +8396,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-tsx', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-tsx</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-tsx</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-ttf/">
@@ -8404,7 +8404,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-ttf', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-ttf</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-ttf</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-txt/">
@@ -8412,7 +8412,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-txt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-txt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-txt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-wav/">
@@ -8420,7 +8420,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-wav', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-wav</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-wav</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-woff/">
@@ -8428,7 +8428,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-woff', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-woff</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-woff</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-xls/">
@@ -8436,7 +8436,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-xls', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-xls</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-xls</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-xlsx/">
@@ -8444,7 +8444,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-xlsx', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-xlsx</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-xlsx</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-xml/">
@@ -8452,7 +8452,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-xml', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-xml</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-xml</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-yml/">
@@ -8460,7 +8460,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-yml', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-yml</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-yml</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/film/">
@@ -8468,7 +8468,7 @@ <h2>Icons</h2>
 {{ render_icon('film', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">film</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">film</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filter/">
@@ -8476,7 +8476,7 @@ <h2>Icons</h2>
 {{ render_icon('filter', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filter</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filter</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filter-circle/">
@@ -8484,7 +8484,7 @@ <h2>Icons</h2>
 {{ render_icon('filter-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filter-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filter-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filter-circle-fill/">
@@ -8492,7 +8492,7 @@ <h2>Icons</h2>
 {{ render_icon('filter-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filter-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filter-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filter-left/">
@@ -8500,7 +8500,7 @@ <h2>Icons</h2>
 {{ render_icon('filter-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filter-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filter-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filter-right/">
@@ -8508,7 +8508,7 @@ <h2>Icons</h2>
 {{ render_icon('filter-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filter-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filter-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filter-square/">
@@ -8516,7 +8516,7 @@ <h2>Icons</h2>
 {{ render_icon('filter-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filter-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filter-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filter-square-fill/">
@@ -8524,7 +8524,7 @@ <h2>Icons</h2>
 {{ render_icon('filter-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filter-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filter-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fingerprint/">
@@ -8532,7 +8532,7 @@ <h2>Icons</h2>
 {{ render_icon('fingerprint', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fingerprint</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fingerprint</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fire/">
@@ -8540,7 +8540,7 @@ <h2>Icons</h2>
 {{ render_icon('fire', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fire</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fire</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/flag/">
@@ -8548,7 +8548,7 @@ <h2>Icons</h2>
 {{ render_icon('flag', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">flag</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">flag</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/flag-fill/">
@@ -8556,7 +8556,7 @@ <h2>Icons</h2>
 {{ render_icon('flag-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">flag-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">flag-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/floppy/">
@@ -8564,7 +8564,7 @@ <h2>Icons</h2>
 {{ render_icon('floppy', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">floppy</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">floppy</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/floppy-fill/">
@@ -8572,7 +8572,7 @@ <h2>Icons</h2>
 {{ render_icon('floppy-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">floppy-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">floppy-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/floppy2/">
@@ -8580,7 +8580,7 @@ <h2>Icons</h2>
 {{ render_icon('floppy2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">floppy2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">floppy2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/floppy2-fill/">
@@ -8588,7 +8588,7 @@ <h2>Icons</h2>
 {{ render_icon('floppy2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">floppy2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">floppy2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/flower1/">
@@ -8596,7 +8596,7 @@ <h2>Icons</h2>
 {{ render_icon('flower1', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">flower1</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">flower1</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/flower2/">
@@ -8604,7 +8604,7 @@ <h2>Icons</h2>
 {{ render_icon('flower2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">flower2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">flower2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/flower3/">
@@ -8612,7 +8612,7 @@ <h2>Icons</h2>
 {{ render_icon('flower3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">flower3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">flower3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder/">
@@ -8620,7 +8620,7 @@ <h2>Icons</h2>
 {{ render_icon('folder', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder-check/">
@@ -8628,7 +8628,7 @@ <h2>Icons</h2>
 {{ render_icon('folder-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder-fill/">
@@ -8636,7 +8636,7 @@ <h2>Icons</h2>
 {{ render_icon('folder-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder-minus/">
@@ -8644,7 +8644,7 @@ <h2>Icons</h2>
 {{ render_icon('folder-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder-plus/">
@@ -8652,7 +8652,7 @@ <h2>Icons</h2>
 {{ render_icon('folder-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder-symlink/">
@@ -8660,7 +8660,7 @@ <h2>Icons</h2>
 {{ render_icon('folder-symlink', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder-symlink</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder-symlink</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder-symlink-fill/">
@@ -8668,7 +8668,7 @@ <h2>Icons</h2>
 {{ render_icon('folder-symlink-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder-symlink-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder-symlink-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder-x/">
@@ -8676,7 +8676,7 @@ <h2>Icons</h2>
 {{ render_icon('folder-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder2/">
@@ -8684,7 +8684,7 @@ <h2>Icons</h2>
 {{ render_icon('folder2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder2-open/">
@@ -8692,7 +8692,7 @@ <h2>Icons</h2>
 {{ render_icon('folder2-open', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder2-open</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder2-open</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fonts/">
@@ -8700,7 +8700,7 @@ <h2>Icons</h2>
 {{ render_icon('fonts', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fonts</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fonts</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/forward/">
@@ -8708,7 +8708,7 @@ <h2>Icons</h2>
 {{ render_icon('forward', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">forward</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">forward</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/forward-fill/">
@@ -8716,7 +8716,7 @@ <h2>Icons</h2>
 {{ render_icon('forward-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">forward-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">forward-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/front/">
@@ -8724,7 +8724,7 @@ <h2>Icons</h2>
 {{ render_icon('front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fuel-pump/">
@@ -8732,7 +8732,7 @@ <h2>Icons</h2>
 {{ render_icon('fuel-pump', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fuel-pump</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fuel-pump</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fuel-pump-diesel/">
@@ -8740,7 +8740,7 @@ <h2>Icons</h2>
 {{ render_icon('fuel-pump-diesel', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fuel-pump-diesel</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fuel-pump-diesel</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fuel-pump-diesel-fill/">
@@ -8748,7 +8748,7 @@ <h2>Icons</h2>
 {{ render_icon('fuel-pump-diesel-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fuel-pump-diesel-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fuel-pump-diesel-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fuel-pump-fill/">
@@ -8756,7 +8756,7 @@ <h2>Icons</h2>
 {{ render_icon('fuel-pump-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fuel-pump-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fuel-pump-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fullscreen/">
@@ -8764,7 +8764,7 @@ <h2>Icons</h2>
 {{ render_icon('fullscreen', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fullscreen</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fullscreen</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fullscreen-exit/">
@@ -8772,7 +8772,7 @@ <h2>Icons</h2>
 {{ render_icon('fullscreen-exit', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fullscreen-exit</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fullscreen-exit</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/funnel/">
@@ -8780,7 +8780,7 @@ <h2>Icons</h2>
 {{ render_icon('funnel', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">funnel</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">funnel</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/funnel-fill/">
@@ -8788,7 +8788,7 @@ <h2>Icons</h2>
 {{ render_icon('funnel-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">funnel-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">funnel-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gear/">
@@ -8796,7 +8796,7 @@ <h2>Icons</h2>
 {{ render_icon('gear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gear-fill/">
@@ -8804,7 +8804,7 @@ <h2>Icons</h2>
 {{ render_icon('gear-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gear-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gear-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gear-wide/">
@@ -8812,7 +8812,7 @@ <h2>Icons</h2>
 {{ render_icon('gear-wide', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gear-wide</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gear-wide</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gear-wide-connected/">
@@ -8820,7 +8820,7 @@ <h2>Icons</h2>
 {{ render_icon('gear-wide-connected', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gear-wide-connected</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gear-wide-connected</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gem/">
@@ -8828,7 +8828,7 @@ <h2>Icons</h2>
 {{ render_icon('gem', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gem</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gem</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gender-ambiguous/">
@@ -8836,7 +8836,7 @@ <h2>Icons</h2>
 {{ render_icon('gender-ambiguous', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gender-ambiguous</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gender-ambiguous</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gender-female/">
@@ -8844,7 +8844,7 @@ <h2>Icons</h2>
 {{ render_icon('gender-female', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gender-female</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gender-female</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gender-male/">
@@ -8852,7 +8852,7 @@ <h2>Icons</h2>
 {{ render_icon('gender-male', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gender-male</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gender-male</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gender-neuter/">
@@ -8860,7 +8860,7 @@ <h2>Icons</h2>
 {{ render_icon('gender-neuter', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gender-neuter</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gender-neuter</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gender-trans/">
@@ -8868,7 +8868,7 @@ <h2>Icons</h2>
 {{ render_icon('gender-trans', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gender-trans</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gender-trans</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/geo/">
@@ -8876,7 +8876,7 @@ <h2>Icons</h2>
 {{ render_icon('geo', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">geo</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">geo</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/geo-alt/">
@@ -8884,7 +8884,7 @@ <h2>Icons</h2>
 {{ render_icon('geo-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">geo-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">geo-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/geo-alt-fill/">
@@ -8892,7 +8892,7 @@ <h2>Icons</h2>
 {{ render_icon('geo-alt-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">geo-alt-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">geo-alt-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/geo-fill/">
@@ -8900,7 +8900,7 @@ <h2>Icons</h2>
 {{ render_icon('geo-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">geo-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">geo-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gift/">
@@ -8908,7 +8908,7 @@ <h2>Icons</h2>
 {{ render_icon('gift', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gift</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gift</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gift-fill/">
@@ -8916,7 +8916,7 @@ <h2>Icons</h2>
 {{ render_icon('gift-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gift-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gift-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/git/">
@@ -8924,7 +8924,7 @@ <h2>Icons</h2>
 {{ render_icon('git', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">git</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">git</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/github/">
@@ -8932,7 +8932,7 @@ <h2>Icons</h2>
 {{ render_icon('github', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">github</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">github</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gitlab/">
@@ -8940,7 +8940,7 @@ <h2>Icons</h2>
 {{ render_icon('gitlab', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gitlab</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gitlab</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/globe/">
@@ -8948,7 +8948,7 @@ <h2>Icons</h2>
 {{ render_icon('globe', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">globe</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">globe</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/globe-americas/">
@@ -8956,7 +8956,7 @@ <h2>Icons</h2>
 {{ render_icon('globe-americas', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">globe-americas</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">globe-americas</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/globe-asia-australia/">
@@ -8964,7 +8964,7 @@ <h2>Icons</h2>
 {{ render_icon('globe-asia-australia', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">globe-asia-australia</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">globe-asia-australia</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/globe-central-south-asia/">
@@ -8972,7 +8972,7 @@ <h2>Icons</h2>
 {{ render_icon('globe-central-south-asia', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">globe-central-south-asia</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">globe-central-south-asia</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/globe-europe-africa/">
@@ -8980,7 +8980,7 @@ <h2>Icons</h2>
 {{ render_icon('globe-europe-africa', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">globe-europe-africa</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">globe-europe-africa</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/globe2/">
@@ -8988,7 +8988,7 @@ <h2>Icons</h2>
 {{ render_icon('globe2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">globe2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">globe2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/google/">
@@ -8996,7 +8996,7 @@ <h2>Icons</h2>
 {{ render_icon('google', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">google</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">google</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/google-play/">
@@ -9004,7 +9004,7 @@ <h2>Icons</h2>
 {{ render_icon('google-play', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">google-play</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">google-play</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gpu-card/">
@@ -9012,7 +9012,7 @@ <h2>Icons</h2>
 {{ render_icon('gpu-card', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gpu-card</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gpu-card</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/graph-down/">
@@ -9020,7 +9020,7 @@ <h2>Icons</h2>
 {{ render_icon('graph-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">graph-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">graph-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/graph-down-arrow/">
@@ -9028,7 +9028,7 @@ <h2>Icons</h2>
 {{ render_icon('graph-down-arrow', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">graph-down-arrow</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">graph-down-arrow</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/graph-up/">
@@ -9036,7 +9036,7 @@ <h2>Icons</h2>
 {{ render_icon('graph-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">graph-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">graph-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/graph-up-arrow/">
@@ -9044,7 +9044,7 @@ <h2>Icons</h2>
 {{ render_icon('graph-up-arrow', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">graph-up-arrow</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">graph-up-arrow</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid/">
@@ -9052,7 +9052,7 @@ <h2>Icons</h2>
 {{ render_icon('grid', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-1x2/">
@@ -9060,7 +9060,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-1x2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-1x2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-1x2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-1x2-fill/">
@@ -9068,7 +9068,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-1x2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-1x2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-1x2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-3x2/">
@@ -9076,7 +9076,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-3x2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-3x2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-3x2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-3x2-gap/">
@@ -9084,7 +9084,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-3x2-gap', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-3x2-gap</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-3x2-gap</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-3x2-gap-fill/">
@@ -9092,7 +9092,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-3x2-gap-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-3x2-gap-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-3x2-gap-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-3x3/">
@@ -9100,7 +9100,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-3x3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-3x3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-3x3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-3x3-gap/">
@@ -9108,7 +9108,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-3x3-gap', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-3x3-gap</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-3x3-gap</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-3x3-gap-fill/">
@@ -9116,7 +9116,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-3x3-gap-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-3x3-gap-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-3x3-gap-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-fill/">
@@ -9124,7 +9124,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grip-horizontal/">
@@ -9132,7 +9132,7 @@ <h2>Icons</h2>
 {{ render_icon('grip-horizontal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grip-horizontal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grip-horizontal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grip-vertical/">
@@ -9140,7 +9140,7 @@ <h2>Icons</h2>
 {{ render_icon('grip-vertical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grip-vertical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grip-vertical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/h-circle/">
@@ -9148,7 +9148,7 @@ <h2>Icons</h2>
 {{ render_icon('h-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">h-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">h-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/h-circle-fill/">
@@ -9156,7 +9156,7 @@ <h2>Icons</h2>
 {{ render_icon('h-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">h-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">h-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/h-square/">
@@ -9164,7 +9164,7 @@ <h2>Icons</h2>
 {{ render_icon('h-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">h-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">h-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/h-square-fill/">
@@ -9172,7 +9172,7 @@ <h2>Icons</h2>
 {{ render_icon('h-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">h-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">h-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hammer/">
@@ -9180,7 +9180,7 @@ <h2>Icons</h2>
 {{ render_icon('hammer', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hammer</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hammer</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hand-index/">
@@ -9188,7 +9188,7 @@ <h2>Icons</h2>
 {{ render_icon('hand-index', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hand-index</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hand-index</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hand-index-fill/">
@@ -9196,7 +9196,7 @@ <h2>Icons</h2>
 {{ render_icon('hand-index-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hand-index-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hand-index-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hand-index-thumb/">
@@ -9204,7 +9204,7 @@ <h2>Icons</h2>
 {{ render_icon('hand-index-thumb', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hand-index-thumb</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hand-index-thumb</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hand-index-thumb-fill/">
@@ -9212,7 +9212,7 @@ <h2>Icons</h2>
 {{ render_icon('hand-index-thumb-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hand-index-thumb-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hand-index-thumb-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hand-thumbs-down/">
@@ -9220,7 +9220,7 @@ <h2>Icons</h2>
 {{ render_icon('hand-thumbs-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hand-thumbs-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hand-thumbs-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hand-thumbs-down-fill/">
@@ -9228,7 +9228,7 @@ <h2>Icons</h2>
 {{ render_icon('hand-thumbs-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hand-thumbs-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hand-thumbs-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hand-thumbs-up/">
@@ -9236,7 +9236,7 @@ <h2>Icons</h2>
 {{ render_icon('hand-thumbs-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hand-thumbs-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hand-thumbs-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hand-thumbs-up-fill/">
@@ -9244,7 +9244,7 @@ <h2>Icons</h2>
 {{ render_icon('hand-thumbs-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hand-thumbs-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hand-thumbs-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/handbag/">
@@ -9252,7 +9252,7 @@ <h2>Icons</h2>
 {{ render_icon('handbag', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">handbag</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">handbag</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/handbag-fill/">
@@ -9260,7 +9260,7 @@ <h2>Icons</h2>
 {{ render_icon('handbag-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">handbag-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">handbag-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hash/">
@@ -9268,7 +9268,7 @@ <h2>Icons</h2>
 {{ render_icon('hash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdd/">
@@ -9276,7 +9276,7 @@ <h2>Icons</h2>
 {{ render_icon('hdd', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdd</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdd</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdd-fill/">
@@ -9284,7 +9284,7 @@ <h2>Icons</h2>
 {{ render_icon('hdd-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdd-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdd-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdd-network/">
@@ -9292,7 +9292,7 @@ <h2>Icons</h2>
 {{ render_icon('hdd-network', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdd-network</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdd-network</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdd-network-fill/">
@@ -9300,7 +9300,7 @@ <h2>Icons</h2>
 {{ render_icon('hdd-network-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdd-network-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdd-network-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdd-rack/">
@@ -9308,7 +9308,7 @@ <h2>Icons</h2>
 {{ render_icon('hdd-rack', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdd-rack</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdd-rack</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdd-rack-fill/">
@@ -9316,7 +9316,7 @@ <h2>Icons</h2>
 {{ render_icon('hdd-rack-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdd-rack-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdd-rack-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdd-stack/">
@@ -9324,7 +9324,7 @@ <h2>Icons</h2>
 {{ render_icon('hdd-stack', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdd-stack</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdd-stack</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdd-stack-fill/">
@@ -9332,7 +9332,7 @@ <h2>Icons</h2>
 {{ render_icon('hdd-stack-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdd-stack-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdd-stack-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdmi/">
@@ -9340,7 +9340,7 @@ <h2>Icons</h2>
 {{ render_icon('hdmi', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdmi</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdmi</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdmi-fill/">
@@ -9348,7 +9348,7 @@ <h2>Icons</h2>
 {{ render_icon('hdmi-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdmi-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdmi-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/headphones/">
@@ -9356,7 +9356,7 @@ <h2>Icons</h2>
 {{ render_icon('headphones', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">headphones</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">headphones</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/headset/">
@@ -9364,7 +9364,7 @@ <h2>Icons</h2>
 {{ render_icon('headset', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">headset</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">headset</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/headset-vr/">
@@ -9372,7 +9372,7 @@ <h2>Icons</h2>
 {{ render_icon('headset-vr', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">headset-vr</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">headset-vr</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heart/">
@@ -9380,7 +9380,7 @@ <h2>Icons</h2>
 {{ render_icon('heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heart-arrow/">
@@ -9388,7 +9388,7 @@ <h2>Icons</h2>
 {{ render_icon('heart-arrow', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heart-arrow</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heart-arrow</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heart-fill/">
@@ -9396,7 +9396,7 @@ <h2>Icons</h2>
 {{ render_icon('heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heart-half/">
@@ -9404,7 +9404,7 @@ <h2>Icons</h2>
 {{ render_icon('heart-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heart-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heart-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heart-pulse/">
@@ -9412,7 +9412,7 @@ <h2>Icons</h2>
 {{ render_icon('heart-pulse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heart-pulse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heart-pulse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heart-pulse-fill/">
@@ -9420,7 +9420,7 @@ <h2>Icons</h2>
 {{ render_icon('heart-pulse-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heart-pulse-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heart-pulse-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heartbreak/">
@@ -9428,7 +9428,7 @@ <h2>Icons</h2>
 {{ render_icon('heartbreak', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heartbreak</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heartbreak</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heartbreak-fill/">
@@ -9436,7 +9436,7 @@ <h2>Icons</h2>
 {{ render_icon('heartbreak-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heartbreak-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heartbreak-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hearts/">
@@ -9444,7 +9444,7 @@ <h2>Icons</h2>
 {{ render_icon('hearts', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hearts</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hearts</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heptagon/">
@@ -9452,7 +9452,7 @@ <h2>Icons</h2>
 {{ render_icon('heptagon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heptagon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heptagon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heptagon-fill/">
@@ -9460,7 +9460,7 @@ <h2>Icons</h2>
 {{ render_icon('heptagon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heptagon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heptagon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heptagon-half/">
@@ -9468,7 +9468,7 @@ <h2>Icons</h2>
 {{ render_icon('heptagon-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heptagon-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heptagon-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hexagon/">
@@ -9476,7 +9476,7 @@ <h2>Icons</h2>
 {{ render_icon('hexagon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hexagon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hexagon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hexagon-fill/">
@@ -9484,7 +9484,7 @@ <h2>Icons</h2>
 {{ render_icon('hexagon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hexagon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hexagon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hexagon-half/">
@@ -9492,7 +9492,7 @@ <h2>Icons</h2>
 {{ render_icon('hexagon-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hexagon-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hexagon-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/highlighter/">
@@ -9500,7 +9500,7 @@ <h2>Icons</h2>
 {{ render_icon('highlighter', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">highlighter</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">highlighter</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/highlights/">
@@ -9508,7 +9508,7 @@ <h2>Icons</h2>
 {{ render_icon('highlights', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">highlights</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">highlights</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hospital/">
@@ -9516,7 +9516,7 @@ <h2>Icons</h2>
 {{ render_icon('hospital', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hospital</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hospital</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hospital-fill/">
@@ -9524,7 +9524,7 @@ <h2>Icons</h2>
 {{ render_icon('hospital-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hospital-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hospital-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hourglass/">
@@ -9532,7 +9532,7 @@ <h2>Icons</h2>
 {{ render_icon('hourglass', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hourglass</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hourglass</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hourglass-bottom/">
@@ -9540,7 +9540,7 @@ <h2>Icons</h2>
 {{ render_icon('hourglass-bottom', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hourglass-bottom</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hourglass-bottom</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hourglass-split/">
@@ -9548,7 +9548,7 @@ <h2>Icons</h2>
 {{ render_icon('hourglass-split', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hourglass-split</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hourglass-split</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hourglass-top/">
@@ -9556,7 +9556,7 @@ <h2>Icons</h2>
 {{ render_icon('hourglass-top', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hourglass-top</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hourglass-top</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house/">
@@ -9564,7 +9564,7 @@ <h2>Icons</h2>
 {{ render_icon('house', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-add/">
@@ -9572,7 +9572,7 @@ <h2>Icons</h2>
 {{ render_icon('house-add', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-add</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-add</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-add-fill/">
@@ -9580,7 +9580,7 @@ <h2>Icons</h2>
 {{ render_icon('house-add-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-add-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-add-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-check/">
@@ -9588,7 +9588,7 @@ <h2>Icons</h2>
 {{ render_icon('house-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-check-fill/">
@@ -9596,7 +9596,7 @@ <h2>Icons</h2>
 {{ render_icon('house-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-dash/">
@@ -9604,7 +9604,7 @@ <h2>Icons</h2>
 {{ render_icon('house-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-dash-fill/">
@@ -9612,7 +9612,7 @@ <h2>Icons</h2>
 {{ render_icon('house-dash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-dash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-dash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-door/">
@@ -9620,7 +9620,7 @@ <h2>Icons</h2>
 {{ render_icon('house-door', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-door</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-door</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-door-fill/">
@@ -9628,7 +9628,7 @@ <h2>Icons</h2>
 {{ render_icon('house-door-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-door-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-door-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-down/">
@@ -9636,7 +9636,7 @@ <h2>Icons</h2>
 {{ render_icon('house-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-down-fill/">
@@ -9644,7 +9644,7 @@ <h2>Icons</h2>
 {{ render_icon('house-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-exclamation/">
@@ -9652,7 +9652,7 @@ <h2>Icons</h2>
 {{ render_icon('house-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-exclamation-fill/">
@@ -9660,7 +9660,7 @@ <h2>Icons</h2>
 {{ render_icon('house-exclamation-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-exclamation-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-exclamation-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-fill/">
@@ -9668,7 +9668,7 @@ <h2>Icons</h2>
 {{ render_icon('house-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-gear/">
@@ -9676,7 +9676,7 @@ <h2>Icons</h2>
 {{ render_icon('house-gear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-gear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-gear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-gear-fill/">
@@ -9684,7 +9684,7 @@ <h2>Icons</h2>
 {{ render_icon('house-gear-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-gear-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-gear-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-heart/">
@@ -9692,7 +9692,7 @@ <h2>Icons</h2>
 {{ render_icon('house-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-heart-fill/">
@@ -9700,7 +9700,7 @@ <h2>Icons</h2>
 {{ render_icon('house-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-lock/">
@@ -9708,7 +9708,7 @@ <h2>Icons</h2>
 {{ render_icon('house-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-lock-fill/">
@@ -9716,7 +9716,7 @@ <h2>Icons</h2>
 {{ render_icon('house-lock-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-lock-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-lock-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-slash/">
@@ -9724,7 +9724,7 @@ <h2>Icons</h2>
 {{ render_icon('house-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-slash-fill/">
@@ -9732,7 +9732,7 @@ <h2>Icons</h2>
 {{ render_icon('house-slash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-slash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-slash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-up/">
@@ -9740,7 +9740,7 @@ <h2>Icons</h2>
 {{ render_icon('house-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-up-fill/">
@@ -9748,7 +9748,7 @@ <h2>Icons</h2>
 {{ render_icon('house-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-x/">
@@ -9756,7 +9756,7 @@ <h2>Icons</h2>
 {{ render_icon('house-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-x-fill/">
@@ -9764,7 +9764,7 @@ <h2>Icons</h2>
 {{ render_icon('house-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/houses/">
@@ -9772,7 +9772,7 @@ <h2>Icons</h2>
 {{ render_icon('houses', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">houses</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">houses</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/houses-fill/">
@@ -9780,7 +9780,7 @@ <h2>Icons</h2>
 {{ render_icon('houses-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">houses-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">houses-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hr/">
@@ -9788,7 +9788,7 @@ <h2>Icons</h2>
 {{ render_icon('hr', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hr</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hr</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hurricane/">
@@ -9796,7 +9796,7 @@ <h2>Icons</h2>
 {{ render_icon('hurricane', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hurricane</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hurricane</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hypnotize/">
@@ -9804,7 +9804,7 @@ <h2>Icons</h2>
 {{ render_icon('hypnotize', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hypnotize</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hypnotize</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/image/">
@@ -9812,7 +9812,7 @@ <h2>Icons</h2>
 {{ render_icon('image', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">image</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">image</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/image-alt/">
@@ -9820,7 +9820,7 @@ <h2>Icons</h2>
 {{ render_icon('image-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">image-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">image-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/image-fill/">
@@ -9828,7 +9828,7 @@ <h2>Icons</h2>
 {{ render_icon('image-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">image-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">image-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/images/">
@@ -9836,7 +9836,7 @@ <h2>Icons</h2>
 {{ render_icon('images', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">images</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">images</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/inbox/">
@@ -9844,7 +9844,7 @@ <h2>Icons</h2>
 {{ render_icon('inbox', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">inbox</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">inbox</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/inbox-fill/">
@@ -9852,7 +9852,7 @@ <h2>Icons</h2>
 {{ render_icon('inbox-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">inbox-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">inbox-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/inboxes/">
@@ -9860,7 +9860,7 @@ <h2>Icons</h2>
 {{ render_icon('inboxes', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">inboxes</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">inboxes</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/inboxes-fill/">
@@ -9868,7 +9868,7 @@ <h2>Icons</h2>
 {{ render_icon('inboxes-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">inboxes-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">inboxes-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/incognito/">
@@ -9876,7 +9876,7 @@ <h2>Icons</h2>
 {{ render_icon('incognito', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">incognito</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">incognito</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/indent/">
@@ -9884,7 +9884,7 @@ <h2>Icons</h2>
 {{ render_icon('indent', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">indent</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">indent</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/infinity/">
@@ -9892,7 +9892,7 @@ <h2>Icons</h2>
 {{ render_icon('infinity', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">infinity</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">infinity</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/info/">
@@ -9900,7 +9900,7 @@ <h2>Icons</h2>
 {{ render_icon('info', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">info</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">info</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/info-circle/">
@@ -9908,7 +9908,7 @@ <h2>Icons</h2>
 {{ render_icon('info-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">info-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">info-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/info-circle-fill/">
@@ -9916,7 +9916,7 @@ <h2>Icons</h2>
 {{ render_icon('info-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">info-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">info-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/info-lg/">
@@ -9924,7 +9924,7 @@ <h2>Icons</h2>
 {{ render_icon('info-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">info-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">info-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/info-square/">
@@ -9932,7 +9932,7 @@ <h2>Icons</h2>
 {{ render_icon('info-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">info-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">info-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/info-square-fill/">
@@ -9940,7 +9940,7 @@ <h2>Icons</h2>
 {{ render_icon('info-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">info-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">info-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/input-cursor/">
@@ -9948,7 +9948,7 @@ <h2>Icons</h2>
 {{ render_icon('input-cursor', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">input-cursor</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">input-cursor</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/input-cursor-text/">
@@ -9956,7 +9956,7 @@ <h2>Icons</h2>
 {{ render_icon('input-cursor-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">input-cursor-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">input-cursor-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/instagram/">
@@ -9964,7 +9964,7 @@ <h2>Icons</h2>
 {{ render_icon('instagram', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">instagram</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">instagram</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/intersect/">
@@ -9972,7 +9972,7 @@ <h2>Icons</h2>
 {{ render_icon('intersect', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">intersect</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">intersect</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal/">
@@ -9980,7 +9980,7 @@ <h2>Icons</h2>
 {{ render_icon('journal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-album/">
@@ -9988,7 +9988,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-album', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-album</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-album</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-arrow-down/">
@@ -9996,7 +9996,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-arrow-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-arrow-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-arrow-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-arrow-up/">
@@ -10004,7 +10004,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-arrow-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-arrow-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-arrow-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-bookmark/">
@@ -10012,7 +10012,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-bookmark', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-bookmark</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-bookmark</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-bookmark-fill/">
@@ -10020,7 +10020,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-bookmark-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-bookmark-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-bookmark-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-check/">
@@ -10028,7 +10028,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-code/">
@@ -10036,7 +10036,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-code', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-code</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-code</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-medical/">
@@ -10044,7 +10044,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-medical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-medical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-medical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-minus/">
@@ -10052,7 +10052,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-plus/">
@@ -10060,7 +10060,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-richtext/">
@@ -10068,7 +10068,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-richtext', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-richtext</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-richtext</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-text/">
@@ -10076,7 +10076,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-x/">
@@ -10084,7 +10084,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journals/">
@@ -10092,7 +10092,7 @@ <h2>Icons</h2>
 {{ render_icon('journals', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journals</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journals</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/joystick/">
@@ -10100,7 +10100,7 @@ <h2>Icons</h2>
 {{ render_icon('joystick', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">joystick</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">joystick</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/justify/">
@@ -10108,7 +10108,7 @@ <h2>Icons</h2>
 {{ render_icon('justify', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">justify</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">justify</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/justify-left/">
@@ -10116,7 +10116,7 @@ <h2>Icons</h2>
 {{ render_icon('justify-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">justify-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">justify-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/justify-right/">
@@ -10124,7 +10124,7 @@ <h2>Icons</h2>
 {{ render_icon('justify-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">justify-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">justify-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/kanban/">
@@ -10132,7 +10132,7 @@ <h2>Icons</h2>
 {{ render_icon('kanban', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">kanban</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">kanban</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/kanban-fill/">
@@ -10140,7 +10140,7 @@ <h2>Icons</h2>
 {{ render_icon('kanban-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">kanban-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">kanban-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/key/">
@@ -10148,7 +10148,7 @@ <h2>Icons</h2>
 {{ render_icon('key', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">key</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">key</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/key-fill/">
@@ -10156,7 +10156,7 @@ <h2>Icons</h2>
 {{ render_icon('key-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">key-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">key-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/keyboard/">
@@ -10164,7 +10164,7 @@ <h2>Icons</h2>
 {{ render_icon('keyboard', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">keyboard</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">keyboard</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/keyboard-fill/">
@@ -10172,7 +10172,7 @@ <h2>Icons</h2>
 {{ render_icon('keyboard-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">keyboard-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">keyboard-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ladder/">
@@ -10180,7 +10180,7 @@ <h2>Icons</h2>
 {{ render_icon('ladder', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ladder</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ladder</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lamp/">
@@ -10188,7 +10188,7 @@ <h2>Icons</h2>
 {{ render_icon('lamp', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lamp</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lamp</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lamp-fill/">
@@ -10196,7 +10196,7 @@ <h2>Icons</h2>
 {{ render_icon('lamp-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lamp-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lamp-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/laptop/">
@@ -10204,7 +10204,7 @@ <h2>Icons</h2>
 {{ render_icon('laptop', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">laptop</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">laptop</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/laptop-fill/">
@@ -10212,7 +10212,7 @@ <h2>Icons</h2>
 {{ render_icon('laptop-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">laptop-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">laptop-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layer-backward/">
@@ -10220,7 +10220,7 @@ <h2>Icons</h2>
 {{ render_icon('layer-backward', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layer-backward</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layer-backward</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layer-forward/">
@@ -10228,7 +10228,7 @@ <h2>Icons</h2>
 {{ render_icon('layer-forward', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layer-forward</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layer-forward</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layers/">
@@ -10236,7 +10236,7 @@ <h2>Icons</h2>
 {{ render_icon('layers', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layers</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layers</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layers-fill/">
@@ -10244,7 +10244,7 @@ <h2>Icons</h2>
 {{ render_icon('layers-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layers-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layers-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layers-half/">
@@ -10252,7 +10252,7 @@ <h2>Icons</h2>
 {{ render_icon('layers-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layers-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layers-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-sidebar/">
@@ -10260,7 +10260,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-sidebar', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-sidebar</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-sidebar</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-sidebar-inset/">
@@ -10268,7 +10268,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-sidebar-inset', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-sidebar-inset</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-sidebar-inset</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-sidebar-inset-reverse/">
@@ -10276,7 +10276,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-sidebar-inset-reverse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-sidebar-inset-reverse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-sidebar-inset-reverse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-sidebar-reverse/">
@@ -10284,7 +10284,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-sidebar-reverse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-sidebar-reverse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-sidebar-reverse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-split/">
@@ -10292,7 +10292,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-split', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-split</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-split</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-text-sidebar/">
@@ -10300,7 +10300,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-text-sidebar', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-text-sidebar</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-text-sidebar</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-text-sidebar-reverse/">
@@ -10308,7 +10308,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-text-sidebar-reverse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-text-sidebar-reverse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-text-sidebar-reverse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-text-window/">
@@ -10316,7 +10316,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-text-window', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-text-window</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-text-window</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-text-window-reverse/">
@@ -10324,7 +10324,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-text-window-reverse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-text-window-reverse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-text-window-reverse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-three-columns/">
@@ -10332,7 +10332,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-three-columns', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-three-columns</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-three-columns</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-wtf/">
@@ -10340,7 +10340,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-wtf', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-wtf</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-wtf</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/life-preserver/">
@@ -10348,7 +10348,7 @@ <h2>Icons</h2>
 {{ render_icon('life-preserver', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">life-preserver</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">life-preserver</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lightbulb/">
@@ -10356,7 +10356,7 @@ <h2>Icons</h2>
 {{ render_icon('lightbulb', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lightbulb</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lightbulb</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lightbulb-fill/">
@@ -10364,7 +10364,7 @@ <h2>Icons</h2>
 {{ render_icon('lightbulb-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lightbulb-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lightbulb-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lightbulb-off/">
@@ -10372,7 +10372,7 @@ <h2>Icons</h2>
 {{ render_icon('lightbulb-off', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lightbulb-off</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lightbulb-off</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lightbulb-off-fill/">
@@ -10380,7 +10380,7 @@ <h2>Icons</h2>
 {{ render_icon('lightbulb-off-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lightbulb-off-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lightbulb-off-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lightning/">
@@ -10388,7 +10388,7 @@ <h2>Icons</h2>
 {{ render_icon('lightning', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lightning</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lightning</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lightning-charge/">
@@ -10396,7 +10396,7 @@ <h2>Icons</h2>
 {{ render_icon('lightning-charge', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lightning-charge</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lightning-charge</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lightning-charge-fill/">
@@ -10404,7 +10404,7 @@ <h2>Icons</h2>
 {{ render_icon('lightning-charge-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lightning-charge-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lightning-charge-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lightning-fill/">
@@ -10412,7 +10412,7 @@ <h2>Icons</h2>
 {{ render_icon('lightning-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lightning-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lightning-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/line/">
@@ -10420,7 +10420,7 @@ <h2>Icons</h2>
 {{ render_icon('line', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">line</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">line</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/link/">
@@ -10428,7 +10428,7 @@ <h2>Icons</h2>
 {{ render_icon('link', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">link</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">link</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/link-45deg/">
@@ -10436,7 +10436,7 @@ <h2>Icons</h2>
 {{ render_icon('link-45deg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">link-45deg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">link-45deg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/linkedin/">
@@ -10444,7 +10444,7 @@ <h2>Icons</h2>
 {{ render_icon('linkedin', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">linkedin</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">linkedin</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list/">
@@ -10452,7 +10452,7 @@ <h2>Icons</h2>
 {{ render_icon('list', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list-check/">
@@ -10460,7 +10460,7 @@ <h2>Icons</h2>
 {{ render_icon('list-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list-columns/">
@@ -10468,7 +10468,7 @@ <h2>Icons</h2>
 {{ render_icon('list-columns', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list-columns</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list-columns</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list-columns-reverse/">
@@ -10476,7 +10476,7 @@ <h2>Icons</h2>
 {{ render_icon('list-columns-reverse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list-columns-reverse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list-columns-reverse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list-nested/">
@@ -10484,7 +10484,7 @@ <h2>Icons</h2>
 {{ render_icon('list-nested', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list-nested</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list-nested</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list-ol/">
@@ -10492,7 +10492,7 @@ <h2>Icons</h2>
 {{ render_icon('list-ol', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list-ol</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list-ol</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list-stars/">
@@ -10500,7 +10500,7 @@ <h2>Icons</h2>
 {{ render_icon('list-stars', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list-stars</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list-stars</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list-task/">
@@ -10508,7 +10508,7 @@ <h2>Icons</h2>
 {{ render_icon('list-task', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list-task</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list-task</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list-ul/">
@@ -10516,7 +10516,7 @@ <h2>Icons</h2>
 {{ render_icon('list-ul', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list-ul</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list-ul</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lock/">
@@ -10524,7 +10524,7 @@ <h2>Icons</h2>
 {{ render_icon('lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lock-fill/">
@@ -10532,7 +10532,7 @@ <h2>Icons</h2>
 {{ render_icon('lock-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lock-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lock-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/luggage/">
@@ -10540,7 +10540,7 @@ <h2>Icons</h2>
 {{ render_icon('luggage', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">luggage</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">luggage</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/luggage-fill/">
@@ -10548,7 +10548,7 @@ <h2>Icons</h2>
 {{ render_icon('luggage-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">luggage-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">luggage-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lungs/">
@@ -10556,7 +10556,7 @@ <h2>Icons</h2>
 {{ render_icon('lungs', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lungs</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lungs</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lungs-fill/">
@@ -10564,7 +10564,7 @@ <h2>Icons</h2>
 {{ render_icon('lungs-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lungs-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lungs-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/magic/">
@@ -10572,7 +10572,7 @@ <h2>Icons</h2>
 {{ render_icon('magic', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">magic</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">magic</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/magnet/">
@@ -10580,7 +10580,7 @@ <h2>Icons</h2>
 {{ render_icon('magnet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">magnet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">magnet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/magnet-fill/">
@@ -10588,7 +10588,7 @@ <h2>Icons</h2>
 {{ render_icon('magnet-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">magnet-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">magnet-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mailbox/">
@@ -10596,7 +10596,7 @@ <h2>Icons</h2>
 {{ render_icon('mailbox', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mailbox</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mailbox</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mailbox-flag/">
@@ -10604,7 +10604,7 @@ <h2>Icons</h2>
 {{ render_icon('mailbox-flag', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mailbox-flag</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mailbox-flag</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mailbox2/">
@@ -10612,7 +10612,7 @@ <h2>Icons</h2>
 {{ render_icon('mailbox2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mailbox2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mailbox2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mailbox2-flag/">
@@ -10620,7 +10620,7 @@ <h2>Icons</h2>
 {{ render_icon('mailbox2-flag', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mailbox2-flag</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mailbox2-flag</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/map/">
@@ -10628,7 +10628,7 @@ <h2>Icons</h2>
 {{ render_icon('map', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">map</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">map</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/map-fill/">
@@ -10636,7 +10636,7 @@ <h2>Icons</h2>
 {{ render_icon('map-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">map-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">map-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/markdown/">
@@ -10644,7 +10644,7 @@ <h2>Icons</h2>
 {{ render_icon('markdown', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">markdown</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">markdown</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/markdown-fill/">
@@ -10652,7 +10652,7 @@ <h2>Icons</h2>
 {{ render_icon('markdown-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">markdown-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">markdown-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/marker-tip/">
@@ -10660,7 +10660,7 @@ <h2>Icons</h2>
 {{ render_icon('marker-tip', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">marker-tip</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">marker-tip</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mask/">
@@ -10668,7 +10668,7 @@ <h2>Icons</h2>
 {{ render_icon('mask', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mask</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mask</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mastodon/">
@@ -10676,7 +10676,7 @@ <h2>Icons</h2>
 {{ render_icon('mastodon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mastodon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mastodon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/medium/">
@@ -10684,7 +10684,7 @@ <h2>Icons</h2>
 {{ render_icon('medium', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">medium</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">medium</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/megaphone/">
@@ -10692,7 +10692,7 @@ <h2>Icons</h2>
 {{ render_icon('megaphone', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">megaphone</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">megaphone</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/megaphone-fill/">
@@ -10700,7 +10700,7 @@ <h2>Icons</h2>
 {{ render_icon('megaphone-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">megaphone-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">megaphone-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/memory/">
@@ -10708,7 +10708,7 @@ <h2>Icons</h2>
 {{ render_icon('memory', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">memory</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">memory</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/menu-app/">
@@ -10716,7 +10716,7 @@ <h2>Icons</h2>
 {{ render_icon('menu-app', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">menu-app</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">menu-app</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/menu-app-fill/">
@@ -10724,7 +10724,7 @@ <h2>Icons</h2>
 {{ render_icon('menu-app-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">menu-app-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">menu-app-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/menu-button/">
@@ -10732,7 +10732,7 @@ <h2>Icons</h2>
 {{ render_icon('menu-button', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">menu-button</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">menu-button</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/menu-button-fill/">
@@ -10740,7 +10740,7 @@ <h2>Icons</h2>
 {{ render_icon('menu-button-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">menu-button-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">menu-button-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/menu-button-wide/">
@@ -10748,7 +10748,7 @@ <h2>Icons</h2>
 {{ render_icon('menu-button-wide', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">menu-button-wide</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">menu-button-wide</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/menu-button-wide-fill/">
@@ -10756,7 +10756,7 @@ <h2>Icons</h2>
 {{ render_icon('menu-button-wide-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">menu-button-wide-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">menu-button-wide-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/menu-down/">
@@ -10764,7 +10764,7 @@ <h2>Icons</h2>
 {{ render_icon('menu-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">menu-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">menu-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/menu-up/">
@@ -10772,7 +10772,7 @@ <h2>Icons</h2>
 {{ render_icon('menu-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">menu-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">menu-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/messenger/">
@@ -10780,7 +10780,7 @@ <h2>Icons</h2>
 {{ render_icon('messenger', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">messenger</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">messenger</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/meta/">
@@ -10788,7 +10788,7 @@ <h2>Icons</h2>
 {{ render_icon('meta', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">meta</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">meta</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mic/">
@@ -10796,7 +10796,7 @@ <h2>Icons</h2>
 {{ render_icon('mic', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mic</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mic</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mic-fill/">
@@ -10804,7 +10804,7 @@ <h2>Icons</h2>
 {{ render_icon('mic-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mic-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mic-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mic-mute/">
@@ -10812,7 +10812,7 @@ <h2>Icons</h2>
 {{ render_icon('mic-mute', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mic-mute</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mic-mute</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mic-mute-fill/">
@@ -10820,7 +10820,7 @@ <h2>Icons</h2>
 {{ render_icon('mic-mute-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mic-mute-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mic-mute-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/microsoft/">
@@ -10828,7 +10828,7 @@ <h2>Icons</h2>
 {{ render_icon('microsoft', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">microsoft</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">microsoft</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/microsoft-teams/">
@@ -10836,7 +10836,7 @@ <h2>Icons</h2>
 {{ render_icon('microsoft-teams', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">microsoft-teams</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">microsoft-teams</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/minecart/">
@@ -10844,7 +10844,7 @@ <h2>Icons</h2>
 {{ render_icon('minecart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">minecart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">minecart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/minecart-loaded/">
@@ -10852,7 +10852,7 @@ <h2>Icons</h2>
 {{ render_icon('minecart-loaded', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">minecart-loaded</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">minecart-loaded</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/modem/">
@@ -10860,7 +10860,7 @@ <h2>Icons</h2>
 {{ render_icon('modem', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">modem</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">modem</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/modem-fill/">
@@ -10868,7 +10868,7 @@ <h2>Icons</h2>
 {{ render_icon('modem-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">modem-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">modem-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/moisture/">
@@ -10876,7 +10876,7 @@ <h2>Icons</h2>
 {{ render_icon('moisture', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">moisture</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">moisture</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/moon/">
@@ -10884,7 +10884,7 @@ <h2>Icons</h2>
 {{ render_icon('moon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">moon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">moon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/moon-fill/">
@@ -10892,7 +10892,7 @@ <h2>Icons</h2>
 {{ render_icon('moon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">moon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">moon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/moon-stars/">
@@ -10900,7 +10900,7 @@ <h2>Icons</h2>
 {{ render_icon('moon-stars', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">moon-stars</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">moon-stars</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/moon-stars-fill/">
@@ -10908,7 +10908,7 @@ <h2>Icons</h2>
 {{ render_icon('moon-stars-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">moon-stars-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">moon-stars-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mortarboard/">
@@ -10916,7 +10916,7 @@ <h2>Icons</h2>
 {{ render_icon('mortarboard', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mortarboard</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mortarboard</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mortarboard-fill/">
@@ -10924,7 +10924,7 @@ <h2>Icons</h2>
 {{ render_icon('mortarboard-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mortarboard-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mortarboard-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/motherboard/">
@@ -10932,7 +10932,7 @@ <h2>Icons</h2>
 {{ render_icon('motherboard', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">motherboard</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">motherboard</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/motherboard-fill/">
@@ -10940,7 +10940,7 @@ <h2>Icons</h2>
 {{ render_icon('motherboard-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">motherboard-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">motherboard-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mouse/">
@@ -10948,7 +10948,7 @@ <h2>Icons</h2>
 {{ render_icon('mouse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mouse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mouse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mouse-fill/">
@@ -10956,7 +10956,7 @@ <h2>Icons</h2>
 {{ render_icon('mouse-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mouse-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mouse-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mouse2/">
@@ -10964,7 +10964,7 @@ <h2>Icons</h2>
 {{ render_icon('mouse2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mouse2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mouse2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mouse2-fill/">
@@ -10972,7 +10972,7 @@ <h2>Icons</h2>
 {{ render_icon('mouse2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mouse2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mouse2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mouse3/">
@@ -10980,7 +10980,7 @@ <h2>Icons</h2>
 {{ render_icon('mouse3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mouse3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mouse3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mouse3-fill/">
@@ -10988,7 +10988,7 @@ <h2>Icons</h2>
 {{ render_icon('mouse3-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mouse3-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mouse3-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/music-note/">
@@ -10996,7 +10996,7 @@ <h2>Icons</h2>
 {{ render_icon('music-note', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">music-note</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">music-note</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/music-note-beamed/">
@@ -11004,7 +11004,7 @@ <h2>Icons</h2>
 {{ render_icon('music-note-beamed', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">music-note-beamed</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">music-note-beamed</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/music-note-list/">
@@ -11012,7 +11012,7 @@ <h2>Icons</h2>
 {{ render_icon('music-note-list', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">music-note-list</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">music-note-list</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/music-player/">
@@ -11020,7 +11020,7 @@ <h2>Icons</h2>
 {{ render_icon('music-player', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">music-player</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">music-player</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/music-player-fill/">
@@ -11028,7 +11028,7 @@ <h2>Icons</h2>
 {{ render_icon('music-player-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">music-player-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">music-player-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/newspaper/">
@@ -11036,7 +11036,7 @@ <h2>Icons</h2>
 {{ render_icon('newspaper', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">newspaper</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">newspaper</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/nintendo-switch/">
@@ -11044,7 +11044,7 @@ <h2>Icons</h2>
 {{ render_icon('nintendo-switch', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">nintendo-switch</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">nintendo-switch</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/node-minus/">
@@ -11052,7 +11052,7 @@ <h2>Icons</h2>
 {{ render_icon('node-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">node-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">node-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/node-minus-fill/">
@@ -11060,7 +11060,7 @@ <h2>Icons</h2>
 {{ render_icon('node-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">node-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">node-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/node-plus/">
@@ -11068,7 +11068,7 @@ <h2>Icons</h2>
 {{ render_icon('node-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">node-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">node-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/node-plus-fill/">
@@ -11076,7 +11076,7 @@ <h2>Icons</h2>
 {{ render_icon('node-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">node-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">node-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/noise-reduction/">
@@ -11084,7 +11084,7 @@ <h2>Icons</h2>
 {{ render_icon('noise-reduction', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">noise-reduction</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">noise-reduction</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/nut/">
@@ -11092,7 +11092,7 @@ <h2>Icons</h2>
 {{ render_icon('nut', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">nut</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">nut</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/nut-fill/">
@@ -11100,7 +11100,7 @@ <h2>Icons</h2>
 {{ render_icon('nut-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">nut-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">nut-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/nvidia/">
@@ -11108,7 +11108,7 @@ <h2>Icons</h2>
 {{ render_icon('nvidia', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">nvidia</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">nvidia</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/nvme/">
@@ -11116,7 +11116,7 @@ <h2>Icons</h2>
 {{ render_icon('nvme', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">nvme</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">nvme</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/nvme-fill/">
@@ -11124,7 +11124,7 @@ <h2>Icons</h2>
 {{ render_icon('nvme-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">nvme-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">nvme-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/octagon/">
@@ -11132,7 +11132,7 @@ <h2>Icons</h2>
 {{ render_icon('octagon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">octagon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">octagon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/octagon-fill/">
@@ -11140,7 +11140,7 @@ <h2>Icons</h2>
 {{ render_icon('octagon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">octagon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">octagon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/octagon-half/">
@@ -11148,7 +11148,7 @@ <h2>Icons</h2>
 {{ render_icon('octagon-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">octagon-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">octagon-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/opencollective/">
@@ -11156,7 +11156,7 @@ <h2>Icons</h2>
 {{ render_icon('opencollective', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">opencollective</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">opencollective</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/optical-audio/">
@@ -11164,7 +11164,7 @@ <h2>Icons</h2>
 {{ render_icon('optical-audio', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">optical-audio</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">optical-audio</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/optical-audio-fill/">
@@ -11172,7 +11172,7 @@ <h2>Icons</h2>
 {{ render_icon('optical-audio-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">optical-audio-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">optical-audio-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/option/">
@@ -11180,7 +11180,7 @@ <h2>Icons</h2>
 {{ render_icon('option', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">option</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">option</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/outlet/">
@@ -11188,7 +11188,7 @@ <h2>Icons</h2>
 {{ render_icon('outlet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">outlet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">outlet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/p-circle/">
@@ -11196,7 +11196,7 @@ <h2>Icons</h2>
 {{ render_icon('p-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">p-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">p-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/p-circle-fill/">
@@ -11204,7 +11204,7 @@ <h2>Icons</h2>
 {{ render_icon('p-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">p-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">p-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/p-square/">
@@ -11212,7 +11212,7 @@ <h2>Icons</h2>
 {{ render_icon('p-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">p-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">p-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/p-square-fill/">
@@ -11220,7 +11220,7 @@ <h2>Icons</h2>
 {{ render_icon('p-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">p-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">p-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/paint-bucket/">
@@ -11228,7 +11228,7 @@ <h2>Icons</h2>
 {{ render_icon('paint-bucket', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">paint-bucket</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">paint-bucket</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/palette/">
@@ -11236,7 +11236,7 @@ <h2>Icons</h2>
 {{ render_icon('palette', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">palette</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">palette</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/palette-fill/">
@@ -11244,7 +11244,7 @@ <h2>Icons</h2>
 {{ render_icon('palette-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">palette-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">palette-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/palette2/">
@@ -11252,7 +11252,7 @@ <h2>Icons</h2>
 {{ render_icon('palette2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">palette2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">palette2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/paperclip/">
@@ -11260,7 +11260,7 @@ <h2>Icons</h2>
 {{ render_icon('paperclip', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">paperclip</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">paperclip</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/paragraph/">
@@ -11268,7 +11268,7 @@ <h2>Icons</h2>
 {{ render_icon('paragraph', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">paragraph</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">paragraph</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pass/">
@@ -11276,7 +11276,7 @@ <h2>Icons</h2>
 {{ render_icon('pass', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pass</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pass</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pass-fill/">
@@ -11284,7 +11284,7 @@ <h2>Icons</h2>
 {{ render_icon('pass-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pass-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pass-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/passport/">
@@ -11292,7 +11292,7 @@ <h2>Icons</h2>
 {{ render_icon('passport', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">passport</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">passport</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/passport-fill/">
@@ -11300,7 +11300,7 @@ <h2>Icons</h2>
 {{ render_icon('passport-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">passport-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">passport-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-check/">
@@ -11308,7 +11308,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-check-fill/">
@@ -11316,7 +11316,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-exclamation/">
@@ -11324,7 +11324,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-exclamation-fill/">
@@ -11332,7 +11332,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-exclamation-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-exclamation-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-exclamation-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-minus/">
@@ -11340,7 +11340,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-minus-fill/">
@@ -11348,7 +11348,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-plus/">
@@ -11356,7 +11356,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-plus-fill/">
@@ -11364,7 +11364,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-question/">
@@ -11372,7 +11372,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-question', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-question</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-question</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-question-fill/">
@@ -11380,7 +11380,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-question-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-question-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-question-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pause/">
@@ -11388,7 +11388,7 @@ <h2>Icons</h2>
 {{ render_icon('pause', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pause</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pause</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pause-btn/">
@@ -11396,7 +11396,7 @@ <h2>Icons</h2>
 {{ render_icon('pause-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pause-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pause-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pause-btn-fill/">
@@ -11404,7 +11404,7 @@ <h2>Icons</h2>
 {{ render_icon('pause-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pause-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pause-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pause-circle/">
@@ -11412,7 +11412,7 @@ <h2>Icons</h2>
 {{ render_icon('pause-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pause-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pause-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pause-circle-fill/">
@@ -11420,7 +11420,7 @@ <h2>Icons</h2>
 {{ render_icon('pause-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pause-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pause-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pause-fill/">
@@ -11428,7 +11428,7 @@ <h2>Icons</h2>
 {{ render_icon('pause-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pause-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pause-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/paypal/">
@@ -11436,7 +11436,7 @@ <h2>Icons</h2>
 {{ render_icon('paypal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">paypal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">paypal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pc/">
@@ -11444,7 +11444,7 @@ <h2>Icons</h2>
 {{ render_icon('pc', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pc</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pc</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pc-display/">
@@ -11452,7 +11452,7 @@ <h2>Icons</h2>
 {{ render_icon('pc-display', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pc-display</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pc-display</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pc-display-horizontal/">
@@ -11460,7 +11460,7 @@ <h2>Icons</h2>
 {{ render_icon('pc-display-horizontal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pc-display-horizontal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pc-display-horizontal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pc-horizontal/">
@@ -11468,7 +11468,7 @@ <h2>Icons</h2>
 {{ render_icon('pc-horizontal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pc-horizontal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pc-horizontal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pci-card/">
@@ -11476,7 +11476,7 @@ <h2>Icons</h2>
 {{ render_icon('pci-card', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pci-card</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pci-card</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pci-card-network/">
@@ -11484,7 +11484,7 @@ <h2>Icons</h2>
 {{ render_icon('pci-card-network', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pci-card-network</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pci-card-network</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pci-card-sound/">
@@ -11492,7 +11492,7 @@ <h2>Icons</h2>
 {{ render_icon('pci-card-sound', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pci-card-sound</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pci-card-sound</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/peace/">
@@ -11500,7 +11500,7 @@ <h2>Icons</h2>
 {{ render_icon('peace', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">peace</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">peace</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/peace-fill/">
@@ -11508,7 +11508,7 @@ <h2>Icons</h2>
 {{ render_icon('peace-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">peace-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">peace-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pen/">
@@ -11516,7 +11516,7 @@ <h2>Icons</h2>
 {{ render_icon('pen', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pen</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pen</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pen-fill/">
@@ -11524,7 +11524,7 @@ <h2>Icons</h2>
 {{ render_icon('pen-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pen-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pen-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pencil/">
@@ -11532,7 +11532,7 @@ <h2>Icons</h2>
 {{ render_icon('pencil', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pencil</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pencil</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pencil-fill/">
@@ -11540,7 +11540,7 @@ <h2>Icons</h2>
 {{ render_icon('pencil-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pencil-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pencil-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pencil-square/">
@@ -11548,7 +11548,7 @@ <h2>Icons</h2>
 {{ render_icon('pencil-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pencil-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pencil-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pentagon/">
@@ -11556,7 +11556,7 @@ <h2>Icons</h2>
 {{ render_icon('pentagon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pentagon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pentagon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pentagon-fill/">
@@ -11564,7 +11564,7 @@ <h2>Icons</h2>
 {{ render_icon('pentagon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pentagon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pentagon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pentagon-half/">
@@ -11572,7 +11572,7 @@ <h2>Icons</h2>
 {{ render_icon('pentagon-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pentagon-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pentagon-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/people/">
@@ -11580,7 +11580,7 @@ <h2>Icons</h2>
 {{ render_icon('people', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">people</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">people</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/people-fill/">
@@ -11588,7 +11588,7 @@ <h2>Icons</h2>
 {{ render_icon('people-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">people-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">people-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/percent/">
@@ -11596,7 +11596,7 @@ <h2>Icons</h2>
 {{ render_icon('percent', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">percent</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">percent</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person/">
@@ -11604,7 +11604,7 @@ <h2>Icons</h2>
 {{ render_icon('person', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-add/">
@@ -11612,7 +11612,7 @@ <h2>Icons</h2>
 {{ render_icon('person-add', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-add</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-add</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-arms-up/">
@@ -11620,7 +11620,7 @@ <h2>Icons</h2>
 {{ render_icon('person-arms-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-arms-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-arms-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-badge/">
@@ -11628,7 +11628,7 @@ <h2>Icons</h2>
 {{ render_icon('person-badge', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-badge</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-badge</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-badge-fill/">
@@ -11636,7 +11636,7 @@ <h2>Icons</h2>
 {{ render_icon('person-badge-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-badge-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-badge-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-bounding-box/">
@@ -11644,7 +11644,7 @@ <h2>Icons</h2>
 {{ render_icon('person-bounding-box', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-bounding-box</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-bounding-box</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-check/">
@@ -11652,7 +11652,7 @@ <h2>Icons</h2>
 {{ render_icon('person-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-check-fill/">
@@ -11660,7 +11660,7 @@ <h2>Icons</h2>
 {{ render_icon('person-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-circle/">
@@ -11668,7 +11668,7 @@ <h2>Icons</h2>
 {{ render_icon('person-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-dash/">
@@ -11676,7 +11676,7 @@ <h2>Icons</h2>
 {{ render_icon('person-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-dash-fill/">
@@ -11684,7 +11684,7 @@ <h2>Icons</h2>
 {{ render_icon('person-dash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-dash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-dash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-down/">
@@ -11692,7 +11692,7 @@ <h2>Icons</h2>
 {{ render_icon('person-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-exclamation/">
@@ -11700,7 +11700,7 @@ <h2>Icons</h2>
 {{ render_icon('person-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill/">
@@ -11708,7 +11708,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-add/">
@@ -11716,7 +11716,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-add', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-add</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-add</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-check/">
@@ -11724,7 +11724,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-dash/">
@@ -11732,7 +11732,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-down/">
@@ -11740,7 +11740,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-exclamation/">
@@ -11748,7 +11748,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-gear/">
@@ -11756,7 +11756,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-gear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-gear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-gear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-lock/">
@@ -11764,7 +11764,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-slash/">
@@ -11772,7 +11772,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-up/">
@@ -11780,7 +11780,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-x/">
@@ -11788,7 +11788,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-gear/">
@@ -11796,7 +11796,7 @@ <h2>Icons</h2>
 {{ render_icon('person-gear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-gear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-gear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-heart/">
@@ -11804,7 +11804,7 @@ <h2>Icons</h2>
 {{ render_icon('person-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-hearts/">
@@ -11812,7 +11812,7 @@ <h2>Icons</h2>
 {{ render_icon('person-hearts', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-hearts</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-hearts</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-lines-fill/">
@@ -11820,7 +11820,7 @@ <h2>Icons</h2>
 {{ render_icon('person-lines-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-lines-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-lines-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-lock/">
@@ -11828,7 +11828,7 @@ <h2>Icons</h2>
 {{ render_icon('person-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-plus/">
@@ -11836,7 +11836,7 @@ <h2>Icons</h2>
 {{ render_icon('person-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-plus-fill/">
@@ -11844,7 +11844,7 @@ <h2>Icons</h2>
 {{ render_icon('person-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-raised-hand/">
@@ -11852,7 +11852,7 @@ <h2>Icons</h2>
 {{ render_icon('person-raised-hand', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-raised-hand</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-raised-hand</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-rolodex/">
@@ -11860,7 +11860,7 @@ <h2>Icons</h2>
 {{ render_icon('person-rolodex', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-rolodex</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-rolodex</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-slash/">
@@ -11868,7 +11868,7 @@ <h2>Icons</h2>
 {{ render_icon('person-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-square/">
@@ -11876,7 +11876,7 @@ <h2>Icons</h2>
 {{ render_icon('person-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-standing/">
@@ -11884,7 +11884,7 @@ <h2>Icons</h2>
 {{ render_icon('person-standing', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-standing</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-standing</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-standing-dress/">
@@ -11892,7 +11892,7 @@ <h2>Icons</h2>
 {{ render_icon('person-standing-dress', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-standing-dress</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-standing-dress</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-up/">
@@ -11900,7 +11900,7 @@ <h2>Icons</h2>
 {{ render_icon('person-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-vcard/">
@@ -11908,7 +11908,7 @@ <h2>Icons</h2>
 {{ render_icon('person-vcard', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-vcard</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-vcard</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-vcard-fill/">
@@ -11916,7 +11916,7 @@ <h2>Icons</h2>
 {{ render_icon('person-vcard-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-vcard-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-vcard-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-video/">
@@ -11924,7 +11924,7 @@ <h2>Icons</h2>
 {{ render_icon('person-video', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-video</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-video</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-video2/">
@@ -11932,7 +11932,7 @@ <h2>Icons</h2>
 {{ render_icon('person-video2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-video2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-video2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-video3/">
@@ -11940,7 +11940,7 @@ <h2>Icons</h2>
 {{ render_icon('person-video3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-video3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-video3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-walking/">
@@ -11948,7 +11948,7 @@ <h2>Icons</h2>
 {{ render_icon('person-walking', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-walking</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-walking</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-wheelchair/">
@@ -11956,7 +11956,7 @@ <h2>Icons</h2>
 {{ render_icon('person-wheelchair', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-wheelchair</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-wheelchair</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-workspace/">
@@ -11964,7 +11964,7 @@ <h2>Icons</h2>
 {{ render_icon('person-workspace', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-workspace</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-workspace</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-x/">
@@ -11972,7 +11972,7 @@ <h2>Icons</h2>
 {{ render_icon('person-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-x-fill/">
@@ -11980,7 +11980,7 @@ <h2>Icons</h2>
 {{ render_icon('person-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/phone/">
@@ -11988,7 +11988,7 @@ <h2>Icons</h2>
 {{ render_icon('phone', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">phone</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">phone</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/phone-fill/">
@@ -11996,7 +11996,7 @@ <h2>Icons</h2>
 {{ render_icon('phone-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">phone-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">phone-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/phone-flip/">
@@ -12004,7 +12004,7 @@ <h2>Icons</h2>
 {{ render_icon('phone-flip', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">phone-flip</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">phone-flip</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/phone-landscape/">
@@ -12012,7 +12012,7 @@ <h2>Icons</h2>
 {{ render_icon('phone-landscape', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">phone-landscape</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">phone-landscape</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/phone-landscape-fill/">
@@ -12020,7 +12020,7 @@ <h2>Icons</h2>
 {{ render_icon('phone-landscape-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">phone-landscape-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">phone-landscape-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/phone-vibrate/">
@@ -12028,7 +12028,7 @@ <h2>Icons</h2>
 {{ render_icon('phone-vibrate', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">phone-vibrate</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">phone-vibrate</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/phone-vibrate-fill/">
@@ -12036,7 +12036,7 @@ <h2>Icons</h2>
 {{ render_icon('phone-vibrate-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">phone-vibrate-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">phone-vibrate-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pie-chart/">
@@ -12044,7 +12044,7 @@ <h2>Icons</h2>
 {{ render_icon('pie-chart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pie-chart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pie-chart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pie-chart-fill/">
@@ -12052,7 +12052,7 @@ <h2>Icons</h2>
 {{ render_icon('pie-chart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pie-chart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pie-chart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/piggy-bank/">
@@ -12060,7 +12060,7 @@ <h2>Icons</h2>
 {{ render_icon('piggy-bank', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">piggy-bank</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">piggy-bank</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/piggy-bank-fill/">
@@ -12068,7 +12068,7 @@ <h2>Icons</h2>
 {{ render_icon('piggy-bank-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">piggy-bank-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">piggy-bank-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pin/">
@@ -12076,7 +12076,7 @@ <h2>Icons</h2>
 {{ render_icon('pin', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pin</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pin</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pin-angle/">
@@ -12084,7 +12084,7 @@ <h2>Icons</h2>
 {{ render_icon('pin-angle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pin-angle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pin-angle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pin-angle-fill/">
@@ -12092,7 +12092,7 @@ <h2>Icons</h2>
 {{ render_icon('pin-angle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pin-angle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pin-angle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pin-fill/">
@@ -12100,7 +12100,7 @@ <h2>Icons</h2>
 {{ render_icon('pin-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pin-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pin-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pin-map/">
@@ -12108,7 +12108,7 @@ <h2>Icons</h2>
 {{ render_icon('pin-map', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pin-map</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pin-map</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pin-map-fill/">
@@ -12116,7 +12116,7 @@ <h2>Icons</h2>
 {{ render_icon('pin-map-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pin-map-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pin-map-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pinterest/">
@@ -12124,7 +12124,7 @@ <h2>Icons</h2>
 {{ render_icon('pinterest', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pinterest</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pinterest</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pip/">
@@ -12132,7 +12132,7 @@ <h2>Icons</h2>
 {{ render_icon('pip', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pip</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pip</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pip-fill/">
@@ -12140,7 +12140,7 @@ <h2>Icons</h2>
 {{ render_icon('pip-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pip-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pip-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/play/">
@@ -12148,7 +12148,7 @@ <h2>Icons</h2>
 {{ render_icon('play', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">play</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">play</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/play-btn/">
@@ -12156,7 +12156,7 @@ <h2>Icons</h2>
 {{ render_icon('play-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">play-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">play-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/play-btn-fill/">
@@ -12164,7 +12164,7 @@ <h2>Icons</h2>
 {{ render_icon('play-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">play-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">play-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/play-circle/">
@@ -12172,7 +12172,7 @@ <h2>Icons</h2>
 {{ render_icon('play-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">play-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">play-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/play-circle-fill/">
@@ -12180,7 +12180,7 @@ <h2>Icons</h2>
 {{ render_icon('play-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">play-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">play-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/play-fill/">
@@ -12188,7 +12188,7 @@ <h2>Icons</h2>
 {{ render_icon('play-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">play-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">play-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/playstation/">
@@ -12196,7 +12196,7 @@ <h2>Icons</h2>
 {{ render_icon('playstation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">playstation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">playstation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plug/">
@@ -12204,7 +12204,7 @@ <h2>Icons</h2>
 {{ render_icon('plug', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plug</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plug</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plug-fill/">
@@ -12212,7 +12212,7 @@ <h2>Icons</h2>
 {{ render_icon('plug-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plug-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plug-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plugin/">
@@ -12220,7 +12220,7 @@ <h2>Icons</h2>
 {{ render_icon('plugin', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plugin</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plugin</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus/">
@@ -12228,7 +12228,7 @@ <h2>Icons</h2>
 {{ render_icon('plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus-circle/">
@@ -12236,7 +12236,7 @@ <h2>Icons</h2>
 {{ render_icon('plus-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus-circle-dotted/">
@@ -12244,7 +12244,7 @@ <h2>Icons</h2>
 {{ render_icon('plus-circle-dotted', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus-circle-dotted</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus-circle-dotted</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus-circle-fill/">
@@ -12252,7 +12252,7 @@ <h2>Icons</h2>
 {{ render_icon('plus-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus-lg/">
@@ -12260,7 +12260,7 @@ <h2>Icons</h2>
 {{ render_icon('plus-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus-slash-minus/">
@@ -12268,7 +12268,7 @@ <h2>Icons</h2>
 {{ render_icon('plus-slash-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus-slash-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus-slash-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus-square/">
@@ -12276,7 +12276,7 @@ <h2>Icons</h2>
 {{ render_icon('plus-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus-square-dotted/">
@@ -12284,7 +12284,7 @@ <h2>Icons</h2>
 {{ render_icon('plus-square-dotted', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus-square-dotted</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus-square-dotted</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus-square-fill/">
@@ -12292,7 +12292,7 @@ <h2>Icons</h2>
 {{ render_icon('plus-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/postage/">
@@ -12300,7 +12300,7 @@ <h2>Icons</h2>
 {{ render_icon('postage', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">postage</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">postage</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/postage-fill/">
@@ -12308,7 +12308,7 @@ <h2>Icons</h2>
 {{ render_icon('postage-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">postage-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">postage-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/postage-heart/">
@@ -12316,7 +12316,7 @@ <h2>Icons</h2>
 {{ render_icon('postage-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">postage-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">postage-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/postage-heart-fill/">
@@ -12324,7 +12324,7 @@ <h2>Icons</h2>
 {{ render_icon('postage-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">postage-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">postage-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/postcard/">
@@ -12332,7 +12332,7 @@ <h2>Icons</h2>
 {{ render_icon('postcard', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">postcard</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">postcard</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/postcard-fill/">
@@ -12340,7 +12340,7 @@ <h2>Icons</h2>
 {{ render_icon('postcard-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">postcard-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">postcard-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/postcard-heart/">
@@ -12348,7 +12348,7 @@ <h2>Icons</h2>
 {{ render_icon('postcard-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">postcard-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">postcard-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/postcard-heart-fill/">
@@ -12356,7 +12356,7 @@ <h2>Icons</h2>
 {{ render_icon('postcard-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">postcard-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">postcard-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/power/">
@@ -12364,7 +12364,7 @@ <h2>Icons</h2>
 {{ render_icon('power', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">power</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">power</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/prescription/">
@@ -12372,7 +12372,7 @@ <h2>Icons</h2>
 {{ render_icon('prescription', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">prescription</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">prescription</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/prescription2/">
@@ -12380,7 +12380,7 @@ <h2>Icons</h2>
 {{ render_icon('prescription2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">prescription2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">prescription2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/printer/">
@@ -12388,7 +12388,7 @@ <h2>Icons</h2>
 {{ render_icon('printer', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">printer</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">printer</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/printer-fill/">
@@ -12396,7 +12396,7 @@ <h2>Icons</h2>
 {{ render_icon('printer-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">printer-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">printer-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/projector/">
@@ -12404,7 +12404,7 @@ <h2>Icons</h2>
 {{ render_icon('projector', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">projector</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">projector</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/projector-fill/">
@@ -12412,7 +12412,7 @@ <h2>Icons</h2>
 {{ render_icon('projector-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">projector-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">projector-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/puzzle/">
@@ -12420,7 +12420,7 @@ <h2>Icons</h2>
 {{ render_icon('puzzle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">puzzle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">puzzle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/puzzle-fill/">
@@ -12428,7 +12428,7 @@ <h2>Icons</h2>
 {{ render_icon('puzzle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">puzzle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">puzzle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/qr-code/">
@@ -12436,7 +12436,7 @@ <h2>Icons</h2>
 {{ render_icon('qr-code', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">qr-code</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">qr-code</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/qr-code-scan/">
@@ -12444,7 +12444,7 @@ <h2>Icons</h2>
 {{ render_icon('qr-code-scan', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">qr-code-scan</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">qr-code-scan</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question/">
@@ -12452,7 +12452,7 @@ <h2>Icons</h2>
 {{ render_icon('question', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-circle/">
@@ -12460,7 +12460,7 @@ <h2>Icons</h2>
 {{ render_icon('question-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-circle-fill/">
@@ -12468,7 +12468,7 @@ <h2>Icons</h2>
 {{ render_icon('question-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-diamond/">
@@ -12476,7 +12476,7 @@ <h2>Icons</h2>
 {{ render_icon('question-diamond', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-diamond</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-diamond</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-diamond-fill/">
@@ -12484,7 +12484,7 @@ <h2>Icons</h2>
 {{ render_icon('question-diamond-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-diamond-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-diamond-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-lg/">
@@ -12492,7 +12492,7 @@ <h2>Icons</h2>
 {{ render_icon('question-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-octagon/">
@@ -12500,7 +12500,7 @@ <h2>Icons</h2>
 {{ render_icon('question-octagon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-octagon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-octagon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-octagon-fill/">
@@ -12508,7 +12508,7 @@ <h2>Icons</h2>
 {{ render_icon('question-octagon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-octagon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-octagon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-square/">
@@ -12516,7 +12516,7 @@ <h2>Icons</h2>
 {{ render_icon('question-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-square-fill/">
@@ -12524,7 +12524,7 @@ <h2>Icons</h2>
 {{ render_icon('question-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/quora/">
@@ -12532,7 +12532,7 @@ <h2>Icons</h2>
 {{ render_icon('quora', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">quora</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">quora</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/quote/">
@@ -12540,7 +12540,7 @@ <h2>Icons</h2>
 {{ render_icon('quote', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">quote</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">quote</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/r-circle/">
@@ -12548,7 +12548,7 @@ <h2>Icons</h2>
 {{ render_icon('r-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">r-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">r-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/r-circle-fill/">
@@ -12556,7 +12556,7 @@ <h2>Icons</h2>
 {{ render_icon('r-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">r-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">r-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/r-square/">
@@ -12564,7 +12564,7 @@ <h2>Icons</h2>
 {{ render_icon('r-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">r-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">r-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/r-square-fill/">
@@ -12572,7 +12572,7 @@ <h2>Icons</h2>
 {{ render_icon('r-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">r-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">r-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/radar/">
@@ -12580,7 +12580,7 @@ <h2>Icons</h2>
 {{ render_icon('radar', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">radar</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">radar</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/radioactive/">
@@ -12588,7 +12588,7 @@ <h2>Icons</h2>
 {{ render_icon('radioactive', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">radioactive</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">radioactive</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rainbow/">
@@ -12596,7 +12596,7 @@ <h2>Icons</h2>
 {{ render_icon('rainbow', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rainbow</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rainbow</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/receipt/">
@@ -12604,7 +12604,7 @@ <h2>Icons</h2>
 {{ render_icon('receipt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">receipt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">receipt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/receipt-cutoff/">
@@ -12612,7 +12612,7 @@ <h2>Icons</h2>
 {{ render_icon('receipt-cutoff', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">receipt-cutoff</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">receipt-cutoff</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reception-0/">
@@ -12620,7 +12620,7 @@ <h2>Icons</h2>
 {{ render_icon('reception-0', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reception-0</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reception-0</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reception-1/">
@@ -12628,7 +12628,7 @@ <h2>Icons</h2>
 {{ render_icon('reception-1', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reception-1</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reception-1</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reception-2/">
@@ -12636,7 +12636,7 @@ <h2>Icons</h2>
 {{ render_icon('reception-2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reception-2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reception-2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reception-3/">
@@ -12644,7 +12644,7 @@ <h2>Icons</h2>
 {{ render_icon('reception-3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reception-3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reception-3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reception-4/">
@@ -12652,7 +12652,7 @@ <h2>Icons</h2>
 {{ render_icon('reception-4', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reception-4</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reception-4</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/record/">
@@ -12660,7 +12660,7 @@ <h2>Icons</h2>
 {{ render_icon('record', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">record</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">record</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/record-btn/">
@@ -12668,7 +12668,7 @@ <h2>Icons</h2>
 {{ render_icon('record-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">record-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">record-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/record-btn-fill/">
@@ -12676,7 +12676,7 @@ <h2>Icons</h2>
 {{ render_icon('record-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">record-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">record-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/record-circle/">
@@ -12684,7 +12684,7 @@ <h2>Icons</h2>
 {{ render_icon('record-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">record-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">record-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/record-circle-fill/">
@@ -12692,7 +12692,7 @@ <h2>Icons</h2>
 {{ render_icon('record-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">record-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">record-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/record-fill/">
@@ -12700,7 +12700,7 @@ <h2>Icons</h2>
 {{ render_icon('record-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">record-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">record-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/record2/">
@@ -12708,7 +12708,7 @@ <h2>Icons</h2>
 {{ render_icon('record2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">record2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">record2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/record2-fill/">
@@ -12716,7 +12716,7 @@ <h2>Icons</h2>
 {{ render_icon('record2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">record2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">record2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/recycle/">
@@ -12724,7 +12724,7 @@ <h2>Icons</h2>
 {{ render_icon('recycle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">recycle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">recycle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reddit/">
@@ -12732,7 +12732,7 @@ <h2>Icons</h2>
 {{ render_icon('reddit', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reddit</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reddit</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/regex/">
@@ -12740,7 +12740,7 @@ <h2>Icons</h2>
 {{ render_icon('regex', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">regex</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">regex</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/repeat/">
@@ -12748,7 +12748,7 @@ <h2>Icons</h2>
 {{ render_icon('repeat', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">repeat</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">repeat</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/repeat-1/">
@@ -12756,7 +12756,7 @@ <h2>Icons</h2>
 {{ render_icon('repeat-1', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">repeat-1</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">repeat-1</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reply/">
@@ -12764,7 +12764,7 @@ <h2>Icons</h2>
 {{ render_icon('reply', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reply</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reply</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reply-all/">
@@ -12772,7 +12772,7 @@ <h2>Icons</h2>
 {{ render_icon('reply-all', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reply-all</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reply-all</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reply-all-fill/">
@@ -12780,7 +12780,7 @@ <h2>Icons</h2>
 {{ render_icon('reply-all-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reply-all-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reply-all-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reply-fill/">
@@ -12788,7 +12788,7 @@ <h2>Icons</h2>
 {{ render_icon('reply-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reply-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reply-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rewind/">
@@ -12796,7 +12796,7 @@ <h2>Icons</h2>
 {{ render_icon('rewind', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rewind</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rewind</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rewind-btn/">
@@ -12804,7 +12804,7 @@ <h2>Icons</h2>
 {{ render_icon('rewind-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rewind-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rewind-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rewind-btn-fill/">
@@ -12812,7 +12812,7 @@ <h2>Icons</h2>
 {{ render_icon('rewind-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rewind-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rewind-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rewind-circle/">
@@ -12820,7 +12820,7 @@ <h2>Icons</h2>
 {{ render_icon('rewind-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rewind-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rewind-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rewind-circle-fill/">
@@ -12828,7 +12828,7 @@ <h2>Icons</h2>
 {{ render_icon('rewind-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rewind-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rewind-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rewind-fill/">
@@ -12836,7 +12836,7 @@ <h2>Icons</h2>
 {{ render_icon('rewind-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rewind-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rewind-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/robot/">
@@ -12844,7 +12844,7 @@ <h2>Icons</h2>
 {{ render_icon('robot', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">robot</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">robot</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rocket/">
@@ -12852,7 +12852,7 @@ <h2>Icons</h2>
 {{ render_icon('rocket', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rocket</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rocket</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rocket-fill/">
@@ -12860,7 +12860,7 @@ <h2>Icons</h2>
 {{ render_icon('rocket-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rocket-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rocket-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rocket-takeoff/">
@@ -12868,7 +12868,7 @@ <h2>Icons</h2>
 {{ render_icon('rocket-takeoff', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rocket-takeoff</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rocket-takeoff</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rocket-takeoff-fill/">
@@ -12876,7 +12876,7 @@ <h2>Icons</h2>
 {{ render_icon('rocket-takeoff-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rocket-takeoff-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rocket-takeoff-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/router/">
@@ -12884,7 +12884,7 @@ <h2>Icons</h2>
 {{ render_icon('router', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">router</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">router</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/router-fill/">
@@ -12892,7 +12892,7 @@ <h2>Icons</h2>
 {{ render_icon('router-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">router-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">router-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rss/">
@@ -12900,7 +12900,7 @@ <h2>Icons</h2>
 {{ render_icon('rss', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rss</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rss</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rss-fill/">
@@ -12908,7 +12908,7 @@ <h2>Icons</h2>
 {{ render_icon('rss-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rss-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rss-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rulers/">
@@ -12916,7 +12916,7 @@ <h2>Icons</h2>
 {{ render_icon('rulers', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rulers</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rulers</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/safe/">
@@ -12924,7 +12924,7 @@ <h2>Icons</h2>
 {{ render_icon('safe', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">safe</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">safe</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/safe-fill/">
@@ -12932,7 +12932,7 @@ <h2>Icons</h2>
 {{ render_icon('safe-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">safe-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">safe-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/safe2/">
@@ -12940,7 +12940,7 @@ <h2>Icons</h2>
 {{ render_icon('safe2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">safe2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">safe2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/safe2-fill/">
@@ -12948,7 +12948,7 @@ <h2>Icons</h2>
 {{ render_icon('safe2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">safe2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">safe2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/save/">
@@ -12956,7 +12956,7 @@ <h2>Icons</h2>
 {{ render_icon('save', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">save</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">save</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/save-fill/">
@@ -12964,7 +12964,7 @@ <h2>Icons</h2>
 {{ render_icon('save-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">save-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">save-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/save2/">
@@ -12972,7 +12972,7 @@ <h2>Icons</h2>
 {{ render_icon('save2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">save2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">save2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/save2-fill/">
@@ -12980,7 +12980,7 @@ <h2>Icons</h2>
 {{ render_icon('save2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">save2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">save2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/scissors/">
@@ -12988,7 +12988,7 @@ <h2>Icons</h2>
 {{ render_icon('scissors', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">scissors</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">scissors</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/scooter/">
@@ -12996,7 +12996,7 @@ <h2>Icons</h2>
 {{ render_icon('scooter', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">scooter</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">scooter</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/screwdriver/">
@@ -13004,7 +13004,7 @@ <h2>Icons</h2>
 {{ render_icon('screwdriver', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">screwdriver</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">screwdriver</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sd-card/">
@@ -13012,7 +13012,7 @@ <h2>Icons</h2>
 {{ render_icon('sd-card', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sd-card</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sd-card</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sd-card-fill/">
@@ -13020,7 +13020,7 @@ <h2>Icons</h2>
 {{ render_icon('sd-card-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sd-card-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sd-card-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/search/">
@@ -13028,7 +13028,7 @@ <h2>Icons</h2>
 {{ render_icon('search', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">search</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">search</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/search-heart/">
@@ -13036,7 +13036,7 @@ <h2>Icons</h2>
 {{ render_icon('search-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">search-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">search-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/search-heart-fill/">
@@ -13044,7 +13044,7 @@ <h2>Icons</h2>
 {{ render_icon('search-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">search-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">search-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/segmented-nav/">
@@ -13052,7 +13052,7 @@ <h2>Icons</h2>
 {{ render_icon('segmented-nav', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">segmented-nav</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">segmented-nav</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send/">
@@ -13060,7 +13060,7 @@ <h2>Icons</h2>
 {{ render_icon('send', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-arrow-down/">
@@ -13068,7 +13068,7 @@ <h2>Icons</h2>
 {{ render_icon('send-arrow-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-arrow-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-arrow-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-arrow-down-fill/">
@@ -13076,7 +13076,7 @@ <h2>Icons</h2>
 {{ render_icon('send-arrow-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-arrow-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-arrow-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-arrow-up/">
@@ -13084,7 +13084,7 @@ <h2>Icons</h2>
 {{ render_icon('send-arrow-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-arrow-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-arrow-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-arrow-up-fill/">
@@ -13092,7 +13092,7 @@ <h2>Icons</h2>
 {{ render_icon('send-arrow-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-arrow-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-arrow-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-check/">
@@ -13100,7 +13100,7 @@ <h2>Icons</h2>
 {{ render_icon('send-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-check-fill/">
@@ -13108,7 +13108,7 @@ <h2>Icons</h2>
 {{ render_icon('send-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-dash/">
@@ -13116,7 +13116,7 @@ <h2>Icons</h2>
 {{ render_icon('send-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-dash-fill/">
@@ -13124,7 +13124,7 @@ <h2>Icons</h2>
 {{ render_icon('send-dash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-dash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-dash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-exclamation/">
@@ -13132,7 +13132,7 @@ <h2>Icons</h2>
 {{ render_icon('send-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-exclamation-fill/">
@@ -13140,7 +13140,7 @@ <h2>Icons</h2>
 {{ render_icon('send-exclamation-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-exclamation-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-exclamation-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-fill/">
@@ -13148,7 +13148,7 @@ <h2>Icons</h2>
 {{ render_icon('send-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-plus/">
@@ -13156,7 +13156,7 @@ <h2>Icons</h2>
 {{ render_icon('send-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-plus-fill/">
@@ -13164,7 +13164,7 @@ <h2>Icons</h2>
 {{ render_icon('send-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-slash/">
@@ -13172,7 +13172,7 @@ <h2>Icons</h2>
 {{ render_icon('send-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-slash-fill/">
@@ -13180,7 +13180,7 @@ <h2>Icons</h2>
 {{ render_icon('send-slash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-slash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-slash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-x/">
@@ -13188,7 +13188,7 @@ <h2>Icons</h2>
 {{ render_icon('send-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-x-fill/">
@@ -13196,7 +13196,7 @@ <h2>Icons</h2>
 {{ render_icon('send-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/server/">
@@ -13204,7 +13204,7 @@ <h2>Icons</h2>
 {{ render_icon('server', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">server</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">server</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shadows/">
@@ -13212,7 +13212,7 @@ <h2>Icons</h2>
 {{ render_icon('shadows', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shadows</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shadows</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/share/">
@@ -13220,7 +13220,7 @@ <h2>Icons</h2>
 {{ render_icon('share', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">share</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">share</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/share-fill/">
@@ -13228,7 +13228,7 @@ <h2>Icons</h2>
 {{ render_icon('share-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">share-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">share-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield/">
@@ -13236,7 +13236,7 @@ <h2>Icons</h2>
 {{ render_icon('shield', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-check/">
@@ -13244,7 +13244,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-exclamation/">
@@ -13252,7 +13252,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-fill/">
@@ -13260,7 +13260,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-fill-check/">
@@ -13268,7 +13268,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-fill-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-fill-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-fill-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-fill-exclamation/">
@@ -13276,7 +13276,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-fill-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-fill-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-fill-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-fill-minus/">
@@ -13284,7 +13284,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-fill-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-fill-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-fill-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-fill-plus/">
@@ -13292,7 +13292,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-fill-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-fill-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-fill-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-fill-x/">
@@ -13300,7 +13300,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-fill-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-fill-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-fill-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-lock/">
@@ -13308,7 +13308,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-lock-fill/">
@@ -13316,7 +13316,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-lock-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-lock-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-lock-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-minus/">
@@ -13324,7 +13324,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-plus/">
@@ -13332,7 +13332,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-shaded/">
@@ -13340,7 +13340,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-shaded', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-shaded</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-shaded</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-slash/">
@@ -13348,7 +13348,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-slash-fill/">
@@ -13356,7 +13356,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-slash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-slash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-slash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-x/">
@@ -13364,7 +13364,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shift/">
@@ -13372,7 +13372,7 @@ <h2>Icons</h2>
 {{ render_icon('shift', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shift</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shift</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shift-fill/">
@@ -13380,7 +13380,7 @@ <h2>Icons</h2>
 {{ render_icon('shift-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shift-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shift-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shop/">
@@ -13388,7 +13388,7 @@ <h2>Icons</h2>
 {{ render_icon('shop', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shop</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shop</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shop-window/">
@@ -13396,7 +13396,7 @@ <h2>Icons</h2>
 {{ render_icon('shop-window', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shop-window</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shop-window</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shuffle/">
@@ -13404,7 +13404,7 @@ <h2>Icons</h2>
 {{ render_icon('shuffle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shuffle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shuffle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-dead-end/">
@@ -13412,7 +13412,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-dead-end', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-dead-end</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-dead-end</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-dead-end-fill/">
@@ -13420,7 +13420,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-dead-end-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-dead-end-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-dead-end-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-do-not-enter/">
@@ -13428,7 +13428,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-do-not-enter', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-do-not-enter</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-do-not-enter</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-do-not-enter-fill/">
@@ -13436,7 +13436,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-do-not-enter-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-do-not-enter-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-do-not-enter-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-intersection/">
@@ -13444,7 +13444,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-intersection', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-intersection</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-intersection</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-intersection-fill/">
@@ -13452,7 +13452,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-intersection-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-intersection-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-intersection-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-intersection-side/">
@@ -13460,7 +13460,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-intersection-side', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-intersection-side</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-intersection-side</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-intersection-side-fill/">
@@ -13468,7 +13468,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-intersection-side-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-intersection-side-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-intersection-side-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-intersection-t/">
@@ -13476,7 +13476,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-intersection-t', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-intersection-t</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-intersection-t</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-intersection-t-fill/">
@@ -13484,7 +13484,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-intersection-t-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-intersection-t-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-intersection-t-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-intersection-y/">
@@ -13492,7 +13492,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-intersection-y', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-intersection-y</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-intersection-y</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-intersection-y-fill/">
@@ -13500,7 +13500,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-intersection-y-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-intersection-y-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-intersection-y-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-merge-left/">
@@ -13508,7 +13508,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-merge-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-merge-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-merge-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-merge-left-fill/">
@@ -13516,7 +13516,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-merge-left-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-merge-left-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-merge-left-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-merge-right/">
@@ -13524,7 +13524,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-merge-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-merge-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-merge-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-merge-right-fill/">
@@ -13532,7 +13532,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-merge-right-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-merge-right-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-merge-right-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-no-left-turn/">
@@ -13540,7 +13540,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-no-left-turn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-no-left-turn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-no-left-turn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-no-left-turn-fill/">
@@ -13548,7 +13548,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-no-left-turn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-no-left-turn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-no-left-turn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-no-parking/">
@@ -13556,7 +13556,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-no-parking', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-no-parking</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-no-parking</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-no-parking-fill/">
@@ -13564,7 +13564,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-no-parking-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-no-parking-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-no-parking-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-no-right-turn/">
@@ -13572,7 +13572,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-no-right-turn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-no-right-turn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-no-right-turn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-no-right-turn-fill/">
@@ -13580,7 +13580,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-no-right-turn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-no-right-turn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-no-right-turn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-railroad/">
@@ -13588,7 +13588,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-railroad', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-railroad</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-railroad</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-railroad-fill/">
@@ -13596,7 +13596,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-railroad-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-railroad-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-railroad-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-stop/">
@@ -13604,7 +13604,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-stop', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-stop</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-stop</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-stop-fill/">
@@ -13612,7 +13612,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-stop-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-stop-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-stop-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-stop-lights/">
@@ -13620,7 +13620,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-stop-lights', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-stop-lights</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-stop-lights</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-stop-lights-fill/">
@@ -13628,7 +13628,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-stop-lights-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-stop-lights-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-stop-lights-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-turn-left/">
@@ -13636,7 +13636,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-turn-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-turn-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-turn-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-turn-left-fill/">
@@ -13644,7 +13644,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-turn-left-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-turn-left-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-turn-left-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-turn-right/">
@@ -13652,7 +13652,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-turn-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-turn-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-turn-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-turn-right-fill/">
@@ -13660,7 +13660,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-turn-right-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-turn-right-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-turn-right-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-turn-slight-left/">
@@ -13668,7 +13668,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-turn-slight-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-turn-slight-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-turn-slight-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-turn-slight-left-fill/">
@@ -13676,7 +13676,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-turn-slight-left-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-turn-slight-left-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-turn-slight-left-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-turn-slight-right/">
@@ -13684,7 +13684,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-turn-slight-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-turn-slight-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-turn-slight-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-turn-slight-right-fill/">
@@ -13692,7 +13692,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-turn-slight-right-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-turn-slight-right-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-turn-slight-right-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-yield/">
@@ -13700,7 +13700,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-yield', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-yield</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-yield</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-yield-fill/">
@@ -13708,7 +13708,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-yield-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-yield-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-yield-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/signal/">
@@ -13716,7 +13716,7 @@ <h2>Icons</h2>
 {{ render_icon('signal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">signal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">signal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/signpost/">
@@ -13724,7 +13724,7 @@ <h2>Icons</h2>
 {{ render_icon('signpost', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">signpost</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">signpost</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/signpost-2/">
@@ -13732,7 +13732,7 @@ <h2>Icons</h2>
 {{ render_icon('signpost-2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">signpost-2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">signpost-2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/signpost-2-fill/">
@@ -13740,7 +13740,7 @@ <h2>Icons</h2>
 {{ render_icon('signpost-2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">signpost-2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">signpost-2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/signpost-fill/">
@@ -13748,7 +13748,7 @@ <h2>Icons</h2>
 {{ render_icon('signpost-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">signpost-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">signpost-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/signpost-split/">
@@ -13756,7 +13756,7 @@ <h2>Icons</h2>
 {{ render_icon('signpost-split', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">signpost-split</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">signpost-split</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/signpost-split-fill/">
@@ -13764,7 +13764,7 @@ <h2>Icons</h2>
 {{ render_icon('signpost-split-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">signpost-split-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">signpost-split-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sim/">
@@ -13772,7 +13772,7 @@ <h2>Icons</h2>
 {{ render_icon('sim', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sim</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sim</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sim-fill/">
@@ -13780,7 +13780,7 @@ <h2>Icons</h2>
 {{ render_icon('sim-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sim-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sim-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sim-slash/">
@@ -13788,7 +13788,7 @@ <h2>Icons</h2>
 {{ render_icon('sim-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sim-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sim-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sim-slash-fill/">
@@ -13796,7 +13796,7 @@ <h2>Icons</h2>
 {{ render_icon('sim-slash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sim-slash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sim-slash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sina-weibo/">
@@ -13804,7 +13804,7 @@ <h2>Icons</h2>
 {{ render_icon('sina-weibo', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sina-weibo</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sina-weibo</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-backward/">
@@ -13812,7 +13812,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-backward', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-backward</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-backward</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-backward-btn/">
@@ -13820,7 +13820,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-backward-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-backward-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-backward-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-backward-btn-fill/">
@@ -13828,7 +13828,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-backward-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-backward-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-backward-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-backward-circle/">
@@ -13836,7 +13836,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-backward-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-backward-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-backward-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-backward-circle-fill/">
@@ -13844,7 +13844,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-backward-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-backward-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-backward-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-backward-fill/">
@@ -13852,7 +13852,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-backward-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-backward-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-backward-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-end/">
@@ -13860,7 +13860,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-end', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-end</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-end</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-end-btn/">
@@ -13868,7 +13868,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-end-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-end-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-end-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-end-btn-fill/">
@@ -13876,7 +13876,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-end-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-end-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-end-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-end-circle/">
@@ -13884,7 +13884,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-end-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-end-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-end-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-end-circle-fill/">
@@ -13892,7 +13892,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-end-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-end-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-end-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-end-fill/">
@@ -13900,7 +13900,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-end-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-end-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-end-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-forward/">
@@ -13908,7 +13908,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-forward', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-forward</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-forward</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-forward-btn/">
@@ -13916,7 +13916,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-forward-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-forward-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-forward-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-forward-btn-fill/">
@@ -13924,7 +13924,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-forward-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-forward-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-forward-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-forward-circle/">
@@ -13932,7 +13932,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-forward-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-forward-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-forward-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-forward-circle-fill/">
@@ -13940,7 +13940,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-forward-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-forward-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-forward-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-forward-fill/">
@@ -13948,7 +13948,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-forward-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-forward-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-forward-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-start/">
@@ -13956,7 +13956,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-start', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-start</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-start</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-start-btn/">
@@ -13964,7 +13964,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-start-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-start-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-start-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-start-btn-fill/">
@@ -13972,7 +13972,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-start-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-start-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-start-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-start-circle/">
@@ -13980,7 +13980,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-start-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-start-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-start-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-start-circle-fill/">
@@ -13988,7 +13988,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-start-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-start-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-start-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-start-fill/">
@@ -13996,7 +13996,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-start-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-start-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-start-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skype/">
@@ -14004,7 +14004,7 @@ <h2>Icons</h2>
 {{ render_icon('skype', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skype</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skype</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/slack/">
@@ -14012,7 +14012,7 @@ <h2>Icons</h2>
 {{ render_icon('slack', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">slack</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">slack</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/slash/">
@@ -14020,7 +14020,7 @@ <h2>Icons</h2>
 {{ render_icon('slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/slash-circle/">
@@ -14028,7 +14028,7 @@ <h2>Icons</h2>
 {{ render_icon('slash-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">slash-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">slash-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/slash-circle-fill/">
@@ -14036,7 +14036,7 @@ <h2>Icons</h2>
 {{ render_icon('slash-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">slash-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">slash-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/slash-lg/">
@@ -14044,7 +14044,7 @@ <h2>Icons</h2>
 {{ render_icon('slash-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">slash-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">slash-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/slash-square/">
@@ -14052,7 +14052,7 @@ <h2>Icons</h2>
 {{ render_icon('slash-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">slash-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">slash-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/slash-square-fill/">
@@ -14060,7 +14060,7 @@ <h2>Icons</h2>
 {{ render_icon('slash-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">slash-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">slash-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sliders/">
@@ -14068,7 +14068,7 @@ <h2>Icons</h2>
 {{ render_icon('sliders', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sliders</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sliders</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sliders2/">
@@ -14076,7 +14076,7 @@ <h2>Icons</h2>
 {{ render_icon('sliders2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sliders2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sliders2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sliders2-vertical/">
@@ -14084,7 +14084,7 @@ <h2>Icons</h2>
 {{ render_icon('sliders2-vertical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sliders2-vertical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sliders2-vertical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/smartwatch/">
@@ -14092,7 +14092,7 @@ <h2>Icons</h2>
 {{ render_icon('smartwatch', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">smartwatch</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">smartwatch</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/snapchat/">
@@ -14100,7 +14100,7 @@ <h2>Icons</h2>
 {{ render_icon('snapchat', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">snapchat</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">snapchat</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/snow/">
@@ -14108,7 +14108,7 @@ <h2>Icons</h2>
 {{ render_icon('snow', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">snow</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">snow</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/snow2/">
@@ -14116,7 +14116,7 @@ <h2>Icons</h2>
 {{ render_icon('snow2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">snow2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">snow2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/snow3/">
@@ -14124,7 +14124,7 @@ <h2>Icons</h2>
 {{ render_icon('snow3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">snow3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">snow3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-alpha-down/">
@@ -14132,7 +14132,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-alpha-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-alpha-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-alpha-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-alpha-down-alt/">
@@ -14140,7 +14140,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-alpha-down-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-alpha-down-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-alpha-down-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-alpha-up/">
@@ -14148,7 +14148,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-alpha-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-alpha-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-alpha-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-alpha-up-alt/">
@@ -14156,7 +14156,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-alpha-up-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-alpha-up-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-alpha-up-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-down/">
@@ -14164,7 +14164,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-down-alt/">
@@ -14172,7 +14172,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-down-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-down-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-down-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-numeric-down/">
@@ -14180,7 +14180,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-numeric-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-numeric-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-numeric-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-numeric-down-alt/">
@@ -14188,7 +14188,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-numeric-down-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-numeric-down-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-numeric-down-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-numeric-up/">
@@ -14196,7 +14196,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-numeric-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-numeric-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-numeric-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-numeric-up-alt/">
@@ -14204,7 +14204,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-numeric-up-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-numeric-up-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-numeric-up-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-up/">
@@ -14212,7 +14212,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-up-alt/">
@@ -14220,7 +14220,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-up-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-up-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-up-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/soundwave/">
@@ -14228,7 +14228,7 @@ <h2>Icons</h2>
 {{ render_icon('soundwave', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">soundwave</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">soundwave</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sourceforge/">
@@ -14236,7 +14236,7 @@ <h2>Icons</h2>
 {{ render_icon('sourceforge', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sourceforge</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sourceforge</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/speaker/">
@@ -14244,7 +14244,7 @@ <h2>Icons</h2>
 {{ render_icon('speaker', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">speaker</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">speaker</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/speaker-fill/">
@@ -14252,7 +14252,7 @@ <h2>Icons</h2>
 {{ render_icon('speaker-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">speaker-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">speaker-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/speedometer/">
@@ -14260,7 +14260,7 @@ <h2>Icons</h2>
 {{ render_icon('speedometer', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">speedometer</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">speedometer</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/speedometer2/">
@@ -14268,7 +14268,7 @@ <h2>Icons</h2>
 {{ render_icon('speedometer2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">speedometer2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">speedometer2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/spellcheck/">
@@ -14276,7 +14276,7 @@ <h2>Icons</h2>
 {{ render_icon('spellcheck', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">spellcheck</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">spellcheck</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/spotify/">
@@ -14284,7 +14284,7 @@ <h2>Icons</h2>
 {{ render_icon('spotify', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">spotify</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">spotify</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/square/">
@@ -14292,7 +14292,7 @@ <h2>Icons</h2>
 {{ render_icon('square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/square-fill/">
@@ -14300,7 +14300,7 @@ <h2>Icons</h2>
 {{ render_icon('square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/square-half/">
@@ -14308,7 +14308,7 @@ <h2>Icons</h2>
 {{ render_icon('square-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">square-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">square-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stack/">
@@ -14316,7 +14316,7 @@ <h2>Icons</h2>
 {{ render_icon('stack', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stack</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stack</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stack-overflow/">
@@ -14324,7 +14324,7 @@ <h2>Icons</h2>
 {{ render_icon('stack-overflow', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stack-overflow</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stack-overflow</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/star/">
@@ -14332,7 +14332,7 @@ <h2>Icons</h2>
 {{ render_icon('star', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">star</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">star</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/star-fill/">
@@ -14340,7 +14340,7 @@ <h2>Icons</h2>
 {{ render_icon('star-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">star-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">star-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/star-half/">
@@ -14348,7 +14348,7 @@ <h2>Icons</h2>
 {{ render_icon('star-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">star-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">star-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stars/">
@@ -14356,7 +14356,7 @@ <h2>Icons</h2>
 {{ render_icon('stars', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stars</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stars</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/steam/">
@@ -14364,7 +14364,7 @@ <h2>Icons</h2>
 {{ render_icon('steam', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">steam</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">steam</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stickies/">
@@ -14372,7 +14372,7 @@ <h2>Icons</h2>
 {{ render_icon('stickies', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stickies</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stickies</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stickies-fill/">
@@ -14380,7 +14380,7 @@ <h2>Icons</h2>
 {{ render_icon('stickies-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stickies-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stickies-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sticky/">
@@ -14388,7 +14388,7 @@ <h2>Icons</h2>
 {{ render_icon('sticky', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sticky</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sticky</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sticky-fill/">
@@ -14396,7 +14396,7 @@ <h2>Icons</h2>
 {{ render_icon('sticky-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sticky-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sticky-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stop/">
@@ -14404,7 +14404,7 @@ <h2>Icons</h2>
 {{ render_icon('stop', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stop</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stop</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stop-btn/">
@@ -14412,7 +14412,7 @@ <h2>Icons</h2>
 {{ render_icon('stop-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stop-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stop-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stop-btn-fill/">
@@ -14420,7 +14420,7 @@ <h2>Icons</h2>
 {{ render_icon('stop-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stop-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stop-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stop-circle/">
@@ -14428,7 +14428,7 @@ <h2>Icons</h2>
 {{ render_icon('stop-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stop-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stop-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stop-circle-fill/">
@@ -14436,7 +14436,7 @@ <h2>Icons</h2>
 {{ render_icon('stop-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stop-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stop-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stop-fill/">
@@ -14444,7 +14444,7 @@ <h2>Icons</h2>
 {{ render_icon('stop-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stop-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stop-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stoplights/">
@@ -14452,7 +14452,7 @@ <h2>Icons</h2>
 {{ render_icon('stoplights', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stoplights</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stoplights</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stoplights-fill/">
@@ -14460,7 +14460,7 @@ <h2>Icons</h2>
 {{ render_icon('stoplights-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stoplights-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stoplights-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stopwatch/">
@@ -14468,7 +14468,7 @@ <h2>Icons</h2>
 {{ render_icon('stopwatch', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stopwatch</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stopwatch</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stopwatch-fill/">
@@ -14476,7 +14476,7 @@ <h2>Icons</h2>
 {{ render_icon('stopwatch-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stopwatch-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stopwatch-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/strava/">
@@ -14484,7 +14484,7 @@ <h2>Icons</h2>
 {{ render_icon('strava', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">strava</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">strava</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stripe/">
@@ -14492,7 +14492,7 @@ <h2>Icons</h2>
 {{ render_icon('stripe', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stripe</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stripe</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/subscript/">
@@ -14500,7 +14500,7 @@ <h2>Icons</h2>
 {{ render_icon('subscript', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">subscript</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">subscript</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/substack/">
@@ -14508,7 +14508,7 @@ <h2>Icons</h2>
 {{ render_icon('substack', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">substack</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">substack</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/subtract/">
@@ -14516,7 +14516,7 @@ <h2>Icons</h2>
 {{ render_icon('subtract', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">subtract</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">subtract</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suit-club/">
@@ -14524,7 +14524,7 @@ <h2>Icons</h2>
 {{ render_icon('suit-club', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suit-club</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suit-club</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suit-club-fill/">
@@ -14532,7 +14532,7 @@ <h2>Icons</h2>
 {{ render_icon('suit-club-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suit-club-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suit-club-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suit-diamond/">
@@ -14540,7 +14540,7 @@ <h2>Icons</h2>
 {{ render_icon('suit-diamond', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suit-diamond</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suit-diamond</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suit-diamond-fill/">
@@ -14548,7 +14548,7 @@ <h2>Icons</h2>
 {{ render_icon('suit-diamond-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suit-diamond-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suit-diamond-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suit-heart/">
@@ -14556,7 +14556,7 @@ <h2>Icons</h2>
 {{ render_icon('suit-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suit-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suit-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suit-heart-fill/">
@@ -14564,7 +14564,7 @@ <h2>Icons</h2>
 {{ render_icon('suit-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suit-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suit-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suit-spade/">
@@ -14572,7 +14572,7 @@ <h2>Icons</h2>
 {{ render_icon('suit-spade', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suit-spade</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suit-spade</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suit-spade-fill/">
@@ -14580,7 +14580,7 @@ <h2>Icons</h2>
 {{ render_icon('suit-spade-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suit-spade-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suit-spade-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suitcase/">
@@ -14588,7 +14588,7 @@ <h2>Icons</h2>
 {{ render_icon('suitcase', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suitcase</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suitcase</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suitcase-fill/">
@@ -14596,7 +14596,7 @@ <h2>Icons</h2>
 {{ render_icon('suitcase-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suitcase-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suitcase-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suitcase-lg/">
@@ -14604,7 +14604,7 @@ <h2>Icons</h2>
 {{ render_icon('suitcase-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suitcase-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suitcase-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suitcase-lg-fill/">
@@ -14612,7 +14612,7 @@ <h2>Icons</h2>
 {{ render_icon('suitcase-lg-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suitcase-lg-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suitcase-lg-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suitcase2/">
@@ -14620,7 +14620,7 @@ <h2>Icons</h2>
 {{ render_icon('suitcase2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suitcase2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suitcase2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suitcase2-fill/">
@@ -14628,7 +14628,7 @@ <h2>Icons</h2>
 {{ render_icon('suitcase2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suitcase2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suitcase2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sun/">
@@ -14636,7 +14636,7 @@ <h2>Icons</h2>
 {{ render_icon('sun', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sun</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sun</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sun-fill/">
@@ -14644,7 +14644,7 @@ <h2>Icons</h2>
 {{ render_icon('sun-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sun-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sun-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sunglasses/">
@@ -14652,7 +14652,7 @@ <h2>Icons</h2>
 {{ render_icon('sunglasses', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sunglasses</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sunglasses</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sunrise/">
@@ -14660,7 +14660,7 @@ <h2>Icons</h2>
 {{ render_icon('sunrise', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sunrise</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sunrise</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sunrise-fill/">
@@ -14668,7 +14668,7 @@ <h2>Icons</h2>
 {{ render_icon('sunrise-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sunrise-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sunrise-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sunset/">
@@ -14676,7 +14676,7 @@ <h2>Icons</h2>
 {{ render_icon('sunset', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sunset</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sunset</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sunset-fill/">
@@ -14684,7 +14684,7 @@ <h2>Icons</h2>
 {{ render_icon('sunset-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sunset-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sunset-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/superscript/">
@@ -14692,7 +14692,7 @@ <h2>Icons</h2>
 {{ render_icon('superscript', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">superscript</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">superscript</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/symmetry-horizontal/">
@@ -14700,7 +14700,7 @@ <h2>Icons</h2>
 {{ render_icon('symmetry-horizontal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">symmetry-horizontal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">symmetry-horizontal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/symmetry-vertical/">
@@ -14708,7 +14708,7 @@ <h2>Icons</h2>
 {{ render_icon('symmetry-vertical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">symmetry-vertical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">symmetry-vertical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/table/">
@@ -14716,7 +14716,7 @@ <h2>Icons</h2>
 {{ render_icon('table', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">table</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">table</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tablet/">
@@ -14724,7 +14724,7 @@ <h2>Icons</h2>
 {{ render_icon('tablet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tablet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tablet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tablet-fill/">
@@ -14732,7 +14732,7 @@ <h2>Icons</h2>
 {{ render_icon('tablet-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tablet-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tablet-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tablet-landscape/">
@@ -14740,7 +14740,7 @@ <h2>Icons</h2>
 {{ render_icon('tablet-landscape', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tablet-landscape</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tablet-landscape</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tablet-landscape-fill/">
@@ -14748,7 +14748,7 @@ <h2>Icons</h2>
 {{ render_icon('tablet-landscape-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tablet-landscape-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tablet-landscape-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tag/">
@@ -14756,7 +14756,7 @@ <h2>Icons</h2>
 {{ render_icon('tag', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tag</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tag</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tag-fill/">
@@ -14764,7 +14764,7 @@ <h2>Icons</h2>
 {{ render_icon('tag-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tag-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tag-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tags/">
@@ -14772,7 +14772,7 @@ <h2>Icons</h2>
 {{ render_icon('tags', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tags</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tags</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tags-fill/">
@@ -14780,7 +14780,7 @@ <h2>Icons</h2>
 {{ render_icon('tags-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tags-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tags-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/taxi-front/">
@@ -14788,7 +14788,7 @@ <h2>Icons</h2>
 {{ render_icon('taxi-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">taxi-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">taxi-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/taxi-front-fill/">
@@ -14796,7 +14796,7 @@ <h2>Icons</h2>
 {{ render_icon('taxi-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">taxi-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">taxi-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telegram/">
@@ -14804,7 +14804,7 @@ <h2>Icons</h2>
 {{ render_icon('telegram', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telegram</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telegram</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone/">
@@ -14812,7 +14812,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-fill/">
@@ -14820,7 +14820,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-forward/">
@@ -14828,7 +14828,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-forward', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-forward</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-forward</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-forward-fill/">
@@ -14836,7 +14836,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-forward-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-forward-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-forward-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-inbound/">
@@ -14844,7 +14844,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-inbound', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-inbound</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-inbound</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-inbound-fill/">
@@ -14852,7 +14852,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-inbound-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-inbound-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-inbound-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-minus/">
@@ -14860,7 +14860,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-minus-fill/">
@@ -14868,7 +14868,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-outbound/">
@@ -14876,7 +14876,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-outbound', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-outbound</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-outbound</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-outbound-fill/">
@@ -14884,7 +14884,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-outbound-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-outbound-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-outbound-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-plus/">
@@ -14892,7 +14892,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-plus-fill/">
@@ -14900,7 +14900,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-x/">
@@ -14908,7 +14908,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-x-fill/">
@@ -14916,7 +14916,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tencent-qq/">
@@ -14924,7 +14924,7 @@ <h2>Icons</h2>
 {{ render_icon('tencent-qq', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tencent-qq</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tencent-qq</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/terminal/">
@@ -14932,7 +14932,7 @@ <h2>Icons</h2>
 {{ render_icon('terminal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">terminal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">terminal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/terminal-dash/">
@@ -14940,7 +14940,7 @@ <h2>Icons</h2>
 {{ render_icon('terminal-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">terminal-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">terminal-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/terminal-fill/">
@@ -14948,7 +14948,7 @@ <h2>Icons</h2>
 {{ render_icon('terminal-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">terminal-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">terminal-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/terminal-plus/">
@@ -14956,7 +14956,7 @@ <h2>Icons</h2>
 {{ render_icon('terminal-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">terminal-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">terminal-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/terminal-split/">
@@ -14964,7 +14964,7 @@ <h2>Icons</h2>
 {{ render_icon('terminal-split', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">terminal-split</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">terminal-split</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/terminal-x/">
@@ -14972,7 +14972,7 @@ <h2>Icons</h2>
 {{ render_icon('terminal-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">terminal-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">terminal-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/text-center/">
@@ -14980,7 +14980,7 @@ <h2>Icons</h2>
 {{ render_icon('text-center', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">text-center</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">text-center</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/text-indent-left/">
@@ -14988,7 +14988,7 @@ <h2>Icons</h2>
 {{ render_icon('text-indent-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">text-indent-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">text-indent-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/text-indent-right/">
@@ -14996,7 +14996,7 @@ <h2>Icons</h2>
 {{ render_icon('text-indent-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">text-indent-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">text-indent-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/text-left/">
@@ -15004,7 +15004,7 @@ <h2>Icons</h2>
 {{ render_icon('text-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">text-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">text-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/text-paragraph/">
@@ -15012,7 +15012,7 @@ <h2>Icons</h2>
 {{ render_icon('text-paragraph', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">text-paragraph</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">text-paragraph</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/text-right/">
@@ -15020,7 +15020,7 @@ <h2>Icons</h2>
 {{ render_icon('text-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">text-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">text-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/text-wrap/">
@@ -15028,7 +15028,7 @@ <h2>Icons</h2>
 {{ render_icon('text-wrap', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">text-wrap</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">text-wrap</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/textarea/">
@@ -15036,7 +15036,7 @@ <h2>Icons</h2>
 {{ render_icon('textarea', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">textarea</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">textarea</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/textarea-resize/">
@@ -15044,7 +15044,7 @@ <h2>Icons</h2>
 {{ render_icon('textarea-resize', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">textarea-resize</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">textarea-resize</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/textarea-t/">
@@ -15052,7 +15052,7 @@ <h2>Icons</h2>
 {{ render_icon('textarea-t', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">textarea-t</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">textarea-t</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/thermometer/">
@@ -15060,7 +15060,7 @@ <h2>Icons</h2>
 {{ render_icon('thermometer', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">thermometer</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">thermometer</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/thermometer-half/">
@@ -15068,7 +15068,7 @@ <h2>Icons</h2>
 {{ render_icon('thermometer-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">thermometer-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">thermometer-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/thermometer-high/">
@@ -15076,7 +15076,7 @@ <h2>Icons</h2>
 {{ render_icon('thermometer-high', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">thermometer-high</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">thermometer-high</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/thermometer-low/">
@@ -15084,7 +15084,7 @@ <h2>Icons</h2>
 {{ render_icon('thermometer-low', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">thermometer-low</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">thermometer-low</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/thermometer-snow/">
@@ -15092,7 +15092,7 @@ <h2>Icons</h2>
 {{ render_icon('thermometer-snow', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">thermometer-snow</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">thermometer-snow</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/thermometer-sun/">
@@ -15100,7 +15100,7 @@ <h2>Icons</h2>
 {{ render_icon('thermometer-sun', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">thermometer-sun</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">thermometer-sun</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/threads/">
@@ -15108,7 +15108,7 @@ <h2>Icons</h2>
 {{ render_icon('threads', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">threads</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">threads</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/threads-fill/">
@@ -15116,7 +15116,7 @@ <h2>Icons</h2>
 {{ render_icon('threads-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">threads-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">threads-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/three-dots/">
@@ -15124,7 +15124,7 @@ <h2>Icons</h2>
 {{ render_icon('three-dots', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">three-dots</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">three-dots</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/three-dots-vertical/">
@@ -15132,7 +15132,7 @@ <h2>Icons</h2>
 {{ render_icon('three-dots-vertical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">three-dots-vertical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">three-dots-vertical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/thunderbolt/">
@@ -15140,7 +15140,7 @@ <h2>Icons</h2>
 {{ render_icon('thunderbolt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">thunderbolt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">thunderbolt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/thunderbolt-fill/">
@@ -15148,7 +15148,7 @@ <h2>Icons</h2>
 {{ render_icon('thunderbolt-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">thunderbolt-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">thunderbolt-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ticket/">
@@ -15156,7 +15156,7 @@ <h2>Icons</h2>
 {{ render_icon('ticket', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ticket</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ticket</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ticket-detailed/">
@@ -15164,7 +15164,7 @@ <h2>Icons</h2>
 {{ render_icon('ticket-detailed', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ticket-detailed</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ticket-detailed</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ticket-detailed-fill/">
@@ -15172,7 +15172,7 @@ <h2>Icons</h2>
 {{ render_icon('ticket-detailed-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ticket-detailed-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ticket-detailed-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ticket-fill/">
@@ -15180,7 +15180,7 @@ <h2>Icons</h2>
 {{ render_icon('ticket-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ticket-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ticket-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ticket-perforated/">
@@ -15188,7 +15188,7 @@ <h2>Icons</h2>
 {{ render_icon('ticket-perforated', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ticket-perforated</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ticket-perforated</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ticket-perforated-fill/">
@@ -15196,7 +15196,7 @@ <h2>Icons</h2>
 {{ render_icon('ticket-perforated-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ticket-perforated-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ticket-perforated-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tiktok/">
@@ -15204,7 +15204,7 @@ <h2>Icons</h2>
 {{ render_icon('tiktok', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tiktok</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tiktok</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/toggle-off/">
@@ -15212,7 +15212,7 @@ <h2>Icons</h2>
 {{ render_icon('toggle-off', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">toggle-off</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">toggle-off</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/toggle-on/">
@@ -15220,7 +15220,7 @@ <h2>Icons</h2>
 {{ render_icon('toggle-on', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">toggle-on</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">toggle-on</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/toggle2-off/">
@@ -15228,7 +15228,7 @@ <h2>Icons</h2>
 {{ render_icon('toggle2-off', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">toggle2-off</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">toggle2-off</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/toggle2-on/">
@@ -15236,7 +15236,7 @@ <h2>Icons</h2>
 {{ render_icon('toggle2-on', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">toggle2-on</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">toggle2-on</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/toggles/">
@@ -15244,7 +15244,7 @@ <h2>Icons</h2>
 {{ render_icon('toggles', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">toggles</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">toggles</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/toggles2/">
@@ -15252,7 +15252,7 @@ <h2>Icons</h2>
 {{ render_icon('toggles2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">toggles2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">toggles2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tools/">
@@ -15260,7 +15260,7 @@ <h2>Icons</h2>
 {{ render_icon('tools', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tools</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tools</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tornado/">
@@ -15268,7 +15268,7 @@ <h2>Icons</h2>
 {{ render_icon('tornado', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tornado</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tornado</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/train-freight-front/">
@@ -15276,7 +15276,7 @@ <h2>Icons</h2>
 {{ render_icon('train-freight-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">train-freight-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">train-freight-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/train-freight-front-fill/">
@@ -15284,7 +15284,7 @@ <h2>Icons</h2>
 {{ render_icon('train-freight-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">train-freight-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">train-freight-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/train-front/">
@@ -15292,7 +15292,7 @@ <h2>Icons</h2>
 {{ render_icon('train-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">train-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">train-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/train-front-fill/">
@@ -15300,7 +15300,7 @@ <h2>Icons</h2>
 {{ render_icon('train-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">train-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">train-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/train-lightrail-front/">
@@ -15308,7 +15308,7 @@ <h2>Icons</h2>
 {{ render_icon('train-lightrail-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">train-lightrail-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">train-lightrail-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/train-lightrail-front-fill/">
@@ -15316,7 +15316,7 @@ <h2>Icons</h2>
 {{ render_icon('train-lightrail-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">train-lightrail-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">train-lightrail-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/translate/">
@@ -15324,7 +15324,7 @@ <h2>Icons</h2>
 {{ render_icon('translate', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">translate</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">translate</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/transparency/">
@@ -15332,7 +15332,7 @@ <h2>Icons</h2>
 {{ render_icon('transparency', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">transparency</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">transparency</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trash/">
@@ -15340,7 +15340,7 @@ <h2>Icons</h2>
 {{ render_icon('trash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trash-fill/">
@@ -15348,7 +15348,7 @@ <h2>Icons</h2>
 {{ render_icon('trash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trash2/">
@@ -15356,7 +15356,7 @@ <h2>Icons</h2>
 {{ render_icon('trash2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trash2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trash2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trash2-fill/">
@@ -15364,7 +15364,7 @@ <h2>Icons</h2>
 {{ render_icon('trash2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trash2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trash2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trash3/">
@@ -15372,7 +15372,7 @@ <h2>Icons</h2>
 {{ render_icon('trash3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trash3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trash3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trash3-fill/">
@@ -15380,7 +15380,7 @@ <h2>Icons</h2>
 {{ render_icon('trash3-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trash3-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trash3-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tree/">
@@ -15388,7 +15388,7 @@ <h2>Icons</h2>
 {{ render_icon('tree', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tree</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tree</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tree-fill/">
@@ -15396,7 +15396,7 @@ <h2>Icons</h2>
 {{ render_icon('tree-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tree-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tree-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trello/">
@@ -15404,7 +15404,7 @@ <h2>Icons</h2>
 {{ render_icon('trello', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trello</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trello</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/triangle/">
@@ -15412,7 +15412,7 @@ <h2>Icons</h2>
 {{ render_icon('triangle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">triangle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">triangle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/triangle-fill/">
@@ -15420,7 +15420,7 @@ <h2>Icons</h2>
 {{ render_icon('triangle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">triangle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">triangle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/triangle-half/">
@@ -15428,7 +15428,7 @@ <h2>Icons</h2>
 {{ render_icon('triangle-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">triangle-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">triangle-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trophy/">
@@ -15436,7 +15436,7 @@ <h2>Icons</h2>
 {{ render_icon('trophy', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trophy</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trophy</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trophy-fill/">
@@ -15444,7 +15444,7 @@ <h2>Icons</h2>
 {{ render_icon('trophy-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trophy-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trophy-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tropical-storm/">
@@ -15452,7 +15452,7 @@ <h2>Icons</h2>
 {{ render_icon('tropical-storm', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tropical-storm</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tropical-storm</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/truck/">
@@ -15460,7 +15460,7 @@ <h2>Icons</h2>
 {{ render_icon('truck', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">truck</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">truck</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/truck-flatbed/">
@@ -15468,7 +15468,7 @@ <h2>Icons</h2>
 {{ render_icon('truck-flatbed', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">truck-flatbed</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">truck-flatbed</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/truck-front/">
@@ -15476,7 +15476,7 @@ <h2>Icons</h2>
 {{ render_icon('truck-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">truck-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">truck-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/truck-front-fill/">
@@ -15484,7 +15484,7 @@ <h2>Icons</h2>
 {{ render_icon('truck-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">truck-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">truck-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tsunami/">
@@ -15492,7 +15492,7 @@ <h2>Icons</h2>
 {{ render_icon('tsunami', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tsunami</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tsunami</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tv/">
@@ -15500,7 +15500,7 @@ <h2>Icons</h2>
 {{ render_icon('tv', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tv</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tv</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tv-fill/">
@@ -15508,7 +15508,7 @@ <h2>Icons</h2>
 {{ render_icon('tv-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tv-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tv-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/twitch/">
@@ -15516,7 +15516,7 @@ <h2>Icons</h2>
 {{ render_icon('twitch', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">twitch</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">twitch</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/twitter/">
@@ -15524,7 +15524,7 @@ <h2>Icons</h2>
 {{ render_icon('twitter', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">twitter</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">twitter</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/twitter-x/">
@@ -15532,7 +15532,7 @@ <h2>Icons</h2>
 {{ render_icon('twitter-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">twitter-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">twitter-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type/">
@@ -15540,7 +15540,7 @@ <h2>Icons</h2>
 {{ render_icon('type', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-bold/">
@@ -15548,7 +15548,7 @@ <h2>Icons</h2>
 {{ render_icon('type-bold', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-bold</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-bold</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-h1/">
@@ -15556,7 +15556,7 @@ <h2>Icons</h2>
 {{ render_icon('type-h1', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-h1</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-h1</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-h2/">
@@ -15564,7 +15564,7 @@ <h2>Icons</h2>
 {{ render_icon('type-h2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-h2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-h2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-h3/">
@@ -15572,7 +15572,7 @@ <h2>Icons</h2>
 {{ render_icon('type-h3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-h3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-h3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-h4/">
@@ -15580,7 +15580,7 @@ <h2>Icons</h2>
 {{ render_icon('type-h4', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-h4</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-h4</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-h5/">
@@ -15588,7 +15588,7 @@ <h2>Icons</h2>
 {{ render_icon('type-h5', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-h5</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-h5</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-h6/">
@@ -15596,7 +15596,7 @@ <h2>Icons</h2>
 {{ render_icon('type-h6', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-h6</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-h6</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-italic/">
@@ -15604,7 +15604,7 @@ <h2>Icons</h2>
 {{ render_icon('type-italic', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-italic</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-italic</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-strikethrough/">
@@ -15612,7 +15612,7 @@ <h2>Icons</h2>
 {{ render_icon('type-strikethrough', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-strikethrough</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-strikethrough</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-underline/">
@@ -15620,7 +15620,7 @@ <h2>Icons</h2>
 {{ render_icon('type-underline', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-underline</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-underline</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ubuntu/">
@@ -15628,7 +15628,7 @@ <h2>Icons</h2>
 {{ render_icon('ubuntu', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ubuntu</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ubuntu</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ui-checks/">
@@ -15636,7 +15636,7 @@ <h2>Icons</h2>
 {{ render_icon('ui-checks', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ui-checks</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ui-checks</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ui-checks-grid/">
@@ -15644,7 +15644,7 @@ <h2>Icons</h2>
 {{ render_icon('ui-checks-grid', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ui-checks-grid</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ui-checks-grid</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ui-radios/">
@@ -15652,7 +15652,7 @@ <h2>Icons</h2>
 {{ render_icon('ui-radios', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ui-radios</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ui-radios</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ui-radios-grid/">
@@ -15660,7 +15660,7 @@ <h2>Icons</h2>
 {{ render_icon('ui-radios-grid', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ui-radios-grid</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ui-radios-grid</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/umbrella/">
@@ -15668,7 +15668,7 @@ <h2>Icons</h2>
 {{ render_icon('umbrella', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">umbrella</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">umbrella</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/umbrella-fill/">
@@ -15676,7 +15676,7 @@ <h2>Icons</h2>
 {{ render_icon('umbrella-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">umbrella-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">umbrella-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/unindent/">
@@ -15684,7 +15684,7 @@ <h2>Icons</h2>
 {{ render_icon('unindent', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">unindent</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">unindent</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/union/">
@@ -15692,7 +15692,7 @@ <h2>Icons</h2>
 {{ render_icon('union', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">union</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">union</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/unity/">
@@ -15700,7 +15700,7 @@ <h2>Icons</h2>
 {{ render_icon('unity', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">unity</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">unity</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/universal-access/">
@@ -15708,7 +15708,7 @@ <h2>Icons</h2>
 {{ render_icon('universal-access', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">universal-access</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">universal-access</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/universal-access-circle/">
@@ -15716,7 +15716,7 @@ <h2>Icons</h2>
 {{ render_icon('universal-access-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">universal-access-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">universal-access-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/unlock/">
@@ -15724,7 +15724,7 @@ <h2>Icons</h2>
 {{ render_icon('unlock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">unlock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">unlock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/unlock-fill/">
@@ -15732,7 +15732,7 @@ <h2>Icons</h2>
 {{ render_icon('unlock-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">unlock-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">unlock-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/upc/">
@@ -15740,7 +15740,7 @@ <h2>Icons</h2>
 {{ render_icon('upc', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">upc</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">upc</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/upc-scan/">
@@ -15748,7 +15748,7 @@ <h2>Icons</h2>
 {{ render_icon('upc-scan', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">upc-scan</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">upc-scan</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/upload/">
@@ -15756,7 +15756,7 @@ <h2>Icons</h2>
 {{ render_icon('upload', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">upload</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">upload</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb/">
@@ -15764,7 +15764,7 @@ <h2>Icons</h2>
 {{ render_icon('usb', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-c/">
@@ -15772,7 +15772,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-c', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-c</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-c</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-c-fill/">
@@ -15780,7 +15780,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-c-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-c-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-c-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-drive/">
@@ -15788,7 +15788,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-drive', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-drive</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-drive</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-drive-fill/">
@@ -15796,7 +15796,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-drive-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-drive-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-drive-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-fill/">
@@ -15804,7 +15804,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-micro/">
@@ -15812,7 +15812,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-micro', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-micro</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-micro</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-micro-fill/">
@@ -15820,7 +15820,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-micro-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-micro-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-micro-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-mini/">
@@ -15828,7 +15828,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-mini', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-mini</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-mini</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-mini-fill/">
@@ -15836,7 +15836,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-mini-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-mini-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-mini-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-plug/">
@@ -15844,7 +15844,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-plug', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-plug</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-plug</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-plug-fill/">
@@ -15852,7 +15852,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-plug-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-plug-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-plug-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-symbol/">
@@ -15860,7 +15860,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-symbol', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-symbol</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-symbol</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/valentine/">
@@ -15868,7 +15868,7 @@ <h2>Icons</h2>
 {{ render_icon('valentine', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">valentine</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">valentine</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/valentine2/">
@@ -15876,7 +15876,7 @@ <h2>Icons</h2>
 {{ render_icon('valentine2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">valentine2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">valentine2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/vector-pen/">
@@ -15884,7 +15884,7 @@ <h2>Icons</h2>
 {{ render_icon('vector-pen', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">vector-pen</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">vector-pen</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/view-list/">
@@ -15892,7 +15892,7 @@ <h2>Icons</h2>
 {{ render_icon('view-list', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">view-list</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">view-list</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/view-stacked/">
@@ -15900,7 +15900,7 @@ <h2>Icons</h2>
 {{ render_icon('view-stacked', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">view-stacked</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">view-stacked</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/vignette/">
@@ -15908,7 +15908,7 @@ <h2>Icons</h2>
 {{ render_icon('vignette', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">vignette</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">vignette</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/vimeo/">
@@ -15916,7 +15916,7 @@ <h2>Icons</h2>
 {{ render_icon('vimeo', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">vimeo</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">vimeo</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/vinyl/">
@@ -15924,7 +15924,7 @@ <h2>Icons</h2>
 {{ render_icon('vinyl', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">vinyl</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">vinyl</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/vinyl-fill/">
@@ -15932,7 +15932,7 @@ <h2>Icons</h2>
 {{ render_icon('vinyl-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">vinyl-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">vinyl-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/virus/">
@@ -15940,7 +15940,7 @@ <h2>Icons</h2>
 {{ render_icon('virus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">virus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">virus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/virus2/">
@@ -15948,7 +15948,7 @@ <h2>Icons</h2>
 {{ render_icon('virus2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">virus2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">virus2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/voicemail/">
@@ -15956,7 +15956,7 @@ <h2>Icons</h2>
 {{ render_icon('voicemail', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">voicemail</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">voicemail</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/volume-down/">
@@ -15964,7 +15964,7 @@ <h2>Icons</h2>
 {{ render_icon('volume-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">volume-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">volume-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/volume-down-fill/">
@@ -15972,7 +15972,7 @@ <h2>Icons</h2>
 {{ render_icon('volume-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">volume-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">volume-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/volume-mute/">
@@ -15980,7 +15980,7 @@ <h2>Icons</h2>
 {{ render_icon('volume-mute', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">volume-mute</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">volume-mute</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/volume-mute-fill/">
@@ -15988,7 +15988,7 @@ <h2>Icons</h2>
 {{ render_icon('volume-mute-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">volume-mute-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">volume-mute-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/volume-off/">
@@ -15996,7 +15996,7 @@ <h2>Icons</h2>
 {{ render_icon('volume-off', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">volume-off</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">volume-off</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/volume-off-fill/">
@@ -16004,7 +16004,7 @@ <h2>Icons</h2>
 {{ render_icon('volume-off-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">volume-off-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">volume-off-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/volume-up/">
@@ -16012,7 +16012,7 @@ <h2>Icons</h2>
 {{ render_icon('volume-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">volume-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">volume-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/volume-up-fill/">
@@ -16020,7 +16020,7 @@ <h2>Icons</h2>
 {{ render_icon('volume-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">volume-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">volume-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/vr/">
@@ -16028,7 +16028,7 @@ <h2>Icons</h2>
 {{ render_icon('vr', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">vr</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">vr</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wallet/">
@@ -16036,7 +16036,7 @@ <h2>Icons</h2>
 {{ render_icon('wallet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wallet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wallet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wallet-fill/">
@@ -16044,7 +16044,7 @@ <h2>Icons</h2>
 {{ render_icon('wallet-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wallet-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wallet-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wallet2/">
@@ -16052,7 +16052,7 @@ <h2>Icons</h2>
 {{ render_icon('wallet2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wallet2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wallet2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/watch/">
@@ -16060,7 +16060,7 @@ <h2>Icons</h2>
 {{ render_icon('watch', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">watch</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">watch</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/water/">
@@ -16068,7 +16068,7 @@ <h2>Icons</h2>
 {{ render_icon('water', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">water</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">water</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/webcam/">
@@ -16076,7 +16076,7 @@ <h2>Icons</h2>
 {{ render_icon('webcam', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">webcam</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">webcam</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/webcam-fill/">
@@ -16084,7 +16084,7 @@ <h2>Icons</h2>
 {{ render_icon('webcam-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">webcam-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">webcam-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wechat/">
@@ -16092,7 +16092,7 @@ <h2>Icons</h2>
 {{ render_icon('wechat', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wechat</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wechat</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/whatsapp/">
@@ -16100,7 +16100,7 @@ <h2>Icons</h2>
 {{ render_icon('whatsapp', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">whatsapp</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">whatsapp</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wifi/">
@@ -16108,7 +16108,7 @@ <h2>Icons</h2>
 {{ render_icon('wifi', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wifi</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wifi</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wifi-1/">
@@ -16116,7 +16116,7 @@ <h2>Icons</h2>
 {{ render_icon('wifi-1', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wifi-1</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wifi-1</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wifi-2/">
@@ -16124,7 +16124,7 @@ <h2>Icons</h2>
 {{ render_icon('wifi-2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wifi-2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wifi-2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wifi-off/">
@@ -16132,7 +16132,7 @@ <h2>Icons</h2>
 {{ render_icon('wifi-off', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wifi-off</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wifi-off</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wikipedia/">
@@ -16140,7 +16140,7 @@ <h2>Icons</h2>
 {{ render_icon('wikipedia', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wikipedia</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wikipedia</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wind/">
@@ -16148,7 +16148,7 @@ <h2>Icons</h2>
 {{ render_icon('wind', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wind</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wind</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window/">
@@ -16156,7 +16156,7 @@ <h2>Icons</h2>
 {{ render_icon('window', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-dash/">
@@ -16164,7 +16164,7 @@ <h2>Icons</h2>
 {{ render_icon('window-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-desktop/">
@@ -16172,7 +16172,7 @@ <h2>Icons</h2>
 {{ render_icon('window-desktop', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-desktop</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-desktop</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-dock/">
@@ -16180,7 +16180,7 @@ <h2>Icons</h2>
 {{ render_icon('window-dock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-dock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-dock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-fullscreen/">
@@ -16188,7 +16188,7 @@ <h2>Icons</h2>
 {{ render_icon('window-fullscreen', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-fullscreen</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-fullscreen</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-plus/">
@@ -16196,7 +16196,7 @@ <h2>Icons</h2>
 {{ render_icon('window-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-sidebar/">
@@ -16204,7 +16204,7 @@ <h2>Icons</h2>
 {{ render_icon('window-sidebar', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-sidebar</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-sidebar</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-split/">
@@ -16212,7 +16212,7 @@ <h2>Icons</h2>
 {{ render_icon('window-split', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-split</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-split</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-stack/">
@@ -16220,7 +16220,7 @@ <h2>Icons</h2>
 {{ render_icon('window-stack', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-stack</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-stack</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-x/">
@@ -16228,7 +16228,7 @@ <h2>Icons</h2>
 {{ render_icon('window-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/windows/">
@@ -16236,7 +16236,7 @@ <h2>Icons</h2>
 {{ render_icon('windows', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">windows</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">windows</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wordpress/">
@@ -16244,7 +16244,7 @@ <h2>Icons</h2>
 {{ render_icon('wordpress', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wordpress</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wordpress</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wrench/">
@@ -16252,7 +16252,7 @@ <h2>Icons</h2>
 {{ render_icon('wrench', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wrench</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wrench</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wrench-adjustable/">
@@ -16260,7 +16260,7 @@ <h2>Icons</h2>
 {{ render_icon('wrench-adjustable', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wrench-adjustable</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wrench-adjustable</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wrench-adjustable-circle/">
@@ -16268,7 +16268,7 @@ <h2>Icons</h2>
 {{ render_icon('wrench-adjustable-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wrench-adjustable-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wrench-adjustable-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wrench-adjustable-circle-fill/">
@@ -16276,7 +16276,7 @@ <h2>Icons</h2>
 {{ render_icon('wrench-adjustable-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wrench-adjustable-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wrench-adjustable-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x/">
@@ -16284,7 +16284,7 @@ <h2>Icons</h2>
 {{ render_icon('x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-circle/">
@@ -16292,7 +16292,7 @@ <h2>Icons</h2>
 {{ render_icon('x-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-circle-fill/">
@@ -16300,7 +16300,7 @@ <h2>Icons</h2>
 {{ render_icon('x-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-diamond/">
@@ -16308,7 +16308,7 @@ <h2>Icons</h2>
 {{ render_icon('x-diamond', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-diamond</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-diamond</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-diamond-fill/">
@@ -16316,7 +16316,7 @@ <h2>Icons</h2>
 {{ render_icon('x-diamond-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-diamond-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-diamond-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-lg/">
@@ -16324,7 +16324,7 @@ <h2>Icons</h2>
 {{ render_icon('x-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-octagon/">
@@ -16332,7 +16332,7 @@ <h2>Icons</h2>
 {{ render_icon('x-octagon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-octagon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-octagon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-octagon-fill/">
@@ -16340,7 +16340,7 @@ <h2>Icons</h2>
 {{ render_icon('x-octagon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-octagon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-octagon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-square/">
@@ -16348,7 +16348,7 @@ <h2>Icons</h2>
 {{ render_icon('x-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-square-fill/">
@@ -16356,7 +16356,7 @@ <h2>Icons</h2>
 {{ render_icon('x-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/xbox/">
@@ -16364,7 +16364,7 @@ <h2>Icons</h2>
 {{ render_icon('xbox', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">xbox</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">xbox</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/yelp/">
@@ -16372,7 +16372,7 @@ <h2>Icons</h2>
 {{ render_icon('yelp', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">yelp</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">yelp</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/yin-yang/">
@@ -16380,7 +16380,7 @@ <h2>Icons</h2>
 {{ render_icon('yin-yang', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">yin-yang</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">yin-yang</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/youtube/">
@@ -16388,7 +16388,7 @@ <h2>Icons</h2>
 {{ render_icon('youtube', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">youtube</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">youtube</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/zoom-in/">
@@ -16396,7 +16396,7 @@ <h2>Icons</h2>
 {{ render_icon('zoom-in', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">zoom-in</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">zoom-in</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/zoom-out/">
@@ -16404,7 +16404,7 @@ <h2>Icons</h2>
 {{ render_icon('zoom-out', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">zoom-out</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">zoom-out</div>
 </li>
 </ul>
 <p>This is a total of 2050 icons.</p>
diff --git a/examples/bootstrap5/templates/icons.html b/examples/bootstrap5/templates/icons.html
index 41cb13e8..d98cf3b1 100644
--- a/examples/bootstrap5/templates/icons.html
+++ b/examples/bootstrap5/templates/icons.html
@@ -12,7 +12,7 @@ <h2>Icons</h2>
 {{ render_icon('0-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">0-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">0-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/0-circle-fill/">
@@ -20,7 +20,7 @@ <h2>Icons</h2>
 {{ render_icon('0-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">0-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">0-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/0-square/">
@@ -28,7 +28,7 @@ <h2>Icons</h2>
 {{ render_icon('0-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">0-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">0-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/0-square-fill/">
@@ -36,7 +36,7 @@ <h2>Icons</h2>
 {{ render_icon('0-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">0-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">0-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/1-circle/">
@@ -44,7 +44,7 @@ <h2>Icons</h2>
 {{ render_icon('1-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">1-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">1-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/1-circle-fill/">
@@ -52,7 +52,7 @@ <h2>Icons</h2>
 {{ render_icon('1-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">1-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">1-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/1-square/">
@@ -60,7 +60,7 @@ <h2>Icons</h2>
 {{ render_icon('1-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">1-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">1-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/1-square-fill/">
@@ -68,7 +68,7 @@ <h2>Icons</h2>
 {{ render_icon('1-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">1-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">1-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/123/">
@@ -76,7 +76,7 @@ <h2>Icons</h2>
 {{ render_icon('123', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">123</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">123</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/2-circle/">
@@ -84,7 +84,7 @@ <h2>Icons</h2>
 {{ render_icon('2-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">2-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">2-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/2-circle-fill/">
@@ -92,7 +92,7 @@ <h2>Icons</h2>
 {{ render_icon('2-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">2-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">2-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/2-square/">
@@ -100,7 +100,7 @@ <h2>Icons</h2>
 {{ render_icon('2-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">2-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">2-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/2-square-fill/">
@@ -108,7 +108,7 @@ <h2>Icons</h2>
 {{ render_icon('2-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">2-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">2-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/3-circle/">
@@ -116,7 +116,7 @@ <h2>Icons</h2>
 {{ render_icon('3-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">3-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">3-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/3-circle-fill/">
@@ -124,7 +124,7 @@ <h2>Icons</h2>
 {{ render_icon('3-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">3-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">3-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/3-square/">
@@ -132,7 +132,7 @@ <h2>Icons</h2>
 {{ render_icon('3-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">3-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">3-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/3-square-fill/">
@@ -140,7 +140,7 @@ <h2>Icons</h2>
 {{ render_icon('3-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">3-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">3-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/4-circle/">
@@ -148,7 +148,7 @@ <h2>Icons</h2>
 {{ render_icon('4-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">4-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">4-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/4-circle-fill/">
@@ -156,7 +156,7 @@ <h2>Icons</h2>
 {{ render_icon('4-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">4-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">4-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/4-square/">
@@ -164,7 +164,7 @@ <h2>Icons</h2>
 {{ render_icon('4-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">4-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">4-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/4-square-fill/">
@@ -172,7 +172,7 @@ <h2>Icons</h2>
 {{ render_icon('4-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">4-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">4-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/5-circle/">
@@ -180,7 +180,7 @@ <h2>Icons</h2>
 {{ render_icon('5-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">5-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">5-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/5-circle-fill/">
@@ -188,7 +188,7 @@ <h2>Icons</h2>
 {{ render_icon('5-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">5-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">5-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/5-square/">
@@ -196,7 +196,7 @@ <h2>Icons</h2>
 {{ render_icon('5-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">5-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">5-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/5-square-fill/">
@@ -204,7 +204,7 @@ <h2>Icons</h2>
 {{ render_icon('5-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">5-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">5-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/6-circle/">
@@ -212,7 +212,7 @@ <h2>Icons</h2>
 {{ render_icon('6-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">6-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">6-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/6-circle-fill/">
@@ -220,7 +220,7 @@ <h2>Icons</h2>
 {{ render_icon('6-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">6-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">6-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/6-square/">
@@ -228,7 +228,7 @@ <h2>Icons</h2>
 {{ render_icon('6-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">6-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">6-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/6-square-fill/">
@@ -236,7 +236,7 @@ <h2>Icons</h2>
 {{ render_icon('6-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">6-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">6-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/7-circle/">
@@ -244,7 +244,7 @@ <h2>Icons</h2>
 {{ render_icon('7-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">7-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">7-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/7-circle-fill/">
@@ -252,7 +252,7 @@ <h2>Icons</h2>
 {{ render_icon('7-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">7-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">7-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/7-square/">
@@ -260,7 +260,7 @@ <h2>Icons</h2>
 {{ render_icon('7-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">7-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">7-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/7-square-fill/">
@@ -268,7 +268,7 @@ <h2>Icons</h2>
 {{ render_icon('7-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">7-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">7-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/8-circle/">
@@ -276,7 +276,7 @@ <h2>Icons</h2>
 {{ render_icon('8-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">8-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">8-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/8-circle-fill/">
@@ -284,7 +284,7 @@ <h2>Icons</h2>
 {{ render_icon('8-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">8-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">8-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/8-square/">
@@ -292,7 +292,7 @@ <h2>Icons</h2>
 {{ render_icon('8-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">8-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">8-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/8-square-fill/">
@@ -300,7 +300,7 @@ <h2>Icons</h2>
 {{ render_icon('8-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">8-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">8-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/9-circle/">
@@ -308,7 +308,7 @@ <h2>Icons</h2>
 {{ render_icon('9-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">9-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">9-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/9-circle-fill/">
@@ -316,7 +316,7 @@ <h2>Icons</h2>
 {{ render_icon('9-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">9-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">9-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/9-square/">
@@ -324,7 +324,7 @@ <h2>Icons</h2>
 {{ render_icon('9-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">9-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">9-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/9-square-fill/">
@@ -332,7 +332,7 @@ <h2>Icons</h2>
 {{ render_icon('9-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">9-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">9-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/activity/">
@@ -340,7 +340,7 @@ <h2>Icons</h2>
 {{ render_icon('activity', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">activity</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">activity</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/airplane/">
@@ -348,7 +348,7 @@ <h2>Icons</h2>
 {{ render_icon('airplane', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">airplane</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">airplane</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/airplane-engines/">
@@ -356,7 +356,7 @@ <h2>Icons</h2>
 {{ render_icon('airplane-engines', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">airplane-engines</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">airplane-engines</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/airplane-engines-fill/">
@@ -364,7 +364,7 @@ <h2>Icons</h2>
 {{ render_icon('airplane-engines-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">airplane-engines-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">airplane-engines-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/airplane-fill/">
@@ -372,7 +372,7 @@ <h2>Icons</h2>
 {{ render_icon('airplane-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">airplane-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">airplane-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/alarm/">
@@ -380,7 +380,7 @@ <h2>Icons</h2>
 {{ render_icon('alarm', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">alarm</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">alarm</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/alarm-fill/">
@@ -388,7 +388,7 @@ <h2>Icons</h2>
 {{ render_icon('alarm-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">alarm-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">alarm-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/alexa/">
@@ -396,7 +396,7 @@ <h2>Icons</h2>
 {{ render_icon('alexa', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">alexa</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">alexa</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/align-bottom/">
@@ -404,7 +404,7 @@ <h2>Icons</h2>
 {{ render_icon('align-bottom', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">align-bottom</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">align-bottom</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/align-center/">
@@ -412,7 +412,7 @@ <h2>Icons</h2>
 {{ render_icon('align-center', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">align-center</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">align-center</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/align-end/">
@@ -420,7 +420,7 @@ <h2>Icons</h2>
 {{ render_icon('align-end', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">align-end</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">align-end</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/align-middle/">
@@ -428,7 +428,7 @@ <h2>Icons</h2>
 {{ render_icon('align-middle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">align-middle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">align-middle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/align-start/">
@@ -436,7 +436,7 @@ <h2>Icons</h2>
 {{ render_icon('align-start', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">align-start</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">align-start</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/align-top/">
@@ -444,7 +444,7 @@ <h2>Icons</h2>
 {{ render_icon('align-top', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">align-top</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">align-top</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/alipay/">
@@ -452,7 +452,7 @@ <h2>Icons</h2>
 {{ render_icon('alipay', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">alipay</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">alipay</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/alphabet/">
@@ -460,7 +460,7 @@ <h2>Icons</h2>
 {{ render_icon('alphabet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">alphabet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">alphabet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/alphabet-uppercase/">
@@ -468,7 +468,7 @@ <h2>Icons</h2>
 {{ render_icon('alphabet-uppercase', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">alphabet-uppercase</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">alphabet-uppercase</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/alt/">
@@ -476,7 +476,7 @@ <h2>Icons</h2>
 {{ render_icon('alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/amazon/">
@@ -484,7 +484,7 @@ <h2>Icons</h2>
 {{ render_icon('amazon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">amazon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">amazon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/amd/">
@@ -492,7 +492,7 @@ <h2>Icons</h2>
 {{ render_icon('amd', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">amd</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">amd</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/android/">
@@ -500,7 +500,7 @@ <h2>Icons</h2>
 {{ render_icon('android', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">android</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">android</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/android2/">
@@ -508,7 +508,7 @@ <h2>Icons</h2>
 {{ render_icon('android2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">android2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">android2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/app/">
@@ -516,7 +516,7 @@ <h2>Icons</h2>
 {{ render_icon('app', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">app</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">app</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/app-indicator/">
@@ -524,7 +524,7 @@ <h2>Icons</h2>
 {{ render_icon('app-indicator', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">app-indicator</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">app-indicator</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/apple/">
@@ -532,7 +532,7 @@ <h2>Icons</h2>
 {{ render_icon('apple', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">apple</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">apple</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/archive/">
@@ -540,7 +540,7 @@ <h2>Icons</h2>
 {{ render_icon('archive', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">archive</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">archive</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/archive-fill/">
@@ -548,7 +548,7 @@ <h2>Icons</h2>
 {{ render_icon('archive-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">archive-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">archive-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-90deg-down/">
@@ -556,7 +556,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-90deg-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-90deg-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-90deg-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-90deg-left/">
@@ -564,7 +564,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-90deg-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-90deg-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-90deg-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-90deg-right/">
@@ -572,7 +572,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-90deg-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-90deg-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-90deg-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-90deg-up/">
@@ -580,7 +580,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-90deg-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-90deg-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-90deg-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-bar-down/">
@@ -588,7 +588,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-bar-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-bar-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-bar-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-bar-left/">
@@ -596,7 +596,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-bar-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-bar-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-bar-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-bar-right/">
@@ -604,7 +604,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-bar-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-bar-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-bar-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-bar-up/">
@@ -612,7 +612,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-bar-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-bar-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-bar-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-clockwise/">
@@ -620,7 +620,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-clockwise', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-clockwise</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-clockwise</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-counterclockwise/">
@@ -628,7 +628,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-counterclockwise', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-counterclockwise</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-counterclockwise</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down/">
@@ -636,7 +636,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-circle/">
@@ -644,7 +644,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-circle-fill/">
@@ -652,7 +652,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-left/">
@@ -660,7 +660,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-left-circle/">
@@ -668,7 +668,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-left-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-left-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-left-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-left-circle-fill/">
@@ -676,7 +676,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-left-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-left-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-left-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-left-square/">
@@ -684,7 +684,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-left-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-left-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-left-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-left-square-fill/">
@@ -692,7 +692,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-left-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-left-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-left-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-right/">
@@ -700,7 +700,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-right-circle/">
@@ -708,7 +708,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-right-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-right-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-right-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-right-circle-fill/">
@@ -716,7 +716,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-right-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-right-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-right-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-right-square/">
@@ -724,7 +724,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-right-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-right-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-right-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-right-square-fill/">
@@ -732,7 +732,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-right-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-right-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-right-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-short/">
@@ -740,7 +740,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-short', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-short</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-short</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-square/">
@@ -748,7 +748,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-square-fill/">
@@ -756,7 +756,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-down-up/">
@@ -764,7 +764,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-down-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-down-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-down-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-left/">
@@ -772,7 +772,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-left-circle/">
@@ -780,7 +780,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-left-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-left-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-left-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-left-circle-fill/">
@@ -788,7 +788,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-left-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-left-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-left-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-left-right/">
@@ -796,7 +796,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-left-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-left-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-left-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-left-short/">
@@ -804,7 +804,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-left-short', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-left-short</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-left-short</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-left-square/">
@@ -812,7 +812,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-left-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-left-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-left-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-left-square-fill/">
@@ -820,7 +820,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-left-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-left-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-left-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-repeat/">
@@ -828,7 +828,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-repeat', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-repeat</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-repeat</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-return-left/">
@@ -836,7 +836,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-return-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-return-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-return-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-return-right/">
@@ -844,7 +844,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-return-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-return-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-return-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-right/">
@@ -852,7 +852,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-right-circle/">
@@ -860,7 +860,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-right-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-right-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-right-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-right-circle-fill/">
@@ -868,7 +868,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-right-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-right-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-right-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-right-short/">
@@ -876,7 +876,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-right-short', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-right-short</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-right-short</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-right-square/">
@@ -884,7 +884,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-right-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-right-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-right-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-right-square-fill/">
@@ -892,7 +892,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-right-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-right-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-right-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-through-heart/">
@@ -900,7 +900,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-through-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-through-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-through-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-through-heart-fill/">
@@ -908,7 +908,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-through-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-through-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-through-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up/">
@@ -916,7 +916,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-circle/">
@@ -924,7 +924,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-circle-fill/">
@@ -932,7 +932,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-left/">
@@ -940,7 +940,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-left-circle/">
@@ -948,7 +948,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-left-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-left-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-left-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-left-circle-fill/">
@@ -956,7 +956,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-left-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-left-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-left-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-left-square/">
@@ -964,7 +964,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-left-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-left-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-left-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-left-square-fill/">
@@ -972,7 +972,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-left-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-left-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-left-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-right/">
@@ -980,7 +980,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-right-circle/">
@@ -988,7 +988,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-right-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-right-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-right-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-right-circle-fill/">
@@ -996,7 +996,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-right-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-right-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-right-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-right-square/">
@@ -1004,7 +1004,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-right-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-right-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-right-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-right-square-fill/">
@@ -1012,7 +1012,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-right-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-right-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-right-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-short/">
@@ -1020,7 +1020,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-short', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-short</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-short</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-square/">
@@ -1028,7 +1028,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrow-up-square-fill/">
@@ -1036,7 +1036,7 @@ <h2>Icons</h2>
 {{ render_icon('arrow-up-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrow-up-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrow-up-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows/">
@@ -1044,7 +1044,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-angle-contract/">
@@ -1052,7 +1052,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-angle-contract', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-angle-contract</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-angle-contract</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-angle-expand/">
@@ -1060,7 +1060,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-angle-expand', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-angle-expand</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-angle-expand</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-collapse/">
@@ -1068,7 +1068,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-collapse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-collapse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-collapse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-collapse-vertical/">
@@ -1076,7 +1076,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-collapse-vertical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-collapse-vertical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-collapse-vertical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-expand/">
@@ -1084,7 +1084,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-expand', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-expand</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-expand</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-expand-vertical/">
@@ -1092,7 +1092,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-expand-vertical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-expand-vertical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-expand-vertical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-fullscreen/">
@@ -1100,7 +1100,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-fullscreen', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-fullscreen</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-fullscreen</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-move/">
@@ -1108,7 +1108,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-move', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-move</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-move</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/arrows-vertical/">
@@ -1116,7 +1116,7 @@ <h2>Icons</h2>
 {{ render_icon('arrows-vertical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">arrows-vertical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">arrows-vertical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/aspect-ratio/">
@@ -1124,7 +1124,7 @@ <h2>Icons</h2>
 {{ render_icon('aspect-ratio', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">aspect-ratio</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">aspect-ratio</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/aspect-ratio-fill/">
@@ -1132,7 +1132,7 @@ <h2>Icons</h2>
 {{ render_icon('aspect-ratio-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">aspect-ratio-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">aspect-ratio-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/asterisk/">
@@ -1140,7 +1140,7 @@ <h2>Icons</h2>
 {{ render_icon('asterisk', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">asterisk</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">asterisk</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/at/">
@@ -1148,7 +1148,7 @@ <h2>Icons</h2>
 {{ render_icon('at', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">at</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">at</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/award/">
@@ -1156,7 +1156,7 @@ <h2>Icons</h2>
 {{ render_icon('award', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">award</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">award</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/award-fill/">
@@ -1164,7 +1164,7 @@ <h2>Icons</h2>
 {{ render_icon('award-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">award-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">award-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/back/">
@@ -1172,7 +1172,7 @@ <h2>Icons</h2>
 {{ render_icon('back', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">back</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">back</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backpack/">
@@ -1180,7 +1180,7 @@ <h2>Icons</h2>
 {{ render_icon('backpack', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backpack</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backpack</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backpack-fill/">
@@ -1188,7 +1188,7 @@ <h2>Icons</h2>
 {{ render_icon('backpack-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backpack-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backpack-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backpack2/">
@@ -1196,7 +1196,7 @@ <h2>Icons</h2>
 {{ render_icon('backpack2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backpack2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backpack2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backpack2-fill/">
@@ -1204,7 +1204,7 @@ <h2>Icons</h2>
 {{ render_icon('backpack2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backpack2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backpack2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backpack3/">
@@ -1212,7 +1212,7 @@ <h2>Icons</h2>
 {{ render_icon('backpack3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backpack3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backpack3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backpack3-fill/">
@@ -1220,7 +1220,7 @@ <h2>Icons</h2>
 {{ render_icon('backpack3-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backpack3-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backpack3-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backpack4/">
@@ -1228,7 +1228,7 @@ <h2>Icons</h2>
 {{ render_icon('backpack4', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backpack4</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backpack4</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backpack4-fill/">
@@ -1236,7 +1236,7 @@ <h2>Icons</h2>
 {{ render_icon('backpack4-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backpack4-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backpack4-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backspace/">
@@ -1244,7 +1244,7 @@ <h2>Icons</h2>
 {{ render_icon('backspace', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backspace</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backspace</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backspace-fill/">
@@ -1252,7 +1252,7 @@ <h2>Icons</h2>
 {{ render_icon('backspace-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backspace-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backspace-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backspace-reverse/">
@@ -1260,7 +1260,7 @@ <h2>Icons</h2>
 {{ render_icon('backspace-reverse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backspace-reverse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backspace-reverse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/backspace-reverse-fill/">
@@ -1268,7 +1268,7 @@ <h2>Icons</h2>
 {{ render_icon('backspace-reverse-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">backspace-reverse-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">backspace-reverse-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-3d/">
@@ -1276,7 +1276,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-3d', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-3d</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-3d</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-3d-fill/">
@@ -1284,7 +1284,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-3d-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-3d-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-3d-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-4k/">
@@ -1292,7 +1292,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-4k', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-4k</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-4k</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-4k-fill/">
@@ -1300,7 +1300,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-4k-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-4k-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-4k-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-8k/">
@@ -1308,7 +1308,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-8k', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-8k</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-8k</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-8k-fill/">
@@ -1316,7 +1316,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-8k-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-8k-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-8k-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-ad/">
@@ -1324,7 +1324,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-ad', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-ad</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-ad</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-ad-fill/">
@@ -1332,7 +1332,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-ad-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-ad-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-ad-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-ar/">
@@ -1340,7 +1340,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-ar', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-ar</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-ar</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-ar-fill/">
@@ -1348,7 +1348,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-ar-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-ar-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-ar-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-cc/">
@@ -1356,7 +1356,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-cc', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-cc</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-cc</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-cc-fill/">
@@ -1364,7 +1364,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-cc-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-cc-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-cc-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-hd/">
@@ -1372,7 +1372,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-hd', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-hd</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-hd</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-hd-fill/">
@@ -1380,7 +1380,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-hd-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-hd-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-hd-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-sd/">
@@ -1388,7 +1388,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-sd', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-sd</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-sd</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-sd-fill/">
@@ -1396,7 +1396,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-sd-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-sd-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-sd-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-tm/">
@@ -1404,7 +1404,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-tm', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-tm</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-tm</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-tm-fill/">
@@ -1412,7 +1412,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-tm-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-tm-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-tm-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-vo/">
@@ -1420,7 +1420,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-vo', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-vo</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-vo</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-vo-fill/">
@@ -1428,7 +1428,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-vo-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-vo-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-vo-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-vr/">
@@ -1436,7 +1436,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-vr', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-vr</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-vr</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-vr-fill/">
@@ -1444,7 +1444,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-vr-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-vr-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-vr-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-wc/">
@@ -1452,7 +1452,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-wc', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-wc</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-wc</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/badge-wc-fill/">
@@ -1460,7 +1460,7 @@ <h2>Icons</h2>
 {{ render_icon('badge-wc-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">badge-wc-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">badge-wc-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag/">
@@ -1468,7 +1468,7 @@ <h2>Icons</h2>
 {{ render_icon('bag', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-check/">
@@ -1476,7 +1476,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-check-fill/">
@@ -1484,7 +1484,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-dash/">
@@ -1492,7 +1492,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-dash-fill/">
@@ -1500,7 +1500,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-dash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-dash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-dash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-fill/">
@@ -1508,7 +1508,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-heart/">
@@ -1516,7 +1516,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-heart-fill/">
@@ -1524,7 +1524,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-plus/">
@@ -1532,7 +1532,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-plus-fill/">
@@ -1540,7 +1540,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-x/">
@@ -1548,7 +1548,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bag-x-fill/">
@@ -1556,7 +1556,7 @@ <h2>Icons</h2>
 {{ render_icon('bag-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bag-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bag-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/balloon/">
@@ -1564,7 +1564,7 @@ <h2>Icons</h2>
 {{ render_icon('balloon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">balloon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">balloon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/balloon-fill/">
@@ -1572,7 +1572,7 @@ <h2>Icons</h2>
 {{ render_icon('balloon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">balloon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">balloon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/balloon-heart/">
@@ -1580,7 +1580,7 @@ <h2>Icons</h2>
 {{ render_icon('balloon-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">balloon-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">balloon-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/balloon-heart-fill/">
@@ -1588,7 +1588,7 @@ <h2>Icons</h2>
 {{ render_icon('balloon-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">balloon-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">balloon-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ban/">
@@ -1596,7 +1596,7 @@ <h2>Icons</h2>
 {{ render_icon('ban', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ban</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ban</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ban-fill/">
@@ -1604,7 +1604,7 @@ <h2>Icons</h2>
 {{ render_icon('ban-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ban-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ban-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bandaid/">
@@ -1612,7 +1612,7 @@ <h2>Icons</h2>
 {{ render_icon('bandaid', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bandaid</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bandaid</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bandaid-fill/">
@@ -1620,7 +1620,7 @@ <h2>Icons</h2>
 {{ render_icon('bandaid-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bandaid-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bandaid-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bank/">
@@ -1628,7 +1628,7 @@ <h2>Icons</h2>
 {{ render_icon('bank', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bank</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bank</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bank2/">
@@ -1636,7 +1636,7 @@ <h2>Icons</h2>
 {{ render_icon('bank2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bank2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bank2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bar-chart/">
@@ -1644,7 +1644,7 @@ <h2>Icons</h2>
 {{ render_icon('bar-chart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bar-chart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bar-chart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bar-chart-fill/">
@@ -1652,7 +1652,7 @@ <h2>Icons</h2>
 {{ render_icon('bar-chart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bar-chart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bar-chart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bar-chart-line/">
@@ -1660,7 +1660,7 @@ <h2>Icons</h2>
 {{ render_icon('bar-chart-line', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bar-chart-line</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bar-chart-line</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bar-chart-line-fill/">
@@ -1668,7 +1668,7 @@ <h2>Icons</h2>
 {{ render_icon('bar-chart-line-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bar-chart-line-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bar-chart-line-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bar-chart-steps/">
@@ -1676,7 +1676,7 @@ <h2>Icons</h2>
 {{ render_icon('bar-chart-steps', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bar-chart-steps</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bar-chart-steps</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/basket/">
@@ -1684,7 +1684,7 @@ <h2>Icons</h2>
 {{ render_icon('basket', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">basket</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">basket</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/basket-fill/">
@@ -1692,7 +1692,7 @@ <h2>Icons</h2>
 {{ render_icon('basket-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">basket-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">basket-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/basket2/">
@@ -1700,7 +1700,7 @@ <h2>Icons</h2>
 {{ render_icon('basket2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">basket2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">basket2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/basket2-fill/">
@@ -1708,7 +1708,7 @@ <h2>Icons</h2>
 {{ render_icon('basket2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">basket2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">basket2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/basket3/">
@@ -1716,7 +1716,7 @@ <h2>Icons</h2>
 {{ render_icon('basket3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">basket3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">basket3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/basket3-fill/">
@@ -1724,7 +1724,7 @@ <h2>Icons</h2>
 {{ render_icon('basket3-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">basket3-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">basket3-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/battery/">
@@ -1732,7 +1732,7 @@ <h2>Icons</h2>
 {{ render_icon('battery', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">battery</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">battery</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/battery-charging/">
@@ -1740,7 +1740,7 @@ <h2>Icons</h2>
 {{ render_icon('battery-charging', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">battery-charging</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">battery-charging</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/battery-full/">
@@ -1748,7 +1748,7 @@ <h2>Icons</h2>
 {{ render_icon('battery-full', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">battery-full</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">battery-full</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/battery-half/">
@@ -1756,7 +1756,7 @@ <h2>Icons</h2>
 {{ render_icon('battery-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">battery-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">battery-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/behance/">
@@ -1764,7 +1764,7 @@ <h2>Icons</h2>
 {{ render_icon('behance', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">behance</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">behance</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bell/">
@@ -1772,7 +1772,7 @@ <h2>Icons</h2>
 {{ render_icon('bell', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bell</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bell</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bell-fill/">
@@ -1780,7 +1780,7 @@ <h2>Icons</h2>
 {{ render_icon('bell-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bell-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bell-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bell-slash/">
@@ -1788,7 +1788,7 @@ <h2>Icons</h2>
 {{ render_icon('bell-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bell-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bell-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bell-slash-fill/">
@@ -1796,7 +1796,7 @@ <h2>Icons</h2>
 {{ render_icon('bell-slash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bell-slash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bell-slash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bezier/">
@@ -1804,7 +1804,7 @@ <h2>Icons</h2>
 {{ render_icon('bezier', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bezier</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bezier</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bezier2/">
@@ -1812,7 +1812,7 @@ <h2>Icons</h2>
 {{ render_icon('bezier2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bezier2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bezier2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bicycle/">
@@ -1820,7 +1820,7 @@ <h2>Icons</h2>
 {{ render_icon('bicycle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bicycle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bicycle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bing/">
@@ -1828,7 +1828,7 @@ <h2>Icons</h2>
 {{ render_icon('bing', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bing</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bing</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/binoculars/">
@@ -1836,7 +1836,7 @@ <h2>Icons</h2>
 {{ render_icon('binoculars', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">binoculars</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">binoculars</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/binoculars-fill/">
@@ -1844,7 +1844,7 @@ <h2>Icons</h2>
 {{ render_icon('binoculars-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">binoculars-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">binoculars-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/blockquote-left/">
@@ -1852,7 +1852,7 @@ <h2>Icons</h2>
 {{ render_icon('blockquote-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">blockquote-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">blockquote-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/blockquote-right/">
@@ -1860,7 +1860,7 @@ <h2>Icons</h2>
 {{ render_icon('blockquote-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">blockquote-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">blockquote-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bluetooth/">
@@ -1868,7 +1868,7 @@ <h2>Icons</h2>
 {{ render_icon('bluetooth', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bluetooth</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bluetooth</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/body-text/">
@@ -1876,7 +1876,7 @@ <h2>Icons</h2>
 {{ render_icon('body-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">body-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">body-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/book/">
@@ -1884,7 +1884,7 @@ <h2>Icons</h2>
 {{ render_icon('book', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">book</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">book</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/book-fill/">
@@ -1892,7 +1892,7 @@ <h2>Icons</h2>
 {{ render_icon('book-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">book-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">book-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/book-half/">
@@ -1900,7 +1900,7 @@ <h2>Icons</h2>
 {{ render_icon('book-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">book-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">book-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark/">
@@ -1908,7 +1908,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-check/">
@@ -1916,7 +1916,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-check-fill/">
@@ -1924,7 +1924,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-dash/">
@@ -1932,7 +1932,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-dash-fill/">
@@ -1940,7 +1940,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-dash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-dash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-dash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-fill/">
@@ -1948,7 +1948,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-heart/">
@@ -1956,7 +1956,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-heart-fill/">
@@ -1964,7 +1964,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-plus/">
@@ -1972,7 +1972,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-plus-fill/">
@@ -1980,7 +1980,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-star/">
@@ -1988,7 +1988,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-star', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-star</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-star</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-star-fill/">
@@ -1996,7 +1996,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-star-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-star-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-star-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-x/">
@@ -2004,7 +2004,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmark-x-fill/">
@@ -2012,7 +2012,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmark-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmark-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmark-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmarks/">
@@ -2020,7 +2020,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmarks', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmarks</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmarks</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookmarks-fill/">
@@ -2028,7 +2028,7 @@ <h2>Icons</h2>
 {{ render_icon('bookmarks-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookmarks-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookmarks-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bookshelf/">
@@ -2036,7 +2036,7 @@ <h2>Icons</h2>
 {{ render_icon('bookshelf', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bookshelf</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bookshelf</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/boombox/">
@@ -2044,7 +2044,7 @@ <h2>Icons</h2>
 {{ render_icon('boombox', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">boombox</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">boombox</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/boombox-fill/">
@@ -2052,7 +2052,7 @@ <h2>Icons</h2>
 {{ render_icon('boombox-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">boombox-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">boombox-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bootstrap/">
@@ -2060,7 +2060,7 @@ <h2>Icons</h2>
 {{ render_icon('bootstrap', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bootstrap</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bootstrap</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bootstrap-fill/">
@@ -2068,7 +2068,7 @@ <h2>Icons</h2>
 {{ render_icon('bootstrap-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bootstrap-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bootstrap-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bootstrap-reboot/">
@@ -2076,7 +2076,7 @@ <h2>Icons</h2>
 {{ render_icon('bootstrap-reboot', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bootstrap-reboot</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bootstrap-reboot</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border/">
@@ -2084,7 +2084,7 @@ <h2>Icons</h2>
 {{ render_icon('border', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-all/">
@@ -2092,7 +2092,7 @@ <h2>Icons</h2>
 {{ render_icon('border-all', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-all</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-all</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-bottom/">
@@ -2100,7 +2100,7 @@ <h2>Icons</h2>
 {{ render_icon('border-bottom', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-bottom</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-bottom</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-center/">
@@ -2108,7 +2108,7 @@ <h2>Icons</h2>
 {{ render_icon('border-center', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-center</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-center</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-inner/">
@@ -2116,7 +2116,7 @@ <h2>Icons</h2>
 {{ render_icon('border-inner', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-inner</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-inner</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-left/">
@@ -2124,7 +2124,7 @@ <h2>Icons</h2>
 {{ render_icon('border-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-middle/">
@@ -2132,7 +2132,7 @@ <h2>Icons</h2>
 {{ render_icon('border-middle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-middle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-middle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-outer/">
@@ -2140,7 +2140,7 @@ <h2>Icons</h2>
 {{ render_icon('border-outer', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-outer</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-outer</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-right/">
@@ -2148,7 +2148,7 @@ <h2>Icons</h2>
 {{ render_icon('border-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-style/">
@@ -2156,7 +2156,7 @@ <h2>Icons</h2>
 {{ render_icon('border-style', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-style</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-style</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-top/">
@@ -2164,7 +2164,7 @@ <h2>Icons</h2>
 {{ render_icon('border-top', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-top</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-top</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/border-width/">
@@ -2172,7 +2172,7 @@ <h2>Icons</h2>
 {{ render_icon('border-width', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">border-width</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">border-width</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bounding-box/">
@@ -2180,7 +2180,7 @@ <h2>Icons</h2>
 {{ render_icon('bounding-box', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bounding-box</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bounding-box</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bounding-box-circles/">
@@ -2188,7 +2188,7 @@ <h2>Icons</h2>
 {{ render_icon('bounding-box-circles', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bounding-box-circles</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bounding-box-circles</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box/">
@@ -2196,7 +2196,7 @@ <h2>Icons</h2>
 {{ render_icon('box', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-down/">
@@ -2204,7 +2204,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-down-left/">
@@ -2212,7 +2212,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-down-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-down-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-down-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-down-right/">
@@ -2220,7 +2220,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-down-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-down-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-down-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-in-down/">
@@ -2228,7 +2228,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-in-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-in-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-in-down-left/">
@@ -2236,7 +2236,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-in-down-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-down-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-in-down-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-in-down-right/">
@@ -2244,7 +2244,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-in-down-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-down-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-in-down-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-in-left/">
@@ -2252,7 +2252,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-in-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-in-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-in-right/">
@@ -2260,7 +2260,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-in-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-in-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-in-up/">
@@ -2268,7 +2268,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-in-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-in-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-in-up-left/">
@@ -2276,7 +2276,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-in-up-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-up-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-in-up-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-in-up-right/">
@@ -2284,7 +2284,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-in-up-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-in-up-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-in-up-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-left/">
@@ -2292,7 +2292,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-right/">
@@ -2300,7 +2300,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-up/">
@@ -2308,7 +2308,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-up-left/">
@@ -2316,7 +2316,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-up-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-up-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-up-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-arrow-up-right/">
@@ -2324,7 +2324,7 @@ <h2>Icons</h2>
 {{ render_icon('box-arrow-up-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-arrow-up-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-arrow-up-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-fill/">
@@ -2332,7 +2332,7 @@ <h2>Icons</h2>
 {{ render_icon('box-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-seam/">
@@ -2340,7 +2340,7 @@ <h2>Icons</h2>
 {{ render_icon('box-seam', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-seam</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-seam</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box-seam-fill/">
@@ -2348,7 +2348,7 @@ <h2>Icons</h2>
 {{ render_icon('box-seam-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box-seam-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box-seam-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box2/">
@@ -2356,7 +2356,7 @@ <h2>Icons</h2>
 {{ render_icon('box2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box2-fill/">
@@ -2364,7 +2364,7 @@ <h2>Icons</h2>
 {{ render_icon('box2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box2-heart/">
@@ -2372,7 +2372,7 @@ <h2>Icons</h2>
 {{ render_icon('box2-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box2-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box2-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/box2-heart-fill/">
@@ -2380,7 +2380,7 @@ <h2>Icons</h2>
 {{ render_icon('box2-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">box2-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">box2-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/boxes/">
@@ -2388,7 +2388,7 @@ <h2>Icons</h2>
 {{ render_icon('boxes', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">boxes</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">boxes</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/braces/">
@@ -2396,7 +2396,7 @@ <h2>Icons</h2>
 {{ render_icon('braces', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">braces</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">braces</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/braces-asterisk/">
@@ -2404,7 +2404,7 @@ <h2>Icons</h2>
 {{ render_icon('braces-asterisk', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">braces-asterisk</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">braces-asterisk</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bricks/">
@@ -2412,7 +2412,7 @@ <h2>Icons</h2>
 {{ render_icon('bricks', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bricks</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bricks</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/briefcase/">
@@ -2420,7 +2420,7 @@ <h2>Icons</h2>
 {{ render_icon('briefcase', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">briefcase</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">briefcase</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/briefcase-fill/">
@@ -2428,7 +2428,7 @@ <h2>Icons</h2>
 {{ render_icon('briefcase-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">briefcase-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">briefcase-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brightness-alt-high/">
@@ -2436,7 +2436,7 @@ <h2>Icons</h2>
 {{ render_icon('brightness-alt-high', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brightness-alt-high</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brightness-alt-high</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brightness-alt-high-fill/">
@@ -2444,7 +2444,7 @@ <h2>Icons</h2>
 {{ render_icon('brightness-alt-high-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brightness-alt-high-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brightness-alt-high-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brightness-alt-low/">
@@ -2452,7 +2452,7 @@ <h2>Icons</h2>
 {{ render_icon('brightness-alt-low', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brightness-alt-low</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brightness-alt-low</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brightness-alt-low-fill/">
@@ -2460,7 +2460,7 @@ <h2>Icons</h2>
 {{ render_icon('brightness-alt-low-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brightness-alt-low-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brightness-alt-low-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brightness-high/">
@@ -2468,7 +2468,7 @@ <h2>Icons</h2>
 {{ render_icon('brightness-high', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brightness-high</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brightness-high</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brightness-high-fill/">
@@ -2476,7 +2476,7 @@ <h2>Icons</h2>
 {{ render_icon('brightness-high-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brightness-high-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brightness-high-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brightness-low/">
@@ -2484,7 +2484,7 @@ <h2>Icons</h2>
 {{ render_icon('brightness-low', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brightness-low</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brightness-low</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brightness-low-fill/">
@@ -2492,7 +2492,7 @@ <h2>Icons</h2>
 {{ render_icon('brightness-low-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brightness-low-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brightness-low-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brilliance/">
@@ -2500,7 +2500,7 @@ <h2>Icons</h2>
 {{ render_icon('brilliance', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brilliance</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brilliance</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/broadcast/">
@@ -2508,7 +2508,7 @@ <h2>Icons</h2>
 {{ render_icon('broadcast', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">broadcast</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">broadcast</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/broadcast-pin/">
@@ -2516,7 +2516,7 @@ <h2>Icons</h2>
 {{ render_icon('broadcast-pin', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">broadcast-pin</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">broadcast-pin</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/browser-chrome/">
@@ -2524,7 +2524,7 @@ <h2>Icons</h2>
 {{ render_icon('browser-chrome', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">browser-chrome</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">browser-chrome</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/browser-edge/">
@@ -2532,7 +2532,7 @@ <h2>Icons</h2>
 {{ render_icon('browser-edge', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">browser-edge</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">browser-edge</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/browser-firefox/">
@@ -2540,7 +2540,7 @@ <h2>Icons</h2>
 {{ render_icon('browser-firefox', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">browser-firefox</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">browser-firefox</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/browser-safari/">
@@ -2548,7 +2548,7 @@ <h2>Icons</h2>
 {{ render_icon('browser-safari', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">browser-safari</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">browser-safari</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brush/">
@@ -2556,7 +2556,7 @@ <h2>Icons</h2>
 {{ render_icon('brush', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brush</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brush</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/brush-fill/">
@@ -2564,7 +2564,7 @@ <h2>Icons</h2>
 {{ render_icon('brush-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">brush-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">brush-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bucket/">
@@ -2572,7 +2572,7 @@ <h2>Icons</h2>
 {{ render_icon('bucket', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bucket</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bucket</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bucket-fill/">
@@ -2580,7 +2580,7 @@ <h2>Icons</h2>
 {{ render_icon('bucket-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bucket-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bucket-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bug/">
@@ -2588,7 +2588,7 @@ <h2>Icons</h2>
 {{ render_icon('bug', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bug</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bug</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bug-fill/">
@@ -2596,7 +2596,7 @@ <h2>Icons</h2>
 {{ render_icon('bug-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bug-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bug-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building/">
@@ -2604,7 +2604,7 @@ <h2>Icons</h2>
 {{ render_icon('building', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-add/">
@@ -2612,7 +2612,7 @@ <h2>Icons</h2>
 {{ render_icon('building-add', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-add</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-add</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-check/">
@@ -2620,7 +2620,7 @@ <h2>Icons</h2>
 {{ render_icon('building-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-dash/">
@@ -2628,7 +2628,7 @@ <h2>Icons</h2>
 {{ render_icon('building-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-down/">
@@ -2636,7 +2636,7 @@ <h2>Icons</h2>
 {{ render_icon('building-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-exclamation/">
@@ -2644,7 +2644,7 @@ <h2>Icons</h2>
 {{ render_icon('building-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill/">
@@ -2652,7 +2652,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-add/">
@@ -2660,7 +2660,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-add', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-add</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-add</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-check/">
@@ -2668,7 +2668,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-dash/">
@@ -2676,7 +2676,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-down/">
@@ -2684,7 +2684,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-exclamation/">
@@ -2692,7 +2692,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-gear/">
@@ -2700,7 +2700,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-gear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-gear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-gear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-lock/">
@@ -2708,7 +2708,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-slash/">
@@ -2716,7 +2716,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-up/">
@@ -2724,7 +2724,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-fill-x/">
@@ -2732,7 +2732,7 @@ <h2>Icons</h2>
 {{ render_icon('building-fill-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-fill-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-fill-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-gear/">
@@ -2740,7 +2740,7 @@ <h2>Icons</h2>
 {{ render_icon('building-gear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-gear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-gear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-lock/">
@@ -2748,7 +2748,7 @@ <h2>Icons</h2>
 {{ render_icon('building-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-slash/">
@@ -2756,7 +2756,7 @@ <h2>Icons</h2>
 {{ render_icon('building-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-up/">
@@ -2764,7 +2764,7 @@ <h2>Icons</h2>
 {{ render_icon('building-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/building-x/">
@@ -2772,7 +2772,7 @@ <h2>Icons</h2>
 {{ render_icon('building-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">building-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">building-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/buildings/">
@@ -2780,7 +2780,7 @@ <h2>Icons</h2>
 {{ render_icon('buildings', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">buildings</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">buildings</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/buildings-fill/">
@@ -2788,7 +2788,7 @@ <h2>Icons</h2>
 {{ render_icon('buildings-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">buildings-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">buildings-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bullseye/">
@@ -2796,7 +2796,7 @@ <h2>Icons</h2>
 {{ render_icon('bullseye', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bullseye</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bullseye</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bus-front/">
@@ -2804,7 +2804,7 @@ <h2>Icons</h2>
 {{ render_icon('bus-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bus-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bus-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/bus-front-fill/">
@@ -2812,7 +2812,7 @@ <h2>Icons</h2>
 {{ render_icon('bus-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">bus-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">bus-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/c-circle/">
@@ -2820,7 +2820,7 @@ <h2>Icons</h2>
 {{ render_icon('c-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">c-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">c-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/c-circle-fill/">
@@ -2828,7 +2828,7 @@ <h2>Icons</h2>
 {{ render_icon('c-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">c-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">c-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/c-square/">
@@ -2836,7 +2836,7 @@ <h2>Icons</h2>
 {{ render_icon('c-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">c-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">c-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/c-square-fill/">
@@ -2844,7 +2844,7 @@ <h2>Icons</h2>
 {{ render_icon('c-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">c-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">c-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cake/">
@@ -2852,7 +2852,7 @@ <h2>Icons</h2>
 {{ render_icon('cake', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cake</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cake</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cake-fill/">
@@ -2860,7 +2860,7 @@ <h2>Icons</h2>
 {{ render_icon('cake-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cake-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cake-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cake2/">
@@ -2868,7 +2868,7 @@ <h2>Icons</h2>
 {{ render_icon('cake2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cake2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cake2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cake2-fill/">
@@ -2876,7 +2876,7 @@ <h2>Icons</h2>
 {{ render_icon('cake2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cake2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cake2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calculator/">
@@ -2884,7 +2884,7 @@ <h2>Icons</h2>
 {{ render_icon('calculator', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calculator</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calculator</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calculator-fill/">
@@ -2892,7 +2892,7 @@ <h2>Icons</h2>
 {{ render_icon('calculator-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calculator-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calculator-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar/">
@@ -2900,7 +2900,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-check/">
@@ -2908,7 +2908,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-check-fill/">
@@ -2916,7 +2916,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-date/">
@@ -2924,7 +2924,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-date', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-date</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-date</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-date-fill/">
@@ -2932,7 +2932,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-date-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-date-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-date-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-day/">
@@ -2940,7 +2940,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-day', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-day</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-day</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-day-fill/">
@@ -2948,7 +2948,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-day-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-day-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-day-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-event/">
@@ -2956,7 +2956,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-event', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-event</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-event</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-event-fill/">
@@ -2964,7 +2964,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-event-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-event-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-event-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-fill/">
@@ -2972,7 +2972,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-heart/">
@@ -2980,7 +2980,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-heart-fill/">
@@ -2988,7 +2988,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-minus/">
@@ -2996,7 +2996,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-minus-fill/">
@@ -3004,7 +3004,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-month/">
@@ -3012,7 +3012,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-month', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-month</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-month</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-month-fill/">
@@ -3020,7 +3020,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-month-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-month-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-month-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-plus/">
@@ -3028,7 +3028,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-plus-fill/">
@@ -3036,7 +3036,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-range/">
@@ -3044,7 +3044,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-range', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-range</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-range</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-range-fill/">
@@ -3052,7 +3052,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-range-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-range-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-range-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-week/">
@@ -3060,7 +3060,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-week', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-week</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-week</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-week-fill/">
@@ -3068,7 +3068,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-week-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-week-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-week-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-x/">
@@ -3076,7 +3076,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar-x-fill/">
@@ -3084,7 +3084,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2/">
@@ -3092,7 +3092,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-check/">
@@ -3100,7 +3100,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-check-fill/">
@@ -3108,7 +3108,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-date/">
@@ -3116,7 +3116,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-date', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-date</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-date</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-date-fill/">
@@ -3124,7 +3124,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-date-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-date-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-date-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-day/">
@@ -3132,7 +3132,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-day', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-day</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-day</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-day-fill/">
@@ -3140,7 +3140,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-day-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-day-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-day-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-event/">
@@ -3148,7 +3148,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-event', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-event</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-event</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-event-fill/">
@@ -3156,7 +3156,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-event-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-event-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-event-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-fill/">
@@ -3164,7 +3164,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-heart/">
@@ -3172,7 +3172,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-heart-fill/">
@@ -3180,7 +3180,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-minus/">
@@ -3188,7 +3188,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-minus-fill/">
@@ -3196,7 +3196,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-month/">
@@ -3204,7 +3204,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-month', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-month</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-month</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-month-fill/">
@@ -3212,7 +3212,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-month-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-month-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-month-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-plus/">
@@ -3220,7 +3220,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-plus-fill/">
@@ -3228,7 +3228,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-range/">
@@ -3236,7 +3236,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-range', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-range</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-range</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-range-fill/">
@@ -3244,7 +3244,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-range-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-range-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-range-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-week/">
@@ -3252,7 +3252,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-week', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-week</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-week</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-week-fill/">
@@ -3260,7 +3260,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-week-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-week-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-week-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-x/">
@@ -3268,7 +3268,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar2-x-fill/">
@@ -3276,7 +3276,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar2-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar2-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar2-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar3/">
@@ -3284,7 +3284,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar3-event/">
@@ -3292,7 +3292,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar3-event', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar3-event</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar3-event</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar3-event-fill/">
@@ -3300,7 +3300,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar3-event-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar3-event-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar3-event-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar3-fill/">
@@ -3308,7 +3308,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar3-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar3-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar3-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar3-range/">
@@ -3316,7 +3316,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar3-range', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar3-range</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar3-range</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar3-range-fill/">
@@ -3324,7 +3324,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar3-range-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar3-range-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar3-range-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar3-week/">
@@ -3332,7 +3332,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar3-week', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar3-week</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar3-week</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar3-week-fill/">
@@ -3340,7 +3340,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar3-week-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar3-week-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar3-week-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar4/">
@@ -3348,7 +3348,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar4', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar4</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar4</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar4-event/">
@@ -3356,7 +3356,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar4-event', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar4-event</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar4-event</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar4-range/">
@@ -3364,7 +3364,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar4-range', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar4-range</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar4-range</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/calendar4-week/">
@@ -3372,7 +3372,7 @@ <h2>Icons</h2>
 {{ render_icon('calendar4-week', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">calendar4-week</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">calendar4-week</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera/">
@@ -3380,7 +3380,7 @@ <h2>Icons</h2>
 {{ render_icon('camera', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera-fill/">
@@ -3388,7 +3388,7 @@ <h2>Icons</h2>
 {{ render_icon('camera-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera-reels/">
@@ -3396,7 +3396,7 @@ <h2>Icons</h2>
 {{ render_icon('camera-reels', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera-reels</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera-reels</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera-reels-fill/">
@@ -3404,7 +3404,7 @@ <h2>Icons</h2>
 {{ render_icon('camera-reels-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera-reels-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera-reels-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera-video/">
@@ -3412,7 +3412,7 @@ <h2>Icons</h2>
 {{ render_icon('camera-video', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera-video</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera-video</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera-video-fill/">
@@ -3420,7 +3420,7 @@ <h2>Icons</h2>
 {{ render_icon('camera-video-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera-video-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera-video-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera-video-off/">
@@ -3428,7 +3428,7 @@ <h2>Icons</h2>
 {{ render_icon('camera-video-off', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera-video-off</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera-video-off</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera-video-off-fill/">
@@ -3436,7 +3436,7 @@ <h2>Icons</h2>
 {{ render_icon('camera-video-off-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera-video-off-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera-video-off-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/camera2/">
@@ -3444,7 +3444,7 @@ <h2>Icons</h2>
 {{ render_icon('camera2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">camera2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">camera2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/capslock/">
@@ -3452,7 +3452,7 @@ <h2>Icons</h2>
 {{ render_icon('capslock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">capslock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">capslock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/capslock-fill/">
@@ -3460,7 +3460,7 @@ <h2>Icons</h2>
 {{ render_icon('capslock-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">capslock-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">capslock-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/capsule/">
@@ -3468,7 +3468,7 @@ <h2>Icons</h2>
 {{ render_icon('capsule', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">capsule</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">capsule</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/capsule-pill/">
@@ -3476,7 +3476,7 @@ <h2>Icons</h2>
 {{ render_icon('capsule-pill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">capsule-pill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">capsule-pill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/car-front/">
@@ -3484,7 +3484,7 @@ <h2>Icons</h2>
 {{ render_icon('car-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">car-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">car-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/car-front-fill/">
@@ -3492,7 +3492,7 @@ <h2>Icons</h2>
 {{ render_icon('car-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">car-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">car-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/card-checklist/">
@@ -3500,7 +3500,7 @@ <h2>Icons</h2>
 {{ render_icon('card-checklist', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">card-checklist</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">card-checklist</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/card-heading/">
@@ -3508,7 +3508,7 @@ <h2>Icons</h2>
 {{ render_icon('card-heading', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">card-heading</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">card-heading</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/card-image/">
@@ -3516,7 +3516,7 @@ <h2>Icons</h2>
 {{ render_icon('card-image', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">card-image</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">card-image</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/card-list/">
@@ -3524,7 +3524,7 @@ <h2>Icons</h2>
 {{ render_icon('card-list', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">card-list</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">card-list</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/card-text/">
@@ -3532,7 +3532,7 @@ <h2>Icons</h2>
 {{ render_icon('card-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">card-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">card-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-down/">
@@ -3540,7 +3540,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-down-fill/">
@@ -3548,7 +3548,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-down-square/">
@@ -3556,7 +3556,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-down-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-down-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-down-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-down-square-fill/">
@@ -3564,7 +3564,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-down-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-down-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-down-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-left/">
@@ -3572,7 +3572,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-left-fill/">
@@ -3580,7 +3580,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-left-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-left-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-left-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-left-square/">
@@ -3588,7 +3588,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-left-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-left-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-left-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-left-square-fill/">
@@ -3596,7 +3596,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-left-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-left-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-left-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-right/">
@@ -3604,7 +3604,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-right-fill/">
@@ -3612,7 +3612,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-right-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-right-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-right-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-right-square/">
@@ -3620,7 +3620,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-right-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-right-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-right-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-right-square-fill/">
@@ -3628,7 +3628,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-right-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-right-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-right-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-up/">
@@ -3636,7 +3636,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-up-fill/">
@@ -3644,7 +3644,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-up-square/">
@@ -3652,7 +3652,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-up-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-up-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-up-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/caret-up-square-fill/">
@@ -3660,7 +3660,7 @@ <h2>Icons</h2>
 {{ render_icon('caret-up-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">caret-up-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">caret-up-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart/">
@@ -3668,7 +3668,7 @@ <h2>Icons</h2>
 {{ render_icon('cart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-check/">
@@ -3676,7 +3676,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-check-fill/">
@@ -3684,7 +3684,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-dash/">
@@ -3692,7 +3692,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-dash-fill/">
@@ -3700,7 +3700,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-dash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-dash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-dash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-fill/">
@@ -3708,7 +3708,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-plus/">
@@ -3716,7 +3716,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-plus-fill/">
@@ -3724,7 +3724,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-x/">
@@ -3732,7 +3732,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart-x-fill/">
@@ -3740,7 +3740,7 @@ <h2>Icons</h2>
 {{ render_icon('cart-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart2/">
@@ -3748,7 +3748,7 @@ <h2>Icons</h2>
 {{ render_icon('cart2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart3/">
@@ -3756,7 +3756,7 @@ <h2>Icons</h2>
 {{ render_icon('cart3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cart4/">
@@ -3764,7 +3764,7 @@ <h2>Icons</h2>
 {{ render_icon('cart4', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cart4</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cart4</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cash/">
@@ -3772,7 +3772,7 @@ <h2>Icons</h2>
 {{ render_icon('cash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cash-coin/">
@@ -3780,7 +3780,7 @@ <h2>Icons</h2>
 {{ render_icon('cash-coin', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cash-coin</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cash-coin</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cash-stack/">
@@ -3788,7 +3788,7 @@ <h2>Icons</h2>
 {{ render_icon('cash-stack', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cash-stack</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cash-stack</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cassette/">
@@ -3796,7 +3796,7 @@ <h2>Icons</h2>
 {{ render_icon('cassette', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cassette</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cassette</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cassette-fill/">
@@ -3804,7 +3804,7 @@ <h2>Icons</h2>
 {{ render_icon('cassette-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cassette-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cassette-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cast/">
@@ -3812,7 +3812,7 @@ <h2>Icons</h2>
 {{ render_icon('cast', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cast</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cast</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cc-circle/">
@@ -3820,7 +3820,7 @@ <h2>Icons</h2>
 {{ render_icon('cc-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cc-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cc-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cc-circle-fill/">
@@ -3828,7 +3828,7 @@ <h2>Icons</h2>
 {{ render_icon('cc-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cc-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cc-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cc-square/">
@@ -3836,7 +3836,7 @@ <h2>Icons</h2>
 {{ render_icon('cc-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cc-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cc-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cc-square-fill/">
@@ -3844,7 +3844,7 @@ <h2>Icons</h2>
 {{ render_icon('cc-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cc-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cc-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat/">
@@ -3852,7 +3852,7 @@ <h2>Icons</h2>
 {{ render_icon('chat', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-dots/">
@@ -3860,7 +3860,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-dots', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-dots</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-dots</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-dots-fill/">
@@ -3868,7 +3868,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-dots-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-dots-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-dots-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-fill/">
@@ -3876,7 +3876,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-heart/">
@@ -3884,7 +3884,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-heart-fill/">
@@ -3892,7 +3892,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left/">
@@ -3900,7 +3900,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-dots/">
@@ -3908,7 +3908,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-dots', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-dots</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-dots</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-dots-fill/">
@@ -3916,7 +3916,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-dots-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-dots-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-dots-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-fill/">
@@ -3924,7 +3924,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-heart/">
@@ -3932,7 +3932,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-heart-fill/">
@@ -3940,7 +3940,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-quote/">
@@ -3948,7 +3948,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-quote', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-quote</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-quote</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-quote-fill/">
@@ -3956,7 +3956,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-quote-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-quote-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-quote-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-text/">
@@ -3964,7 +3964,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-left-text-fill/">
@@ -3972,7 +3972,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-left-text-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-left-text-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-left-text-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-quote/">
@@ -3980,7 +3980,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-quote', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-quote</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-quote</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-quote-fill/">
@@ -3988,7 +3988,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-quote-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-quote-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-quote-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right/">
@@ -3996,7 +3996,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-dots/">
@@ -4004,7 +4004,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-dots', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-dots</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-dots</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-dots-fill/">
@@ -4012,7 +4012,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-dots-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-dots-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-dots-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-fill/">
@@ -4020,7 +4020,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-heart/">
@@ -4028,7 +4028,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-heart-fill/">
@@ -4036,7 +4036,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-quote/">
@@ -4044,7 +4044,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-quote', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-quote</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-quote</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-quote-fill/">
@@ -4052,7 +4052,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-quote-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-quote-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-quote-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-text/">
@@ -4060,7 +4060,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-right-text-fill/">
@@ -4068,7 +4068,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-right-text-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-right-text-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-right-text-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square/">
@@ -4076,7 +4076,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-dots/">
@@ -4084,7 +4084,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-dots', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-dots</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-dots</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-dots-fill/">
@@ -4092,7 +4092,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-dots-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-dots-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-dots-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-fill/">
@@ -4100,7 +4100,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-heart/">
@@ -4108,7 +4108,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-heart-fill/">
@@ -4116,7 +4116,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-quote/">
@@ -4124,7 +4124,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-quote', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-quote</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-quote</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-quote-fill/">
@@ -4132,7 +4132,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-quote-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-quote-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-quote-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-text/">
@@ -4140,7 +4140,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-square-text-fill/">
@@ -4148,7 +4148,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-square-text-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-square-text-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-square-text-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-text/">
@@ -4156,7 +4156,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chat-text-fill/">
@@ -4164,7 +4164,7 @@ <h2>Icons</h2>
 {{ render_icon('chat-text-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chat-text-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chat-text-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check/">
@@ -4172,7 +4172,7 @@ <h2>Icons</h2>
 {{ render_icon('check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check-all/">
@@ -4180,7 +4180,7 @@ <h2>Icons</h2>
 {{ render_icon('check-all', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check-all</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check-all</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check-circle/">
@@ -4188,7 +4188,7 @@ <h2>Icons</h2>
 {{ render_icon('check-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check-circle-fill/">
@@ -4196,7 +4196,7 @@ <h2>Icons</h2>
 {{ render_icon('check-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check-lg/">
@@ -4204,7 +4204,7 @@ <h2>Icons</h2>
 {{ render_icon('check-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check-square/">
@@ -4212,7 +4212,7 @@ <h2>Icons</h2>
 {{ render_icon('check-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check-square-fill/">
@@ -4220,7 +4220,7 @@ <h2>Icons</h2>
 {{ render_icon('check-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check2/">
@@ -4228,7 +4228,7 @@ <h2>Icons</h2>
 {{ render_icon('check2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check2-all/">
@@ -4236,7 +4236,7 @@ <h2>Icons</h2>
 {{ render_icon('check2-all', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check2-all</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check2-all</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check2-circle/">
@@ -4244,7 +4244,7 @@ <h2>Icons</h2>
 {{ render_icon('check2-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check2-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check2-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/check2-square/">
@@ -4252,7 +4252,7 @@ <h2>Icons</h2>
 {{ render_icon('check2-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">check2-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">check2-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-bar-contract/">
@@ -4260,7 +4260,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-bar-contract', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-contract</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-bar-contract</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-bar-down/">
@@ -4268,7 +4268,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-bar-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-bar-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-bar-expand/">
@@ -4276,7 +4276,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-bar-expand', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-expand</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-bar-expand</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-bar-left/">
@@ -4284,7 +4284,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-bar-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-bar-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-bar-right/">
@@ -4292,7 +4292,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-bar-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-bar-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-bar-up/">
@@ -4300,7 +4300,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-bar-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-bar-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-bar-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-compact-down/">
@@ -4308,7 +4308,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-compact-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-compact-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-compact-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-compact-left/">
@@ -4316,7 +4316,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-compact-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-compact-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-compact-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-compact-right/">
@@ -4324,7 +4324,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-compact-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-compact-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-compact-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-compact-up/">
@@ -4332,7 +4332,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-compact-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-compact-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-compact-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-contract/">
@@ -4340,7 +4340,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-contract', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-contract</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-contract</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-double-down/">
@@ -4348,7 +4348,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-double-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-double-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-double-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-double-left/">
@@ -4356,7 +4356,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-double-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-double-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-double-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-double-right/">
@@ -4364,7 +4364,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-double-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-double-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-double-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-double-up/">
@@ -4372,7 +4372,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-double-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-double-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-double-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-down/">
@@ -4380,7 +4380,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-expand/">
@@ -4388,7 +4388,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-expand', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-expand</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-expand</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-left/">
@@ -4396,7 +4396,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-right/">
@@ -4404,7 +4404,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/chevron-up/">
@@ -4412,7 +4412,7 @@ <h2>Icons</h2>
 {{ render_icon('chevron-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">chevron-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">chevron-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/circle/">
@@ -4420,7 +4420,7 @@ <h2>Icons</h2>
 {{ render_icon('circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/circle-fill/">
@@ -4428,7 +4428,7 @@ <h2>Icons</h2>
 {{ render_icon('circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/circle-half/">
@@ -4436,7 +4436,7 @@ <h2>Icons</h2>
 {{ render_icon('circle-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">circle-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">circle-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/circle-square/">
@@ -4444,7 +4444,7 @@ <h2>Icons</h2>
 {{ render_icon('circle-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">circle-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">circle-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard/">
@@ -4452,7 +4452,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-check/">
@@ -4460,7 +4460,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-check-fill/">
@@ -4468,7 +4468,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-data/">
@@ -4476,7 +4476,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-data', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-data</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-data</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-data-fill/">
@@ -4484,7 +4484,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-data-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-data-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-data-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-fill/">
@@ -4492,7 +4492,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-heart/">
@@ -4500,7 +4500,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-heart-fill/">
@@ -4508,7 +4508,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-minus/">
@@ -4516,7 +4516,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-minus-fill/">
@@ -4524,7 +4524,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-plus/">
@@ -4532,7 +4532,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-plus-fill/">
@@ -4540,7 +4540,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-pulse/">
@@ -4548,7 +4548,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-pulse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-pulse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-pulse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-x/">
@@ -4556,7 +4556,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard-x-fill/">
@@ -4564,7 +4564,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2/">
@@ -4572,7 +4572,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-check/">
@@ -4580,7 +4580,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-check-fill/">
@@ -4588,7 +4588,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-data/">
@@ -4596,7 +4596,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-data', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-data</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-data</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-data-fill/">
@@ -4604,7 +4604,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-data-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-data-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-data-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-fill/">
@@ -4612,7 +4612,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-heart/">
@@ -4620,7 +4620,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-heart-fill/">
@@ -4628,7 +4628,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-minus/">
@@ -4636,7 +4636,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-minus-fill/">
@@ -4644,7 +4644,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-plus/">
@@ -4652,7 +4652,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-plus-fill/">
@@ -4660,7 +4660,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-pulse/">
@@ -4668,7 +4668,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-pulse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-pulse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-pulse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-pulse-fill/">
@@ -4676,7 +4676,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-pulse-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-pulse-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-pulse-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-x/">
@@ -4684,7 +4684,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clipboard2-x-fill/">
@@ -4692,7 +4692,7 @@ <h2>Icons</h2>
 {{ render_icon('clipboard2-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clipboard2-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clipboard2-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clock/">
@@ -4700,7 +4700,7 @@ <h2>Icons</h2>
 {{ render_icon('clock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clock-fill/">
@@ -4708,7 +4708,7 @@ <h2>Icons</h2>
 {{ render_icon('clock-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clock-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clock-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clock-history/">
@@ -4716,7 +4716,7 @@ <h2>Icons</h2>
 {{ render_icon('clock-history', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clock-history</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clock-history</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud/">
@@ -4724,7 +4724,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-arrow-down/">
@@ -4732,7 +4732,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-arrow-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-arrow-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-arrow-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-arrow-down-fill/">
@@ -4740,7 +4740,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-arrow-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-arrow-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-arrow-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-arrow-up/">
@@ -4748,7 +4748,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-arrow-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-arrow-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-arrow-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-arrow-up-fill/">
@@ -4756,7 +4756,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-arrow-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-arrow-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-arrow-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-check/">
@@ -4764,7 +4764,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-check-fill/">
@@ -4772,7 +4772,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-download/">
@@ -4780,7 +4780,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-download', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-download</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-download</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-download-fill/">
@@ -4788,7 +4788,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-download-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-download-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-download-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-drizzle/">
@@ -4796,7 +4796,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-drizzle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-drizzle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-drizzle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-drizzle-fill/">
@@ -4804,7 +4804,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-drizzle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-drizzle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-drizzle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-fill/">
@@ -4812,7 +4812,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-fog/">
@@ -4820,7 +4820,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-fog', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-fog</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-fog</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-fog-fill/">
@@ -4828,7 +4828,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-fog-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-fog-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-fog-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-fog2/">
@@ -4836,7 +4836,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-fog2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-fog2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-fog2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-fog2-fill/">
@@ -4844,7 +4844,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-fog2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-fog2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-fog2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-hail/">
@@ -4852,7 +4852,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-hail', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-hail</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-hail</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-hail-fill/">
@@ -4860,7 +4860,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-hail-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-hail-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-hail-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-haze/">
@@ -4868,7 +4868,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-haze', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-haze</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-haze</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-haze-fill/">
@@ -4876,7 +4876,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-haze-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-haze-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-haze-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-haze2/">
@@ -4884,7 +4884,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-haze2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-haze2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-haze2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-haze2-fill/">
@@ -4892,7 +4892,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-haze2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-haze2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-haze2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-lightning/">
@@ -4900,7 +4900,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-lightning', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-lightning</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-lightning</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-lightning-fill/">
@@ -4908,7 +4908,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-lightning-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-lightning-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-lightning-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-lightning-rain/">
@@ -4916,7 +4916,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-lightning-rain', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-lightning-rain</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-lightning-rain</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-lightning-rain-fill/">
@@ -4924,7 +4924,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-lightning-rain-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-lightning-rain-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-lightning-rain-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-minus/">
@@ -4932,7 +4932,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-minus-fill/">
@@ -4940,7 +4940,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-moon/">
@@ -4948,7 +4948,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-moon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-moon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-moon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-moon-fill/">
@@ -4956,7 +4956,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-moon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-moon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-moon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-plus/">
@@ -4964,7 +4964,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-plus-fill/">
@@ -4972,7 +4972,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-rain/">
@@ -4980,7 +4980,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-rain', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-rain</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-rain</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-rain-fill/">
@@ -4988,7 +4988,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-rain-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-rain-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-rain-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-rain-heavy/">
@@ -4996,7 +4996,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-rain-heavy', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-rain-heavy</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-rain-heavy</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-rain-heavy-fill/">
@@ -5004,7 +5004,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-rain-heavy-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-rain-heavy-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-rain-heavy-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-slash/">
@@ -5012,7 +5012,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-slash-fill/">
@@ -5020,7 +5020,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-slash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-slash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-slash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-sleet/">
@@ -5028,7 +5028,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-sleet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-sleet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-sleet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-sleet-fill/">
@@ -5036,7 +5036,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-sleet-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-sleet-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-sleet-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-snow/">
@@ -5044,7 +5044,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-snow', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-snow</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-snow</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-snow-fill/">
@@ -5052,7 +5052,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-snow-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-snow-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-snow-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-sun/">
@@ -5060,7 +5060,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-sun', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-sun</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-sun</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-sun-fill/">
@@ -5068,7 +5068,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-sun-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-sun-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-sun-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-upload/">
@@ -5076,7 +5076,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-upload', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-upload</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-upload</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloud-upload-fill/">
@@ -5084,7 +5084,7 @@ <h2>Icons</h2>
 {{ render_icon('cloud-upload-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloud-upload-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloud-upload-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clouds/">
@@ -5092,7 +5092,7 @@ <h2>Icons</h2>
 {{ render_icon('clouds', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clouds</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clouds</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/clouds-fill/">
@@ -5100,7 +5100,7 @@ <h2>Icons</h2>
 {{ render_icon('clouds-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">clouds-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">clouds-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloudy/">
@@ -5108,7 +5108,7 @@ <h2>Icons</h2>
 {{ render_icon('cloudy', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloudy</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloudy</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cloudy-fill/">
@@ -5116,7 +5116,7 @@ <h2>Icons</h2>
 {{ render_icon('cloudy-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cloudy-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cloudy-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/code/">
@@ -5124,7 +5124,7 @@ <h2>Icons</h2>
 {{ render_icon('code', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">code</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">code</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/code-slash/">
@@ -5132,7 +5132,7 @@ <h2>Icons</h2>
 {{ render_icon('code-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">code-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">code-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/code-square/">
@@ -5140,7 +5140,7 @@ <h2>Icons</h2>
 {{ render_icon('code-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">code-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">code-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/coin/">
@@ -5148,7 +5148,7 @@ <h2>Icons</h2>
 {{ render_icon('coin', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">coin</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">coin</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/collection/">
@@ -5156,7 +5156,7 @@ <h2>Icons</h2>
 {{ render_icon('collection', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">collection</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">collection</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/collection-fill/">
@@ -5164,7 +5164,7 @@ <h2>Icons</h2>
 {{ render_icon('collection-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">collection-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">collection-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/collection-play/">
@@ -5172,7 +5172,7 @@ <h2>Icons</h2>
 {{ render_icon('collection-play', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">collection-play</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">collection-play</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/collection-play-fill/">
@@ -5180,7 +5180,7 @@ <h2>Icons</h2>
 {{ render_icon('collection-play-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">collection-play-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">collection-play-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/columns/">
@@ -5188,7 +5188,7 @@ <h2>Icons</h2>
 {{ render_icon('columns', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">columns</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">columns</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/columns-gap/">
@@ -5196,7 +5196,7 @@ <h2>Icons</h2>
 {{ render_icon('columns-gap', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">columns-gap</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">columns-gap</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/command/">
@@ -5204,7 +5204,7 @@ <h2>Icons</h2>
 {{ render_icon('command', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">command</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">command</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/compass/">
@@ -5212,7 +5212,7 @@ <h2>Icons</h2>
 {{ render_icon('compass', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">compass</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">compass</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/compass-fill/">
@@ -5220,7 +5220,7 @@ <h2>Icons</h2>
 {{ render_icon('compass-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">compass-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">compass-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cone/">
@@ -5228,7 +5228,7 @@ <h2>Icons</h2>
 {{ render_icon('cone', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cone</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cone</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cone-striped/">
@@ -5236,7 +5236,7 @@ <h2>Icons</h2>
 {{ render_icon('cone-striped', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cone-striped</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cone-striped</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/controller/">
@@ -5244,7 +5244,7 @@ <h2>Icons</h2>
 {{ render_icon('controller', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">controller</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">controller</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cookie/">
@@ -5252,7 +5252,7 @@ <h2>Icons</h2>
 {{ render_icon('cookie', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cookie</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cookie</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/copy/">
@@ -5260,7 +5260,7 @@ <h2>Icons</h2>
 {{ render_icon('copy', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">copy</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">copy</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cpu/">
@@ -5268,7 +5268,7 @@ <h2>Icons</h2>
 {{ render_icon('cpu', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cpu</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cpu</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cpu-fill/">
@@ -5276,7 +5276,7 @@ <h2>Icons</h2>
 {{ render_icon('cpu-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cpu-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cpu-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/credit-card/">
@@ -5284,7 +5284,7 @@ <h2>Icons</h2>
 {{ render_icon('credit-card', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">credit-card</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">credit-card</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/credit-card-2-back/">
@@ -5292,7 +5292,7 @@ <h2>Icons</h2>
 {{ render_icon('credit-card-2-back', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">credit-card-2-back</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">credit-card-2-back</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/credit-card-2-back-fill/">
@@ -5300,7 +5300,7 @@ <h2>Icons</h2>
 {{ render_icon('credit-card-2-back-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">credit-card-2-back-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">credit-card-2-back-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/credit-card-2-front/">
@@ -5308,7 +5308,7 @@ <h2>Icons</h2>
 {{ render_icon('credit-card-2-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">credit-card-2-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">credit-card-2-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/credit-card-2-front-fill/">
@@ -5316,7 +5316,7 @@ <h2>Icons</h2>
 {{ render_icon('credit-card-2-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">credit-card-2-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">credit-card-2-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/credit-card-fill/">
@@ -5324,7 +5324,7 @@ <h2>Icons</h2>
 {{ render_icon('credit-card-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">credit-card-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">credit-card-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/crop/">
@@ -5332,7 +5332,7 @@ <h2>Icons</h2>
 {{ render_icon('crop', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">crop</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">crop</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/crosshair/">
@@ -5340,7 +5340,7 @@ <h2>Icons</h2>
 {{ render_icon('crosshair', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">crosshair</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">crosshair</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/crosshair2/">
@@ -5348,7 +5348,7 @@ <h2>Icons</h2>
 {{ render_icon('crosshair2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">crosshair2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">crosshair2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cup/">
@@ -5356,7 +5356,7 @@ <h2>Icons</h2>
 {{ render_icon('cup', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cup</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cup</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cup-fill/">
@@ -5364,7 +5364,7 @@ <h2>Icons</h2>
 {{ render_icon('cup-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cup-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cup-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cup-hot/">
@@ -5372,7 +5372,7 @@ <h2>Icons</h2>
 {{ render_icon('cup-hot', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cup-hot</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cup-hot</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cup-hot-fill/">
@@ -5380,7 +5380,7 @@ <h2>Icons</h2>
 {{ render_icon('cup-hot-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cup-hot-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cup-hot-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cup-straw/">
@@ -5388,7 +5388,7 @@ <h2>Icons</h2>
 {{ render_icon('cup-straw', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cup-straw</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cup-straw</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/currency-bitcoin/">
@@ -5396,7 +5396,7 @@ <h2>Icons</h2>
 {{ render_icon('currency-bitcoin', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">currency-bitcoin</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">currency-bitcoin</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/currency-dollar/">
@@ -5404,7 +5404,7 @@ <h2>Icons</h2>
 {{ render_icon('currency-dollar', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">currency-dollar</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">currency-dollar</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/currency-euro/">
@@ -5412,7 +5412,7 @@ <h2>Icons</h2>
 {{ render_icon('currency-euro', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">currency-euro</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">currency-euro</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/currency-exchange/">
@@ -5420,7 +5420,7 @@ <h2>Icons</h2>
 {{ render_icon('currency-exchange', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">currency-exchange</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">currency-exchange</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/currency-pound/">
@@ -5428,7 +5428,7 @@ <h2>Icons</h2>
 {{ render_icon('currency-pound', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">currency-pound</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">currency-pound</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/currency-rupee/">
@@ -5436,7 +5436,7 @@ <h2>Icons</h2>
 {{ render_icon('currency-rupee', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">currency-rupee</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">currency-rupee</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/currency-yen/">
@@ -5444,7 +5444,7 @@ <h2>Icons</h2>
 {{ render_icon('currency-yen', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">currency-yen</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">currency-yen</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cursor/">
@@ -5452,7 +5452,7 @@ <h2>Icons</h2>
 {{ render_icon('cursor', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cursor</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cursor</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cursor-fill/">
@@ -5460,7 +5460,7 @@ <h2>Icons</h2>
 {{ render_icon('cursor-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cursor-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cursor-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/cursor-text/">
@@ -5468,7 +5468,7 @@ <h2>Icons</h2>
 {{ render_icon('cursor-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">cursor-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">cursor-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dash/">
@@ -5476,7 +5476,7 @@ <h2>Icons</h2>
 {{ render_icon('dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dash-circle/">
@@ -5484,7 +5484,7 @@ <h2>Icons</h2>
 {{ render_icon('dash-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dash-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dash-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dash-circle-dotted/">
@@ -5492,7 +5492,7 @@ <h2>Icons</h2>
 {{ render_icon('dash-circle-dotted', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dash-circle-dotted</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dash-circle-dotted</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dash-circle-fill/">
@@ -5500,7 +5500,7 @@ <h2>Icons</h2>
 {{ render_icon('dash-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dash-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dash-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dash-lg/">
@@ -5508,7 +5508,7 @@ <h2>Icons</h2>
 {{ render_icon('dash-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dash-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dash-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dash-square/">
@@ -5516,7 +5516,7 @@ <h2>Icons</h2>
 {{ render_icon('dash-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dash-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dash-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dash-square-dotted/">
@@ -5524,7 +5524,7 @@ <h2>Icons</h2>
 {{ render_icon('dash-square-dotted', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dash-square-dotted</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dash-square-dotted</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dash-square-fill/">
@@ -5532,7 +5532,7 @@ <h2>Icons</h2>
 {{ render_icon('dash-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dash-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dash-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database/">
@@ -5540,7 +5540,7 @@ <h2>Icons</h2>
 {{ render_icon('database', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-add/">
@@ -5548,7 +5548,7 @@ <h2>Icons</h2>
 {{ render_icon('database-add', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-add</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-add</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-check/">
@@ -5556,7 +5556,7 @@ <h2>Icons</h2>
 {{ render_icon('database-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-dash/">
@@ -5564,7 +5564,7 @@ <h2>Icons</h2>
 {{ render_icon('database-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-down/">
@@ -5572,7 +5572,7 @@ <h2>Icons</h2>
 {{ render_icon('database-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-exclamation/">
@@ -5580,7 +5580,7 @@ <h2>Icons</h2>
 {{ render_icon('database-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill/">
@@ -5588,7 +5588,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-add/">
@@ -5596,7 +5596,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-add', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-add</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-add</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-check/">
@@ -5604,7 +5604,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-dash/">
@@ -5612,7 +5612,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-down/">
@@ -5620,7 +5620,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-exclamation/">
@@ -5628,7 +5628,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-gear/">
@@ -5636,7 +5636,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-gear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-gear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-gear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-lock/">
@@ -5644,7 +5644,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-slash/">
@@ -5652,7 +5652,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-up/">
@@ -5660,7 +5660,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-fill-x/">
@@ -5668,7 +5668,7 @@ <h2>Icons</h2>
 {{ render_icon('database-fill-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-fill-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-fill-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-gear/">
@@ -5676,7 +5676,7 @@ <h2>Icons</h2>
 {{ render_icon('database-gear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-gear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-gear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-lock/">
@@ -5684,7 +5684,7 @@ <h2>Icons</h2>
 {{ render_icon('database-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-slash/">
@@ -5692,7 +5692,7 @@ <h2>Icons</h2>
 {{ render_icon('database-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-up/">
@@ -5700,7 +5700,7 @@ <h2>Icons</h2>
 {{ render_icon('database-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/database-x/">
@@ -5708,7 +5708,7 @@ <h2>Icons</h2>
 {{ render_icon('database-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">database-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">database-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/device-hdd/">
@@ -5716,7 +5716,7 @@ <h2>Icons</h2>
 {{ render_icon('device-hdd', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">device-hdd</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">device-hdd</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/device-hdd-fill/">
@@ -5724,7 +5724,7 @@ <h2>Icons</h2>
 {{ render_icon('device-hdd-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">device-hdd-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">device-hdd-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/device-ssd/">
@@ -5732,7 +5732,7 @@ <h2>Icons</h2>
 {{ render_icon('device-ssd', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">device-ssd</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">device-ssd</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/device-ssd-fill/">
@@ -5740,7 +5740,7 @@ <h2>Icons</h2>
 {{ render_icon('device-ssd-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">device-ssd-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">device-ssd-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/diagram-2/">
@@ -5748,7 +5748,7 @@ <h2>Icons</h2>
 {{ render_icon('diagram-2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">diagram-2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">diagram-2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/diagram-2-fill/">
@@ -5756,7 +5756,7 @@ <h2>Icons</h2>
 {{ render_icon('diagram-2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">diagram-2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">diagram-2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/diagram-3/">
@@ -5764,7 +5764,7 @@ <h2>Icons</h2>
 {{ render_icon('diagram-3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">diagram-3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">diagram-3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/diagram-3-fill/">
@@ -5772,7 +5772,7 @@ <h2>Icons</h2>
 {{ render_icon('diagram-3-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">diagram-3-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">diagram-3-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/diamond/">
@@ -5780,7 +5780,7 @@ <h2>Icons</h2>
 {{ render_icon('diamond', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">diamond</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">diamond</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/diamond-fill/">
@@ -5788,7 +5788,7 @@ <h2>Icons</h2>
 {{ render_icon('diamond-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">diamond-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">diamond-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/diamond-half/">
@@ -5796,7 +5796,7 @@ <h2>Icons</h2>
 {{ render_icon('diamond-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">diamond-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">diamond-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-1/">
@@ -5804,7 +5804,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-1', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-1</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-1</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-1-fill/">
@@ -5812,7 +5812,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-1-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-1-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-1-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-2/">
@@ -5820,7 +5820,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-2-fill/">
@@ -5828,7 +5828,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-3/">
@@ -5836,7 +5836,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-3-fill/">
@@ -5844,7 +5844,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-3-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-3-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-3-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-4/">
@@ -5852,7 +5852,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-4', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-4</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-4</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-4-fill/">
@@ -5860,7 +5860,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-4-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-4-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-4-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-5/">
@@ -5868,7 +5868,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-5', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-5</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-5</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-5-fill/">
@@ -5876,7 +5876,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-5-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-5-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-5-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-6/">
@@ -5884,7 +5884,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-6', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-6</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-6</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dice-6-fill/">
@@ -5892,7 +5892,7 @@ <h2>Icons</h2>
 {{ render_icon('dice-6-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dice-6-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dice-6-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/disc/">
@@ -5900,7 +5900,7 @@ <h2>Icons</h2>
 {{ render_icon('disc', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">disc</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">disc</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/disc-fill/">
@@ -5908,7 +5908,7 @@ <h2>Icons</h2>
 {{ render_icon('disc-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">disc-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">disc-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/discord/">
@@ -5916,7 +5916,7 @@ <h2>Icons</h2>
 {{ render_icon('discord', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">discord</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">discord</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/display/">
@@ -5924,7 +5924,7 @@ <h2>Icons</h2>
 {{ render_icon('display', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">display</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">display</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/display-fill/">
@@ -5932,7 +5932,7 @@ <h2>Icons</h2>
 {{ render_icon('display-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">display-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">display-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/displayport/">
@@ -5940,7 +5940,7 @@ <h2>Icons</h2>
 {{ render_icon('displayport', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">displayport</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">displayport</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/displayport-fill/">
@@ -5948,7 +5948,7 @@ <h2>Icons</h2>
 {{ render_icon('displayport-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">displayport-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">displayport-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/distribute-horizontal/">
@@ -5956,7 +5956,7 @@ <h2>Icons</h2>
 {{ render_icon('distribute-horizontal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">distribute-horizontal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">distribute-horizontal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/distribute-vertical/">
@@ -5964,7 +5964,7 @@ <h2>Icons</h2>
 {{ render_icon('distribute-vertical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">distribute-vertical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">distribute-vertical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/door-closed/">
@@ -5972,7 +5972,7 @@ <h2>Icons</h2>
 {{ render_icon('door-closed', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">door-closed</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">door-closed</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/door-closed-fill/">
@@ -5980,7 +5980,7 @@ <h2>Icons</h2>
 {{ render_icon('door-closed-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">door-closed-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">door-closed-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/door-open/">
@@ -5988,7 +5988,7 @@ <h2>Icons</h2>
 {{ render_icon('door-open', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">door-open</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">door-open</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/door-open-fill/">
@@ -5996,7 +5996,7 @@ <h2>Icons</h2>
 {{ render_icon('door-open-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">door-open-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">door-open-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dot/">
@@ -6004,7 +6004,7 @@ <h2>Icons</h2>
 {{ render_icon('dot', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dot</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dot</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/download/">
@@ -6012,7 +6012,7 @@ <h2>Icons</h2>
 {{ render_icon('download', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">download</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">download</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dpad/">
@@ -6020,7 +6020,7 @@ <h2>Icons</h2>
 {{ render_icon('dpad', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dpad</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dpad</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dpad-fill/">
@@ -6028,7 +6028,7 @@ <h2>Icons</h2>
 {{ render_icon('dpad-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dpad-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dpad-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dribbble/">
@@ -6036,7 +6036,7 @@ <h2>Icons</h2>
 {{ render_icon('dribbble', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dribbble</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dribbble</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/dropbox/">
@@ -6044,7 +6044,7 @@ <h2>Icons</h2>
 {{ render_icon('dropbox', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">dropbox</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">dropbox</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/droplet/">
@@ -6052,7 +6052,7 @@ <h2>Icons</h2>
 {{ render_icon('droplet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">droplet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">droplet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/droplet-fill/">
@@ -6060,7 +6060,7 @@ <h2>Icons</h2>
 {{ render_icon('droplet-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">droplet-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">droplet-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/droplet-half/">
@@ -6068,7 +6068,7 @@ <h2>Icons</h2>
 {{ render_icon('droplet-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">droplet-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">droplet-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/duffle/">
@@ -6076,7 +6076,7 @@ <h2>Icons</h2>
 {{ render_icon('duffle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">duffle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">duffle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/duffle-fill/">
@@ -6084,7 +6084,7 @@ <h2>Icons</h2>
 {{ render_icon('duffle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">duffle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">duffle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ear/">
@@ -6092,7 +6092,7 @@ <h2>Icons</h2>
 {{ render_icon('ear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ear-fill/">
@@ -6100,7 +6100,7 @@ <h2>Icons</h2>
 {{ render_icon('ear-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ear-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ear-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/earbuds/">
@@ -6108,7 +6108,7 @@ <h2>Icons</h2>
 {{ render_icon('earbuds', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">earbuds</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">earbuds</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/easel/">
@@ -6116,7 +6116,7 @@ <h2>Icons</h2>
 {{ render_icon('easel', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">easel</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">easel</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/easel-fill/">
@@ -6124,7 +6124,7 @@ <h2>Icons</h2>
 {{ render_icon('easel-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">easel-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">easel-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/easel2/">
@@ -6132,7 +6132,7 @@ <h2>Icons</h2>
 {{ render_icon('easel2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">easel2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">easel2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/easel2-fill/">
@@ -6140,7 +6140,7 @@ <h2>Icons</h2>
 {{ render_icon('easel2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">easel2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">easel2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/easel3/">
@@ -6148,7 +6148,7 @@ <h2>Icons</h2>
 {{ render_icon('easel3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">easel3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">easel3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/easel3-fill/">
@@ -6156,7 +6156,7 @@ <h2>Icons</h2>
 {{ render_icon('easel3-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">easel3-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">easel3-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/egg/">
@@ -6164,7 +6164,7 @@ <h2>Icons</h2>
 {{ render_icon('egg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">egg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">egg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/egg-fill/">
@@ -6172,7 +6172,7 @@ <h2>Icons</h2>
 {{ render_icon('egg-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">egg-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">egg-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/egg-fried/">
@@ -6180,7 +6180,7 @@ <h2>Icons</h2>
 {{ render_icon('egg-fried', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">egg-fried</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">egg-fried</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eject/">
@@ -6188,7 +6188,7 @@ <h2>Icons</h2>
 {{ render_icon('eject', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eject</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eject</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eject-fill/">
@@ -6196,7 +6196,7 @@ <h2>Icons</h2>
 {{ render_icon('eject-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eject-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eject-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-angry/">
@@ -6204,7 +6204,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-angry', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-angry</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-angry</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-angry-fill/">
@@ -6212,7 +6212,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-angry-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-angry-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-angry-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-astonished/">
@@ -6220,7 +6220,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-astonished', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-astonished</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-astonished</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-astonished-fill/">
@@ -6228,7 +6228,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-astonished-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-astonished-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-astonished-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-dizzy/">
@@ -6236,7 +6236,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-dizzy', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-dizzy</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-dizzy</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-dizzy-fill/">
@@ -6244,7 +6244,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-dizzy-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-dizzy-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-dizzy-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-expressionless/">
@@ -6252,7 +6252,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-expressionless', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-expressionless</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-expressionless</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-expressionless-fill/">
@@ -6260,7 +6260,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-expressionless-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-expressionless-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-expressionless-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-frown/">
@@ -6268,7 +6268,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-frown', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-frown</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-frown</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-frown-fill/">
@@ -6276,7 +6276,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-frown-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-frown-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-frown-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-grimace/">
@@ -6284,7 +6284,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-grimace', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-grimace</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-grimace</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-grimace-fill/">
@@ -6292,7 +6292,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-grimace-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-grimace-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-grimace-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-grin/">
@@ -6300,7 +6300,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-grin', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-grin</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-grin</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-grin-fill/">
@@ -6308,7 +6308,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-grin-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-grin-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-grin-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-heart-eyes/">
@@ -6316,7 +6316,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-heart-eyes', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-heart-eyes</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-heart-eyes</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-heart-eyes-fill/">
@@ -6324,7 +6324,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-heart-eyes-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-heart-eyes-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-heart-eyes-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-kiss/">
@@ -6332,7 +6332,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-kiss', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-kiss</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-kiss</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-kiss-fill/">
@@ -6340,7 +6340,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-kiss-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-kiss-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-kiss-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-laughing/">
@@ -6348,7 +6348,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-laughing', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-laughing</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-laughing</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-laughing-fill/">
@@ -6356,7 +6356,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-laughing-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-laughing-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-laughing-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-neutral/">
@@ -6364,7 +6364,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-neutral', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-neutral</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-neutral</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-neutral-fill/">
@@ -6372,7 +6372,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-neutral-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-neutral-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-neutral-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-smile/">
@@ -6380,7 +6380,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-smile', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-smile</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-smile</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-smile-fill/">
@@ -6388,7 +6388,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-smile-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-smile-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-smile-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-smile-upside-down/">
@@ -6396,7 +6396,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-smile-upside-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-smile-upside-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-smile-upside-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-smile-upside-down-fill/">
@@ -6404,7 +6404,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-smile-upside-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-smile-upside-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-smile-upside-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-sunglasses/">
@@ -6412,7 +6412,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-sunglasses', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-sunglasses</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-sunglasses</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-sunglasses-fill/">
@@ -6420,7 +6420,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-sunglasses-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-sunglasses-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-sunglasses-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-surprise/">
@@ -6428,7 +6428,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-surprise', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-surprise</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-surprise</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-surprise-fill/">
@@ -6436,7 +6436,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-surprise-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-surprise-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-surprise-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-tear/">
@@ -6444,7 +6444,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-tear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-tear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-tear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-tear-fill/">
@@ -6452,7 +6452,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-tear-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-tear-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-tear-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-wink/">
@@ -6460,7 +6460,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-wink', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-wink</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-wink</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/emoji-wink-fill/">
@@ -6468,7 +6468,7 @@ <h2>Icons</h2>
 {{ render_icon('emoji-wink-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">emoji-wink-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">emoji-wink-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope/">
@@ -6476,7 +6476,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-arrow-down/">
@@ -6484,7 +6484,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-arrow-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-arrow-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-arrow-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-arrow-down-fill/">
@@ -6492,7 +6492,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-arrow-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-arrow-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-arrow-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-arrow-up/">
@@ -6500,7 +6500,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-arrow-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-arrow-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-arrow-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-arrow-up-fill/">
@@ -6508,7 +6508,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-arrow-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-arrow-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-arrow-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-at/">
@@ -6516,7 +6516,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-at', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-at</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-at</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-at-fill/">
@@ -6524,7 +6524,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-at-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-at-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-at-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-check/">
@@ -6532,7 +6532,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-check-fill/">
@@ -6540,7 +6540,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-dash/">
@@ -6548,7 +6548,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-dash-fill/">
@@ -6556,7 +6556,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-dash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-dash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-dash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-exclamation/">
@@ -6564,7 +6564,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-exclamation-fill/">
@@ -6572,7 +6572,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-exclamation-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-exclamation-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-exclamation-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-fill/">
@@ -6580,7 +6580,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-heart/">
@@ -6588,7 +6588,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-heart-fill/">
@@ -6596,7 +6596,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-open/">
@@ -6604,7 +6604,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-open', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-open</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-open</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-open-fill/">
@@ -6612,7 +6612,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-open-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-open-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-open-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-open-heart/">
@@ -6620,7 +6620,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-open-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-open-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-open-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-open-heart-fill/">
@@ -6628,7 +6628,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-open-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-open-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-open-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-paper/">
@@ -6636,7 +6636,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-paper', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-paper</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-paper</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-paper-fill/">
@@ -6644,7 +6644,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-paper-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-paper-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-paper-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-paper-heart/">
@@ -6652,7 +6652,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-paper-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-paper-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-paper-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-paper-heart-fill/">
@@ -6660,7 +6660,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-paper-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-paper-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-paper-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-plus/">
@@ -6668,7 +6668,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-plus-fill/">
@@ -6676,7 +6676,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-slash/">
@@ -6684,7 +6684,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-slash-fill/">
@@ -6692,7 +6692,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-slash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-slash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-slash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-x/">
@@ -6700,7 +6700,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/envelope-x-fill/">
@@ -6708,7 +6708,7 @@ <h2>Icons</h2>
 {{ render_icon('envelope-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">envelope-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">envelope-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eraser/">
@@ -6716,7 +6716,7 @@ <h2>Icons</h2>
 {{ render_icon('eraser', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eraser</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eraser</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eraser-fill/">
@@ -6724,7 +6724,7 @@ <h2>Icons</h2>
 {{ render_icon('eraser-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eraser-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eraser-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/escape/">
@@ -6732,7 +6732,7 @@ <h2>Icons</h2>
 {{ render_icon('escape', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">escape</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">escape</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ethernet/">
@@ -6740,7 +6740,7 @@ <h2>Icons</h2>
 {{ render_icon('ethernet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ethernet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ethernet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ev-front/">
@@ -6748,7 +6748,7 @@ <h2>Icons</h2>
 {{ render_icon('ev-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ev-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ev-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ev-front-fill/">
@@ -6756,7 +6756,7 @@ <h2>Icons</h2>
 {{ render_icon('ev-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ev-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ev-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ev-station/">
@@ -6764,7 +6764,7 @@ <h2>Icons</h2>
 {{ render_icon('ev-station', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ev-station</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ev-station</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ev-station-fill/">
@@ -6772,7 +6772,7 @@ <h2>Icons</h2>
 {{ render_icon('ev-station-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ev-station-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ev-station-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation/">
@@ -6780,7 +6780,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-circle/">
@@ -6788,7 +6788,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-circle-fill/">
@@ -6796,7 +6796,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-diamond/">
@@ -6804,7 +6804,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-diamond', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-diamond</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-diamond</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-diamond-fill/">
@@ -6812,7 +6812,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-diamond-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-diamond-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-diamond-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-lg/">
@@ -6820,7 +6820,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-octagon/">
@@ -6828,7 +6828,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-octagon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-octagon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-octagon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-octagon-fill/">
@@ -6836,7 +6836,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-octagon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-octagon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-octagon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-square/">
@@ -6844,7 +6844,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-square-fill/">
@@ -6852,7 +6852,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-triangle/">
@@ -6860,7 +6860,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-triangle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-triangle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-triangle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclamation-triangle-fill/">
@@ -6868,7 +6868,7 @@ <h2>Icons</h2>
 {{ render_icon('exclamation-triangle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclamation-triangle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclamation-triangle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exclude/">
@@ -6876,7 +6876,7 @@ <h2>Icons</h2>
 {{ render_icon('exclude', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exclude</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exclude</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/explicit/">
@@ -6884,7 +6884,7 @@ <h2>Icons</h2>
 {{ render_icon('explicit', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">explicit</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">explicit</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/explicit-fill/">
@@ -6892,7 +6892,7 @@ <h2>Icons</h2>
 {{ render_icon('explicit-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">explicit-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">explicit-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/exposure/">
@@ -6900,7 +6900,7 @@ <h2>Icons</h2>
 {{ render_icon('exposure', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">exposure</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">exposure</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eye/">
@@ -6908,7 +6908,7 @@ <h2>Icons</h2>
 {{ render_icon('eye', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eye</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eye</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eye-fill/">
@@ -6916,7 +6916,7 @@ <h2>Icons</h2>
 {{ render_icon('eye-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eye-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eye-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eye-slash/">
@@ -6924,7 +6924,7 @@ <h2>Icons</h2>
 {{ render_icon('eye-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eye-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eye-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eye-slash-fill/">
@@ -6932,7 +6932,7 @@ <h2>Icons</h2>
 {{ render_icon('eye-slash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eye-slash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eye-slash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eyedropper/">
@@ -6940,7 +6940,7 @@ <h2>Icons</h2>
 {{ render_icon('eyedropper', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eyedropper</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eyedropper</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/eyeglasses/">
@@ -6948,7 +6948,7 @@ <h2>Icons</h2>
 {{ render_icon('eyeglasses', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">eyeglasses</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">eyeglasses</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/facebook/">
@@ -6956,7 +6956,7 @@ <h2>Icons</h2>
 {{ render_icon('facebook', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">facebook</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">facebook</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fan/">
@@ -6964,7 +6964,7 @@ <h2>Icons</h2>
 {{ render_icon('fan', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fan</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fan</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fast-forward/">
@@ -6972,7 +6972,7 @@ <h2>Icons</h2>
 {{ render_icon('fast-forward', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fast-forward</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fast-forward</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fast-forward-btn/">
@@ -6980,7 +6980,7 @@ <h2>Icons</h2>
 {{ render_icon('fast-forward-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fast-forward-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fast-forward-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fast-forward-btn-fill/">
@@ -6988,7 +6988,7 @@ <h2>Icons</h2>
 {{ render_icon('fast-forward-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fast-forward-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fast-forward-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fast-forward-circle/">
@@ -6996,7 +6996,7 @@ <h2>Icons</h2>
 {{ render_icon('fast-forward-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fast-forward-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fast-forward-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fast-forward-circle-fill/">
@@ -7004,7 +7004,7 @@ <h2>Icons</h2>
 {{ render_icon('fast-forward-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fast-forward-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fast-forward-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fast-forward-fill/">
@@ -7012,7 +7012,7 @@ <h2>Icons</h2>
 {{ render_icon('fast-forward-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fast-forward-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fast-forward-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/feather/">
@@ -7020,7 +7020,7 @@ <h2>Icons</h2>
 {{ render_icon('feather', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">feather</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">feather</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/feather2/">
@@ -7028,7 +7028,7 @@ <h2>Icons</h2>
 {{ render_icon('feather2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">feather2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">feather2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file/">
@@ -7036,7 +7036,7 @@ <h2>Icons</h2>
 {{ render_icon('file', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-arrow-down/">
@@ -7044,7 +7044,7 @@ <h2>Icons</h2>
 {{ render_icon('file-arrow-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-arrow-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-arrow-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-arrow-down-fill/">
@@ -7052,7 +7052,7 @@ <h2>Icons</h2>
 {{ render_icon('file-arrow-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-arrow-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-arrow-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-arrow-up/">
@@ -7060,7 +7060,7 @@ <h2>Icons</h2>
 {{ render_icon('file-arrow-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-arrow-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-arrow-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-arrow-up-fill/">
@@ -7068,7 +7068,7 @@ <h2>Icons</h2>
 {{ render_icon('file-arrow-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-arrow-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-arrow-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-bar-graph/">
@@ -7076,7 +7076,7 @@ <h2>Icons</h2>
 {{ render_icon('file-bar-graph', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-bar-graph</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-bar-graph</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-bar-graph-fill/">
@@ -7084,7 +7084,7 @@ <h2>Icons</h2>
 {{ render_icon('file-bar-graph-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-bar-graph-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-bar-graph-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-binary/">
@@ -7092,7 +7092,7 @@ <h2>Icons</h2>
 {{ render_icon('file-binary', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-binary</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-binary</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-binary-fill/">
@@ -7100,7 +7100,7 @@ <h2>Icons</h2>
 {{ render_icon('file-binary-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-binary-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-binary-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-break/">
@@ -7108,7 +7108,7 @@ <h2>Icons</h2>
 {{ render_icon('file-break', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-break</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-break</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-break-fill/">
@@ -7116,7 +7116,7 @@ <h2>Icons</h2>
 {{ render_icon('file-break-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-break-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-break-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-check/">
@@ -7124,7 +7124,7 @@ <h2>Icons</h2>
 {{ render_icon('file-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-check-fill/">
@@ -7132,7 +7132,7 @@ <h2>Icons</h2>
 {{ render_icon('file-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-code/">
@@ -7140,7 +7140,7 @@ <h2>Icons</h2>
 {{ render_icon('file-code', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-code</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-code</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-code-fill/">
@@ -7148,7 +7148,7 @@ <h2>Icons</h2>
 {{ render_icon('file-code-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-code-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-code-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-diff/">
@@ -7156,7 +7156,7 @@ <h2>Icons</h2>
 {{ render_icon('file-diff', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-diff</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-diff</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-diff-fill/">
@@ -7164,7 +7164,7 @@ <h2>Icons</h2>
 {{ render_icon('file-diff-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-diff-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-diff-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark/">
@@ -7172,7 +7172,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-arrow-down/">
@@ -7180,7 +7180,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-arrow-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-arrow-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-arrow-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-arrow-down-fill/">
@@ -7188,7 +7188,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-arrow-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-arrow-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-arrow-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-arrow-up/">
@@ -7196,7 +7196,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-arrow-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-arrow-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-arrow-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-arrow-up-fill/">
@@ -7204,7 +7204,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-arrow-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-arrow-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-arrow-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-bar-graph/">
@@ -7212,7 +7212,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-bar-graph', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-bar-graph</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-bar-graph</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-bar-graph-fill/">
@@ -7220,7 +7220,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-bar-graph-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-bar-graph-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-bar-graph-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-binary/">
@@ -7228,7 +7228,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-binary', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-binary</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-binary</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-binary-fill/">
@@ -7236,7 +7236,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-binary-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-binary-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-binary-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-break/">
@@ -7244,7 +7244,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-break', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-break</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-break</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-break-fill/">
@@ -7252,7 +7252,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-break-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-break-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-break-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-check/">
@@ -7260,7 +7260,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-check-fill/">
@@ -7268,7 +7268,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-code/">
@@ -7276,7 +7276,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-code', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-code</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-code</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-code-fill/">
@@ -7284,7 +7284,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-code-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-code-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-code-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-diff/">
@@ -7292,7 +7292,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-diff', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-diff</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-diff</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-diff-fill/">
@@ -7300,7 +7300,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-diff-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-diff-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-diff-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-easel/">
@@ -7308,7 +7308,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-easel', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-easel</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-easel</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-easel-fill/">
@@ -7316,7 +7316,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-easel-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-easel-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-easel-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-excel/">
@@ -7324,7 +7324,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-excel', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-excel</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-excel</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-excel-fill/">
@@ -7332,7 +7332,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-excel-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-excel-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-excel-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-fill/">
@@ -7340,7 +7340,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-font/">
@@ -7348,7 +7348,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-font', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-font</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-font</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-font-fill/">
@@ -7356,7 +7356,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-font-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-font-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-font-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-image/">
@@ -7364,7 +7364,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-image', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-image</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-image</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-image-fill/">
@@ -7372,7 +7372,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-image-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-image-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-image-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-lock/">
@@ -7380,7 +7380,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-lock-fill/">
@@ -7388,7 +7388,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-lock-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-lock-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-lock-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-lock2/">
@@ -7396,7 +7396,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-lock2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-lock2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-lock2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-lock2-fill/">
@@ -7404,7 +7404,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-lock2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-lock2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-lock2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-medical/">
@@ -7412,7 +7412,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-medical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-medical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-medical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-medical-fill/">
@@ -7420,7 +7420,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-medical-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-medical-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-medical-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-minus/">
@@ -7428,7 +7428,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-minus-fill/">
@@ -7436,7 +7436,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-music/">
@@ -7444,7 +7444,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-music', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-music</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-music</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-music-fill/">
@@ -7452,7 +7452,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-music-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-music-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-music-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-pdf/">
@@ -7460,7 +7460,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-pdf', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-pdf</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-pdf</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-pdf-fill/">
@@ -7468,7 +7468,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-pdf-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-pdf-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-pdf-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-person/">
@@ -7476,7 +7476,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-person', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-person</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-person</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-person-fill/">
@@ -7484,7 +7484,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-person-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-person-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-person-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-play/">
@@ -7492,7 +7492,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-play', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-play</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-play</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-play-fill/">
@@ -7500,7 +7500,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-play-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-play-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-play-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-plus/">
@@ -7508,7 +7508,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-plus-fill/">
@@ -7516,7 +7516,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-post/">
@@ -7524,7 +7524,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-post', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-post</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-post</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-post-fill/">
@@ -7532,7 +7532,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-post-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-post-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-post-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-ppt/">
@@ -7540,7 +7540,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-ppt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-ppt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-ppt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-ppt-fill/">
@@ -7548,7 +7548,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-ppt-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-ppt-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-ppt-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-richtext/">
@@ -7556,7 +7556,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-richtext', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-richtext</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-richtext</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-richtext-fill/">
@@ -7564,7 +7564,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-richtext-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-richtext-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-richtext-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-ruled/">
@@ -7572,7 +7572,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-ruled', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-ruled</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-ruled</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-ruled-fill/">
@@ -7580,7 +7580,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-ruled-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-ruled-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-ruled-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-slides/">
@@ -7588,7 +7588,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-slides', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-slides</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-slides</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-slides-fill/">
@@ -7596,7 +7596,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-slides-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-slides-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-slides-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-spreadsheet/">
@@ -7604,7 +7604,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-spreadsheet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-spreadsheet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-spreadsheet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-spreadsheet-fill/">
@@ -7612,7 +7612,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-spreadsheet-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-spreadsheet-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-spreadsheet-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-text/">
@@ -7620,7 +7620,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-text-fill/">
@@ -7628,7 +7628,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-text-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-text-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-text-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-word/">
@@ -7636,7 +7636,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-word', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-word</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-word</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-word-fill/">
@@ -7644,7 +7644,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-word-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-word-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-word-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-x/">
@@ -7652,7 +7652,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-x-fill/">
@@ -7660,7 +7660,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-zip/">
@@ -7668,7 +7668,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-zip', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-zip</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-zip</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-earmark-zip-fill/">
@@ -7676,7 +7676,7 @@ <h2>Icons</h2>
 {{ render_icon('file-earmark-zip-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-earmark-zip-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-earmark-zip-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-easel/">
@@ -7684,7 +7684,7 @@ <h2>Icons</h2>
 {{ render_icon('file-easel', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-easel</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-easel</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-easel-fill/">
@@ -7692,7 +7692,7 @@ <h2>Icons</h2>
 {{ render_icon('file-easel-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-easel-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-easel-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-excel/">
@@ -7700,7 +7700,7 @@ <h2>Icons</h2>
 {{ render_icon('file-excel', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-excel</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-excel</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-excel-fill/">
@@ -7708,7 +7708,7 @@ <h2>Icons</h2>
 {{ render_icon('file-excel-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-excel-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-excel-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-fill/">
@@ -7716,7 +7716,7 @@ <h2>Icons</h2>
 {{ render_icon('file-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-font/">
@@ -7724,7 +7724,7 @@ <h2>Icons</h2>
 {{ render_icon('file-font', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-font</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-font</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-font-fill/">
@@ -7732,7 +7732,7 @@ <h2>Icons</h2>
 {{ render_icon('file-font-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-font-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-font-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-image/">
@@ -7740,7 +7740,7 @@ <h2>Icons</h2>
 {{ render_icon('file-image', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-image</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-image</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-image-fill/">
@@ -7748,7 +7748,7 @@ <h2>Icons</h2>
 {{ render_icon('file-image-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-image-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-image-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-lock/">
@@ -7756,7 +7756,7 @@ <h2>Icons</h2>
 {{ render_icon('file-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-lock-fill/">
@@ -7764,7 +7764,7 @@ <h2>Icons</h2>
 {{ render_icon('file-lock-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-lock-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-lock-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-lock2/">
@@ -7772,7 +7772,7 @@ <h2>Icons</h2>
 {{ render_icon('file-lock2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-lock2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-lock2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-lock2-fill/">
@@ -7780,7 +7780,7 @@ <h2>Icons</h2>
 {{ render_icon('file-lock2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-lock2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-lock2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-medical/">
@@ -7788,7 +7788,7 @@ <h2>Icons</h2>
 {{ render_icon('file-medical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-medical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-medical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-medical-fill/">
@@ -7796,7 +7796,7 @@ <h2>Icons</h2>
 {{ render_icon('file-medical-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-medical-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-medical-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-minus/">
@@ -7804,7 +7804,7 @@ <h2>Icons</h2>
 {{ render_icon('file-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-minus-fill/">
@@ -7812,7 +7812,7 @@ <h2>Icons</h2>
 {{ render_icon('file-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-music/">
@@ -7820,7 +7820,7 @@ <h2>Icons</h2>
 {{ render_icon('file-music', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-music</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-music</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-music-fill/">
@@ -7828,7 +7828,7 @@ <h2>Icons</h2>
 {{ render_icon('file-music-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-music-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-music-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-pdf/">
@@ -7836,7 +7836,7 @@ <h2>Icons</h2>
 {{ render_icon('file-pdf', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-pdf</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-pdf</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-pdf-fill/">
@@ -7844,7 +7844,7 @@ <h2>Icons</h2>
 {{ render_icon('file-pdf-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-pdf-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-pdf-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-person/">
@@ -7852,7 +7852,7 @@ <h2>Icons</h2>
 {{ render_icon('file-person', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-person</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-person</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-person-fill/">
@@ -7860,7 +7860,7 @@ <h2>Icons</h2>
 {{ render_icon('file-person-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-person-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-person-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-play/">
@@ -7868,7 +7868,7 @@ <h2>Icons</h2>
 {{ render_icon('file-play', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-play</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-play</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-play-fill/">
@@ -7876,7 +7876,7 @@ <h2>Icons</h2>
 {{ render_icon('file-play-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-play-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-play-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-plus/">
@@ -7884,7 +7884,7 @@ <h2>Icons</h2>
 {{ render_icon('file-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-plus-fill/">
@@ -7892,7 +7892,7 @@ <h2>Icons</h2>
 {{ render_icon('file-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-post/">
@@ -7900,7 +7900,7 @@ <h2>Icons</h2>
 {{ render_icon('file-post', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-post</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-post</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-post-fill/">
@@ -7908,7 +7908,7 @@ <h2>Icons</h2>
 {{ render_icon('file-post-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-post-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-post-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-ppt/">
@@ -7916,7 +7916,7 @@ <h2>Icons</h2>
 {{ render_icon('file-ppt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-ppt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-ppt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-ppt-fill/">
@@ -7924,7 +7924,7 @@ <h2>Icons</h2>
 {{ render_icon('file-ppt-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-ppt-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-ppt-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-richtext/">
@@ -7932,7 +7932,7 @@ <h2>Icons</h2>
 {{ render_icon('file-richtext', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-richtext</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-richtext</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-richtext-fill/">
@@ -7940,7 +7940,7 @@ <h2>Icons</h2>
 {{ render_icon('file-richtext-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-richtext-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-richtext-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-ruled/">
@@ -7948,7 +7948,7 @@ <h2>Icons</h2>
 {{ render_icon('file-ruled', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-ruled</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-ruled</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-ruled-fill/">
@@ -7956,7 +7956,7 @@ <h2>Icons</h2>
 {{ render_icon('file-ruled-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-ruled-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-ruled-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-slides/">
@@ -7964,7 +7964,7 @@ <h2>Icons</h2>
 {{ render_icon('file-slides', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-slides</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-slides</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-slides-fill/">
@@ -7972,7 +7972,7 @@ <h2>Icons</h2>
 {{ render_icon('file-slides-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-slides-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-slides-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-spreadsheet/">
@@ -7980,7 +7980,7 @@ <h2>Icons</h2>
 {{ render_icon('file-spreadsheet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-spreadsheet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-spreadsheet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-spreadsheet-fill/">
@@ -7988,7 +7988,7 @@ <h2>Icons</h2>
 {{ render_icon('file-spreadsheet-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-spreadsheet-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-spreadsheet-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-text/">
@@ -7996,7 +7996,7 @@ <h2>Icons</h2>
 {{ render_icon('file-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-text-fill/">
@@ -8004,7 +8004,7 @@ <h2>Icons</h2>
 {{ render_icon('file-text-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-text-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-text-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-word/">
@@ -8012,7 +8012,7 @@ <h2>Icons</h2>
 {{ render_icon('file-word', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-word</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-word</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-word-fill/">
@@ -8020,7 +8020,7 @@ <h2>Icons</h2>
 {{ render_icon('file-word-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-word-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-word-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-x/">
@@ -8028,7 +8028,7 @@ <h2>Icons</h2>
 {{ render_icon('file-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-x-fill/">
@@ -8036,7 +8036,7 @@ <h2>Icons</h2>
 {{ render_icon('file-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-zip/">
@@ -8044,7 +8044,7 @@ <h2>Icons</h2>
 {{ render_icon('file-zip', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-zip</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-zip</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/file-zip-fill/">
@@ -8052,7 +8052,7 @@ <h2>Icons</h2>
 {{ render_icon('file-zip-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">file-zip-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">file-zip-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/files/">
@@ -8060,7 +8060,7 @@ <h2>Icons</h2>
 {{ render_icon('files', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">files</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">files</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/files-alt/">
@@ -8068,7 +8068,7 @@ <h2>Icons</h2>
 {{ render_icon('files-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">files-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">files-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-aac/">
@@ -8076,7 +8076,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-aac', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-aac</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-aac</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-ai/">
@@ -8084,7 +8084,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-ai', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-ai</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-ai</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-bmp/">
@@ -8092,7 +8092,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-bmp', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-bmp</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-bmp</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-cs/">
@@ -8100,7 +8100,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-cs', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-cs</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-cs</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-css/">
@@ -8108,7 +8108,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-css', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-css</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-css</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-csv/">
@@ -8116,7 +8116,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-csv', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-csv</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-csv</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-doc/">
@@ -8124,7 +8124,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-doc', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-doc</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-doc</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-docx/">
@@ -8132,7 +8132,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-docx', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-docx</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-docx</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-exe/">
@@ -8140,7 +8140,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-exe', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-exe</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-exe</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-gif/">
@@ -8148,7 +8148,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-gif', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-gif</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-gif</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-heic/">
@@ -8156,7 +8156,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-heic', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-heic</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-heic</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-html/">
@@ -8164,7 +8164,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-html', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-html</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-html</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-java/">
@@ -8172,7 +8172,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-java', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-java</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-java</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-jpg/">
@@ -8180,7 +8180,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-jpg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-jpg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-jpg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-js/">
@@ -8188,7 +8188,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-js', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-js</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-js</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-json/">
@@ -8196,7 +8196,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-json', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-json</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-json</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-jsx/">
@@ -8204,7 +8204,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-jsx', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-jsx</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-jsx</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-key/">
@@ -8212,7 +8212,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-key', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-key</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-key</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-m4p/">
@@ -8220,7 +8220,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-m4p', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-m4p</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-m4p</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-md/">
@@ -8228,7 +8228,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-md', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-md</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-md</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-mdx/">
@@ -8236,7 +8236,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-mdx', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-mdx</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-mdx</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-mov/">
@@ -8244,7 +8244,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-mov', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-mov</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-mov</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-mp3/">
@@ -8252,7 +8252,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-mp3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-mp3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-mp3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-mp4/">
@@ -8260,7 +8260,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-mp4', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-mp4</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-mp4</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-otf/">
@@ -8268,7 +8268,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-otf', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-otf</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-otf</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-pdf/">
@@ -8276,7 +8276,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-pdf', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-pdf</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-pdf</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-php/">
@@ -8284,7 +8284,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-php', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-php</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-php</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-png/">
@@ -8292,7 +8292,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-png', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-png</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-png</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-ppt/">
@@ -8300,7 +8300,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-ppt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-ppt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-ppt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-pptx/">
@@ -8308,7 +8308,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-pptx', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-pptx</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-pptx</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-psd/">
@@ -8316,7 +8316,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-psd', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-psd</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-psd</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-py/">
@@ -8324,7 +8324,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-py', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-py</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-py</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-raw/">
@@ -8332,7 +8332,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-raw', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-raw</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-raw</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-rb/">
@@ -8340,7 +8340,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-rb', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-rb</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-rb</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-sass/">
@@ -8348,7 +8348,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-sass', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-sass</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-sass</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-scss/">
@@ -8356,7 +8356,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-scss', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-scss</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-scss</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-sh/">
@@ -8364,7 +8364,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-sh', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-sh</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-sh</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-sql/">
@@ -8372,7 +8372,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-sql', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-sql</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-sql</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-svg/">
@@ -8380,7 +8380,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-svg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-svg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-svg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-tiff/">
@@ -8388,7 +8388,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-tiff', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-tiff</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-tiff</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-tsx/">
@@ -8396,7 +8396,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-tsx', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-tsx</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-tsx</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-ttf/">
@@ -8404,7 +8404,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-ttf', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-ttf</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-ttf</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-txt/">
@@ -8412,7 +8412,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-txt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-txt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-txt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-wav/">
@@ -8420,7 +8420,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-wav', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-wav</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-wav</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-woff/">
@@ -8428,7 +8428,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-woff', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-woff</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-woff</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-xls/">
@@ -8436,7 +8436,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-xls', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-xls</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-xls</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-xlsx/">
@@ -8444,7 +8444,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-xlsx', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-xlsx</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-xlsx</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-xml/">
@@ -8452,7 +8452,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-xml', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-xml</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-xml</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filetype-yml/">
@@ -8460,7 +8460,7 @@ <h2>Icons</h2>
 {{ render_icon('filetype-yml', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filetype-yml</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filetype-yml</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/film/">
@@ -8468,7 +8468,7 @@ <h2>Icons</h2>
 {{ render_icon('film', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">film</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">film</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filter/">
@@ -8476,7 +8476,7 @@ <h2>Icons</h2>
 {{ render_icon('filter', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filter</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filter</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filter-circle/">
@@ -8484,7 +8484,7 @@ <h2>Icons</h2>
 {{ render_icon('filter-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filter-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filter-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filter-circle-fill/">
@@ -8492,7 +8492,7 @@ <h2>Icons</h2>
 {{ render_icon('filter-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filter-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filter-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filter-left/">
@@ -8500,7 +8500,7 @@ <h2>Icons</h2>
 {{ render_icon('filter-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filter-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filter-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filter-right/">
@@ -8508,7 +8508,7 @@ <h2>Icons</h2>
 {{ render_icon('filter-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filter-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filter-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filter-square/">
@@ -8516,7 +8516,7 @@ <h2>Icons</h2>
 {{ render_icon('filter-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filter-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filter-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/filter-square-fill/">
@@ -8524,7 +8524,7 @@ <h2>Icons</h2>
 {{ render_icon('filter-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">filter-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">filter-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fingerprint/">
@@ -8532,7 +8532,7 @@ <h2>Icons</h2>
 {{ render_icon('fingerprint', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fingerprint</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fingerprint</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fire/">
@@ -8540,7 +8540,7 @@ <h2>Icons</h2>
 {{ render_icon('fire', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fire</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fire</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/flag/">
@@ -8548,7 +8548,7 @@ <h2>Icons</h2>
 {{ render_icon('flag', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">flag</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">flag</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/flag-fill/">
@@ -8556,7 +8556,7 @@ <h2>Icons</h2>
 {{ render_icon('flag-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">flag-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">flag-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/floppy/">
@@ -8564,7 +8564,7 @@ <h2>Icons</h2>
 {{ render_icon('floppy', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">floppy</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">floppy</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/floppy-fill/">
@@ -8572,7 +8572,7 @@ <h2>Icons</h2>
 {{ render_icon('floppy-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">floppy-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">floppy-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/floppy2/">
@@ -8580,7 +8580,7 @@ <h2>Icons</h2>
 {{ render_icon('floppy2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">floppy2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">floppy2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/floppy2-fill/">
@@ -8588,7 +8588,7 @@ <h2>Icons</h2>
 {{ render_icon('floppy2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">floppy2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">floppy2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/flower1/">
@@ -8596,7 +8596,7 @@ <h2>Icons</h2>
 {{ render_icon('flower1', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">flower1</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">flower1</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/flower2/">
@@ -8604,7 +8604,7 @@ <h2>Icons</h2>
 {{ render_icon('flower2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">flower2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">flower2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/flower3/">
@@ -8612,7 +8612,7 @@ <h2>Icons</h2>
 {{ render_icon('flower3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">flower3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">flower3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder/">
@@ -8620,7 +8620,7 @@ <h2>Icons</h2>
 {{ render_icon('folder', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder-check/">
@@ -8628,7 +8628,7 @@ <h2>Icons</h2>
 {{ render_icon('folder-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder-fill/">
@@ -8636,7 +8636,7 @@ <h2>Icons</h2>
 {{ render_icon('folder-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder-minus/">
@@ -8644,7 +8644,7 @@ <h2>Icons</h2>
 {{ render_icon('folder-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder-plus/">
@@ -8652,7 +8652,7 @@ <h2>Icons</h2>
 {{ render_icon('folder-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder-symlink/">
@@ -8660,7 +8660,7 @@ <h2>Icons</h2>
 {{ render_icon('folder-symlink', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder-symlink</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder-symlink</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder-symlink-fill/">
@@ -8668,7 +8668,7 @@ <h2>Icons</h2>
 {{ render_icon('folder-symlink-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder-symlink-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder-symlink-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder-x/">
@@ -8676,7 +8676,7 @@ <h2>Icons</h2>
 {{ render_icon('folder-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder2/">
@@ -8684,7 +8684,7 @@ <h2>Icons</h2>
 {{ render_icon('folder2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/folder2-open/">
@@ -8692,7 +8692,7 @@ <h2>Icons</h2>
 {{ render_icon('folder2-open', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">folder2-open</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">folder2-open</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fonts/">
@@ -8700,7 +8700,7 @@ <h2>Icons</h2>
 {{ render_icon('fonts', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fonts</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fonts</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/forward/">
@@ -8708,7 +8708,7 @@ <h2>Icons</h2>
 {{ render_icon('forward', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">forward</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">forward</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/forward-fill/">
@@ -8716,7 +8716,7 @@ <h2>Icons</h2>
 {{ render_icon('forward-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">forward-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">forward-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/front/">
@@ -8724,7 +8724,7 @@ <h2>Icons</h2>
 {{ render_icon('front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fuel-pump/">
@@ -8732,7 +8732,7 @@ <h2>Icons</h2>
 {{ render_icon('fuel-pump', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fuel-pump</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fuel-pump</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fuel-pump-diesel/">
@@ -8740,7 +8740,7 @@ <h2>Icons</h2>
 {{ render_icon('fuel-pump-diesel', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fuel-pump-diesel</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fuel-pump-diesel</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fuel-pump-diesel-fill/">
@@ -8748,7 +8748,7 @@ <h2>Icons</h2>
 {{ render_icon('fuel-pump-diesel-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fuel-pump-diesel-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fuel-pump-diesel-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fuel-pump-fill/">
@@ -8756,7 +8756,7 @@ <h2>Icons</h2>
 {{ render_icon('fuel-pump-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fuel-pump-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fuel-pump-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fullscreen/">
@@ -8764,7 +8764,7 @@ <h2>Icons</h2>
 {{ render_icon('fullscreen', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fullscreen</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fullscreen</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/fullscreen-exit/">
@@ -8772,7 +8772,7 @@ <h2>Icons</h2>
 {{ render_icon('fullscreen-exit', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">fullscreen-exit</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">fullscreen-exit</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/funnel/">
@@ -8780,7 +8780,7 @@ <h2>Icons</h2>
 {{ render_icon('funnel', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">funnel</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">funnel</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/funnel-fill/">
@@ -8788,7 +8788,7 @@ <h2>Icons</h2>
 {{ render_icon('funnel-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">funnel-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">funnel-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gear/">
@@ -8796,7 +8796,7 @@ <h2>Icons</h2>
 {{ render_icon('gear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gear-fill/">
@@ -8804,7 +8804,7 @@ <h2>Icons</h2>
 {{ render_icon('gear-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gear-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gear-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gear-wide/">
@@ -8812,7 +8812,7 @@ <h2>Icons</h2>
 {{ render_icon('gear-wide', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gear-wide</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gear-wide</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gear-wide-connected/">
@@ -8820,7 +8820,7 @@ <h2>Icons</h2>
 {{ render_icon('gear-wide-connected', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gear-wide-connected</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gear-wide-connected</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gem/">
@@ -8828,7 +8828,7 @@ <h2>Icons</h2>
 {{ render_icon('gem', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gem</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gem</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gender-ambiguous/">
@@ -8836,7 +8836,7 @@ <h2>Icons</h2>
 {{ render_icon('gender-ambiguous', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gender-ambiguous</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gender-ambiguous</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gender-female/">
@@ -8844,7 +8844,7 @@ <h2>Icons</h2>
 {{ render_icon('gender-female', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gender-female</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gender-female</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gender-male/">
@@ -8852,7 +8852,7 @@ <h2>Icons</h2>
 {{ render_icon('gender-male', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gender-male</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gender-male</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gender-neuter/">
@@ -8860,7 +8860,7 @@ <h2>Icons</h2>
 {{ render_icon('gender-neuter', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gender-neuter</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gender-neuter</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gender-trans/">
@@ -8868,7 +8868,7 @@ <h2>Icons</h2>
 {{ render_icon('gender-trans', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gender-trans</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gender-trans</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/geo/">
@@ -8876,7 +8876,7 @@ <h2>Icons</h2>
 {{ render_icon('geo', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">geo</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">geo</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/geo-alt/">
@@ -8884,7 +8884,7 @@ <h2>Icons</h2>
 {{ render_icon('geo-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">geo-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">geo-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/geo-alt-fill/">
@@ -8892,7 +8892,7 @@ <h2>Icons</h2>
 {{ render_icon('geo-alt-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">geo-alt-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">geo-alt-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/geo-fill/">
@@ -8900,7 +8900,7 @@ <h2>Icons</h2>
 {{ render_icon('geo-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">geo-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">geo-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gift/">
@@ -8908,7 +8908,7 @@ <h2>Icons</h2>
 {{ render_icon('gift', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gift</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gift</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gift-fill/">
@@ -8916,7 +8916,7 @@ <h2>Icons</h2>
 {{ render_icon('gift-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gift-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gift-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/git/">
@@ -8924,7 +8924,7 @@ <h2>Icons</h2>
 {{ render_icon('git', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">git</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">git</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/github/">
@@ -8932,7 +8932,7 @@ <h2>Icons</h2>
 {{ render_icon('github', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">github</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">github</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gitlab/">
@@ -8940,7 +8940,7 @@ <h2>Icons</h2>
 {{ render_icon('gitlab', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gitlab</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gitlab</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/globe/">
@@ -8948,7 +8948,7 @@ <h2>Icons</h2>
 {{ render_icon('globe', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">globe</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">globe</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/globe-americas/">
@@ -8956,7 +8956,7 @@ <h2>Icons</h2>
 {{ render_icon('globe-americas', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">globe-americas</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">globe-americas</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/globe-asia-australia/">
@@ -8964,7 +8964,7 @@ <h2>Icons</h2>
 {{ render_icon('globe-asia-australia', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">globe-asia-australia</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">globe-asia-australia</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/globe-central-south-asia/">
@@ -8972,7 +8972,7 @@ <h2>Icons</h2>
 {{ render_icon('globe-central-south-asia', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">globe-central-south-asia</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">globe-central-south-asia</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/globe-europe-africa/">
@@ -8980,7 +8980,7 @@ <h2>Icons</h2>
 {{ render_icon('globe-europe-africa', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">globe-europe-africa</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">globe-europe-africa</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/globe2/">
@@ -8988,7 +8988,7 @@ <h2>Icons</h2>
 {{ render_icon('globe2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">globe2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">globe2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/google/">
@@ -8996,7 +8996,7 @@ <h2>Icons</h2>
 {{ render_icon('google', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">google</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">google</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/google-play/">
@@ -9004,7 +9004,7 @@ <h2>Icons</h2>
 {{ render_icon('google-play', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">google-play</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">google-play</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/gpu-card/">
@@ -9012,7 +9012,7 @@ <h2>Icons</h2>
 {{ render_icon('gpu-card', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">gpu-card</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">gpu-card</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/graph-down/">
@@ -9020,7 +9020,7 @@ <h2>Icons</h2>
 {{ render_icon('graph-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">graph-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">graph-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/graph-down-arrow/">
@@ -9028,7 +9028,7 @@ <h2>Icons</h2>
 {{ render_icon('graph-down-arrow', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">graph-down-arrow</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">graph-down-arrow</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/graph-up/">
@@ -9036,7 +9036,7 @@ <h2>Icons</h2>
 {{ render_icon('graph-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">graph-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">graph-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/graph-up-arrow/">
@@ -9044,7 +9044,7 @@ <h2>Icons</h2>
 {{ render_icon('graph-up-arrow', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">graph-up-arrow</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">graph-up-arrow</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid/">
@@ -9052,7 +9052,7 @@ <h2>Icons</h2>
 {{ render_icon('grid', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-1x2/">
@@ -9060,7 +9060,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-1x2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-1x2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-1x2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-1x2-fill/">
@@ -9068,7 +9068,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-1x2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-1x2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-1x2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-3x2/">
@@ -9076,7 +9076,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-3x2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-3x2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-3x2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-3x2-gap/">
@@ -9084,7 +9084,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-3x2-gap', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-3x2-gap</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-3x2-gap</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-3x2-gap-fill/">
@@ -9092,7 +9092,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-3x2-gap-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-3x2-gap-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-3x2-gap-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-3x3/">
@@ -9100,7 +9100,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-3x3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-3x3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-3x3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-3x3-gap/">
@@ -9108,7 +9108,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-3x3-gap', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-3x3-gap</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-3x3-gap</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-3x3-gap-fill/">
@@ -9116,7 +9116,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-3x3-gap-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-3x3-gap-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-3x3-gap-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grid-fill/">
@@ -9124,7 +9124,7 @@ <h2>Icons</h2>
 {{ render_icon('grid-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grid-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grid-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grip-horizontal/">
@@ -9132,7 +9132,7 @@ <h2>Icons</h2>
 {{ render_icon('grip-horizontal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grip-horizontal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grip-horizontal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/grip-vertical/">
@@ -9140,7 +9140,7 @@ <h2>Icons</h2>
 {{ render_icon('grip-vertical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">grip-vertical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">grip-vertical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/h-circle/">
@@ -9148,7 +9148,7 @@ <h2>Icons</h2>
 {{ render_icon('h-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">h-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">h-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/h-circle-fill/">
@@ -9156,7 +9156,7 @@ <h2>Icons</h2>
 {{ render_icon('h-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">h-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">h-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/h-square/">
@@ -9164,7 +9164,7 @@ <h2>Icons</h2>
 {{ render_icon('h-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">h-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">h-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/h-square-fill/">
@@ -9172,7 +9172,7 @@ <h2>Icons</h2>
 {{ render_icon('h-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">h-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">h-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hammer/">
@@ -9180,7 +9180,7 @@ <h2>Icons</h2>
 {{ render_icon('hammer', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hammer</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hammer</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hand-index/">
@@ -9188,7 +9188,7 @@ <h2>Icons</h2>
 {{ render_icon('hand-index', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hand-index</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hand-index</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hand-index-fill/">
@@ -9196,7 +9196,7 @@ <h2>Icons</h2>
 {{ render_icon('hand-index-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hand-index-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hand-index-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hand-index-thumb/">
@@ -9204,7 +9204,7 @@ <h2>Icons</h2>
 {{ render_icon('hand-index-thumb', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hand-index-thumb</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hand-index-thumb</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hand-index-thumb-fill/">
@@ -9212,7 +9212,7 @@ <h2>Icons</h2>
 {{ render_icon('hand-index-thumb-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hand-index-thumb-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hand-index-thumb-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hand-thumbs-down/">
@@ -9220,7 +9220,7 @@ <h2>Icons</h2>
 {{ render_icon('hand-thumbs-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hand-thumbs-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hand-thumbs-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hand-thumbs-down-fill/">
@@ -9228,7 +9228,7 @@ <h2>Icons</h2>
 {{ render_icon('hand-thumbs-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hand-thumbs-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hand-thumbs-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hand-thumbs-up/">
@@ -9236,7 +9236,7 @@ <h2>Icons</h2>
 {{ render_icon('hand-thumbs-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hand-thumbs-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hand-thumbs-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hand-thumbs-up-fill/">
@@ -9244,7 +9244,7 @@ <h2>Icons</h2>
 {{ render_icon('hand-thumbs-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hand-thumbs-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hand-thumbs-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/handbag/">
@@ -9252,7 +9252,7 @@ <h2>Icons</h2>
 {{ render_icon('handbag', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">handbag</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">handbag</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/handbag-fill/">
@@ -9260,7 +9260,7 @@ <h2>Icons</h2>
 {{ render_icon('handbag-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">handbag-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">handbag-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hash/">
@@ -9268,7 +9268,7 @@ <h2>Icons</h2>
 {{ render_icon('hash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdd/">
@@ -9276,7 +9276,7 @@ <h2>Icons</h2>
 {{ render_icon('hdd', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdd</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdd</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdd-fill/">
@@ -9284,7 +9284,7 @@ <h2>Icons</h2>
 {{ render_icon('hdd-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdd-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdd-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdd-network/">
@@ -9292,7 +9292,7 @@ <h2>Icons</h2>
 {{ render_icon('hdd-network', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdd-network</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdd-network</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdd-network-fill/">
@@ -9300,7 +9300,7 @@ <h2>Icons</h2>
 {{ render_icon('hdd-network-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdd-network-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdd-network-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdd-rack/">
@@ -9308,7 +9308,7 @@ <h2>Icons</h2>
 {{ render_icon('hdd-rack', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdd-rack</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdd-rack</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdd-rack-fill/">
@@ -9316,7 +9316,7 @@ <h2>Icons</h2>
 {{ render_icon('hdd-rack-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdd-rack-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdd-rack-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdd-stack/">
@@ -9324,7 +9324,7 @@ <h2>Icons</h2>
 {{ render_icon('hdd-stack', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdd-stack</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdd-stack</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdd-stack-fill/">
@@ -9332,7 +9332,7 @@ <h2>Icons</h2>
 {{ render_icon('hdd-stack-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdd-stack-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdd-stack-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdmi/">
@@ -9340,7 +9340,7 @@ <h2>Icons</h2>
 {{ render_icon('hdmi', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdmi</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdmi</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hdmi-fill/">
@@ -9348,7 +9348,7 @@ <h2>Icons</h2>
 {{ render_icon('hdmi-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hdmi-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hdmi-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/headphones/">
@@ -9356,7 +9356,7 @@ <h2>Icons</h2>
 {{ render_icon('headphones', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">headphones</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">headphones</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/headset/">
@@ -9364,7 +9364,7 @@ <h2>Icons</h2>
 {{ render_icon('headset', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">headset</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">headset</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/headset-vr/">
@@ -9372,7 +9372,7 @@ <h2>Icons</h2>
 {{ render_icon('headset-vr', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">headset-vr</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">headset-vr</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heart/">
@@ -9380,7 +9380,7 @@ <h2>Icons</h2>
 {{ render_icon('heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heart-arrow/">
@@ -9388,7 +9388,7 @@ <h2>Icons</h2>
 {{ render_icon('heart-arrow', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heart-arrow</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heart-arrow</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heart-fill/">
@@ -9396,7 +9396,7 @@ <h2>Icons</h2>
 {{ render_icon('heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heart-half/">
@@ -9404,7 +9404,7 @@ <h2>Icons</h2>
 {{ render_icon('heart-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heart-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heart-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heart-pulse/">
@@ -9412,7 +9412,7 @@ <h2>Icons</h2>
 {{ render_icon('heart-pulse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heart-pulse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heart-pulse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heart-pulse-fill/">
@@ -9420,7 +9420,7 @@ <h2>Icons</h2>
 {{ render_icon('heart-pulse-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heart-pulse-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heart-pulse-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heartbreak/">
@@ -9428,7 +9428,7 @@ <h2>Icons</h2>
 {{ render_icon('heartbreak', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heartbreak</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heartbreak</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heartbreak-fill/">
@@ -9436,7 +9436,7 @@ <h2>Icons</h2>
 {{ render_icon('heartbreak-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heartbreak-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heartbreak-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hearts/">
@@ -9444,7 +9444,7 @@ <h2>Icons</h2>
 {{ render_icon('hearts', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hearts</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hearts</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heptagon/">
@@ -9452,7 +9452,7 @@ <h2>Icons</h2>
 {{ render_icon('heptagon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heptagon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heptagon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heptagon-fill/">
@@ -9460,7 +9460,7 @@ <h2>Icons</h2>
 {{ render_icon('heptagon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heptagon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heptagon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/heptagon-half/">
@@ -9468,7 +9468,7 @@ <h2>Icons</h2>
 {{ render_icon('heptagon-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">heptagon-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">heptagon-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hexagon/">
@@ -9476,7 +9476,7 @@ <h2>Icons</h2>
 {{ render_icon('hexagon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hexagon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hexagon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hexagon-fill/">
@@ -9484,7 +9484,7 @@ <h2>Icons</h2>
 {{ render_icon('hexagon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hexagon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hexagon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hexagon-half/">
@@ -9492,7 +9492,7 @@ <h2>Icons</h2>
 {{ render_icon('hexagon-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hexagon-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hexagon-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/highlighter/">
@@ -9500,7 +9500,7 @@ <h2>Icons</h2>
 {{ render_icon('highlighter', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">highlighter</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">highlighter</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/highlights/">
@@ -9508,7 +9508,7 @@ <h2>Icons</h2>
 {{ render_icon('highlights', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">highlights</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">highlights</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hospital/">
@@ -9516,7 +9516,7 @@ <h2>Icons</h2>
 {{ render_icon('hospital', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hospital</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hospital</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hospital-fill/">
@@ -9524,7 +9524,7 @@ <h2>Icons</h2>
 {{ render_icon('hospital-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hospital-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hospital-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hourglass/">
@@ -9532,7 +9532,7 @@ <h2>Icons</h2>
 {{ render_icon('hourglass', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hourglass</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hourglass</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hourglass-bottom/">
@@ -9540,7 +9540,7 @@ <h2>Icons</h2>
 {{ render_icon('hourglass-bottom', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hourglass-bottom</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hourglass-bottom</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hourglass-split/">
@@ -9548,7 +9548,7 @@ <h2>Icons</h2>
 {{ render_icon('hourglass-split', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hourglass-split</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hourglass-split</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hourglass-top/">
@@ -9556,7 +9556,7 @@ <h2>Icons</h2>
 {{ render_icon('hourglass-top', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hourglass-top</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hourglass-top</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house/">
@@ -9564,7 +9564,7 @@ <h2>Icons</h2>
 {{ render_icon('house', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-add/">
@@ -9572,7 +9572,7 @@ <h2>Icons</h2>
 {{ render_icon('house-add', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-add</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-add</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-add-fill/">
@@ -9580,7 +9580,7 @@ <h2>Icons</h2>
 {{ render_icon('house-add-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-add-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-add-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-check/">
@@ -9588,7 +9588,7 @@ <h2>Icons</h2>
 {{ render_icon('house-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-check-fill/">
@@ -9596,7 +9596,7 @@ <h2>Icons</h2>
 {{ render_icon('house-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-dash/">
@@ -9604,7 +9604,7 @@ <h2>Icons</h2>
 {{ render_icon('house-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-dash-fill/">
@@ -9612,7 +9612,7 @@ <h2>Icons</h2>
 {{ render_icon('house-dash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-dash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-dash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-door/">
@@ -9620,7 +9620,7 @@ <h2>Icons</h2>
 {{ render_icon('house-door', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-door</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-door</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-door-fill/">
@@ -9628,7 +9628,7 @@ <h2>Icons</h2>
 {{ render_icon('house-door-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-door-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-door-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-down/">
@@ -9636,7 +9636,7 @@ <h2>Icons</h2>
 {{ render_icon('house-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-down-fill/">
@@ -9644,7 +9644,7 @@ <h2>Icons</h2>
 {{ render_icon('house-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-exclamation/">
@@ -9652,7 +9652,7 @@ <h2>Icons</h2>
 {{ render_icon('house-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-exclamation-fill/">
@@ -9660,7 +9660,7 @@ <h2>Icons</h2>
 {{ render_icon('house-exclamation-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-exclamation-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-exclamation-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-fill/">
@@ -9668,7 +9668,7 @@ <h2>Icons</h2>
 {{ render_icon('house-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-gear/">
@@ -9676,7 +9676,7 @@ <h2>Icons</h2>
 {{ render_icon('house-gear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-gear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-gear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-gear-fill/">
@@ -9684,7 +9684,7 @@ <h2>Icons</h2>
 {{ render_icon('house-gear-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-gear-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-gear-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-heart/">
@@ -9692,7 +9692,7 @@ <h2>Icons</h2>
 {{ render_icon('house-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-heart-fill/">
@@ -9700,7 +9700,7 @@ <h2>Icons</h2>
 {{ render_icon('house-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-lock/">
@@ -9708,7 +9708,7 @@ <h2>Icons</h2>
 {{ render_icon('house-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-lock-fill/">
@@ -9716,7 +9716,7 @@ <h2>Icons</h2>
 {{ render_icon('house-lock-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-lock-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-lock-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-slash/">
@@ -9724,7 +9724,7 @@ <h2>Icons</h2>
 {{ render_icon('house-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-slash-fill/">
@@ -9732,7 +9732,7 @@ <h2>Icons</h2>
 {{ render_icon('house-slash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-slash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-slash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-up/">
@@ -9740,7 +9740,7 @@ <h2>Icons</h2>
 {{ render_icon('house-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-up-fill/">
@@ -9748,7 +9748,7 @@ <h2>Icons</h2>
 {{ render_icon('house-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-x/">
@@ -9756,7 +9756,7 @@ <h2>Icons</h2>
 {{ render_icon('house-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/house-x-fill/">
@@ -9764,7 +9764,7 @@ <h2>Icons</h2>
 {{ render_icon('house-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">house-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">house-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/houses/">
@@ -9772,7 +9772,7 @@ <h2>Icons</h2>
 {{ render_icon('houses', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">houses</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">houses</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/houses-fill/">
@@ -9780,7 +9780,7 @@ <h2>Icons</h2>
 {{ render_icon('houses-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">houses-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">houses-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hr/">
@@ -9788,7 +9788,7 @@ <h2>Icons</h2>
 {{ render_icon('hr', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hr</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hr</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hurricane/">
@@ -9796,7 +9796,7 @@ <h2>Icons</h2>
 {{ render_icon('hurricane', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hurricane</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hurricane</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/hypnotize/">
@@ -9804,7 +9804,7 @@ <h2>Icons</h2>
 {{ render_icon('hypnotize', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">hypnotize</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">hypnotize</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/image/">
@@ -9812,7 +9812,7 @@ <h2>Icons</h2>
 {{ render_icon('image', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">image</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">image</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/image-alt/">
@@ -9820,7 +9820,7 @@ <h2>Icons</h2>
 {{ render_icon('image-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">image-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">image-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/image-fill/">
@@ -9828,7 +9828,7 @@ <h2>Icons</h2>
 {{ render_icon('image-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">image-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">image-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/images/">
@@ -9836,7 +9836,7 @@ <h2>Icons</h2>
 {{ render_icon('images', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">images</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">images</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/inbox/">
@@ -9844,7 +9844,7 @@ <h2>Icons</h2>
 {{ render_icon('inbox', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">inbox</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">inbox</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/inbox-fill/">
@@ -9852,7 +9852,7 @@ <h2>Icons</h2>
 {{ render_icon('inbox-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">inbox-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">inbox-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/inboxes/">
@@ -9860,7 +9860,7 @@ <h2>Icons</h2>
 {{ render_icon('inboxes', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">inboxes</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">inboxes</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/inboxes-fill/">
@@ -9868,7 +9868,7 @@ <h2>Icons</h2>
 {{ render_icon('inboxes-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">inboxes-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">inboxes-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/incognito/">
@@ -9876,7 +9876,7 @@ <h2>Icons</h2>
 {{ render_icon('incognito', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">incognito</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">incognito</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/indent/">
@@ -9884,7 +9884,7 @@ <h2>Icons</h2>
 {{ render_icon('indent', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">indent</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">indent</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/infinity/">
@@ -9892,7 +9892,7 @@ <h2>Icons</h2>
 {{ render_icon('infinity', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">infinity</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">infinity</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/info/">
@@ -9900,7 +9900,7 @@ <h2>Icons</h2>
 {{ render_icon('info', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">info</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">info</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/info-circle/">
@@ -9908,7 +9908,7 @@ <h2>Icons</h2>
 {{ render_icon('info-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">info-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">info-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/info-circle-fill/">
@@ -9916,7 +9916,7 @@ <h2>Icons</h2>
 {{ render_icon('info-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">info-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">info-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/info-lg/">
@@ -9924,7 +9924,7 @@ <h2>Icons</h2>
 {{ render_icon('info-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">info-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">info-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/info-square/">
@@ -9932,7 +9932,7 @@ <h2>Icons</h2>
 {{ render_icon('info-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">info-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">info-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/info-square-fill/">
@@ -9940,7 +9940,7 @@ <h2>Icons</h2>
 {{ render_icon('info-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">info-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">info-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/input-cursor/">
@@ -9948,7 +9948,7 @@ <h2>Icons</h2>
 {{ render_icon('input-cursor', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">input-cursor</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">input-cursor</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/input-cursor-text/">
@@ -9956,7 +9956,7 @@ <h2>Icons</h2>
 {{ render_icon('input-cursor-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">input-cursor-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">input-cursor-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/instagram/">
@@ -9964,7 +9964,7 @@ <h2>Icons</h2>
 {{ render_icon('instagram', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">instagram</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">instagram</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/intersect/">
@@ -9972,7 +9972,7 @@ <h2>Icons</h2>
 {{ render_icon('intersect', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">intersect</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">intersect</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal/">
@@ -9980,7 +9980,7 @@ <h2>Icons</h2>
 {{ render_icon('journal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-album/">
@@ -9988,7 +9988,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-album', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-album</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-album</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-arrow-down/">
@@ -9996,7 +9996,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-arrow-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-arrow-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-arrow-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-arrow-up/">
@@ -10004,7 +10004,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-arrow-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-arrow-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-arrow-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-bookmark/">
@@ -10012,7 +10012,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-bookmark', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-bookmark</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-bookmark</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-bookmark-fill/">
@@ -10020,7 +10020,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-bookmark-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-bookmark-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-bookmark-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-check/">
@@ -10028,7 +10028,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-code/">
@@ -10036,7 +10036,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-code', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-code</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-code</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-medical/">
@@ -10044,7 +10044,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-medical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-medical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-medical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-minus/">
@@ -10052,7 +10052,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-plus/">
@@ -10060,7 +10060,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-richtext/">
@@ -10068,7 +10068,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-richtext', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-richtext</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-richtext</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-text/">
@@ -10076,7 +10076,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-text', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-text</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-text</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journal-x/">
@@ -10084,7 +10084,7 @@ <h2>Icons</h2>
 {{ render_icon('journal-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journal-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journal-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/journals/">
@@ -10092,7 +10092,7 @@ <h2>Icons</h2>
 {{ render_icon('journals', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">journals</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">journals</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/joystick/">
@@ -10100,7 +10100,7 @@ <h2>Icons</h2>
 {{ render_icon('joystick', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">joystick</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">joystick</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/justify/">
@@ -10108,7 +10108,7 @@ <h2>Icons</h2>
 {{ render_icon('justify', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">justify</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">justify</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/justify-left/">
@@ -10116,7 +10116,7 @@ <h2>Icons</h2>
 {{ render_icon('justify-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">justify-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">justify-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/justify-right/">
@@ -10124,7 +10124,7 @@ <h2>Icons</h2>
 {{ render_icon('justify-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">justify-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">justify-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/kanban/">
@@ -10132,7 +10132,7 @@ <h2>Icons</h2>
 {{ render_icon('kanban', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">kanban</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">kanban</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/kanban-fill/">
@@ -10140,7 +10140,7 @@ <h2>Icons</h2>
 {{ render_icon('kanban-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">kanban-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">kanban-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/key/">
@@ -10148,7 +10148,7 @@ <h2>Icons</h2>
 {{ render_icon('key', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">key</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">key</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/key-fill/">
@@ -10156,7 +10156,7 @@ <h2>Icons</h2>
 {{ render_icon('key-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">key-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">key-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/keyboard/">
@@ -10164,7 +10164,7 @@ <h2>Icons</h2>
 {{ render_icon('keyboard', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">keyboard</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">keyboard</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/keyboard-fill/">
@@ -10172,7 +10172,7 @@ <h2>Icons</h2>
 {{ render_icon('keyboard-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">keyboard-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">keyboard-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ladder/">
@@ -10180,7 +10180,7 @@ <h2>Icons</h2>
 {{ render_icon('ladder', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ladder</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ladder</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lamp/">
@@ -10188,7 +10188,7 @@ <h2>Icons</h2>
 {{ render_icon('lamp', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lamp</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lamp</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lamp-fill/">
@@ -10196,7 +10196,7 @@ <h2>Icons</h2>
 {{ render_icon('lamp-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lamp-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lamp-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/laptop/">
@@ -10204,7 +10204,7 @@ <h2>Icons</h2>
 {{ render_icon('laptop', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">laptop</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">laptop</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/laptop-fill/">
@@ -10212,7 +10212,7 @@ <h2>Icons</h2>
 {{ render_icon('laptop-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">laptop-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">laptop-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layer-backward/">
@@ -10220,7 +10220,7 @@ <h2>Icons</h2>
 {{ render_icon('layer-backward', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layer-backward</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layer-backward</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layer-forward/">
@@ -10228,7 +10228,7 @@ <h2>Icons</h2>
 {{ render_icon('layer-forward', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layer-forward</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layer-forward</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layers/">
@@ -10236,7 +10236,7 @@ <h2>Icons</h2>
 {{ render_icon('layers', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layers</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layers</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layers-fill/">
@@ -10244,7 +10244,7 @@ <h2>Icons</h2>
 {{ render_icon('layers-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layers-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layers-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layers-half/">
@@ -10252,7 +10252,7 @@ <h2>Icons</h2>
 {{ render_icon('layers-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layers-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layers-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-sidebar/">
@@ -10260,7 +10260,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-sidebar', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-sidebar</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-sidebar</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-sidebar-inset/">
@@ -10268,7 +10268,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-sidebar-inset', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-sidebar-inset</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-sidebar-inset</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-sidebar-inset-reverse/">
@@ -10276,7 +10276,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-sidebar-inset-reverse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-sidebar-inset-reverse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-sidebar-inset-reverse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-sidebar-reverse/">
@@ -10284,7 +10284,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-sidebar-reverse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-sidebar-reverse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-sidebar-reverse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-split/">
@@ -10292,7 +10292,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-split', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-split</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-split</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-text-sidebar/">
@@ -10300,7 +10300,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-text-sidebar', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-text-sidebar</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-text-sidebar</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-text-sidebar-reverse/">
@@ -10308,7 +10308,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-text-sidebar-reverse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-text-sidebar-reverse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-text-sidebar-reverse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-text-window/">
@@ -10316,7 +10316,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-text-window', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-text-window</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-text-window</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-text-window-reverse/">
@@ -10324,7 +10324,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-text-window-reverse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-text-window-reverse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-text-window-reverse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-three-columns/">
@@ -10332,7 +10332,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-three-columns', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-three-columns</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-three-columns</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/layout-wtf/">
@@ -10340,7 +10340,7 @@ <h2>Icons</h2>
 {{ render_icon('layout-wtf', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">layout-wtf</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">layout-wtf</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/life-preserver/">
@@ -10348,7 +10348,7 @@ <h2>Icons</h2>
 {{ render_icon('life-preserver', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">life-preserver</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">life-preserver</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lightbulb/">
@@ -10356,7 +10356,7 @@ <h2>Icons</h2>
 {{ render_icon('lightbulb', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lightbulb</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lightbulb</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lightbulb-fill/">
@@ -10364,7 +10364,7 @@ <h2>Icons</h2>
 {{ render_icon('lightbulb-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lightbulb-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lightbulb-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lightbulb-off/">
@@ -10372,7 +10372,7 @@ <h2>Icons</h2>
 {{ render_icon('lightbulb-off', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lightbulb-off</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lightbulb-off</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lightbulb-off-fill/">
@@ -10380,7 +10380,7 @@ <h2>Icons</h2>
 {{ render_icon('lightbulb-off-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lightbulb-off-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lightbulb-off-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lightning/">
@@ -10388,7 +10388,7 @@ <h2>Icons</h2>
 {{ render_icon('lightning', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lightning</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lightning</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lightning-charge/">
@@ -10396,7 +10396,7 @@ <h2>Icons</h2>
 {{ render_icon('lightning-charge', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lightning-charge</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lightning-charge</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lightning-charge-fill/">
@@ -10404,7 +10404,7 @@ <h2>Icons</h2>
 {{ render_icon('lightning-charge-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lightning-charge-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lightning-charge-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lightning-fill/">
@@ -10412,7 +10412,7 @@ <h2>Icons</h2>
 {{ render_icon('lightning-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lightning-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lightning-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/line/">
@@ -10420,7 +10420,7 @@ <h2>Icons</h2>
 {{ render_icon('line', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">line</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">line</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/link/">
@@ -10428,7 +10428,7 @@ <h2>Icons</h2>
 {{ render_icon('link', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">link</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">link</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/link-45deg/">
@@ -10436,7 +10436,7 @@ <h2>Icons</h2>
 {{ render_icon('link-45deg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">link-45deg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">link-45deg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/linkedin/">
@@ -10444,7 +10444,7 @@ <h2>Icons</h2>
 {{ render_icon('linkedin', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">linkedin</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">linkedin</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list/">
@@ -10452,7 +10452,7 @@ <h2>Icons</h2>
 {{ render_icon('list', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list-check/">
@@ -10460,7 +10460,7 @@ <h2>Icons</h2>
 {{ render_icon('list-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list-columns/">
@@ -10468,7 +10468,7 @@ <h2>Icons</h2>
 {{ render_icon('list-columns', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list-columns</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list-columns</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list-columns-reverse/">
@@ -10476,7 +10476,7 @@ <h2>Icons</h2>
 {{ render_icon('list-columns-reverse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list-columns-reverse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list-columns-reverse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list-nested/">
@@ -10484,7 +10484,7 @@ <h2>Icons</h2>
 {{ render_icon('list-nested', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list-nested</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list-nested</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list-ol/">
@@ -10492,7 +10492,7 @@ <h2>Icons</h2>
 {{ render_icon('list-ol', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list-ol</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list-ol</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list-stars/">
@@ -10500,7 +10500,7 @@ <h2>Icons</h2>
 {{ render_icon('list-stars', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list-stars</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list-stars</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list-task/">
@@ -10508,7 +10508,7 @@ <h2>Icons</h2>
 {{ render_icon('list-task', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list-task</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list-task</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/list-ul/">
@@ -10516,7 +10516,7 @@ <h2>Icons</h2>
 {{ render_icon('list-ul', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">list-ul</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">list-ul</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lock/">
@@ -10524,7 +10524,7 @@ <h2>Icons</h2>
 {{ render_icon('lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lock-fill/">
@@ -10532,7 +10532,7 @@ <h2>Icons</h2>
 {{ render_icon('lock-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lock-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lock-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/luggage/">
@@ -10540,7 +10540,7 @@ <h2>Icons</h2>
 {{ render_icon('luggage', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">luggage</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">luggage</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/luggage-fill/">
@@ -10548,7 +10548,7 @@ <h2>Icons</h2>
 {{ render_icon('luggage-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">luggage-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">luggage-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lungs/">
@@ -10556,7 +10556,7 @@ <h2>Icons</h2>
 {{ render_icon('lungs', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lungs</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lungs</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/lungs-fill/">
@@ -10564,7 +10564,7 @@ <h2>Icons</h2>
 {{ render_icon('lungs-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">lungs-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">lungs-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/magic/">
@@ -10572,7 +10572,7 @@ <h2>Icons</h2>
 {{ render_icon('magic', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">magic</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">magic</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/magnet/">
@@ -10580,7 +10580,7 @@ <h2>Icons</h2>
 {{ render_icon('magnet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">magnet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">magnet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/magnet-fill/">
@@ -10588,7 +10588,7 @@ <h2>Icons</h2>
 {{ render_icon('magnet-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">magnet-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">magnet-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mailbox/">
@@ -10596,7 +10596,7 @@ <h2>Icons</h2>
 {{ render_icon('mailbox', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mailbox</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mailbox</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mailbox-flag/">
@@ -10604,7 +10604,7 @@ <h2>Icons</h2>
 {{ render_icon('mailbox-flag', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mailbox-flag</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mailbox-flag</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mailbox2/">
@@ -10612,7 +10612,7 @@ <h2>Icons</h2>
 {{ render_icon('mailbox2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mailbox2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mailbox2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mailbox2-flag/">
@@ -10620,7 +10620,7 @@ <h2>Icons</h2>
 {{ render_icon('mailbox2-flag', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mailbox2-flag</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mailbox2-flag</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/map/">
@@ -10628,7 +10628,7 @@ <h2>Icons</h2>
 {{ render_icon('map', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">map</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">map</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/map-fill/">
@@ -10636,7 +10636,7 @@ <h2>Icons</h2>
 {{ render_icon('map-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">map-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">map-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/markdown/">
@@ -10644,7 +10644,7 @@ <h2>Icons</h2>
 {{ render_icon('markdown', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">markdown</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">markdown</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/markdown-fill/">
@@ -10652,7 +10652,7 @@ <h2>Icons</h2>
 {{ render_icon('markdown-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">markdown-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">markdown-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/marker-tip/">
@@ -10660,7 +10660,7 @@ <h2>Icons</h2>
 {{ render_icon('marker-tip', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">marker-tip</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">marker-tip</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mask/">
@@ -10668,7 +10668,7 @@ <h2>Icons</h2>
 {{ render_icon('mask', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mask</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mask</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mastodon/">
@@ -10676,7 +10676,7 @@ <h2>Icons</h2>
 {{ render_icon('mastodon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mastodon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mastodon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/medium/">
@@ -10684,7 +10684,7 @@ <h2>Icons</h2>
 {{ render_icon('medium', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">medium</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">medium</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/megaphone/">
@@ -10692,7 +10692,7 @@ <h2>Icons</h2>
 {{ render_icon('megaphone', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">megaphone</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">megaphone</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/megaphone-fill/">
@@ -10700,7 +10700,7 @@ <h2>Icons</h2>
 {{ render_icon('megaphone-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">megaphone-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">megaphone-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/memory/">
@@ -10708,7 +10708,7 @@ <h2>Icons</h2>
 {{ render_icon('memory', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">memory</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">memory</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/menu-app/">
@@ -10716,7 +10716,7 @@ <h2>Icons</h2>
 {{ render_icon('menu-app', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">menu-app</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">menu-app</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/menu-app-fill/">
@@ -10724,7 +10724,7 @@ <h2>Icons</h2>
 {{ render_icon('menu-app-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">menu-app-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">menu-app-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/menu-button/">
@@ -10732,7 +10732,7 @@ <h2>Icons</h2>
 {{ render_icon('menu-button', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">menu-button</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">menu-button</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/menu-button-fill/">
@@ -10740,7 +10740,7 @@ <h2>Icons</h2>
 {{ render_icon('menu-button-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">menu-button-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">menu-button-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/menu-button-wide/">
@@ -10748,7 +10748,7 @@ <h2>Icons</h2>
 {{ render_icon('menu-button-wide', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">menu-button-wide</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">menu-button-wide</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/menu-button-wide-fill/">
@@ -10756,7 +10756,7 @@ <h2>Icons</h2>
 {{ render_icon('menu-button-wide-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">menu-button-wide-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">menu-button-wide-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/menu-down/">
@@ -10764,7 +10764,7 @@ <h2>Icons</h2>
 {{ render_icon('menu-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">menu-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">menu-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/menu-up/">
@@ -10772,7 +10772,7 @@ <h2>Icons</h2>
 {{ render_icon('menu-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">menu-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">menu-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/messenger/">
@@ -10780,7 +10780,7 @@ <h2>Icons</h2>
 {{ render_icon('messenger', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">messenger</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">messenger</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/meta/">
@@ -10788,7 +10788,7 @@ <h2>Icons</h2>
 {{ render_icon('meta', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">meta</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">meta</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mic/">
@@ -10796,7 +10796,7 @@ <h2>Icons</h2>
 {{ render_icon('mic', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mic</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mic</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mic-fill/">
@@ -10804,7 +10804,7 @@ <h2>Icons</h2>
 {{ render_icon('mic-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mic-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mic-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mic-mute/">
@@ -10812,7 +10812,7 @@ <h2>Icons</h2>
 {{ render_icon('mic-mute', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mic-mute</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mic-mute</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mic-mute-fill/">
@@ -10820,7 +10820,7 @@ <h2>Icons</h2>
 {{ render_icon('mic-mute-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mic-mute-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mic-mute-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/microsoft/">
@@ -10828,7 +10828,7 @@ <h2>Icons</h2>
 {{ render_icon('microsoft', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">microsoft</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">microsoft</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/microsoft-teams/">
@@ -10836,7 +10836,7 @@ <h2>Icons</h2>
 {{ render_icon('microsoft-teams', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">microsoft-teams</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">microsoft-teams</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/minecart/">
@@ -10844,7 +10844,7 @@ <h2>Icons</h2>
 {{ render_icon('minecart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">minecart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">minecart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/minecart-loaded/">
@@ -10852,7 +10852,7 @@ <h2>Icons</h2>
 {{ render_icon('minecart-loaded', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">minecart-loaded</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">minecart-loaded</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/modem/">
@@ -10860,7 +10860,7 @@ <h2>Icons</h2>
 {{ render_icon('modem', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">modem</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">modem</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/modem-fill/">
@@ -10868,7 +10868,7 @@ <h2>Icons</h2>
 {{ render_icon('modem-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">modem-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">modem-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/moisture/">
@@ -10876,7 +10876,7 @@ <h2>Icons</h2>
 {{ render_icon('moisture', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">moisture</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">moisture</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/moon/">
@@ -10884,7 +10884,7 @@ <h2>Icons</h2>
 {{ render_icon('moon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">moon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">moon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/moon-fill/">
@@ -10892,7 +10892,7 @@ <h2>Icons</h2>
 {{ render_icon('moon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">moon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">moon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/moon-stars/">
@@ -10900,7 +10900,7 @@ <h2>Icons</h2>
 {{ render_icon('moon-stars', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">moon-stars</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">moon-stars</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/moon-stars-fill/">
@@ -10908,7 +10908,7 @@ <h2>Icons</h2>
 {{ render_icon('moon-stars-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">moon-stars-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">moon-stars-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mortarboard/">
@@ -10916,7 +10916,7 @@ <h2>Icons</h2>
 {{ render_icon('mortarboard', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mortarboard</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mortarboard</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mortarboard-fill/">
@@ -10924,7 +10924,7 @@ <h2>Icons</h2>
 {{ render_icon('mortarboard-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mortarboard-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mortarboard-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/motherboard/">
@@ -10932,7 +10932,7 @@ <h2>Icons</h2>
 {{ render_icon('motherboard', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">motherboard</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">motherboard</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/motherboard-fill/">
@@ -10940,7 +10940,7 @@ <h2>Icons</h2>
 {{ render_icon('motherboard-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">motherboard-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">motherboard-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mouse/">
@@ -10948,7 +10948,7 @@ <h2>Icons</h2>
 {{ render_icon('mouse', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mouse</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mouse</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mouse-fill/">
@@ -10956,7 +10956,7 @@ <h2>Icons</h2>
 {{ render_icon('mouse-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mouse-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mouse-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mouse2/">
@@ -10964,7 +10964,7 @@ <h2>Icons</h2>
 {{ render_icon('mouse2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mouse2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mouse2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mouse2-fill/">
@@ -10972,7 +10972,7 @@ <h2>Icons</h2>
 {{ render_icon('mouse2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mouse2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mouse2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mouse3/">
@@ -10980,7 +10980,7 @@ <h2>Icons</h2>
 {{ render_icon('mouse3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mouse3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mouse3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/mouse3-fill/">
@@ -10988,7 +10988,7 @@ <h2>Icons</h2>
 {{ render_icon('mouse3-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">mouse3-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">mouse3-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/music-note/">
@@ -10996,7 +10996,7 @@ <h2>Icons</h2>
 {{ render_icon('music-note', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">music-note</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">music-note</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/music-note-beamed/">
@@ -11004,7 +11004,7 @@ <h2>Icons</h2>
 {{ render_icon('music-note-beamed', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">music-note-beamed</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">music-note-beamed</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/music-note-list/">
@@ -11012,7 +11012,7 @@ <h2>Icons</h2>
 {{ render_icon('music-note-list', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">music-note-list</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">music-note-list</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/music-player/">
@@ -11020,7 +11020,7 @@ <h2>Icons</h2>
 {{ render_icon('music-player', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">music-player</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">music-player</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/music-player-fill/">
@@ -11028,7 +11028,7 @@ <h2>Icons</h2>
 {{ render_icon('music-player-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">music-player-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">music-player-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/newspaper/">
@@ -11036,7 +11036,7 @@ <h2>Icons</h2>
 {{ render_icon('newspaper', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">newspaper</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">newspaper</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/nintendo-switch/">
@@ -11044,7 +11044,7 @@ <h2>Icons</h2>
 {{ render_icon('nintendo-switch', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">nintendo-switch</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">nintendo-switch</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/node-minus/">
@@ -11052,7 +11052,7 @@ <h2>Icons</h2>
 {{ render_icon('node-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">node-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">node-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/node-minus-fill/">
@@ -11060,7 +11060,7 @@ <h2>Icons</h2>
 {{ render_icon('node-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">node-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">node-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/node-plus/">
@@ -11068,7 +11068,7 @@ <h2>Icons</h2>
 {{ render_icon('node-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">node-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">node-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/node-plus-fill/">
@@ -11076,7 +11076,7 @@ <h2>Icons</h2>
 {{ render_icon('node-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">node-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">node-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/noise-reduction/">
@@ -11084,7 +11084,7 @@ <h2>Icons</h2>
 {{ render_icon('noise-reduction', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">noise-reduction</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">noise-reduction</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/nut/">
@@ -11092,7 +11092,7 @@ <h2>Icons</h2>
 {{ render_icon('nut', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">nut</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">nut</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/nut-fill/">
@@ -11100,7 +11100,7 @@ <h2>Icons</h2>
 {{ render_icon('nut-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">nut-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">nut-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/nvidia/">
@@ -11108,7 +11108,7 @@ <h2>Icons</h2>
 {{ render_icon('nvidia', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">nvidia</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">nvidia</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/nvme/">
@@ -11116,7 +11116,7 @@ <h2>Icons</h2>
 {{ render_icon('nvme', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">nvme</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">nvme</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/nvme-fill/">
@@ -11124,7 +11124,7 @@ <h2>Icons</h2>
 {{ render_icon('nvme-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">nvme-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">nvme-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/octagon/">
@@ -11132,7 +11132,7 @@ <h2>Icons</h2>
 {{ render_icon('octagon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">octagon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">octagon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/octagon-fill/">
@@ -11140,7 +11140,7 @@ <h2>Icons</h2>
 {{ render_icon('octagon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">octagon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">octagon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/octagon-half/">
@@ -11148,7 +11148,7 @@ <h2>Icons</h2>
 {{ render_icon('octagon-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">octagon-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">octagon-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/opencollective/">
@@ -11156,7 +11156,7 @@ <h2>Icons</h2>
 {{ render_icon('opencollective', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">opencollective</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">opencollective</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/optical-audio/">
@@ -11164,7 +11164,7 @@ <h2>Icons</h2>
 {{ render_icon('optical-audio', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">optical-audio</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">optical-audio</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/optical-audio-fill/">
@@ -11172,7 +11172,7 @@ <h2>Icons</h2>
 {{ render_icon('optical-audio-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">optical-audio-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">optical-audio-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/option/">
@@ -11180,7 +11180,7 @@ <h2>Icons</h2>
 {{ render_icon('option', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">option</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">option</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/outlet/">
@@ -11188,7 +11188,7 @@ <h2>Icons</h2>
 {{ render_icon('outlet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">outlet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">outlet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/p-circle/">
@@ -11196,7 +11196,7 @@ <h2>Icons</h2>
 {{ render_icon('p-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">p-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">p-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/p-circle-fill/">
@@ -11204,7 +11204,7 @@ <h2>Icons</h2>
 {{ render_icon('p-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">p-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">p-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/p-square/">
@@ -11212,7 +11212,7 @@ <h2>Icons</h2>
 {{ render_icon('p-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">p-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">p-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/p-square-fill/">
@@ -11220,7 +11220,7 @@ <h2>Icons</h2>
 {{ render_icon('p-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">p-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">p-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/paint-bucket/">
@@ -11228,7 +11228,7 @@ <h2>Icons</h2>
 {{ render_icon('paint-bucket', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">paint-bucket</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">paint-bucket</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/palette/">
@@ -11236,7 +11236,7 @@ <h2>Icons</h2>
 {{ render_icon('palette', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">palette</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">palette</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/palette-fill/">
@@ -11244,7 +11244,7 @@ <h2>Icons</h2>
 {{ render_icon('palette-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">palette-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">palette-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/palette2/">
@@ -11252,7 +11252,7 @@ <h2>Icons</h2>
 {{ render_icon('palette2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">palette2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">palette2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/paperclip/">
@@ -11260,7 +11260,7 @@ <h2>Icons</h2>
 {{ render_icon('paperclip', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">paperclip</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">paperclip</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/paragraph/">
@@ -11268,7 +11268,7 @@ <h2>Icons</h2>
 {{ render_icon('paragraph', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">paragraph</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">paragraph</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pass/">
@@ -11276,7 +11276,7 @@ <h2>Icons</h2>
 {{ render_icon('pass', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pass</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pass</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pass-fill/">
@@ -11284,7 +11284,7 @@ <h2>Icons</h2>
 {{ render_icon('pass-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pass-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pass-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/passport/">
@@ -11292,7 +11292,7 @@ <h2>Icons</h2>
 {{ render_icon('passport', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">passport</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">passport</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/passport-fill/">
@@ -11300,7 +11300,7 @@ <h2>Icons</h2>
 {{ render_icon('passport-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">passport-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">passport-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-check/">
@@ -11308,7 +11308,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-check-fill/">
@@ -11316,7 +11316,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-exclamation/">
@@ -11324,7 +11324,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-exclamation-fill/">
@@ -11332,7 +11332,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-exclamation-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-exclamation-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-exclamation-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-minus/">
@@ -11340,7 +11340,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-minus-fill/">
@@ -11348,7 +11348,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-plus/">
@@ -11356,7 +11356,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-plus-fill/">
@@ -11364,7 +11364,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-question/">
@@ -11372,7 +11372,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-question', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-question</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-question</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/patch-question-fill/">
@@ -11380,7 +11380,7 @@ <h2>Icons</h2>
 {{ render_icon('patch-question-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">patch-question-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">patch-question-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pause/">
@@ -11388,7 +11388,7 @@ <h2>Icons</h2>
 {{ render_icon('pause', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pause</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pause</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pause-btn/">
@@ -11396,7 +11396,7 @@ <h2>Icons</h2>
 {{ render_icon('pause-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pause-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pause-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pause-btn-fill/">
@@ -11404,7 +11404,7 @@ <h2>Icons</h2>
 {{ render_icon('pause-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pause-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pause-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pause-circle/">
@@ -11412,7 +11412,7 @@ <h2>Icons</h2>
 {{ render_icon('pause-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pause-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pause-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pause-circle-fill/">
@@ -11420,7 +11420,7 @@ <h2>Icons</h2>
 {{ render_icon('pause-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pause-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pause-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pause-fill/">
@@ -11428,7 +11428,7 @@ <h2>Icons</h2>
 {{ render_icon('pause-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pause-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pause-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/paypal/">
@@ -11436,7 +11436,7 @@ <h2>Icons</h2>
 {{ render_icon('paypal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">paypal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">paypal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pc/">
@@ -11444,7 +11444,7 @@ <h2>Icons</h2>
 {{ render_icon('pc', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pc</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pc</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pc-display/">
@@ -11452,7 +11452,7 @@ <h2>Icons</h2>
 {{ render_icon('pc-display', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pc-display</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pc-display</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pc-display-horizontal/">
@@ -11460,7 +11460,7 @@ <h2>Icons</h2>
 {{ render_icon('pc-display-horizontal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pc-display-horizontal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pc-display-horizontal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pc-horizontal/">
@@ -11468,7 +11468,7 @@ <h2>Icons</h2>
 {{ render_icon('pc-horizontal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pc-horizontal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pc-horizontal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pci-card/">
@@ -11476,7 +11476,7 @@ <h2>Icons</h2>
 {{ render_icon('pci-card', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pci-card</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pci-card</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pci-card-network/">
@@ -11484,7 +11484,7 @@ <h2>Icons</h2>
 {{ render_icon('pci-card-network', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pci-card-network</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pci-card-network</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pci-card-sound/">
@@ -11492,7 +11492,7 @@ <h2>Icons</h2>
 {{ render_icon('pci-card-sound', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pci-card-sound</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pci-card-sound</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/peace/">
@@ -11500,7 +11500,7 @@ <h2>Icons</h2>
 {{ render_icon('peace', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">peace</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">peace</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/peace-fill/">
@@ -11508,7 +11508,7 @@ <h2>Icons</h2>
 {{ render_icon('peace-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">peace-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">peace-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pen/">
@@ -11516,7 +11516,7 @@ <h2>Icons</h2>
 {{ render_icon('pen', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pen</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pen</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pen-fill/">
@@ -11524,7 +11524,7 @@ <h2>Icons</h2>
 {{ render_icon('pen-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pen-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pen-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pencil/">
@@ -11532,7 +11532,7 @@ <h2>Icons</h2>
 {{ render_icon('pencil', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pencil</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pencil</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pencil-fill/">
@@ -11540,7 +11540,7 @@ <h2>Icons</h2>
 {{ render_icon('pencil-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pencil-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pencil-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pencil-square/">
@@ -11548,7 +11548,7 @@ <h2>Icons</h2>
 {{ render_icon('pencil-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pencil-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pencil-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pentagon/">
@@ -11556,7 +11556,7 @@ <h2>Icons</h2>
 {{ render_icon('pentagon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pentagon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pentagon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pentagon-fill/">
@@ -11564,7 +11564,7 @@ <h2>Icons</h2>
 {{ render_icon('pentagon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pentagon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pentagon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pentagon-half/">
@@ -11572,7 +11572,7 @@ <h2>Icons</h2>
 {{ render_icon('pentagon-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pentagon-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pentagon-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/people/">
@@ -11580,7 +11580,7 @@ <h2>Icons</h2>
 {{ render_icon('people', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">people</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">people</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/people-fill/">
@@ -11588,7 +11588,7 @@ <h2>Icons</h2>
 {{ render_icon('people-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">people-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">people-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/percent/">
@@ -11596,7 +11596,7 @@ <h2>Icons</h2>
 {{ render_icon('percent', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">percent</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">percent</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person/">
@@ -11604,7 +11604,7 @@ <h2>Icons</h2>
 {{ render_icon('person', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-add/">
@@ -11612,7 +11612,7 @@ <h2>Icons</h2>
 {{ render_icon('person-add', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-add</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-add</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-arms-up/">
@@ -11620,7 +11620,7 @@ <h2>Icons</h2>
 {{ render_icon('person-arms-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-arms-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-arms-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-badge/">
@@ -11628,7 +11628,7 @@ <h2>Icons</h2>
 {{ render_icon('person-badge', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-badge</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-badge</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-badge-fill/">
@@ -11636,7 +11636,7 @@ <h2>Icons</h2>
 {{ render_icon('person-badge-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-badge-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-badge-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-bounding-box/">
@@ -11644,7 +11644,7 @@ <h2>Icons</h2>
 {{ render_icon('person-bounding-box', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-bounding-box</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-bounding-box</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-check/">
@@ -11652,7 +11652,7 @@ <h2>Icons</h2>
 {{ render_icon('person-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-check-fill/">
@@ -11660,7 +11660,7 @@ <h2>Icons</h2>
 {{ render_icon('person-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-circle/">
@@ -11668,7 +11668,7 @@ <h2>Icons</h2>
 {{ render_icon('person-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-dash/">
@@ -11676,7 +11676,7 @@ <h2>Icons</h2>
 {{ render_icon('person-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-dash-fill/">
@@ -11684,7 +11684,7 @@ <h2>Icons</h2>
 {{ render_icon('person-dash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-dash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-dash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-down/">
@@ -11692,7 +11692,7 @@ <h2>Icons</h2>
 {{ render_icon('person-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-exclamation/">
@@ -11700,7 +11700,7 @@ <h2>Icons</h2>
 {{ render_icon('person-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill/">
@@ -11708,7 +11708,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-add/">
@@ -11716,7 +11716,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-add', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-add</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-add</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-check/">
@@ -11724,7 +11724,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-dash/">
@@ -11732,7 +11732,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-down/">
@@ -11740,7 +11740,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-exclamation/">
@@ -11748,7 +11748,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-gear/">
@@ -11756,7 +11756,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-gear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-gear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-gear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-lock/">
@@ -11764,7 +11764,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-slash/">
@@ -11772,7 +11772,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-up/">
@@ -11780,7 +11780,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-fill-x/">
@@ -11788,7 +11788,7 @@ <h2>Icons</h2>
 {{ render_icon('person-fill-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-fill-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-fill-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-gear/">
@@ -11796,7 +11796,7 @@ <h2>Icons</h2>
 {{ render_icon('person-gear', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-gear</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-gear</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-heart/">
@@ -11804,7 +11804,7 @@ <h2>Icons</h2>
 {{ render_icon('person-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-hearts/">
@@ -11812,7 +11812,7 @@ <h2>Icons</h2>
 {{ render_icon('person-hearts', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-hearts</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-hearts</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-lines-fill/">
@@ -11820,7 +11820,7 @@ <h2>Icons</h2>
 {{ render_icon('person-lines-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-lines-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-lines-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-lock/">
@@ -11828,7 +11828,7 @@ <h2>Icons</h2>
 {{ render_icon('person-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-plus/">
@@ -11836,7 +11836,7 @@ <h2>Icons</h2>
 {{ render_icon('person-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-plus-fill/">
@@ -11844,7 +11844,7 @@ <h2>Icons</h2>
 {{ render_icon('person-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-raised-hand/">
@@ -11852,7 +11852,7 @@ <h2>Icons</h2>
 {{ render_icon('person-raised-hand', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-raised-hand</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-raised-hand</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-rolodex/">
@@ -11860,7 +11860,7 @@ <h2>Icons</h2>
 {{ render_icon('person-rolodex', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-rolodex</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-rolodex</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-slash/">
@@ -11868,7 +11868,7 @@ <h2>Icons</h2>
 {{ render_icon('person-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-square/">
@@ -11876,7 +11876,7 @@ <h2>Icons</h2>
 {{ render_icon('person-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-standing/">
@@ -11884,7 +11884,7 @@ <h2>Icons</h2>
 {{ render_icon('person-standing', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-standing</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-standing</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-standing-dress/">
@@ -11892,7 +11892,7 @@ <h2>Icons</h2>
 {{ render_icon('person-standing-dress', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-standing-dress</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-standing-dress</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-up/">
@@ -11900,7 +11900,7 @@ <h2>Icons</h2>
 {{ render_icon('person-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-vcard/">
@@ -11908,7 +11908,7 @@ <h2>Icons</h2>
 {{ render_icon('person-vcard', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-vcard</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-vcard</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-vcard-fill/">
@@ -11916,7 +11916,7 @@ <h2>Icons</h2>
 {{ render_icon('person-vcard-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-vcard-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-vcard-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-video/">
@@ -11924,7 +11924,7 @@ <h2>Icons</h2>
 {{ render_icon('person-video', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-video</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-video</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-video2/">
@@ -11932,7 +11932,7 @@ <h2>Icons</h2>
 {{ render_icon('person-video2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-video2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-video2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-video3/">
@@ -11940,7 +11940,7 @@ <h2>Icons</h2>
 {{ render_icon('person-video3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-video3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-video3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-walking/">
@@ -11948,7 +11948,7 @@ <h2>Icons</h2>
 {{ render_icon('person-walking', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-walking</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-walking</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-wheelchair/">
@@ -11956,7 +11956,7 @@ <h2>Icons</h2>
 {{ render_icon('person-wheelchair', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-wheelchair</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-wheelchair</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-workspace/">
@@ -11964,7 +11964,7 @@ <h2>Icons</h2>
 {{ render_icon('person-workspace', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-workspace</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-workspace</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-x/">
@@ -11972,7 +11972,7 @@ <h2>Icons</h2>
 {{ render_icon('person-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/person-x-fill/">
@@ -11980,7 +11980,7 @@ <h2>Icons</h2>
 {{ render_icon('person-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">person-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">person-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/phone/">
@@ -11988,7 +11988,7 @@ <h2>Icons</h2>
 {{ render_icon('phone', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">phone</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">phone</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/phone-fill/">
@@ -11996,7 +11996,7 @@ <h2>Icons</h2>
 {{ render_icon('phone-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">phone-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">phone-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/phone-flip/">
@@ -12004,7 +12004,7 @@ <h2>Icons</h2>
 {{ render_icon('phone-flip', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">phone-flip</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">phone-flip</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/phone-landscape/">
@@ -12012,7 +12012,7 @@ <h2>Icons</h2>
 {{ render_icon('phone-landscape', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">phone-landscape</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">phone-landscape</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/phone-landscape-fill/">
@@ -12020,7 +12020,7 @@ <h2>Icons</h2>
 {{ render_icon('phone-landscape-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">phone-landscape-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">phone-landscape-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/phone-vibrate/">
@@ -12028,7 +12028,7 @@ <h2>Icons</h2>
 {{ render_icon('phone-vibrate', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">phone-vibrate</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">phone-vibrate</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/phone-vibrate-fill/">
@@ -12036,7 +12036,7 @@ <h2>Icons</h2>
 {{ render_icon('phone-vibrate-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">phone-vibrate-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">phone-vibrate-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pie-chart/">
@@ -12044,7 +12044,7 @@ <h2>Icons</h2>
 {{ render_icon('pie-chart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pie-chart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pie-chart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pie-chart-fill/">
@@ -12052,7 +12052,7 @@ <h2>Icons</h2>
 {{ render_icon('pie-chart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pie-chart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pie-chart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/piggy-bank/">
@@ -12060,7 +12060,7 @@ <h2>Icons</h2>
 {{ render_icon('piggy-bank', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">piggy-bank</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">piggy-bank</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/piggy-bank-fill/">
@@ -12068,7 +12068,7 @@ <h2>Icons</h2>
 {{ render_icon('piggy-bank-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">piggy-bank-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">piggy-bank-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pin/">
@@ -12076,7 +12076,7 @@ <h2>Icons</h2>
 {{ render_icon('pin', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pin</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pin</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pin-angle/">
@@ -12084,7 +12084,7 @@ <h2>Icons</h2>
 {{ render_icon('pin-angle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pin-angle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pin-angle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pin-angle-fill/">
@@ -12092,7 +12092,7 @@ <h2>Icons</h2>
 {{ render_icon('pin-angle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pin-angle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pin-angle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pin-fill/">
@@ -12100,7 +12100,7 @@ <h2>Icons</h2>
 {{ render_icon('pin-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pin-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pin-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pin-map/">
@@ -12108,7 +12108,7 @@ <h2>Icons</h2>
 {{ render_icon('pin-map', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pin-map</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pin-map</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pin-map-fill/">
@@ -12116,7 +12116,7 @@ <h2>Icons</h2>
 {{ render_icon('pin-map-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pin-map-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pin-map-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pinterest/">
@@ -12124,7 +12124,7 @@ <h2>Icons</h2>
 {{ render_icon('pinterest', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pinterest</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pinterest</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pip/">
@@ -12132,7 +12132,7 @@ <h2>Icons</h2>
 {{ render_icon('pip', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pip</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pip</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/pip-fill/">
@@ -12140,7 +12140,7 @@ <h2>Icons</h2>
 {{ render_icon('pip-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">pip-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">pip-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/play/">
@@ -12148,7 +12148,7 @@ <h2>Icons</h2>
 {{ render_icon('play', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">play</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">play</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/play-btn/">
@@ -12156,7 +12156,7 @@ <h2>Icons</h2>
 {{ render_icon('play-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">play-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">play-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/play-btn-fill/">
@@ -12164,7 +12164,7 @@ <h2>Icons</h2>
 {{ render_icon('play-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">play-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">play-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/play-circle/">
@@ -12172,7 +12172,7 @@ <h2>Icons</h2>
 {{ render_icon('play-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">play-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">play-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/play-circle-fill/">
@@ -12180,7 +12180,7 @@ <h2>Icons</h2>
 {{ render_icon('play-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">play-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">play-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/play-fill/">
@@ -12188,7 +12188,7 @@ <h2>Icons</h2>
 {{ render_icon('play-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">play-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">play-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/playstation/">
@@ -12196,7 +12196,7 @@ <h2>Icons</h2>
 {{ render_icon('playstation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">playstation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">playstation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plug/">
@@ -12204,7 +12204,7 @@ <h2>Icons</h2>
 {{ render_icon('plug', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plug</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plug</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plug-fill/">
@@ -12212,7 +12212,7 @@ <h2>Icons</h2>
 {{ render_icon('plug-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plug-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plug-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plugin/">
@@ -12220,7 +12220,7 @@ <h2>Icons</h2>
 {{ render_icon('plugin', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plugin</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plugin</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus/">
@@ -12228,7 +12228,7 @@ <h2>Icons</h2>
 {{ render_icon('plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus-circle/">
@@ -12236,7 +12236,7 @@ <h2>Icons</h2>
 {{ render_icon('plus-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus-circle-dotted/">
@@ -12244,7 +12244,7 @@ <h2>Icons</h2>
 {{ render_icon('plus-circle-dotted', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus-circle-dotted</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus-circle-dotted</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus-circle-fill/">
@@ -12252,7 +12252,7 @@ <h2>Icons</h2>
 {{ render_icon('plus-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus-lg/">
@@ -12260,7 +12260,7 @@ <h2>Icons</h2>
 {{ render_icon('plus-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus-slash-minus/">
@@ -12268,7 +12268,7 @@ <h2>Icons</h2>
 {{ render_icon('plus-slash-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus-slash-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus-slash-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus-square/">
@@ -12276,7 +12276,7 @@ <h2>Icons</h2>
 {{ render_icon('plus-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus-square-dotted/">
@@ -12284,7 +12284,7 @@ <h2>Icons</h2>
 {{ render_icon('plus-square-dotted', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus-square-dotted</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus-square-dotted</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/plus-square-fill/">
@@ -12292,7 +12292,7 @@ <h2>Icons</h2>
 {{ render_icon('plus-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">plus-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">plus-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/postage/">
@@ -12300,7 +12300,7 @@ <h2>Icons</h2>
 {{ render_icon('postage', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">postage</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">postage</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/postage-fill/">
@@ -12308,7 +12308,7 @@ <h2>Icons</h2>
 {{ render_icon('postage-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">postage-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">postage-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/postage-heart/">
@@ -12316,7 +12316,7 @@ <h2>Icons</h2>
 {{ render_icon('postage-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">postage-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">postage-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/postage-heart-fill/">
@@ -12324,7 +12324,7 @@ <h2>Icons</h2>
 {{ render_icon('postage-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">postage-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">postage-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/postcard/">
@@ -12332,7 +12332,7 @@ <h2>Icons</h2>
 {{ render_icon('postcard', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">postcard</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">postcard</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/postcard-fill/">
@@ -12340,7 +12340,7 @@ <h2>Icons</h2>
 {{ render_icon('postcard-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">postcard-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">postcard-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/postcard-heart/">
@@ -12348,7 +12348,7 @@ <h2>Icons</h2>
 {{ render_icon('postcard-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">postcard-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">postcard-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/postcard-heart-fill/">
@@ -12356,7 +12356,7 @@ <h2>Icons</h2>
 {{ render_icon('postcard-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">postcard-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">postcard-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/power/">
@@ -12364,7 +12364,7 @@ <h2>Icons</h2>
 {{ render_icon('power', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">power</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">power</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/prescription/">
@@ -12372,7 +12372,7 @@ <h2>Icons</h2>
 {{ render_icon('prescription', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">prescription</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">prescription</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/prescription2/">
@@ -12380,7 +12380,7 @@ <h2>Icons</h2>
 {{ render_icon('prescription2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">prescription2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">prescription2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/printer/">
@@ -12388,7 +12388,7 @@ <h2>Icons</h2>
 {{ render_icon('printer', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">printer</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">printer</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/printer-fill/">
@@ -12396,7 +12396,7 @@ <h2>Icons</h2>
 {{ render_icon('printer-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">printer-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">printer-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/projector/">
@@ -12404,7 +12404,7 @@ <h2>Icons</h2>
 {{ render_icon('projector', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">projector</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">projector</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/projector-fill/">
@@ -12412,7 +12412,7 @@ <h2>Icons</h2>
 {{ render_icon('projector-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">projector-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">projector-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/puzzle/">
@@ -12420,7 +12420,7 @@ <h2>Icons</h2>
 {{ render_icon('puzzle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">puzzle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">puzzle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/puzzle-fill/">
@@ -12428,7 +12428,7 @@ <h2>Icons</h2>
 {{ render_icon('puzzle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">puzzle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">puzzle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/qr-code/">
@@ -12436,7 +12436,7 @@ <h2>Icons</h2>
 {{ render_icon('qr-code', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">qr-code</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">qr-code</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/qr-code-scan/">
@@ -12444,7 +12444,7 @@ <h2>Icons</h2>
 {{ render_icon('qr-code-scan', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">qr-code-scan</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">qr-code-scan</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question/">
@@ -12452,7 +12452,7 @@ <h2>Icons</h2>
 {{ render_icon('question', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-circle/">
@@ -12460,7 +12460,7 @@ <h2>Icons</h2>
 {{ render_icon('question-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-circle-fill/">
@@ -12468,7 +12468,7 @@ <h2>Icons</h2>
 {{ render_icon('question-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-diamond/">
@@ -12476,7 +12476,7 @@ <h2>Icons</h2>
 {{ render_icon('question-diamond', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-diamond</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-diamond</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-diamond-fill/">
@@ -12484,7 +12484,7 @@ <h2>Icons</h2>
 {{ render_icon('question-diamond-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-diamond-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-diamond-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-lg/">
@@ -12492,7 +12492,7 @@ <h2>Icons</h2>
 {{ render_icon('question-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-octagon/">
@@ -12500,7 +12500,7 @@ <h2>Icons</h2>
 {{ render_icon('question-octagon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-octagon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-octagon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-octagon-fill/">
@@ -12508,7 +12508,7 @@ <h2>Icons</h2>
 {{ render_icon('question-octagon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-octagon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-octagon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-square/">
@@ -12516,7 +12516,7 @@ <h2>Icons</h2>
 {{ render_icon('question-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/question-square-fill/">
@@ -12524,7 +12524,7 @@ <h2>Icons</h2>
 {{ render_icon('question-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">question-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">question-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/quora/">
@@ -12532,7 +12532,7 @@ <h2>Icons</h2>
 {{ render_icon('quora', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">quora</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">quora</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/quote/">
@@ -12540,7 +12540,7 @@ <h2>Icons</h2>
 {{ render_icon('quote', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">quote</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">quote</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/r-circle/">
@@ -12548,7 +12548,7 @@ <h2>Icons</h2>
 {{ render_icon('r-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">r-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">r-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/r-circle-fill/">
@@ -12556,7 +12556,7 @@ <h2>Icons</h2>
 {{ render_icon('r-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">r-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">r-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/r-square/">
@@ -12564,7 +12564,7 @@ <h2>Icons</h2>
 {{ render_icon('r-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">r-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">r-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/r-square-fill/">
@@ -12572,7 +12572,7 @@ <h2>Icons</h2>
 {{ render_icon('r-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">r-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">r-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/radar/">
@@ -12580,7 +12580,7 @@ <h2>Icons</h2>
 {{ render_icon('radar', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">radar</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">radar</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/radioactive/">
@@ -12588,7 +12588,7 @@ <h2>Icons</h2>
 {{ render_icon('radioactive', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">radioactive</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">radioactive</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rainbow/">
@@ -12596,7 +12596,7 @@ <h2>Icons</h2>
 {{ render_icon('rainbow', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rainbow</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rainbow</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/receipt/">
@@ -12604,7 +12604,7 @@ <h2>Icons</h2>
 {{ render_icon('receipt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">receipt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">receipt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/receipt-cutoff/">
@@ -12612,7 +12612,7 @@ <h2>Icons</h2>
 {{ render_icon('receipt-cutoff', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">receipt-cutoff</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">receipt-cutoff</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reception-0/">
@@ -12620,7 +12620,7 @@ <h2>Icons</h2>
 {{ render_icon('reception-0', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reception-0</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reception-0</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reception-1/">
@@ -12628,7 +12628,7 @@ <h2>Icons</h2>
 {{ render_icon('reception-1', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reception-1</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reception-1</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reception-2/">
@@ -12636,7 +12636,7 @@ <h2>Icons</h2>
 {{ render_icon('reception-2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reception-2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reception-2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reception-3/">
@@ -12644,7 +12644,7 @@ <h2>Icons</h2>
 {{ render_icon('reception-3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reception-3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reception-3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reception-4/">
@@ -12652,7 +12652,7 @@ <h2>Icons</h2>
 {{ render_icon('reception-4', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reception-4</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reception-4</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/record/">
@@ -12660,7 +12660,7 @@ <h2>Icons</h2>
 {{ render_icon('record', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">record</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">record</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/record-btn/">
@@ -12668,7 +12668,7 @@ <h2>Icons</h2>
 {{ render_icon('record-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">record-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">record-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/record-btn-fill/">
@@ -12676,7 +12676,7 @@ <h2>Icons</h2>
 {{ render_icon('record-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">record-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">record-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/record-circle/">
@@ -12684,7 +12684,7 @@ <h2>Icons</h2>
 {{ render_icon('record-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">record-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">record-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/record-circle-fill/">
@@ -12692,7 +12692,7 @@ <h2>Icons</h2>
 {{ render_icon('record-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">record-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">record-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/record-fill/">
@@ -12700,7 +12700,7 @@ <h2>Icons</h2>
 {{ render_icon('record-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">record-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">record-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/record2/">
@@ -12708,7 +12708,7 @@ <h2>Icons</h2>
 {{ render_icon('record2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">record2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">record2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/record2-fill/">
@@ -12716,7 +12716,7 @@ <h2>Icons</h2>
 {{ render_icon('record2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">record2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">record2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/recycle/">
@@ -12724,7 +12724,7 @@ <h2>Icons</h2>
 {{ render_icon('recycle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">recycle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">recycle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reddit/">
@@ -12732,7 +12732,7 @@ <h2>Icons</h2>
 {{ render_icon('reddit', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reddit</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reddit</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/regex/">
@@ -12740,7 +12740,7 @@ <h2>Icons</h2>
 {{ render_icon('regex', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">regex</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">regex</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/repeat/">
@@ -12748,7 +12748,7 @@ <h2>Icons</h2>
 {{ render_icon('repeat', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">repeat</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">repeat</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/repeat-1/">
@@ -12756,7 +12756,7 @@ <h2>Icons</h2>
 {{ render_icon('repeat-1', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">repeat-1</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">repeat-1</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reply/">
@@ -12764,7 +12764,7 @@ <h2>Icons</h2>
 {{ render_icon('reply', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reply</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reply</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reply-all/">
@@ -12772,7 +12772,7 @@ <h2>Icons</h2>
 {{ render_icon('reply-all', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reply-all</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reply-all</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reply-all-fill/">
@@ -12780,7 +12780,7 @@ <h2>Icons</h2>
 {{ render_icon('reply-all-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reply-all-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reply-all-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/reply-fill/">
@@ -12788,7 +12788,7 @@ <h2>Icons</h2>
 {{ render_icon('reply-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">reply-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">reply-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rewind/">
@@ -12796,7 +12796,7 @@ <h2>Icons</h2>
 {{ render_icon('rewind', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rewind</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rewind</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rewind-btn/">
@@ -12804,7 +12804,7 @@ <h2>Icons</h2>
 {{ render_icon('rewind-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rewind-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rewind-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rewind-btn-fill/">
@@ -12812,7 +12812,7 @@ <h2>Icons</h2>
 {{ render_icon('rewind-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rewind-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rewind-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rewind-circle/">
@@ -12820,7 +12820,7 @@ <h2>Icons</h2>
 {{ render_icon('rewind-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rewind-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rewind-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rewind-circle-fill/">
@@ -12828,7 +12828,7 @@ <h2>Icons</h2>
 {{ render_icon('rewind-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rewind-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rewind-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rewind-fill/">
@@ -12836,7 +12836,7 @@ <h2>Icons</h2>
 {{ render_icon('rewind-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rewind-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rewind-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/robot/">
@@ -12844,7 +12844,7 @@ <h2>Icons</h2>
 {{ render_icon('robot', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">robot</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">robot</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rocket/">
@@ -12852,7 +12852,7 @@ <h2>Icons</h2>
 {{ render_icon('rocket', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rocket</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rocket</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rocket-fill/">
@@ -12860,7 +12860,7 @@ <h2>Icons</h2>
 {{ render_icon('rocket-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rocket-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rocket-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rocket-takeoff/">
@@ -12868,7 +12868,7 @@ <h2>Icons</h2>
 {{ render_icon('rocket-takeoff', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rocket-takeoff</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rocket-takeoff</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rocket-takeoff-fill/">
@@ -12876,7 +12876,7 @@ <h2>Icons</h2>
 {{ render_icon('rocket-takeoff-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rocket-takeoff-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rocket-takeoff-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/router/">
@@ -12884,7 +12884,7 @@ <h2>Icons</h2>
 {{ render_icon('router', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">router</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">router</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/router-fill/">
@@ -12892,7 +12892,7 @@ <h2>Icons</h2>
 {{ render_icon('router-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">router-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">router-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rss/">
@@ -12900,7 +12900,7 @@ <h2>Icons</h2>
 {{ render_icon('rss', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rss</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rss</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rss-fill/">
@@ -12908,7 +12908,7 @@ <h2>Icons</h2>
 {{ render_icon('rss-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rss-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rss-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/rulers/">
@@ -12916,7 +12916,7 @@ <h2>Icons</h2>
 {{ render_icon('rulers', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">rulers</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">rulers</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/safe/">
@@ -12924,7 +12924,7 @@ <h2>Icons</h2>
 {{ render_icon('safe', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">safe</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">safe</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/safe-fill/">
@@ -12932,7 +12932,7 @@ <h2>Icons</h2>
 {{ render_icon('safe-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">safe-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">safe-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/safe2/">
@@ -12940,7 +12940,7 @@ <h2>Icons</h2>
 {{ render_icon('safe2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">safe2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">safe2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/safe2-fill/">
@@ -12948,7 +12948,7 @@ <h2>Icons</h2>
 {{ render_icon('safe2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">safe2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">safe2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/save/">
@@ -12956,7 +12956,7 @@ <h2>Icons</h2>
 {{ render_icon('save', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">save</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">save</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/save-fill/">
@@ -12964,7 +12964,7 @@ <h2>Icons</h2>
 {{ render_icon('save-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">save-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">save-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/save2/">
@@ -12972,7 +12972,7 @@ <h2>Icons</h2>
 {{ render_icon('save2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">save2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">save2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/save2-fill/">
@@ -12980,7 +12980,7 @@ <h2>Icons</h2>
 {{ render_icon('save2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">save2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">save2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/scissors/">
@@ -12988,7 +12988,7 @@ <h2>Icons</h2>
 {{ render_icon('scissors', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">scissors</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">scissors</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/scooter/">
@@ -12996,7 +12996,7 @@ <h2>Icons</h2>
 {{ render_icon('scooter', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">scooter</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">scooter</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/screwdriver/">
@@ -13004,7 +13004,7 @@ <h2>Icons</h2>
 {{ render_icon('screwdriver', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">screwdriver</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">screwdriver</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sd-card/">
@@ -13012,7 +13012,7 @@ <h2>Icons</h2>
 {{ render_icon('sd-card', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sd-card</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sd-card</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sd-card-fill/">
@@ -13020,7 +13020,7 @@ <h2>Icons</h2>
 {{ render_icon('sd-card-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sd-card-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sd-card-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/search/">
@@ -13028,7 +13028,7 @@ <h2>Icons</h2>
 {{ render_icon('search', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">search</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">search</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/search-heart/">
@@ -13036,7 +13036,7 @@ <h2>Icons</h2>
 {{ render_icon('search-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">search-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">search-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/search-heart-fill/">
@@ -13044,7 +13044,7 @@ <h2>Icons</h2>
 {{ render_icon('search-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">search-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">search-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/segmented-nav/">
@@ -13052,7 +13052,7 @@ <h2>Icons</h2>
 {{ render_icon('segmented-nav', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">segmented-nav</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">segmented-nav</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send/">
@@ -13060,7 +13060,7 @@ <h2>Icons</h2>
 {{ render_icon('send', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-arrow-down/">
@@ -13068,7 +13068,7 @@ <h2>Icons</h2>
 {{ render_icon('send-arrow-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-arrow-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-arrow-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-arrow-down-fill/">
@@ -13076,7 +13076,7 @@ <h2>Icons</h2>
 {{ render_icon('send-arrow-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-arrow-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-arrow-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-arrow-up/">
@@ -13084,7 +13084,7 @@ <h2>Icons</h2>
 {{ render_icon('send-arrow-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-arrow-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-arrow-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-arrow-up-fill/">
@@ -13092,7 +13092,7 @@ <h2>Icons</h2>
 {{ render_icon('send-arrow-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-arrow-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-arrow-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-check/">
@@ -13100,7 +13100,7 @@ <h2>Icons</h2>
 {{ render_icon('send-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-check-fill/">
@@ -13108,7 +13108,7 @@ <h2>Icons</h2>
 {{ render_icon('send-check-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-check-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-check-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-dash/">
@@ -13116,7 +13116,7 @@ <h2>Icons</h2>
 {{ render_icon('send-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-dash-fill/">
@@ -13124,7 +13124,7 @@ <h2>Icons</h2>
 {{ render_icon('send-dash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-dash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-dash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-exclamation/">
@@ -13132,7 +13132,7 @@ <h2>Icons</h2>
 {{ render_icon('send-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-exclamation-fill/">
@@ -13140,7 +13140,7 @@ <h2>Icons</h2>
 {{ render_icon('send-exclamation-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-exclamation-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-exclamation-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-fill/">
@@ -13148,7 +13148,7 @@ <h2>Icons</h2>
 {{ render_icon('send-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-plus/">
@@ -13156,7 +13156,7 @@ <h2>Icons</h2>
 {{ render_icon('send-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-plus-fill/">
@@ -13164,7 +13164,7 @@ <h2>Icons</h2>
 {{ render_icon('send-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-slash/">
@@ -13172,7 +13172,7 @@ <h2>Icons</h2>
 {{ render_icon('send-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-slash-fill/">
@@ -13180,7 +13180,7 @@ <h2>Icons</h2>
 {{ render_icon('send-slash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-slash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-slash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-x/">
@@ -13188,7 +13188,7 @@ <h2>Icons</h2>
 {{ render_icon('send-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/send-x-fill/">
@@ -13196,7 +13196,7 @@ <h2>Icons</h2>
 {{ render_icon('send-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">send-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">send-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/server/">
@@ -13204,7 +13204,7 @@ <h2>Icons</h2>
 {{ render_icon('server', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">server</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">server</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shadows/">
@@ -13212,7 +13212,7 @@ <h2>Icons</h2>
 {{ render_icon('shadows', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shadows</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shadows</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/share/">
@@ -13220,7 +13220,7 @@ <h2>Icons</h2>
 {{ render_icon('share', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">share</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">share</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/share-fill/">
@@ -13228,7 +13228,7 @@ <h2>Icons</h2>
 {{ render_icon('share-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">share-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">share-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield/">
@@ -13236,7 +13236,7 @@ <h2>Icons</h2>
 {{ render_icon('shield', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-check/">
@@ -13244,7 +13244,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-exclamation/">
@@ -13252,7 +13252,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-fill/">
@@ -13260,7 +13260,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-fill-check/">
@@ -13268,7 +13268,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-fill-check', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-fill-check</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-fill-check</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-fill-exclamation/">
@@ -13276,7 +13276,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-fill-exclamation', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-fill-exclamation</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-fill-exclamation</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-fill-minus/">
@@ -13284,7 +13284,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-fill-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-fill-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-fill-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-fill-plus/">
@@ -13292,7 +13292,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-fill-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-fill-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-fill-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-fill-x/">
@@ -13300,7 +13300,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-fill-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-fill-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-fill-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-lock/">
@@ -13308,7 +13308,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-lock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-lock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-lock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-lock-fill/">
@@ -13316,7 +13316,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-lock-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-lock-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-lock-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-minus/">
@@ -13324,7 +13324,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-plus/">
@@ -13332,7 +13332,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-shaded/">
@@ -13340,7 +13340,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-shaded', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-shaded</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-shaded</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-slash/">
@@ -13348,7 +13348,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-slash-fill/">
@@ -13356,7 +13356,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-slash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-slash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-slash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shield-x/">
@@ -13364,7 +13364,7 @@ <h2>Icons</h2>
 {{ render_icon('shield-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shield-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shield-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shift/">
@@ -13372,7 +13372,7 @@ <h2>Icons</h2>
 {{ render_icon('shift', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shift</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shift</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shift-fill/">
@@ -13380,7 +13380,7 @@ <h2>Icons</h2>
 {{ render_icon('shift-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shift-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shift-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shop/">
@@ -13388,7 +13388,7 @@ <h2>Icons</h2>
 {{ render_icon('shop', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shop</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shop</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shop-window/">
@@ -13396,7 +13396,7 @@ <h2>Icons</h2>
 {{ render_icon('shop-window', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shop-window</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shop-window</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/shuffle/">
@@ -13404,7 +13404,7 @@ <h2>Icons</h2>
 {{ render_icon('shuffle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">shuffle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">shuffle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-dead-end/">
@@ -13412,7 +13412,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-dead-end', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-dead-end</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-dead-end</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-dead-end-fill/">
@@ -13420,7 +13420,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-dead-end-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-dead-end-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-dead-end-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-do-not-enter/">
@@ -13428,7 +13428,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-do-not-enter', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-do-not-enter</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-do-not-enter</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-do-not-enter-fill/">
@@ -13436,7 +13436,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-do-not-enter-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-do-not-enter-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-do-not-enter-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-intersection/">
@@ -13444,7 +13444,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-intersection', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-intersection</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-intersection</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-intersection-fill/">
@@ -13452,7 +13452,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-intersection-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-intersection-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-intersection-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-intersection-side/">
@@ -13460,7 +13460,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-intersection-side', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-intersection-side</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-intersection-side</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-intersection-side-fill/">
@@ -13468,7 +13468,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-intersection-side-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-intersection-side-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-intersection-side-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-intersection-t/">
@@ -13476,7 +13476,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-intersection-t', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-intersection-t</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-intersection-t</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-intersection-t-fill/">
@@ -13484,7 +13484,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-intersection-t-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-intersection-t-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-intersection-t-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-intersection-y/">
@@ -13492,7 +13492,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-intersection-y', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-intersection-y</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-intersection-y</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-intersection-y-fill/">
@@ -13500,7 +13500,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-intersection-y-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-intersection-y-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-intersection-y-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-merge-left/">
@@ -13508,7 +13508,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-merge-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-merge-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-merge-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-merge-left-fill/">
@@ -13516,7 +13516,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-merge-left-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-merge-left-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-merge-left-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-merge-right/">
@@ -13524,7 +13524,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-merge-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-merge-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-merge-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-merge-right-fill/">
@@ -13532,7 +13532,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-merge-right-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-merge-right-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-merge-right-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-no-left-turn/">
@@ -13540,7 +13540,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-no-left-turn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-no-left-turn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-no-left-turn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-no-left-turn-fill/">
@@ -13548,7 +13548,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-no-left-turn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-no-left-turn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-no-left-turn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-no-parking/">
@@ -13556,7 +13556,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-no-parking', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-no-parking</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-no-parking</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-no-parking-fill/">
@@ -13564,7 +13564,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-no-parking-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-no-parking-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-no-parking-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-no-right-turn/">
@@ -13572,7 +13572,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-no-right-turn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-no-right-turn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-no-right-turn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-no-right-turn-fill/">
@@ -13580,7 +13580,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-no-right-turn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-no-right-turn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-no-right-turn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-railroad/">
@@ -13588,7 +13588,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-railroad', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-railroad</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-railroad</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-railroad-fill/">
@@ -13596,7 +13596,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-railroad-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-railroad-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-railroad-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-stop/">
@@ -13604,7 +13604,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-stop', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-stop</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-stop</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-stop-fill/">
@@ -13612,7 +13612,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-stop-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-stop-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-stop-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-stop-lights/">
@@ -13620,7 +13620,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-stop-lights', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-stop-lights</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-stop-lights</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-stop-lights-fill/">
@@ -13628,7 +13628,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-stop-lights-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-stop-lights-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-stop-lights-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-turn-left/">
@@ -13636,7 +13636,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-turn-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-turn-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-turn-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-turn-left-fill/">
@@ -13644,7 +13644,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-turn-left-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-turn-left-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-turn-left-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-turn-right/">
@@ -13652,7 +13652,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-turn-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-turn-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-turn-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-turn-right-fill/">
@@ -13660,7 +13660,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-turn-right-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-turn-right-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-turn-right-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-turn-slight-left/">
@@ -13668,7 +13668,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-turn-slight-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-turn-slight-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-turn-slight-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-turn-slight-left-fill/">
@@ -13676,7 +13676,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-turn-slight-left-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-turn-slight-left-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-turn-slight-left-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-turn-slight-right/">
@@ -13684,7 +13684,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-turn-slight-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-turn-slight-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-turn-slight-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-turn-slight-right-fill/">
@@ -13692,7 +13692,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-turn-slight-right-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-turn-slight-right-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-turn-slight-right-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-yield/">
@@ -13700,7 +13700,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-yield', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-yield</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-yield</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sign-yield-fill/">
@@ -13708,7 +13708,7 @@ <h2>Icons</h2>
 {{ render_icon('sign-yield-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sign-yield-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sign-yield-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/signal/">
@@ -13716,7 +13716,7 @@ <h2>Icons</h2>
 {{ render_icon('signal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">signal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">signal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/signpost/">
@@ -13724,7 +13724,7 @@ <h2>Icons</h2>
 {{ render_icon('signpost', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">signpost</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">signpost</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/signpost-2/">
@@ -13732,7 +13732,7 @@ <h2>Icons</h2>
 {{ render_icon('signpost-2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">signpost-2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">signpost-2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/signpost-2-fill/">
@@ -13740,7 +13740,7 @@ <h2>Icons</h2>
 {{ render_icon('signpost-2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">signpost-2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">signpost-2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/signpost-fill/">
@@ -13748,7 +13748,7 @@ <h2>Icons</h2>
 {{ render_icon('signpost-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">signpost-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">signpost-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/signpost-split/">
@@ -13756,7 +13756,7 @@ <h2>Icons</h2>
 {{ render_icon('signpost-split', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">signpost-split</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">signpost-split</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/signpost-split-fill/">
@@ -13764,7 +13764,7 @@ <h2>Icons</h2>
 {{ render_icon('signpost-split-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">signpost-split-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">signpost-split-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sim/">
@@ -13772,7 +13772,7 @@ <h2>Icons</h2>
 {{ render_icon('sim', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sim</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sim</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sim-fill/">
@@ -13780,7 +13780,7 @@ <h2>Icons</h2>
 {{ render_icon('sim-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sim-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sim-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sim-slash/">
@@ -13788,7 +13788,7 @@ <h2>Icons</h2>
 {{ render_icon('sim-slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sim-slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sim-slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sim-slash-fill/">
@@ -13796,7 +13796,7 @@ <h2>Icons</h2>
 {{ render_icon('sim-slash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sim-slash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sim-slash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sina-weibo/">
@@ -13804,7 +13804,7 @@ <h2>Icons</h2>
 {{ render_icon('sina-weibo', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sina-weibo</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sina-weibo</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-backward/">
@@ -13812,7 +13812,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-backward', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-backward</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-backward</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-backward-btn/">
@@ -13820,7 +13820,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-backward-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-backward-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-backward-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-backward-btn-fill/">
@@ -13828,7 +13828,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-backward-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-backward-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-backward-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-backward-circle/">
@@ -13836,7 +13836,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-backward-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-backward-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-backward-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-backward-circle-fill/">
@@ -13844,7 +13844,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-backward-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-backward-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-backward-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-backward-fill/">
@@ -13852,7 +13852,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-backward-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-backward-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-backward-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-end/">
@@ -13860,7 +13860,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-end', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-end</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-end</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-end-btn/">
@@ -13868,7 +13868,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-end-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-end-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-end-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-end-btn-fill/">
@@ -13876,7 +13876,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-end-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-end-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-end-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-end-circle/">
@@ -13884,7 +13884,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-end-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-end-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-end-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-end-circle-fill/">
@@ -13892,7 +13892,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-end-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-end-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-end-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-end-fill/">
@@ -13900,7 +13900,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-end-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-end-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-end-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-forward/">
@@ -13908,7 +13908,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-forward', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-forward</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-forward</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-forward-btn/">
@@ -13916,7 +13916,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-forward-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-forward-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-forward-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-forward-btn-fill/">
@@ -13924,7 +13924,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-forward-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-forward-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-forward-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-forward-circle/">
@@ -13932,7 +13932,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-forward-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-forward-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-forward-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-forward-circle-fill/">
@@ -13940,7 +13940,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-forward-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-forward-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-forward-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-forward-fill/">
@@ -13948,7 +13948,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-forward-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-forward-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-forward-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-start/">
@@ -13956,7 +13956,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-start', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-start</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-start</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-start-btn/">
@@ -13964,7 +13964,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-start-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-start-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-start-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-start-btn-fill/">
@@ -13972,7 +13972,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-start-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-start-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-start-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-start-circle/">
@@ -13980,7 +13980,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-start-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-start-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-start-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-start-circle-fill/">
@@ -13988,7 +13988,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-start-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-start-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-start-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skip-start-fill/">
@@ -13996,7 +13996,7 @@ <h2>Icons</h2>
 {{ render_icon('skip-start-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skip-start-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skip-start-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/skype/">
@@ -14004,7 +14004,7 @@ <h2>Icons</h2>
 {{ render_icon('skype', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">skype</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">skype</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/slack/">
@@ -14012,7 +14012,7 @@ <h2>Icons</h2>
 {{ render_icon('slack', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">slack</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">slack</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/slash/">
@@ -14020,7 +14020,7 @@ <h2>Icons</h2>
 {{ render_icon('slash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">slash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">slash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/slash-circle/">
@@ -14028,7 +14028,7 @@ <h2>Icons</h2>
 {{ render_icon('slash-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">slash-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">slash-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/slash-circle-fill/">
@@ -14036,7 +14036,7 @@ <h2>Icons</h2>
 {{ render_icon('slash-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">slash-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">slash-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/slash-lg/">
@@ -14044,7 +14044,7 @@ <h2>Icons</h2>
 {{ render_icon('slash-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">slash-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">slash-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/slash-square/">
@@ -14052,7 +14052,7 @@ <h2>Icons</h2>
 {{ render_icon('slash-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">slash-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">slash-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/slash-square-fill/">
@@ -14060,7 +14060,7 @@ <h2>Icons</h2>
 {{ render_icon('slash-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">slash-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">slash-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sliders/">
@@ -14068,7 +14068,7 @@ <h2>Icons</h2>
 {{ render_icon('sliders', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sliders</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sliders</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sliders2/">
@@ -14076,7 +14076,7 @@ <h2>Icons</h2>
 {{ render_icon('sliders2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sliders2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sliders2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sliders2-vertical/">
@@ -14084,7 +14084,7 @@ <h2>Icons</h2>
 {{ render_icon('sliders2-vertical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sliders2-vertical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sliders2-vertical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/smartwatch/">
@@ -14092,7 +14092,7 @@ <h2>Icons</h2>
 {{ render_icon('smartwatch', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">smartwatch</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">smartwatch</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/snapchat/">
@@ -14100,7 +14100,7 @@ <h2>Icons</h2>
 {{ render_icon('snapchat', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">snapchat</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">snapchat</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/snow/">
@@ -14108,7 +14108,7 @@ <h2>Icons</h2>
 {{ render_icon('snow', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">snow</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">snow</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/snow2/">
@@ -14116,7 +14116,7 @@ <h2>Icons</h2>
 {{ render_icon('snow2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">snow2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">snow2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/snow3/">
@@ -14124,7 +14124,7 @@ <h2>Icons</h2>
 {{ render_icon('snow3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">snow3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">snow3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-alpha-down/">
@@ -14132,7 +14132,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-alpha-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-alpha-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-alpha-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-alpha-down-alt/">
@@ -14140,7 +14140,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-alpha-down-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-alpha-down-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-alpha-down-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-alpha-up/">
@@ -14148,7 +14148,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-alpha-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-alpha-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-alpha-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-alpha-up-alt/">
@@ -14156,7 +14156,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-alpha-up-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-alpha-up-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-alpha-up-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-down/">
@@ -14164,7 +14164,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-down-alt/">
@@ -14172,7 +14172,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-down-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-down-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-down-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-numeric-down/">
@@ -14180,7 +14180,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-numeric-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-numeric-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-numeric-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-numeric-down-alt/">
@@ -14188,7 +14188,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-numeric-down-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-numeric-down-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-numeric-down-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-numeric-up/">
@@ -14196,7 +14196,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-numeric-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-numeric-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-numeric-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-numeric-up-alt/">
@@ -14204,7 +14204,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-numeric-up-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-numeric-up-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-numeric-up-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-up/">
@@ -14212,7 +14212,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sort-up-alt/">
@@ -14220,7 +14220,7 @@ <h2>Icons</h2>
 {{ render_icon('sort-up-alt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sort-up-alt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sort-up-alt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/soundwave/">
@@ -14228,7 +14228,7 @@ <h2>Icons</h2>
 {{ render_icon('soundwave', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">soundwave</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">soundwave</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sourceforge/">
@@ -14236,7 +14236,7 @@ <h2>Icons</h2>
 {{ render_icon('sourceforge', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sourceforge</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sourceforge</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/speaker/">
@@ -14244,7 +14244,7 @@ <h2>Icons</h2>
 {{ render_icon('speaker', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">speaker</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">speaker</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/speaker-fill/">
@@ -14252,7 +14252,7 @@ <h2>Icons</h2>
 {{ render_icon('speaker-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">speaker-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">speaker-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/speedometer/">
@@ -14260,7 +14260,7 @@ <h2>Icons</h2>
 {{ render_icon('speedometer', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">speedometer</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">speedometer</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/speedometer2/">
@@ -14268,7 +14268,7 @@ <h2>Icons</h2>
 {{ render_icon('speedometer2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">speedometer2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">speedometer2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/spellcheck/">
@@ -14276,7 +14276,7 @@ <h2>Icons</h2>
 {{ render_icon('spellcheck', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">spellcheck</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">spellcheck</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/spotify/">
@@ -14284,7 +14284,7 @@ <h2>Icons</h2>
 {{ render_icon('spotify', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">spotify</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">spotify</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/square/">
@@ -14292,7 +14292,7 @@ <h2>Icons</h2>
 {{ render_icon('square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/square-fill/">
@@ -14300,7 +14300,7 @@ <h2>Icons</h2>
 {{ render_icon('square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/square-half/">
@@ -14308,7 +14308,7 @@ <h2>Icons</h2>
 {{ render_icon('square-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">square-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">square-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stack/">
@@ -14316,7 +14316,7 @@ <h2>Icons</h2>
 {{ render_icon('stack', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stack</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stack</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stack-overflow/">
@@ -14324,7 +14324,7 @@ <h2>Icons</h2>
 {{ render_icon('stack-overflow', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stack-overflow</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stack-overflow</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/star/">
@@ -14332,7 +14332,7 @@ <h2>Icons</h2>
 {{ render_icon('star', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">star</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">star</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/star-fill/">
@@ -14340,7 +14340,7 @@ <h2>Icons</h2>
 {{ render_icon('star-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">star-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">star-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/star-half/">
@@ -14348,7 +14348,7 @@ <h2>Icons</h2>
 {{ render_icon('star-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">star-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">star-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stars/">
@@ -14356,7 +14356,7 @@ <h2>Icons</h2>
 {{ render_icon('stars', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stars</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stars</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/steam/">
@@ -14364,7 +14364,7 @@ <h2>Icons</h2>
 {{ render_icon('steam', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">steam</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">steam</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stickies/">
@@ -14372,7 +14372,7 @@ <h2>Icons</h2>
 {{ render_icon('stickies', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stickies</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stickies</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stickies-fill/">
@@ -14380,7 +14380,7 @@ <h2>Icons</h2>
 {{ render_icon('stickies-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stickies-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stickies-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sticky/">
@@ -14388,7 +14388,7 @@ <h2>Icons</h2>
 {{ render_icon('sticky', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sticky</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sticky</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sticky-fill/">
@@ -14396,7 +14396,7 @@ <h2>Icons</h2>
 {{ render_icon('sticky-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sticky-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sticky-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stop/">
@@ -14404,7 +14404,7 @@ <h2>Icons</h2>
 {{ render_icon('stop', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stop</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stop</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stop-btn/">
@@ -14412,7 +14412,7 @@ <h2>Icons</h2>
 {{ render_icon('stop-btn', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stop-btn</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stop-btn</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stop-btn-fill/">
@@ -14420,7 +14420,7 @@ <h2>Icons</h2>
 {{ render_icon('stop-btn-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stop-btn-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stop-btn-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stop-circle/">
@@ -14428,7 +14428,7 @@ <h2>Icons</h2>
 {{ render_icon('stop-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stop-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stop-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stop-circle-fill/">
@@ -14436,7 +14436,7 @@ <h2>Icons</h2>
 {{ render_icon('stop-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stop-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stop-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stop-fill/">
@@ -14444,7 +14444,7 @@ <h2>Icons</h2>
 {{ render_icon('stop-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stop-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stop-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stoplights/">
@@ -14452,7 +14452,7 @@ <h2>Icons</h2>
 {{ render_icon('stoplights', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stoplights</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stoplights</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stoplights-fill/">
@@ -14460,7 +14460,7 @@ <h2>Icons</h2>
 {{ render_icon('stoplights-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stoplights-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stoplights-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stopwatch/">
@@ -14468,7 +14468,7 @@ <h2>Icons</h2>
 {{ render_icon('stopwatch', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stopwatch</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stopwatch</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stopwatch-fill/">
@@ -14476,7 +14476,7 @@ <h2>Icons</h2>
 {{ render_icon('stopwatch-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stopwatch-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stopwatch-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/strava/">
@@ -14484,7 +14484,7 @@ <h2>Icons</h2>
 {{ render_icon('strava', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">strava</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">strava</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/stripe/">
@@ -14492,7 +14492,7 @@ <h2>Icons</h2>
 {{ render_icon('stripe', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">stripe</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">stripe</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/subscript/">
@@ -14500,7 +14500,7 @@ <h2>Icons</h2>
 {{ render_icon('subscript', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">subscript</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">subscript</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/substack/">
@@ -14508,7 +14508,7 @@ <h2>Icons</h2>
 {{ render_icon('substack', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">substack</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">substack</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/subtract/">
@@ -14516,7 +14516,7 @@ <h2>Icons</h2>
 {{ render_icon('subtract', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">subtract</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">subtract</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suit-club/">
@@ -14524,7 +14524,7 @@ <h2>Icons</h2>
 {{ render_icon('suit-club', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suit-club</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suit-club</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suit-club-fill/">
@@ -14532,7 +14532,7 @@ <h2>Icons</h2>
 {{ render_icon('suit-club-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suit-club-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suit-club-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suit-diamond/">
@@ -14540,7 +14540,7 @@ <h2>Icons</h2>
 {{ render_icon('suit-diamond', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suit-diamond</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suit-diamond</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suit-diamond-fill/">
@@ -14548,7 +14548,7 @@ <h2>Icons</h2>
 {{ render_icon('suit-diamond-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suit-diamond-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suit-diamond-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suit-heart/">
@@ -14556,7 +14556,7 @@ <h2>Icons</h2>
 {{ render_icon('suit-heart', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suit-heart</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suit-heart</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suit-heart-fill/">
@@ -14564,7 +14564,7 @@ <h2>Icons</h2>
 {{ render_icon('suit-heart-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suit-heart-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suit-heart-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suit-spade/">
@@ -14572,7 +14572,7 @@ <h2>Icons</h2>
 {{ render_icon('suit-spade', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suit-spade</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suit-spade</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suit-spade-fill/">
@@ -14580,7 +14580,7 @@ <h2>Icons</h2>
 {{ render_icon('suit-spade-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suit-spade-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suit-spade-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suitcase/">
@@ -14588,7 +14588,7 @@ <h2>Icons</h2>
 {{ render_icon('suitcase', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suitcase</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suitcase</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suitcase-fill/">
@@ -14596,7 +14596,7 @@ <h2>Icons</h2>
 {{ render_icon('suitcase-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suitcase-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suitcase-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suitcase-lg/">
@@ -14604,7 +14604,7 @@ <h2>Icons</h2>
 {{ render_icon('suitcase-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suitcase-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suitcase-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suitcase-lg-fill/">
@@ -14612,7 +14612,7 @@ <h2>Icons</h2>
 {{ render_icon('suitcase-lg-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suitcase-lg-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suitcase-lg-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suitcase2/">
@@ -14620,7 +14620,7 @@ <h2>Icons</h2>
 {{ render_icon('suitcase2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suitcase2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suitcase2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/suitcase2-fill/">
@@ -14628,7 +14628,7 @@ <h2>Icons</h2>
 {{ render_icon('suitcase2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">suitcase2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">suitcase2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sun/">
@@ -14636,7 +14636,7 @@ <h2>Icons</h2>
 {{ render_icon('sun', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sun</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sun</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sun-fill/">
@@ -14644,7 +14644,7 @@ <h2>Icons</h2>
 {{ render_icon('sun-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sun-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sun-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sunglasses/">
@@ -14652,7 +14652,7 @@ <h2>Icons</h2>
 {{ render_icon('sunglasses', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sunglasses</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sunglasses</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sunrise/">
@@ -14660,7 +14660,7 @@ <h2>Icons</h2>
 {{ render_icon('sunrise', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sunrise</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sunrise</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sunrise-fill/">
@@ -14668,7 +14668,7 @@ <h2>Icons</h2>
 {{ render_icon('sunrise-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sunrise-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sunrise-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sunset/">
@@ -14676,7 +14676,7 @@ <h2>Icons</h2>
 {{ render_icon('sunset', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sunset</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sunset</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/sunset-fill/">
@@ -14684,7 +14684,7 @@ <h2>Icons</h2>
 {{ render_icon('sunset-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">sunset-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">sunset-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/superscript/">
@@ -14692,7 +14692,7 @@ <h2>Icons</h2>
 {{ render_icon('superscript', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">superscript</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">superscript</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/symmetry-horizontal/">
@@ -14700,7 +14700,7 @@ <h2>Icons</h2>
 {{ render_icon('symmetry-horizontal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">symmetry-horizontal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">symmetry-horizontal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/symmetry-vertical/">
@@ -14708,7 +14708,7 @@ <h2>Icons</h2>
 {{ render_icon('symmetry-vertical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">symmetry-vertical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">symmetry-vertical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/table/">
@@ -14716,7 +14716,7 @@ <h2>Icons</h2>
 {{ render_icon('table', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">table</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">table</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tablet/">
@@ -14724,7 +14724,7 @@ <h2>Icons</h2>
 {{ render_icon('tablet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tablet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tablet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tablet-fill/">
@@ -14732,7 +14732,7 @@ <h2>Icons</h2>
 {{ render_icon('tablet-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tablet-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tablet-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tablet-landscape/">
@@ -14740,7 +14740,7 @@ <h2>Icons</h2>
 {{ render_icon('tablet-landscape', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tablet-landscape</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tablet-landscape</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tablet-landscape-fill/">
@@ -14748,7 +14748,7 @@ <h2>Icons</h2>
 {{ render_icon('tablet-landscape-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tablet-landscape-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tablet-landscape-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tag/">
@@ -14756,7 +14756,7 @@ <h2>Icons</h2>
 {{ render_icon('tag', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tag</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tag</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tag-fill/">
@@ -14764,7 +14764,7 @@ <h2>Icons</h2>
 {{ render_icon('tag-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tag-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tag-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tags/">
@@ -14772,7 +14772,7 @@ <h2>Icons</h2>
 {{ render_icon('tags', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tags</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tags</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tags-fill/">
@@ -14780,7 +14780,7 @@ <h2>Icons</h2>
 {{ render_icon('tags-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tags-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tags-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/taxi-front/">
@@ -14788,7 +14788,7 @@ <h2>Icons</h2>
 {{ render_icon('taxi-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">taxi-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">taxi-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/taxi-front-fill/">
@@ -14796,7 +14796,7 @@ <h2>Icons</h2>
 {{ render_icon('taxi-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">taxi-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">taxi-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telegram/">
@@ -14804,7 +14804,7 @@ <h2>Icons</h2>
 {{ render_icon('telegram', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telegram</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telegram</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone/">
@@ -14812,7 +14812,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-fill/">
@@ -14820,7 +14820,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-forward/">
@@ -14828,7 +14828,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-forward', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-forward</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-forward</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-forward-fill/">
@@ -14836,7 +14836,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-forward-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-forward-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-forward-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-inbound/">
@@ -14844,7 +14844,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-inbound', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-inbound</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-inbound</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-inbound-fill/">
@@ -14852,7 +14852,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-inbound-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-inbound-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-inbound-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-minus/">
@@ -14860,7 +14860,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-minus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-minus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-minus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-minus-fill/">
@@ -14868,7 +14868,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-minus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-minus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-minus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-outbound/">
@@ -14876,7 +14876,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-outbound', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-outbound</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-outbound</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-outbound-fill/">
@@ -14884,7 +14884,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-outbound-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-outbound-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-outbound-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-plus/">
@@ -14892,7 +14892,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-plus-fill/">
@@ -14900,7 +14900,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-plus-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-plus-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-plus-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-x/">
@@ -14908,7 +14908,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/telephone-x-fill/">
@@ -14916,7 +14916,7 @@ <h2>Icons</h2>
 {{ render_icon('telephone-x-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">telephone-x-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">telephone-x-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tencent-qq/">
@@ -14924,7 +14924,7 @@ <h2>Icons</h2>
 {{ render_icon('tencent-qq', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tencent-qq</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tencent-qq</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/terminal/">
@@ -14932,7 +14932,7 @@ <h2>Icons</h2>
 {{ render_icon('terminal', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">terminal</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">terminal</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/terminal-dash/">
@@ -14940,7 +14940,7 @@ <h2>Icons</h2>
 {{ render_icon('terminal-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">terminal-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">terminal-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/terminal-fill/">
@@ -14948,7 +14948,7 @@ <h2>Icons</h2>
 {{ render_icon('terminal-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">terminal-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">terminal-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/terminal-plus/">
@@ -14956,7 +14956,7 @@ <h2>Icons</h2>
 {{ render_icon('terminal-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">terminal-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">terminal-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/terminal-split/">
@@ -14964,7 +14964,7 @@ <h2>Icons</h2>
 {{ render_icon('terminal-split', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">terminal-split</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">terminal-split</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/terminal-x/">
@@ -14972,7 +14972,7 @@ <h2>Icons</h2>
 {{ render_icon('terminal-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">terminal-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">terminal-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/text-center/">
@@ -14980,7 +14980,7 @@ <h2>Icons</h2>
 {{ render_icon('text-center', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">text-center</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">text-center</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/text-indent-left/">
@@ -14988,7 +14988,7 @@ <h2>Icons</h2>
 {{ render_icon('text-indent-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">text-indent-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">text-indent-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/text-indent-right/">
@@ -14996,7 +14996,7 @@ <h2>Icons</h2>
 {{ render_icon('text-indent-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">text-indent-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">text-indent-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/text-left/">
@@ -15004,7 +15004,7 @@ <h2>Icons</h2>
 {{ render_icon('text-left', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">text-left</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">text-left</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/text-paragraph/">
@@ -15012,7 +15012,7 @@ <h2>Icons</h2>
 {{ render_icon('text-paragraph', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">text-paragraph</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">text-paragraph</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/text-right/">
@@ -15020,7 +15020,7 @@ <h2>Icons</h2>
 {{ render_icon('text-right', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">text-right</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">text-right</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/text-wrap/">
@@ -15028,7 +15028,7 @@ <h2>Icons</h2>
 {{ render_icon('text-wrap', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">text-wrap</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">text-wrap</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/textarea/">
@@ -15036,7 +15036,7 @@ <h2>Icons</h2>
 {{ render_icon('textarea', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">textarea</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">textarea</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/textarea-resize/">
@@ -15044,7 +15044,7 @@ <h2>Icons</h2>
 {{ render_icon('textarea-resize', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">textarea-resize</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">textarea-resize</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/textarea-t/">
@@ -15052,7 +15052,7 @@ <h2>Icons</h2>
 {{ render_icon('textarea-t', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">textarea-t</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">textarea-t</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/thermometer/">
@@ -15060,7 +15060,7 @@ <h2>Icons</h2>
 {{ render_icon('thermometer', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">thermometer</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">thermometer</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/thermometer-half/">
@@ -15068,7 +15068,7 @@ <h2>Icons</h2>
 {{ render_icon('thermometer-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">thermometer-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">thermometer-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/thermometer-high/">
@@ -15076,7 +15076,7 @@ <h2>Icons</h2>
 {{ render_icon('thermometer-high', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">thermometer-high</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">thermometer-high</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/thermometer-low/">
@@ -15084,7 +15084,7 @@ <h2>Icons</h2>
 {{ render_icon('thermometer-low', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">thermometer-low</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">thermometer-low</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/thermometer-snow/">
@@ -15092,7 +15092,7 @@ <h2>Icons</h2>
 {{ render_icon('thermometer-snow', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">thermometer-snow</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">thermometer-snow</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/thermometer-sun/">
@@ -15100,7 +15100,7 @@ <h2>Icons</h2>
 {{ render_icon('thermometer-sun', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">thermometer-sun</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">thermometer-sun</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/threads/">
@@ -15108,7 +15108,7 @@ <h2>Icons</h2>
 {{ render_icon('threads', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">threads</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">threads</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/threads-fill/">
@@ -15116,7 +15116,7 @@ <h2>Icons</h2>
 {{ render_icon('threads-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">threads-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">threads-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/three-dots/">
@@ -15124,7 +15124,7 @@ <h2>Icons</h2>
 {{ render_icon('three-dots', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">three-dots</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">three-dots</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/three-dots-vertical/">
@@ -15132,7 +15132,7 @@ <h2>Icons</h2>
 {{ render_icon('three-dots-vertical', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">three-dots-vertical</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">three-dots-vertical</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/thunderbolt/">
@@ -15140,7 +15140,7 @@ <h2>Icons</h2>
 {{ render_icon('thunderbolt', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">thunderbolt</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">thunderbolt</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/thunderbolt-fill/">
@@ -15148,7 +15148,7 @@ <h2>Icons</h2>
 {{ render_icon('thunderbolt-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">thunderbolt-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">thunderbolt-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ticket/">
@@ -15156,7 +15156,7 @@ <h2>Icons</h2>
 {{ render_icon('ticket', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ticket</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ticket</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ticket-detailed/">
@@ -15164,7 +15164,7 @@ <h2>Icons</h2>
 {{ render_icon('ticket-detailed', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ticket-detailed</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ticket-detailed</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ticket-detailed-fill/">
@@ -15172,7 +15172,7 @@ <h2>Icons</h2>
 {{ render_icon('ticket-detailed-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ticket-detailed-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ticket-detailed-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ticket-fill/">
@@ -15180,7 +15180,7 @@ <h2>Icons</h2>
 {{ render_icon('ticket-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ticket-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ticket-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ticket-perforated/">
@@ -15188,7 +15188,7 @@ <h2>Icons</h2>
 {{ render_icon('ticket-perforated', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ticket-perforated</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ticket-perforated</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ticket-perforated-fill/">
@@ -15196,7 +15196,7 @@ <h2>Icons</h2>
 {{ render_icon('ticket-perforated-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ticket-perforated-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ticket-perforated-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tiktok/">
@@ -15204,7 +15204,7 @@ <h2>Icons</h2>
 {{ render_icon('tiktok', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tiktok</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tiktok</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/toggle-off/">
@@ -15212,7 +15212,7 @@ <h2>Icons</h2>
 {{ render_icon('toggle-off', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">toggle-off</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">toggle-off</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/toggle-on/">
@@ -15220,7 +15220,7 @@ <h2>Icons</h2>
 {{ render_icon('toggle-on', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">toggle-on</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">toggle-on</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/toggle2-off/">
@@ -15228,7 +15228,7 @@ <h2>Icons</h2>
 {{ render_icon('toggle2-off', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">toggle2-off</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">toggle2-off</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/toggle2-on/">
@@ -15236,7 +15236,7 @@ <h2>Icons</h2>
 {{ render_icon('toggle2-on', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">toggle2-on</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">toggle2-on</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/toggles/">
@@ -15244,7 +15244,7 @@ <h2>Icons</h2>
 {{ render_icon('toggles', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">toggles</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">toggles</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/toggles2/">
@@ -15252,7 +15252,7 @@ <h2>Icons</h2>
 {{ render_icon('toggles2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">toggles2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">toggles2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tools/">
@@ -15260,7 +15260,7 @@ <h2>Icons</h2>
 {{ render_icon('tools', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tools</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tools</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tornado/">
@@ -15268,7 +15268,7 @@ <h2>Icons</h2>
 {{ render_icon('tornado', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tornado</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tornado</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/train-freight-front/">
@@ -15276,7 +15276,7 @@ <h2>Icons</h2>
 {{ render_icon('train-freight-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">train-freight-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">train-freight-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/train-freight-front-fill/">
@@ -15284,7 +15284,7 @@ <h2>Icons</h2>
 {{ render_icon('train-freight-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">train-freight-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">train-freight-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/train-front/">
@@ -15292,7 +15292,7 @@ <h2>Icons</h2>
 {{ render_icon('train-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">train-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">train-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/train-front-fill/">
@@ -15300,7 +15300,7 @@ <h2>Icons</h2>
 {{ render_icon('train-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">train-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">train-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/train-lightrail-front/">
@@ -15308,7 +15308,7 @@ <h2>Icons</h2>
 {{ render_icon('train-lightrail-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">train-lightrail-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">train-lightrail-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/train-lightrail-front-fill/">
@@ -15316,7 +15316,7 @@ <h2>Icons</h2>
 {{ render_icon('train-lightrail-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">train-lightrail-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">train-lightrail-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/translate/">
@@ -15324,7 +15324,7 @@ <h2>Icons</h2>
 {{ render_icon('translate', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">translate</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">translate</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/transparency/">
@@ -15332,7 +15332,7 @@ <h2>Icons</h2>
 {{ render_icon('transparency', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">transparency</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">transparency</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trash/">
@@ -15340,7 +15340,7 @@ <h2>Icons</h2>
 {{ render_icon('trash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trash-fill/">
@@ -15348,7 +15348,7 @@ <h2>Icons</h2>
 {{ render_icon('trash-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trash-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trash-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trash2/">
@@ -15356,7 +15356,7 @@ <h2>Icons</h2>
 {{ render_icon('trash2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trash2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trash2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trash2-fill/">
@@ -15364,7 +15364,7 @@ <h2>Icons</h2>
 {{ render_icon('trash2-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trash2-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trash2-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trash3/">
@@ -15372,7 +15372,7 @@ <h2>Icons</h2>
 {{ render_icon('trash3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trash3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trash3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trash3-fill/">
@@ -15380,7 +15380,7 @@ <h2>Icons</h2>
 {{ render_icon('trash3-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trash3-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trash3-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tree/">
@@ -15388,7 +15388,7 @@ <h2>Icons</h2>
 {{ render_icon('tree', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tree</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tree</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tree-fill/">
@@ -15396,7 +15396,7 @@ <h2>Icons</h2>
 {{ render_icon('tree-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tree-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tree-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trello/">
@@ -15404,7 +15404,7 @@ <h2>Icons</h2>
 {{ render_icon('trello', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trello</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trello</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/triangle/">
@@ -15412,7 +15412,7 @@ <h2>Icons</h2>
 {{ render_icon('triangle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">triangle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">triangle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/triangle-fill/">
@@ -15420,7 +15420,7 @@ <h2>Icons</h2>
 {{ render_icon('triangle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">triangle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">triangle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/triangle-half/">
@@ -15428,7 +15428,7 @@ <h2>Icons</h2>
 {{ render_icon('triangle-half', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">triangle-half</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">triangle-half</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trophy/">
@@ -15436,7 +15436,7 @@ <h2>Icons</h2>
 {{ render_icon('trophy', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trophy</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trophy</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/trophy-fill/">
@@ -15444,7 +15444,7 @@ <h2>Icons</h2>
 {{ render_icon('trophy-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">trophy-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">trophy-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tropical-storm/">
@@ -15452,7 +15452,7 @@ <h2>Icons</h2>
 {{ render_icon('tropical-storm', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tropical-storm</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tropical-storm</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/truck/">
@@ -15460,7 +15460,7 @@ <h2>Icons</h2>
 {{ render_icon('truck', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">truck</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">truck</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/truck-flatbed/">
@@ -15468,7 +15468,7 @@ <h2>Icons</h2>
 {{ render_icon('truck-flatbed', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">truck-flatbed</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">truck-flatbed</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/truck-front/">
@@ -15476,7 +15476,7 @@ <h2>Icons</h2>
 {{ render_icon('truck-front', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">truck-front</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">truck-front</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/truck-front-fill/">
@@ -15484,7 +15484,7 @@ <h2>Icons</h2>
 {{ render_icon('truck-front-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">truck-front-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">truck-front-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tsunami/">
@@ -15492,7 +15492,7 @@ <h2>Icons</h2>
 {{ render_icon('tsunami', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tsunami</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tsunami</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tv/">
@@ -15500,7 +15500,7 @@ <h2>Icons</h2>
 {{ render_icon('tv', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tv</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tv</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/tv-fill/">
@@ -15508,7 +15508,7 @@ <h2>Icons</h2>
 {{ render_icon('tv-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">tv-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">tv-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/twitch/">
@@ -15516,7 +15516,7 @@ <h2>Icons</h2>
 {{ render_icon('twitch', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">twitch</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">twitch</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/twitter/">
@@ -15524,7 +15524,7 @@ <h2>Icons</h2>
 {{ render_icon('twitter', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">twitter</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">twitter</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/twitter-x/">
@@ -15532,7 +15532,7 @@ <h2>Icons</h2>
 {{ render_icon('twitter-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">twitter-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">twitter-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type/">
@@ -15540,7 +15540,7 @@ <h2>Icons</h2>
 {{ render_icon('type', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-bold/">
@@ -15548,7 +15548,7 @@ <h2>Icons</h2>
 {{ render_icon('type-bold', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-bold</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-bold</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-h1/">
@@ -15556,7 +15556,7 @@ <h2>Icons</h2>
 {{ render_icon('type-h1', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-h1</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-h1</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-h2/">
@@ -15564,7 +15564,7 @@ <h2>Icons</h2>
 {{ render_icon('type-h2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-h2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-h2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-h3/">
@@ -15572,7 +15572,7 @@ <h2>Icons</h2>
 {{ render_icon('type-h3', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-h3</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-h3</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-h4/">
@@ -15580,7 +15580,7 @@ <h2>Icons</h2>
 {{ render_icon('type-h4', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-h4</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-h4</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-h5/">
@@ -15588,7 +15588,7 @@ <h2>Icons</h2>
 {{ render_icon('type-h5', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-h5</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-h5</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-h6/">
@@ -15596,7 +15596,7 @@ <h2>Icons</h2>
 {{ render_icon('type-h6', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-h6</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-h6</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-italic/">
@@ -15604,7 +15604,7 @@ <h2>Icons</h2>
 {{ render_icon('type-italic', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-italic</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-italic</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-strikethrough/">
@@ -15612,7 +15612,7 @@ <h2>Icons</h2>
 {{ render_icon('type-strikethrough', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-strikethrough</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-strikethrough</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/type-underline/">
@@ -15620,7 +15620,7 @@ <h2>Icons</h2>
 {{ render_icon('type-underline', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">type-underline</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">type-underline</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ubuntu/">
@@ -15628,7 +15628,7 @@ <h2>Icons</h2>
 {{ render_icon('ubuntu', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ubuntu</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ubuntu</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ui-checks/">
@@ -15636,7 +15636,7 @@ <h2>Icons</h2>
 {{ render_icon('ui-checks', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ui-checks</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ui-checks</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ui-checks-grid/">
@@ -15644,7 +15644,7 @@ <h2>Icons</h2>
 {{ render_icon('ui-checks-grid', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ui-checks-grid</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ui-checks-grid</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ui-radios/">
@@ -15652,7 +15652,7 @@ <h2>Icons</h2>
 {{ render_icon('ui-radios', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ui-radios</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ui-radios</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/ui-radios-grid/">
@@ -15660,7 +15660,7 @@ <h2>Icons</h2>
 {{ render_icon('ui-radios-grid', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">ui-radios-grid</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">ui-radios-grid</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/umbrella/">
@@ -15668,7 +15668,7 @@ <h2>Icons</h2>
 {{ render_icon('umbrella', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">umbrella</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">umbrella</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/umbrella-fill/">
@@ -15676,7 +15676,7 @@ <h2>Icons</h2>
 {{ render_icon('umbrella-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">umbrella-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">umbrella-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/unindent/">
@@ -15684,7 +15684,7 @@ <h2>Icons</h2>
 {{ render_icon('unindent', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">unindent</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">unindent</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/union/">
@@ -15692,7 +15692,7 @@ <h2>Icons</h2>
 {{ render_icon('union', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">union</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">union</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/unity/">
@@ -15700,7 +15700,7 @@ <h2>Icons</h2>
 {{ render_icon('unity', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">unity</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">unity</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/universal-access/">
@@ -15708,7 +15708,7 @@ <h2>Icons</h2>
 {{ render_icon('universal-access', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">universal-access</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">universal-access</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/universal-access-circle/">
@@ -15716,7 +15716,7 @@ <h2>Icons</h2>
 {{ render_icon('universal-access-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">universal-access-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">universal-access-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/unlock/">
@@ -15724,7 +15724,7 @@ <h2>Icons</h2>
 {{ render_icon('unlock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">unlock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">unlock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/unlock-fill/">
@@ -15732,7 +15732,7 @@ <h2>Icons</h2>
 {{ render_icon('unlock-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">unlock-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">unlock-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/upc/">
@@ -15740,7 +15740,7 @@ <h2>Icons</h2>
 {{ render_icon('upc', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">upc</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">upc</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/upc-scan/">
@@ -15748,7 +15748,7 @@ <h2>Icons</h2>
 {{ render_icon('upc-scan', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">upc-scan</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">upc-scan</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/upload/">
@@ -15756,7 +15756,7 @@ <h2>Icons</h2>
 {{ render_icon('upload', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">upload</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">upload</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb/">
@@ -15764,7 +15764,7 @@ <h2>Icons</h2>
 {{ render_icon('usb', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-c/">
@@ -15772,7 +15772,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-c', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-c</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-c</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-c-fill/">
@@ -15780,7 +15780,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-c-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-c-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-c-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-drive/">
@@ -15788,7 +15788,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-drive', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-drive</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-drive</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-drive-fill/">
@@ -15796,7 +15796,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-drive-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-drive-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-drive-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-fill/">
@@ -15804,7 +15804,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-micro/">
@@ -15812,7 +15812,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-micro', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-micro</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-micro</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-micro-fill/">
@@ -15820,7 +15820,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-micro-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-micro-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-micro-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-mini/">
@@ -15828,7 +15828,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-mini', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-mini</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-mini</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-mini-fill/">
@@ -15836,7 +15836,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-mini-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-mini-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-mini-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-plug/">
@@ -15844,7 +15844,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-plug', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-plug</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-plug</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-plug-fill/">
@@ -15852,7 +15852,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-plug-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-plug-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-plug-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/usb-symbol/">
@@ -15860,7 +15860,7 @@ <h2>Icons</h2>
 {{ render_icon('usb-symbol', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">usb-symbol</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">usb-symbol</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/valentine/">
@@ -15868,7 +15868,7 @@ <h2>Icons</h2>
 {{ render_icon('valentine', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">valentine</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">valentine</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/valentine2/">
@@ -15876,7 +15876,7 @@ <h2>Icons</h2>
 {{ render_icon('valentine2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">valentine2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">valentine2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/vector-pen/">
@@ -15884,7 +15884,7 @@ <h2>Icons</h2>
 {{ render_icon('vector-pen', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">vector-pen</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">vector-pen</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/view-list/">
@@ -15892,7 +15892,7 @@ <h2>Icons</h2>
 {{ render_icon('view-list', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">view-list</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">view-list</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/view-stacked/">
@@ -15900,7 +15900,7 @@ <h2>Icons</h2>
 {{ render_icon('view-stacked', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">view-stacked</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">view-stacked</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/vignette/">
@@ -15908,7 +15908,7 @@ <h2>Icons</h2>
 {{ render_icon('vignette', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">vignette</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">vignette</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/vimeo/">
@@ -15916,7 +15916,7 @@ <h2>Icons</h2>
 {{ render_icon('vimeo', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">vimeo</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">vimeo</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/vinyl/">
@@ -15924,7 +15924,7 @@ <h2>Icons</h2>
 {{ render_icon('vinyl', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">vinyl</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">vinyl</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/vinyl-fill/">
@@ -15932,7 +15932,7 @@ <h2>Icons</h2>
 {{ render_icon('vinyl-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">vinyl-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">vinyl-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/virus/">
@@ -15940,7 +15940,7 @@ <h2>Icons</h2>
 {{ render_icon('virus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">virus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">virus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/virus2/">
@@ -15948,7 +15948,7 @@ <h2>Icons</h2>
 {{ render_icon('virus2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">virus2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">virus2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/voicemail/">
@@ -15956,7 +15956,7 @@ <h2>Icons</h2>
 {{ render_icon('voicemail', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">voicemail</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">voicemail</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/volume-down/">
@@ -15964,7 +15964,7 @@ <h2>Icons</h2>
 {{ render_icon('volume-down', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">volume-down</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">volume-down</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/volume-down-fill/">
@@ -15972,7 +15972,7 @@ <h2>Icons</h2>
 {{ render_icon('volume-down-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">volume-down-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">volume-down-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/volume-mute/">
@@ -15980,7 +15980,7 @@ <h2>Icons</h2>
 {{ render_icon('volume-mute', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">volume-mute</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">volume-mute</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/volume-mute-fill/">
@@ -15988,7 +15988,7 @@ <h2>Icons</h2>
 {{ render_icon('volume-mute-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">volume-mute-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">volume-mute-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/volume-off/">
@@ -15996,7 +15996,7 @@ <h2>Icons</h2>
 {{ render_icon('volume-off', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">volume-off</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">volume-off</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/volume-off-fill/">
@@ -16004,7 +16004,7 @@ <h2>Icons</h2>
 {{ render_icon('volume-off-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">volume-off-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">volume-off-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/volume-up/">
@@ -16012,7 +16012,7 @@ <h2>Icons</h2>
 {{ render_icon('volume-up', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">volume-up</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">volume-up</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/volume-up-fill/">
@@ -16020,7 +16020,7 @@ <h2>Icons</h2>
 {{ render_icon('volume-up-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">volume-up-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">volume-up-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/vr/">
@@ -16028,7 +16028,7 @@ <h2>Icons</h2>
 {{ render_icon('vr', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">vr</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">vr</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wallet/">
@@ -16036,7 +16036,7 @@ <h2>Icons</h2>
 {{ render_icon('wallet', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wallet</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wallet</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wallet-fill/">
@@ -16044,7 +16044,7 @@ <h2>Icons</h2>
 {{ render_icon('wallet-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wallet-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wallet-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wallet2/">
@@ -16052,7 +16052,7 @@ <h2>Icons</h2>
 {{ render_icon('wallet2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wallet2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wallet2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/watch/">
@@ -16060,7 +16060,7 @@ <h2>Icons</h2>
 {{ render_icon('watch', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">watch</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">watch</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/water/">
@@ -16068,7 +16068,7 @@ <h2>Icons</h2>
 {{ render_icon('water', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">water</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">water</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/webcam/">
@@ -16076,7 +16076,7 @@ <h2>Icons</h2>
 {{ render_icon('webcam', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">webcam</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">webcam</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/webcam-fill/">
@@ -16084,7 +16084,7 @@ <h2>Icons</h2>
 {{ render_icon('webcam-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">webcam-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">webcam-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wechat/">
@@ -16092,7 +16092,7 @@ <h2>Icons</h2>
 {{ render_icon('wechat', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wechat</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wechat</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/whatsapp/">
@@ -16100,7 +16100,7 @@ <h2>Icons</h2>
 {{ render_icon('whatsapp', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">whatsapp</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">whatsapp</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wifi/">
@@ -16108,7 +16108,7 @@ <h2>Icons</h2>
 {{ render_icon('wifi', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wifi</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wifi</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wifi-1/">
@@ -16116,7 +16116,7 @@ <h2>Icons</h2>
 {{ render_icon('wifi-1', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wifi-1</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wifi-1</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wifi-2/">
@@ -16124,7 +16124,7 @@ <h2>Icons</h2>
 {{ render_icon('wifi-2', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wifi-2</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wifi-2</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wifi-off/">
@@ -16132,7 +16132,7 @@ <h2>Icons</h2>
 {{ render_icon('wifi-off', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wifi-off</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wifi-off</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wikipedia/">
@@ -16140,7 +16140,7 @@ <h2>Icons</h2>
 {{ render_icon('wikipedia', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wikipedia</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wikipedia</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wind/">
@@ -16148,7 +16148,7 @@ <h2>Icons</h2>
 {{ render_icon('wind', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wind</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wind</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window/">
@@ -16156,7 +16156,7 @@ <h2>Icons</h2>
 {{ render_icon('window', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-dash/">
@@ -16164,7 +16164,7 @@ <h2>Icons</h2>
 {{ render_icon('window-dash', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-dash</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-dash</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-desktop/">
@@ -16172,7 +16172,7 @@ <h2>Icons</h2>
 {{ render_icon('window-desktop', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-desktop</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-desktop</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-dock/">
@@ -16180,7 +16180,7 @@ <h2>Icons</h2>
 {{ render_icon('window-dock', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-dock</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-dock</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-fullscreen/">
@@ -16188,7 +16188,7 @@ <h2>Icons</h2>
 {{ render_icon('window-fullscreen', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-fullscreen</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-fullscreen</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-plus/">
@@ -16196,7 +16196,7 @@ <h2>Icons</h2>
 {{ render_icon('window-plus', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-plus</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-plus</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-sidebar/">
@@ -16204,7 +16204,7 @@ <h2>Icons</h2>
 {{ render_icon('window-sidebar', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-sidebar</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-sidebar</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-split/">
@@ -16212,7 +16212,7 @@ <h2>Icons</h2>
 {{ render_icon('window-split', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-split</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-split</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-stack/">
@@ -16220,7 +16220,7 @@ <h2>Icons</h2>
 {{ render_icon('window-stack', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-stack</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-stack</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/window-x/">
@@ -16228,7 +16228,7 @@ <h2>Icons</h2>
 {{ render_icon('window-x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">window-x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">window-x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/windows/">
@@ -16236,7 +16236,7 @@ <h2>Icons</h2>
 {{ render_icon('windows', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">windows</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">windows</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wordpress/">
@@ -16244,7 +16244,7 @@ <h2>Icons</h2>
 {{ render_icon('wordpress', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wordpress</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wordpress</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wrench/">
@@ -16252,7 +16252,7 @@ <h2>Icons</h2>
 {{ render_icon('wrench', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wrench</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wrench</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wrench-adjustable/">
@@ -16260,7 +16260,7 @@ <h2>Icons</h2>
 {{ render_icon('wrench-adjustable', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wrench-adjustable</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wrench-adjustable</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wrench-adjustable-circle/">
@@ -16268,7 +16268,7 @@ <h2>Icons</h2>
 {{ render_icon('wrench-adjustable-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wrench-adjustable-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wrench-adjustable-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/wrench-adjustable-circle-fill/">
@@ -16276,7 +16276,7 @@ <h2>Icons</h2>
 {{ render_icon('wrench-adjustable-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">wrench-adjustable-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">wrench-adjustable-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x/">
@@ -16284,7 +16284,7 @@ <h2>Icons</h2>
 {{ render_icon('x', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-circle/">
@@ -16292,7 +16292,7 @@ <h2>Icons</h2>
 {{ render_icon('x-circle', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-circle</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-circle</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-circle-fill/">
@@ -16300,7 +16300,7 @@ <h2>Icons</h2>
 {{ render_icon('x-circle-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-circle-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-circle-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-diamond/">
@@ -16308,7 +16308,7 @@ <h2>Icons</h2>
 {{ render_icon('x-diamond', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-diamond</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-diamond</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-diamond-fill/">
@@ -16316,7 +16316,7 @@ <h2>Icons</h2>
 {{ render_icon('x-diamond-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-diamond-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-diamond-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-lg/">
@@ -16324,7 +16324,7 @@ <h2>Icons</h2>
 {{ render_icon('x-lg', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-lg</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-lg</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-octagon/">
@@ -16332,7 +16332,7 @@ <h2>Icons</h2>
 {{ render_icon('x-octagon', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-octagon</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-octagon</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-octagon-fill/">
@@ -16340,7 +16340,7 @@ <h2>Icons</h2>
 {{ render_icon('x-octagon-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-octagon-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-octagon-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-square/">
@@ -16348,7 +16348,7 @@ <h2>Icons</h2>
 {{ render_icon('x-square', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-square</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-square</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/x-square-fill/">
@@ -16356,7 +16356,7 @@ <h2>Icons</h2>
 {{ render_icon('x-square-fill', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">x-square-fill</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">x-square-fill</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/xbox/">
@@ -16364,7 +16364,7 @@ <h2>Icons</h2>
 {{ render_icon('xbox', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">xbox</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">xbox</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/yelp/">
@@ -16372,7 +16372,7 @@ <h2>Icons</h2>
 {{ render_icon('yelp', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">yelp</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">yelp</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/yin-yang/">
@@ -16380,7 +16380,7 @@ <h2>Icons</h2>
 {{ render_icon('yin-yang', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">yin-yang</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">yin-yang</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/youtube/">
@@ -16388,7 +16388,7 @@ <h2>Icons</h2>
 {{ render_icon('youtube', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">youtube</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">youtube</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/zoom-in/">
@@ -16396,7 +16396,7 @@ <h2>Icons</h2>
 {{ render_icon('zoom-in', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">zoom-in</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">zoom-in</div>
 </li>
 <li class="col mb-4">
 <a class="d-block text-dark text-body-emphasis text-decoration-none" href="https://icons.getbootstrap.com/icons/zoom-out/">
@@ -16404,7 +16404,7 @@ <h2>Icons</h2>
 {{ render_icon('zoom-out', 32) }}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">zoom-out</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">zoom-out</div>
 </li>
 </ul>
 <p>This is a total of 2050 icons.</p>
diff --git a/examples/update-icons.py b/examples/update-icons.py
index c8373217..1963f1bb 100644
--- a/examples/update-icons.py
+++ b/examples/update-icons.py
@@ -33,7 +33,7 @@ def generate(version):
 {{{{ render_icon('{name}', 32) }}}}
 </div>
 </a>
-<div class="name text-muted text-decoration-none text-center pt-1">{name}</div>
+<div class="name text-body-secondary text-decoration-none text-center pt-1">{name}</div>
 </li>
 '''
             file.write(item)
diff --git a/flask_bootstrap/templates/bootstrap5/form.html b/flask_bootstrap/templates/bootstrap5/form.html
index 3be7ca2e..e4d6e14b 100644
--- a/flask_bootstrap/templates/bootstrap5/form.html
+++ b/flask_bootstrap/templates/bootstrap5/form.html
@@ -75,7 +75,7 @@
                     {%- endfor %}
                 {%- elif field.description -%}
                     {% call _hz_form_wrap(horizontal_columns, form_type, required=required) %}
-                        <small class="form-text text-muted">{{ field.description|safe }}</small>
+                        <small class="form-text text-body-secondary">{{ field.description|safe }}</small>
                     {% endcall %}
                 {%- endif %}
             </div>
@@ -111,7 +111,7 @@
                 <div class="invalid-feedback d-block">{{ error }}</div>
             {%- endfor %}
         {%- elif field.description -%}
-            <small class="form-text text-muted">{{ field.description|safe }}</small>
+            <small class="form-text text-body-secondary">{{ field.description|safe }}</small>
         {%- endif %}
         </div>
     {%- elif field.type == 'SubmitField' -%}
@@ -196,7 +196,7 @@
                     {%- endfor %}
                 {%- elif field.description -%}
                     {% call _hz_form_wrap(horizontal_columns, form_type, required=required) %}
-                        <small class="form-text text-muted">{{ field.description|safe }}</small>
+                        <small class="form-text text-body-secondary">{{ field.description|safe }}</small>
                     {% endcall %}
                 {%- endif %}
             {%- else -%}
@@ -225,7 +225,7 @@
                         <div class="invalid-feedback d-block">{{ error }}</div>
                     {%- endfor %}
                 {%- elif field.description -%}
-                    <small class="form-text text-muted">{{ field.description|safe }}</small>
+                    <small class="form-text text-body-secondary">{{ field.description|safe }}</small>
                 {%- endif %}
             {%- endif %}
         </div>
diff --git a/tests/test_bootstrap5/test_render_form.py b/tests/test_bootstrap5/test_render_form.py
index d3830365..f2db153f 100644
--- a/tests/test_bootstrap5/test_render_form.py
+++ b/tests/test_bootstrap5/test_render_form.py
@@ -23,7 +23,7 @@ def test_switch():
     assert 'custom-control custom-switch' not in data
     assert 'form-check form-switch' in data
     assert 'role="switch"' in data
-    assert '<small class="form-text text-muted">Just check this</small>' in data
+    assert '<small class="form-text text-body-secondary">Just check this</small>' in data
 
 
 # test render IntegerRangeField and DecimalRangeField