diff --git a/assets/css/base.css b/assets/css/base.css
index 60880c9..0fa6901 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -119,6 +119,10 @@ h5 {
   color: #604c2e;
 }
 
+.bs-icon.bs-icon-primary svg {
+  fill: var(--bs-primary-bg-subtle);
+}
+
 /* Responsive Styles */
 @media (max-width: 768px) {
   .navbar .container {
diff --git a/assets/dist/icons/coffee.svg b/assets/dist/icons/coffee.svg
new file mode 100644
index 0000000..4d4e30a
--- /dev/null
+++ b/assets/dist/icons/coffee.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M80,56V24a8,8,0,0,1,16,0V56a8,8,0,0,1-16,0Zm40,8a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,120,64Zm32,0a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,152,64Zm96,56v8a40,40,0,0,1-37.51,39.91,96.59,96.59,0,0,1-27,40.09H208a8,8,0,0,1,0,16H32a8,8,0,0,1,0-16H56.54A96.3,96.3,0,0,1,24,136V88a8,8,0,0,1,8-8H208A40,40,0,0,1,248,120ZM200,96H40v40a80.27,80.27,0,0,0,45.12,72h69.76A80.27,80.27,0,0,0,200,136Zm32,24a24,24,0,0,0-16-22.62V136a95.78,95.78,0,0,1-1.2,15A24,24,0,0,0,232,128Z"></path></svg>
\ No newline at end of file
diff --git a/assets/dist/icons/envelope.svg b/assets/dist/icons/envelope.svg
new file mode 100644
index 0000000..30b1cee
--- /dev/null
+++ b/assets/dist/icons/envelope.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"></path></svg>
\ No newline at end of file
diff --git a/main.py b/main.py
index dc49b56..9312623 100644
--- a/main.py
+++ b/main.py
@@ -81,6 +81,13 @@ if os.environ.get("PRIVATECOFFEE_DEV"):
     app.development_mode = True
 
 
+def icon(icon_name):
+    file = send_from_directory("assets", f"dist/icons/{icon_name}.svg")
+    file_content = file.response.file.read().decode("utf-8")
+    return file_content
+
+app.add_template_filter(icon)
+
 if __name__ == "__main__":
     parser = ArgumentParser(description="Run the private.coffee web server.")
     parser.add_argument("--port", type=int, default=9810)
diff --git a/templates/base.html b/templates/base.html
index 13593f7..2a5fa97 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -75,21 +75,7 @@
             <div class="fw-bold d-flex align-items-center mb-2">
               <span
                 class="bs-icon-sm bs-icon-circle bs-icon-primary d-flex justify-content-center align-items-center bs-icon me-2"
-                ><svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="1em"
-                  height="1em"
-                  fill="currentColor"
-                  viewBox="0 0 16 16"
-                  class="bi bi-bezier"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M0 10.5A1.5 1.5 0 0 1 1.5 9h1A1.5 1.5 0 0 1 4 10.5v1A1.5 1.5 0 0 1 2.5 13h-1A1.5 1.5 0 0 1 0 11.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm10.5.5A1.5 1.5 0 0 1 13.5 9h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM6 4.5A1.5 1.5 0 0 1 7.5 3h1A1.5 1.5 0 0 1 10 4.5v1A1.5 1.5 0 0 1 8.5 7h-1A1.5 1.5 0 0 1 6 5.5zM7.5 4a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z"
-                  ></path>
-                  <path
-                    d="M6 4.5H1.866a1 1 0 1 0 0 1h2.668A6.517 6.517 0 0 0 1.814 9H2.5c.123 0 .244.015.358.043a5.517 5.517 0 0 1 3.185-3.185A1.503 1.503 0 0 1 6 5.5zm3.957 1.358A1.5 1.5 0 0 0 10 5.5v-1h4.134a1 1 0 1 1 0 1h-2.668a6.517 6.517 0 0 1 2.72 3.5H13.5c-.123 0-.243.015-.358.043a5.517 5.517 0 0 0-3.185-3.185z"
-                  ></path></svg></span
+                >{{ "coffee" | icon | safe }}</span
               ><span>Private.coffee</span>
             </div>
             <p class="text-muted">
diff --git a/templates/index.html b/templates/index.html
index 94bf775..19c0522 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -30,7 +30,7 @@
                   <div class="card shadow-sm">
                       <div class="card-body px-4 py-5 px-md-5">
                           <div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;">
-                          {% if service.icon %}<img src="/assets/dist/icons/{{ service.icon }}.svg" alt="{{ service.name }}" style="max-width: 3rem;">{% endif %}
+                          {% if service.icon %}{{ service.icon | icon | safe }}{% endif %}
                         </div>
                           <h5 class="fw-bold card-title">{{ service.name }}</h5>
                           <p class="text-muted card-text mb-4">{{ service.long_description }}</p>
@@ -91,9 +91,7 @@
           <div class="col-md-4 col-xl-4 d-flex justify-content-center justify-content-xl-start">
               <div class="d-flex flex-wrap flex-md-column justify-content-md-start align-items-md-start h-100">
                   <div class="d-flex align-items-center p-3">
-                      <div class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-envelope">
-                              <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"></path>
-                          </svg></div>
+                      <div class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md">{{ "envelope" | icon | safe }}</div>
                           <div class="px-2">
                             <h6 class="fw-bold mb-0">Email</h6>
                             <p class="text-muted mb-0">support@private.coffee</p>
@@ -106,9 +104,7 @@
         <div class="col-md-4 col-xl-4 d-flex justify-content-center justify-content-xl-start">
             <div class="d-flex flex-wrap flex-md-column justify-content-md-start align-items-md-start h-100">
                 <div class="d-flex align-items-center p-3">
-                    <div class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-envelope">
-                            <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"></path>
-                        </svg></div>
+                    <div class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md">{{ "matrix-logo" | icon | safe }}</div>
                       <div class="px-2">
                         <h6 class="fw-bold mb-0">Matrix</h6>
                         <p class="text-muted mb-0"><a href="https://matrix.pcof.fi/#/#private.coffee:private.coffee">#private.coffee:private.coffee</a></p>