diff --git a/templates/fragments/_breadcrumb_fragment.html b/templates/fragments/_breadcrumb_fragment.html
index d080bd9..aed2779 100644
--- a/templates/fragments/_breadcrumb_fragment.html
+++ b/templates/fragments/_breadcrumb_fragment.html
@@ -6,7 +6,7 @@
             <ol class="breadcrumb">
                 <li class="breadcrumb-item">
                     <a href="{{ url_for('index') }}" class="link-success link-underline-opacity-0">
-                        {{ icons.home(16) }}
+                        {{ icons.render_icon('house', 16) }}
                     </a>
                 </li>
                 {% for crumb in breadcrumbs %}
diff --git a/templates/fragments/_combobox_fragment.html b/templates/fragments/_combobox_fragment.html
index 66667ea..75684c2 100644
--- a/templates/fragments/_combobox_fragment.html
+++ b/templates/fragments/_combobox_fragment.html
@@ -8,10 +8,10 @@
         <div class="input-group">
             <input type="text" class="form-control rounded-bottom-0" id="{{ id }}-input"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}>
             <button type="button" class="btn btn-primary rounded-bottom-0" id="{{ id }}-add" disabled>
-                {{ icons.plus(16) }}
+                {{ icons.render_icon('plus-lg', 16) }}
             </button>
             <button type="button" class="btn btn-danger rounded-bottom-0" id="{{ id }}-remove" disabled>
-                {{ icons.minus(16) }}
+                {{ icons.render_icon('dash-lg', 16) }}
             </button>
         </div>
         <select class="form-select border-top-0 rounded-top-0" id="{{ id }}-list" name="{{ id }}" size="10" multiple>
diff --git a/templates/fragments/_icon_fragment.html b/templates/fragments/_icon_fragment.html
index ba8bc24..36616bc 100644
--- a/templates/fragments/_icon_fragment.html
+++ b/templates/fragments/_icon_fragment.html
@@ -1,118 +1,4 @@
-{% macro gear(size=24) %}
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" fill="currentColor"
-    class="bi bi-gear align-self-center" viewBox="0 0 16 16">
-    <path
-        d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0" />
-    <path
-        d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z" />
-</svg>
-{% endmacro %}
 
-{% macro home(size=24) %}
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" fill="currentColor"
-    class="bi bi-house align-self-center" viewBox="0 0 16 16">
-    <path
-        d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z" />
-</svg>
-{% endmacro %}
-
-{% macro inventory(size=24) %}
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" fill="currentColor"
-    class="bi bi-laptop align-self-center" viewBox="0 0 16 16">
-    <path
-        d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1 .5-.5zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2zM0 12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5" />
-</svg>
-{% endmacro %}
-
-{% macro laptop(size=24) %}
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" fill="currentColor"
-    class="bi bi-laptop align-self-center" viewBox="0 0 16 16">
-    <path
-        d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1 .5-.5zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2zM0 12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5" />
-</svg>
-{% endmacro %}
-
-{% macro link(size=24) %}
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" fill="currentColor"
-    class="bi bi-box-arrow-up-right align-self-center" viewBox="0 0 16 16">
-    <path fill-rule="evenodd"
-        d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" />
-    <path fill-rule="evenodd"
-        d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" />
-</svg>
-{% endmacro %}
-
-{% macro log(size=24) %}
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" fill="currentColor"
-    class="bi bi-file-text align-self-center" viewBox="0 0 16 16">
-    <path
-        d="M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z" />
-    <path
-        d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1" />
-</svg>
-{% endmacro %}
-
-{% macro map(size=24) %}
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" fill="currentColor"
-    class="bi bi-map align-self-center" viewBox="0 0 16 16">
-    <path fill-rule="evenodd"
-        d="M15.817.113A.5.5 0 0 1 16 .5v14a.5.5 0 0 1-.402.49l-5 1a.5.5 0 0 1-.196 0L5.5 15.01l-4.902.98A.5.5 0 0 1 0 15.5v-14a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0L10.5.99l4.902-.98a.5.5 0 0 1 .415.103M10 1.91l-4-.8v12.98l4 .8zm1 12.98 4-.8V1.11l-4 .8zm-6-.8V1.11l-4 .8v12.98z" />
-</svg>
-{% endmacro %}
-
-{% macro minus(size=24) %}
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" fill="currentColor"
-    class="bi bi-dash-lg align-self-center" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8" />
-</svg>
-{% endmacro %}
-
-{% macro motherboard(size=24) %}
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" fill="currentColor"
-    class="bi bi-motherboard align-self-center" viewBox="0 0 16 16">
-    <path
-        d="M11.5 2a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5m2 0a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5m-10 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zM5 3a1 1 0 0 0-1 1h-.5a.5.5 0 0 0 0 1H4v1h-.5a.5.5 0 0 0 0 1H4a1 1 0 0 0 1 1v.5a.5.5 0 0 0 1 0V8h1v.5a.5.5 0 0 0 1 0V8a1 1 0 0 0 1-1h.5a.5.5 0 0 0 0-1H9V5h.5a.5.5 0 0 0 0-1H9a1 1 0 0 0-1-1v-.5a.5.5 0 0 0-1 0V3H6v-.5a.5.5 0 0 0-1 0zm0 1h3v3H5zm6.5 7a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z" />
-    <path
-        d="M1 2a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-2H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 9H1V8H.5a.5.5 0 0 1-.5-.5v-1A.5.5 0 0 1 .5 6H1V5H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 2zm1 11a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1z" />
-</svg>
-{% endmacro %}
-
-{% macro pencil(size=24) %}
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" fill="currentColor"
-    class="bi bi-pencil align-self-center" viewBox="0 0 16 16">
-    <path
-        d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325" />
-</svg>
-{% endmacro %}
-
-{% macro plus(size=24) %}
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" fill="currentColor"
-    class="bi bi-plus-lg align-self-center" viewBox="0 0 16 16">
-    <path fill-rule="evenodd"
-        d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
-</svg>
-{% endmacro %}
-
-{% macro search(size=24) %}
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" fill="currentColor"
-    class="bi bi-search align-self-center" viewBox="0 0 16 16">
-    <path
-        d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
-</svg>
-{% endmacro %}
-
-{% macro table(size=24) %}
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" fill="currentColor"
-    class="bi bi-table align-self-center" viewBox="0 0 16 16">
-    <path
-        d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z" />
-</svg>
-{% endmacro %}
-
-{% macro user(size=24) %}
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" fill="currentColor"
-    class="bi bi-person align-self-center" viewBox="0 0 16 16">
-    <path
-        d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z" />
-</svg>
-{% endmacro %}
\ No newline at end of file
+{% macro render_icon(icon, size=24) %}
+    <i class="bi bi-{{ icon }}" style="font-size: {{ size }}px;"></i>
+{% endmacro  %}
diff --git a/templates/fragments/_link_fragment.html b/templates/fragments/_link_fragment.html
index 70d0740..d7ae6f2 100644
--- a/templates/fragments/_link_fragment.html
+++ b/templates/fragments/_link_fragment.html
@@ -25,6 +25,6 @@
 
 {% macro entry_link(endpoint, id) %}
 <a href="{{ url_for('main.' + endpoint, id=id) }}"  class="link-success link-underline-opacity-0">
