diff --git a/allianceauth/framework/templates/framework/svg/sprite.svg b/allianceauth/framework/templates/framework/svg/sprite.svg
new file mode 100644
index 00000000..f9ab2f65
--- /dev/null
+++ b/allianceauth/framework/templates/framework/svg/sprite.svg
@@ -0,0 +1,23 @@
+<svg id="alliance-auth-svg-sprite" width="0" height="0" display="none" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <!-- Alliance Auth Logo -->
+        <symbol id="aa-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+            <g transform="translate(41.953499,36.607802)">
+                <path style="display:inline;fill:#e14852;stroke-width:0.32" d="M 131.07236,159.67687 C 109.26615,147.02458 91.302022,136.55002 91.152067,136.40007 l -0.272649,-0.27265 23.786292,-13.82371 c 13.08247,-7.60304 23.9186,-13.82025 24.08029,-13.81602 l 0.294,0.008 15.93273,36.83413 c 8.763,20.25877 15.891,36.95054 15.84,37.09283 l -0.0927,0.25869 z" />
+                <path style="display:inline;fill:#436195;stroke-width:0.32" d="m 1.28,182.46369 c 0,-0.16969 17.354495,-40.46543 38.565546,-89.546103 L 78.411088,3.68 C 79.919052,1.4903841 82.294641,0.02199886 86.08,0.01224344 89.865359,0.00248802 92.288,1.4677954 93.674477,3.5158445 l 21.668143,50.1206965 21.66814,50.120699 -0.26538,0.23285 C 136.59942,104.11816 106.528,121.61441 69.92,142.87065 33.312,164.12688 2.892,181.80046 2.32,182.14527 l -1.04,0.62693 z" />
+            </g>
+        </symbol>
+
+        <!-- Loading Spinner -->
+        <symbol id="aa-loading-spinner" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" viewBox="0 0 24 24">
+            <g>
+                <circle cx="12" cy="12" r="10" fill="none" stroke-width="1" stroke-linecap="round">
+                    <animate attributeName="stroke-dasharray" dur="1.5s" calcMode="spline" values="0 150;42 150;42 150;42 150" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite" />
+                    <animate attributeName="stroke-dashoffset" dur="1.5s" calcMode="spline" values="0;-16;-59;-59" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite" />
+                </circle>
+
+                <animateTransform attributeName="transform" type="rotate" dur="2s" values="0 12 12;360 12 12" repeatCount="indefinite" />
+            </g>
+        </symbol>
+    </defs>
+</svg>
diff --git a/allianceauth/static/allianceauth/images/auth-logo.png b/allianceauth/static/allianceauth/images/auth-logo.png
deleted file mode 100644
index b45de9c8..00000000
Binary files a/allianceauth/static/allianceauth/images/auth-logo.png and /dev/null differ
diff --git a/allianceauth/static/allianceauth/images/auth-logo.svg b/allianceauth/static/allianceauth/images/auth-logo.svg
deleted file mode 100644
index 9d0c92e2..00000000
--- a/allianceauth/static/allianceauth/images/auth-logo.svg
+++ /dev/null
@@ -1,56 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   version="1.1"
-   id="svg122"
-   width="256"
-   height="256"
-   viewBox="0 0 255.99999 256"
-   sodipodi:docname="allianceauth (2).svg"
-   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs126" />
-  <sodipodi:namedview
-     id="namedview124"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     showgrid="false"
-     inkscape:zoom="3.8506576"
-     inkscape:cx="30.514269"
-     inkscape:cy="102.57988"
-     inkscape:window-width="2560"
-     inkscape:window-height="1369"
-     inkscape:window-x="1912"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="g128" />
-  <g
-     inkscape:groupmode="layer"
-     inkscape:label="Image"
-     id="g128">
-    <g
-       id="g2338"
-       transform="translate(41.953499,36.607802)">
-      <path
-         style="display:inline;fill:#e14852;stroke-width:0.32"
-         d="M 131.07236,159.67687 C 109.26615,147.02458 91.302022,136.55002 91.152067,136.40007 l -0.272649,-0.27265 23.786292,-13.82371 c 13.08247,-7.60304 23.9186,-13.82025 24.08029,-13.81602 l 0.294,0.008 15.93273,36.83413 c 8.763,20.25877 15.891,36.95054 15.84,37.09283 l -0.0927,0.25869 z"
-         id="path2342"
-         sodipodi:nodetypes="cscsccsscc" />
-      <path
-         style="display:inline;fill:#436195;stroke-width:0.32"
-         d="m 1.28,182.46369 c 0,-0.16969 17.354495,-40.46543 38.565546,-89.546103 L 78.411088,3.68 C 79.919052,1.4903841 82.294641,0.02199886 86.08,0.01224344 89.865359,0.00248802 92.288,1.4677954 93.674477,3.5158445 l 21.668143,50.1206965 21.66814,50.120699 -0.26538,0.23285 C 136.59942,104.11816 106.528,121.61441 69.92,142.87065 33.312,164.12688 2.892,181.80046 2.32,182.14527 l -1.04,0.62693 z"
-         id="path2340"
-         sodipodi:nodetypes="ssczcccssscs" />
-    </g>
-  </g>
-</svg>
diff --git a/allianceauth/templates/allianceauth/base-bs5.html b/allianceauth/templates/allianceauth/base-bs5.html
index d96049f1..6066ce5e 100644
--- a/allianceauth/templates/allianceauth/base-bs5.html
+++ b/allianceauth/templates/allianceauth/base-bs5.html
@@ -159,5 +159,7 @@
             {% block extra_script %}
             {% endblock extra_script %}
         </script>