-    {{ icons.link(12) }}
+    {{ icons.render_icon('link', 12) }}
 </a>
 {% endmacro %}
diff --git a/templates/inventory_index.html b/templates/inventory_index.html
index 71a21de..6e40621 100644
--- a/templates/inventory_index.html
+++ b/templates/inventory_index.html
@@ -16,10 +16,10 @@ title=title
         </div>
     </div>
     <div class="row text-center">
-        {{ links.category_link(endpoint = 'list_inventory', label = "Full Listing", icon_html = icons.table(32)) }}
-        {{ links.category_link(endpoint = 'inventory_index', label = "By User", icon_html = icons.user(32), arguments = {'category': 'user'}) }}
-        {{ links.category_link(endpoint = 'inventory_index', label = 'By Location', icon_html = icons.map(32), arguments = {'category': 'location'}) }}
-        {{ links.category_link(endpoint = 'inventory_index', label = 'By Type', icon_html = icons.motherboard(32), arguments = {'category': 'type'}) }}
+        {{ links.category_link(endpoint = 'list_inventory', label = "Full Listing", icon_html = icons.render_icon('table', 32)) }}
+        {{ links.category_link(endpoint = 'inventory_index', label = "By User", icon_html = icons.render_icon('person', 32), arguments = {'category': 'user'}) }}
+        {{ links.category_link(endpoint = 'inventory_index', label = 'By Location', icon_html = icons.render_icon('map', 32), arguments = {'category': 'location'}) }}
+        {{ links.category_link(endpoint = 'inventory_index', label = 'By Type', icon_html = icons.render_icon('motherboard', 32), arguments = {'category': 'type'}) }}
     </div>
     {% else %}
         <div class="container">
diff --git a/templates/layout.html b/templates/layout.html
index e6136a5..5eec65d 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -18,6 +18,7 @@
         href="https://cdn.datatables.net/v/bs5/jq-3.7.0/moment-2.29.4/dt-2.3.2/b-3.2.3/b-colvis-3.2.3/b-print-3.2.3/cr-2.1.1/cc-1.0.4/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sr-1.4.1/datatables.min.css"
         rel="stylesheet" integrity="sha384-gdnBcErvPbrURVoR9w3NhVMliw+ZmcTCmq+64xj2Ksx21nRJFX3qW0zFvBotL5rm"
         crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/widget.css') }}">
     <style>
         {% block style %}
@@ -46,7 +47,7 @@
                     <button class="btn btn-primary" type="submit" id="searchButton" disabled>Search</button>
                 </form>
                 <ul class="navbar-nav ms-2">
-                    {{ links.navigation_link(endpoint='settings', label = '', icon_html = icons.gear()) }}
+                    {{ links.navigation_link(endpoint='settings', label = '', icon_html = icons.render_icon('gear')) }}
                 </ul>
             </div>
         </div>
diff --git a/templates/settings.html b/templates/settings.html
index 4d94c17..e57c6d6 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -75,7 +75,7 @@
 
 {% block script %}
     const icons = {
-        add: `{{ icons.plus(16)|safe }}`,
-        edit: `{{ icons.pencil(16)|safe }}`,
+        add: `{{ icons.render_icon('plus', 16)|safe }}`,
+        edit: `{{ icons.render_icon('pencil', 16)|safe }}`,
     };
 {% endblock %}
\ No newline at end of file