+
+        {% include "framework/svg/sprite.svg" %}
     </body>
 </html>
diff --git a/allianceauth/templates/bundles/image-auth-logo.html b/allianceauth/templates/bundles/image-auth-logo.html
index 47281028..be25d833 100644
--- a/allianceauth/templates/bundles/image-auth-logo.html
+++ b/allianceauth/templates/bundles/image-auth-logo.html
@@ -1,3 +1,3 @@
-{% load static %}
-
-<img src="{% static 'allianceauth/images/auth-logo.svg' %}" width="{{ logo_width|default:"128px" }}" height="{% if logo_height %}{{ logo_height }}{% else %}{{ logo_width|default:"128px" }}{% endif %}" alt="{{ SITE_NAME }}">
+<svg class="svg-alliance-auth-logo" width="{{ logo_width|default:"128px" }}" height="{% if logo_height %}{{ logo_height }}{% else %}{{ logo_width|default:"128px" }}{% endif %}">
+    <use href="#aa-logo"></use>
+</svg>
diff --git a/docs/development/custom/aa-framework.md b/docs/development/custom/aa-framework.md
index 12084d2b..92e55de7 100644
--- a/docs/development/custom/aa-framework.md
+++ b/docs/development/custom/aa-framework.md
@@ -14,4 +14,5 @@ The Alliance Auth framework is split into several submodules, each of which is d
 framework/api
 framework/css
 framework/templates
+framework/svg-sprite
 :::
diff --git a/docs/development/custom/framework/svg-sprite.md b/docs/development/custom/framework/svg-sprite.md
new file mode 100644
index 00000000..81ca95fa
--- /dev/null
+++ b/docs/development/custom/framework/svg-sprite.md
@@ -0,0 +1,50 @@
+# SVG Sprite
+
+An SVG sprite is a collection of SVG images combined into a single SVG file. This allows for efficient loading and management of icons in web applications.
+
+The Alliance Auth framework provides a built-in SVG sprite that contains a selection of icons used in Alliance Auth. This sprite is automatically included in the base template, so you don't need to do anything special to use it.
+
+## Using the SVG Sprite
+
+To use an icon from the SVG sprite, you can use the following HTML syntax:
+
+```html
+<svg>
+    <use href="#[icon-name]"></use>
+</svg>
+```
+
+Replace `[icon-name]` with the name of the icon you want to use. For example, to use the Alliance Auth logo, you would write:
+
+```html
+<svg>
+    <use href="#aa-logo"></use>
+</svg>
+```
+
+## Available Icons
+
+The following icons are available in the Alliance Auth SVG sprite:
+
+- `aa-logo`: The Alliance Auth logo
+- `aa-loading-spinner`: A loading spinner icon
+
+### Alliance Auth Logo
+
+The Alliance Auth logo can be used with the following code:
+
+```html
+<svg>
+    <use href="#aa-logo"></use>
+</svg>
+```
+
+### Loading Spinner
+
+The loading spinner can be used with the following code:
+
+```html
+<svg>
+    <use href="#aa-loading-spinner"></use>
+</svg>
+```