From 3bbcd33933a1b429cc3a12a51601675bcccd3a2f Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Wed, 4 Feb 2026 16:32:18 +0000
Subject: [PATCH] refactor(templates): extract inline SVG icons into shared
 icons partial

Replace duplicated inline SVGs across 16 templates with reusable Askama
macros from a new icons.html partial, reducing repetition and making
icon updates a single-point change.
---
 templates/cafe_detail.html             | 17 +----
 templates/cafes.html                   | 13 ++--
 templates/checkin.html                 | 32 +++------
 templates/home.html                    | 29 ++------
 templates/nav.html                     | 17 ++---
 templates/partials/bag_card.html       |  9 +--
 templates/partials/brew_list.html      | 17 +----
 templates/partials/cafe_list.html      | 35 ++--------
 templates/partials/cup_list.html       |  9 +--
 templates/partials/gear_list.html      |  5 +-
 templates/partials/icons.html          | 92 ++++++++++++++++++++++++++
 templates/partials/roast_list.html     |  9 +--
 templates/partials/roaster_list.html   | 20 +-----
 templates/partials/timeline_month.html | 24 ++-----
 templates/roaster_detail.html          | 13 +---
 templates/roasters.html                | 11 +--
 templates/roasts.html                  | 11 +--
 17 files changed, 152 insertions(+), 211 deletions(-)
 create mode 100644 templates/partials/icons.html

diff --git a/templates/cafe_detail.html b/templates/cafe_detail.html
index 5c7752c..a78deb6 100644
--- a/templates/cafe_detail.html
+++ b/templates/cafe_detail.html
@@ -1,4 +1,4 @@
-{% extends "base.html" %} {% block title %}Brewlog · Cafe · {{ cafe.name }}{% endblock %} {%
+{% extends "base.html" %} {% import "partials/icons.html" as icons %} {% block title %}Brewlog · Cafe · {{ cafe.name }}{% endblock %} {%
 block content %}
 <header class="flex flex-col gap-2">
   <h1 class="text-3xl font-semibold">{{ cafe.name }}</h1>
@@ -28,9 +28,7 @@ block content %}
           rel="noreferrer noopener"
           aria-label="Open {{ cafe.name }} in Google Maps"
         >
-          <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path fill-rule="evenodd" d="M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765 11.842 11.842 0 00.976.544l.062.029.018.008.006.003zM10 11.25a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5z" clip-rule="evenodd" />
-          </svg>
+          {% call icons::location("h-4 w-4") %}
           <span>Open in Maps</span>
         </a>
       </dd>
@@ -46,16 +44,7 @@ block content %}
           rel="noreferrer noopener"
           aria-label="Visit {{ cafe.name }} website"
         >
-          <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path
-              fill-rule="evenodd"
-              d="M11.3 2a.7.7 0 0 0 0 1.4h3.3l-8.1 8.1a.7.7 0 1 0 1 1l8.1-8.1v3.3a.7.7 0 1 0 1.4 0V2.7A.7.7 0 0 0 16.3 2h-5Z"
-              clip-rule="evenodd"
-            />
-            <path
-              d="M4.7 5.2a1.5 1.5 0 0 1 1.5-1.5h2.1a.7.7 0 1 0 0-1.4H6.2a2.9 2.9 0 0 0-2.9 2.9v7.6a2.9 2.9 0 0 0 2.9 2.9h7.6a2.9 2.9 0 0 0 2.9-2.9v-2.1a.7.7 0 1 0-1.4 0v2.1a1.5 1.5 0 0 1-1.5 1.5H6.1a1.5 1.5 0 0 1-1.5-1.5V5.2Z"
-            />
-          </svg>
+          {% call icons::external_link("h-4 w-4") %}
           <span>Visit</span>
         </a>
         {% else %}
diff --git a/templates/cafes.html b/templates/cafes.html
index d8232b9..9737830 100644
--- a/templates/cafes.html
+++ b/templates/cafes.html
@@ -1,4 +1,4 @@
-{% extends "base.html" %} {% block title %}Brewlog · Cafes{% endblock %}
+{% extends "base.html" %} {% import "partials/icons.html" as icons %} {% block title %}Brewlog · Cafes{% endblock %}
 
 {% block head %}
 {% if is_authenticated %}
@@ -211,9 +211,7 @@
             onclick="locateUser(this)"
             class="inline-flex items-center gap-2 rounded-md border border-amber-500 px-3 py-2 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
           >
-            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <path fill-rule="evenodd" d="M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765 11.842 11.842 0 00.976.544l.062.029.018.008.006.003zM10 11.25a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5z" clip-rule="evenodd" />
-            </svg>
+            {% call icons::location("h-4 w-4") %}
             Find nearby
           </button>
           <label class="inline-flex items-center gap-1.5 text-sm text-stone-600 cursor-pointer select-none">
@@ -238,10 +236,9 @@
               placeholder="Search for a cafe&hellip;"
               autocomplete="off"
             />
-            <svg id="nearby-spinner" class="hidden absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-amber-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-            </svg>
+            <span id="nearby-spinner" class="hidden absolute right-2 top-1/2 -translate-y-1/2">
+              {% call icons::spinner("h-4 w-4") %}
+            </span>
           </div>
         </div>
         <p id="nearby-error" class="hidden mt-2 text-sm text-red-600"></p>
diff --git a/templates/checkin.html b/templates/checkin.html
index b20df11..a9c780c 100644
--- a/templates/checkin.html
+++ b/templates/checkin.html
@@ -1,4 +1,4 @@
-{% extends "base.html" %} {% block title %}Brewlog · Check In{% endblock %}
+{% extends "base.html" %} {% import "partials/icons.html" as icons %} {% block title %}Brewlog · Check In{% endblock %}
 
 {% block head %}
 <script>
@@ -76,9 +76,7 @@ function locateUser() {
     style="display: none"
   >
     <div class="flex items-center gap-2">
-      <svg class="h-4 w-4 text-amber-600 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-        <path fill-rule="evenodd" d="M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765 11.842 11.842 0 00.976.544l.062.029.018.008.006.003ZM10 11.25a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5Z" clip-rule="evenodd" />
-      </svg>
+      {% call icons::location("h-4 w-4 text-amber-600 shrink-0") %}
       <span class="font-medium text-amber-800" data-text="$_cafeName"></span>
       <span class="text-xs text-stone-500" data-show="$_cafeCity" data-text="$_cafeCity" style="display: none"></span>
     </div>
@@ -96,9 +94,7 @@ function locateUser() {
     style="display: none"
   >
     <div class="flex items-center gap-2">
-      <svg class="h-4 w-4 text-amber-600 shrink-0" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-        <path fill-rule="evenodd" d="M2 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2h2a3 3 0 0 1 0 6h-1.1A5.002 5.002 0 0 1 14 16H6a5 5 0 0 1-5-5V6Zm16 4h2a1 1 0 1 0 0-2h-2v2ZM4 20a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd" />
-      </svg>
+      {% call icons::bag("h-4 w-4 text-amber-600 shrink-0") %}
       <span class="font-medium text-amber-800" data-text="$_roastName"></span>
       <span class="text-xs text-stone-500" data-show="$_roasterName" data-text="$_roasterName" style="display: none"></span>
     </div>
@@ -155,16 +151,11 @@ function locateUser() {
           class="inline-flex items-center gap-2 rounded-md border border-amber-500 px-4 py-2.5 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
           data-attr:disabled="$_locating || $_locationFound"
         >
-          <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path fill-rule="evenodd" d="M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765 11.842 11.842 0 00.976.544l.062.029.018.008.006.003ZM10 11.25a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5Z" clip-rule="evenodd" />
-          </svg>
+          {% call icons::location("h-4 w-4") %}
           <span data-text="$_locating ? 'Locating\u2026' : $_locationFound ? 'Location found' : 'Use My Location'">Use My Location</span>
         </button>
         <div data-show="!$_searchByCity && $_locating" style="display: none">
-          <svg class="h-5 w-5 animate-spin text-amber-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-          </svg>
+          {% call icons::spinner("h-5 w-5") %}
         </div>
         <input
           type="text"
@@ -281,9 +272,7 @@ function locateUser() {
               onclick="document.getElementById('checkin-photo').click()"
               class="inline-flex items-center gap-2 rounded-md border border-amber-500 px-4 py-2.5 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
             >
-              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M1 8a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 018.07 3h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0016.07 6H17a2 2 0 012 2v7a2 2 0 01-2 2H3a2 2 0 01-2-2V8zm13.5 3a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM10 14a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
-              </svg>
+              {% call icons::camera("h-5 w-5") %}
               Scan Bag
             </button>
             <span class="text-xs text-stone-400">or</span>
@@ -312,10 +301,7 @@ function locateUser() {
         data-show="$_scanWaiting"
         style="display: none"
       >
-        <svg class="h-5 w-5 animate-spin text-amber-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-        </svg>
+        {% call icons::spinner("h-5 w-5") %}
         Scanning &amp; saving&hellip;
       </div>
 
@@ -356,9 +342,7 @@ function locateUser() {
           data-class:text-stone-300="$_rating < {{ i }}"
           aria-label="Rate {{ i }} stars"
         >
-          <svg class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" />
-          </svg>
+          {% call icons::star("h-8 w-8") %}
         </button>
         {% endfor %}
       </div>
diff --git a/templates/home.html b/templates/home.html
index 9f2660e..ff5a35e 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -1,4 +1,4 @@
-{% extends "base.html" %} {% import "partials/bag_card.html" as bag_card %} {% block title %}Brewlog{% endblock %}
+{% extends "base.html" %} {% import "partials/bag_card.html" as bag_card %} {% import "partials/icons.html" as icons %} {% block title %}Brewlog{% endblock %}
 
 {% block head %}
 {% if is_authenticated %}
@@ -43,19 +43,14 @@
     data-on:click="$_showScan = !$_showScan; !$_showScan && ($_scanExtracted = false, $_extracting = false, $_extractError = '', $_scanError = '')"
     class="flex items-center justify-center gap-3 rounded-lg border-2 border-amber-500 px-6 py-5 text-lg font-semibold text-amber-700 shadow-sm transition hover:bg-amber-50"
   >
-    <svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-      <path fill-rule="evenodd" d="M1 8a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 018.07 3h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0016.07 6H17a2 2 0 012 2v7a2 2 0 01-2 2H3a2 2 0 01-2-2V8zm13.5 3a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM10 14a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
-    </svg>
+    {% call icons::camera("h-6 w-6") %}
     Scan Bag
   </button>
   <a
     href="/check-in"
     class="flex items-center justify-center gap-3 rounded-lg border-2 border-amber-500 px-6 py-5 text-lg font-semibold text-amber-700 shadow-sm transition hover:bg-amber-50"
   >
-    <svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-      <path d="M15.993 1.385a1.87 1.87 0 0 1 2.623 2.622l-4.03 5.27a12.75 12.75 0 0 1-4.223 3.358 7.724 7.724 0 0 1-2.71.832 2.14 2.14 0 0 1-.588-.085 1.07 1.07 0 0 1-.725-.723 2.14 2.14 0 0 1-.083-.588 7.724 7.724 0 0 1 .832-2.71 12.75 12.75 0 0 1 3.358-4.223l5.27-4.03.176.177-.176-.177Z" />
-      <path d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v3.75a2.25 2.25 0 0 1-2.25 2.25h-.878a15.262 15.262 0 0 0 .878 3h.75a3.75 3.75 0 0 0 3.75-3.75V6a3.75 3.75 0 0 0-3.75-3.75h-7.5A3.75 3.75 0 0 0 5.25 6v.75a15.262 15.262 0 0 0 .75.128Z" />
-    </svg>
+    {% call icons::pen("h-6 w-6") %}
     Check In
   </a>
 </section>
@@ -90,9 +85,7 @@
           onclick="document.getElementById('scan-photo').click()"
           class="inline-flex items-center gap-2 rounded-md border border-amber-500 px-4 py-3 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
         >
-          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path fill-rule="evenodd" d="M1 8a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 018.07 3h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0016.07 6H17a2 2 0 012 2v7a2 2 0 01-2 2H3a2 2 0 01-2-2V8zm13.5 3a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM10 14a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
-          </svg>
+          {% call icons::camera("h-5 w-5") %}
           Take Photo
         </button>
         <span class="text-xs text-stone-400">or</span>
@@ -112,10 +105,7 @@
         </div>
       </div>
       <div data-show="$_extracting" style="display:none" class="flex items-center gap-3 text-sm text-amber-700">
-        <svg class="h-5 w-5 animate-spin text-amber-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-        </svg>
+        {% call icons::spinner("h-5 w-5") %}
         Waiting for response&hellip;
       </div>
       <p data-show="$_extractError" data-text="$_extractError" style="display:none" class="mt-2 text-sm text-red-600"></p>
@@ -183,10 +173,7 @@
       </div>
       <p data-show="$_scanError" data-text="$_scanError" style="display:none" class="text-sm text-red-600"></p>
       <div data-show="$_scanSubmitting" style="display:none" class="flex items-center gap-3 text-sm text-amber-700">
-        <svg class="h-5 w-5 animate-spin text-amber-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-        </svg>
+        {% call icons::spinner("h-5 w-5") %}
         Saving&hellip;
       </div>
       <div data-show="!$_scanSubmitting" class="flex items-center justify-end gap-2">
@@ -251,9 +238,7 @@
           type="submit"
           class="inline-flex items-center gap-2 rounded-md bg-amber-600 px-4 py-2 text-sm font-semibold text-amber-50 transition hover:bg-amber-500"
         >
-          <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0v2.43l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389 5.5 5.5 0 0 1 9.2-2.466l.312.311h-2.433a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.22Z" clip-rule="evenodd" />
-          </svg>
+          {% call icons::refresh("h-4 w-4") %}
           Brew Again
         </button>
       </form>
diff --git a/templates/nav.html b/templates/nav.html
index a57863d..34211ba 100644
--- a/templates/nav.html
+++ b/templates/nav.html
@@ -1,3 +1,4 @@
+{% import "partials/icons.html" as icons %}
 <nav class="relative rounded-lg border border-amber-300 bg-amber-100/80 p-3 text-sm text-stone-600" data-signals:_nav-open="false">
     <div class="flex items-center justify-between">
         <div class="font-semibold uppercase tracking-[0.25em] text-amber-700"><a href="/">B{rew}log</a></div>
@@ -12,9 +13,7 @@
             <a class="border-b-2 pb-1 transition {% if nav_active == "gear" %}text-amber-700 border-amber-500{% else %}text-stone-500 border-transparent hover:text-amber-600 hover:border-amber-400{% endif %}" href="/gear">Gear</a>
             <a class="border-b-2 pb-1 transition {% if nav_active == "timeline" %}text-amber-700 border-amber-500{% else %}text-stone-500 border-transparent hover:text-amber-600 hover:border-amber-400{% endif %}" href="/timeline">Timeline</a>
             <a class="border-b-2 pb-1 transition {% if nav_active == "home" %}text-amber-700 border-amber-500{% else %}text-stone-500 border-transparent hover:text-amber-600 hover:border-amber-400{% endif %}" href="/" aria-label="Home">
-                <svg class="inline h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
-                </svg>
+                {% call icons::home("inline h-4 w-4") %}
             </a>
             {% if is_authenticated %}
             <form method="post" action="/logout" class="inline">
@@ -26,12 +25,8 @@
         </div>
         <!-- Hamburger button (mobile only) -->
         <button class="md:hidden p-1 text-amber-700" data-on:click="$_navOpen = !$_navOpen" aria-label="Toggle menu">
-            <svg data-show="!$_navOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
-            </svg>
-            <svg data-show="$_navOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="display:none">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-            </svg>
+            <span data-show="!$_navOpen">{% call icons::hamburger("h-6 w-6") %}</span>
+            <span data-show="$_navOpen" style="display:none">{% call icons::close("h-6 w-6") %}</span>
         </button>
     </div>
     <!-- Mobile menu -->
@@ -45,9 +40,7 @@
         <a class="py-1 transition {% if nav_active == "gear" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/gear">Gear</a>
         <a class="py-1 transition {% if nav_active == "timeline" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/timeline">Timeline</a>
         <a class="py-1 transition inline-flex items-center gap-1 {% if nav_active == "home" %}text-amber-700 font-medium{% else %}text-stone-500 hover:text-amber-600{% endif %}" href="/">
-            <svg class="inline h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
-            </svg>
+            {% call icons::home("inline h-4 w-4") %}
             Home
         </a>
         {% if is_authenticated %}
diff --git a/templates/partials/bag_card.html b/templates/partials/bag_card.html
index 5be5825..1450db9 100644
--- a/templates/partials/bag_card.html
+++ b/templates/partials/bag_card.html
@@ -1,3 +1,4 @@
+{% import "partials/icons.html" as icons %}
 {% macro card(bag, is_authenticated) %}
 <div id="bag-card-{{ bag.id }}" class="rounded-lg border border-amber-200 bg-amber-50 p-4 shadow-sm">
   <div>
@@ -11,9 +12,7 @@
   {% if is_authenticated %}
   <div class="mt-3 pt-3 border-t border-amber-100 flex gap-3">
     <a href="/brews?bag_id={{ bag.id }}" class="inline-flex items-center gap-1 text-sm font-medium text-amber-700 hover:text-amber-500">
-      <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z" clip-rule="evenodd" />
-      </svg>
+      {% call icons::plus_circle("h-4 w-4") %}
       Brew
     </a>
     <button
@@ -21,9 +20,7 @@
       class="inline-flex items-center gap-1 text-sm font-medium text-stone-500 hover:text-stone-700"
       onclick="closeBag('{{ bag.id }}', document.getElementById('bag-card-{{ bag.id }}'))"
     >
-      <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
-      </svg>
+      {% call icons::x_circle("h-4 w-4") %}
       Close
     </button>
   </div>
diff --git a/templates/partials/brew_list.html b/templates/partials/brew_list.html
index a73de9f..35576b4 100644
--- a/templates/partials/brew_list.html
+++ b/templates/partials/brew_list.html
@@ -1,4 +1,5 @@
 {% import "partials/table.html" as table %}
+{% import "partials/icons.html" as icons %}
 
 <div id="brew-list" class="mt-6" data-star-scope="brews">
   {% if brews.items.is_empty() && !navigator.has_search() %}
@@ -92,13 +93,7 @@
                     title="Brew again"
                   >
                     <span class="sr-only">Brew again</span>
-                    <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                      <path
-                        fill-rule="evenodd"
-                        d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0v2.43l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389 5.5 5.5 0 0 1 9.2-2.466l.312.311h-2.433a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.22Z"
-                        clip-rule="evenodd"
-                      />
-                    </svg>
+                    {% call icons::refresh("h-4 w-4") %}
                   </button>
                 </form>
                 <button
@@ -108,13 +103,7 @@
                   data-on:click="confirm('Delete this brew?') && @delete('/api/v1/brews/{{ brew.id }}?{{ navigator.query() }}', {responseOverrides: {selector: '#brew-list', mode: 'replace'}})"
                 >
                   <span class="sr-only">Delete</span>
-                  <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path
-                      fill-rule="evenodd"
-                      d="M7.5 3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1H15a1 1 0 1 1 0 2h-.4l-.74 10.36A2 2 0 0 1 11.87 17H8.13a2 2 0 0 1-1.99-1.64L5.4 5H5a1 1 0 1 1 0-2h2.5Zm.9 4.5a.75.75 0 0 1 .75.75v6a.75.75 0 1 1-1.5 0v-6a.75.75 0 0 1 .75-.75Zm3.4 0a.75.75 0 0 1 .75.75v6a.75.75 0 1 1-1.5 0v-6a.75.75 0 0 1 .75-.75Z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
+                  {% call icons::delete("h-4 w-4") %}
                 </button>
               </div>
             </td>
diff --git a/templates/partials/cafe_list.html b/templates/partials/cafe_list.html
index 0d2c18b..165dc00 100644
--- a/templates/partials/cafe_list.html
+++ b/templates/partials/cafe_list.html
@@ -1,4 +1,5 @@
 {% import "partials/table.html" as table %}
+{% import "partials/icons.html" as icons %}
 
 <div id="cafe-list" class="mt-6" data-star-scope="cafes">
   {% if cafes.items.is_empty() && !navigator.has_search() %}
@@ -59,9 +60,7 @@
                   title="Open in Google Maps"
                 >
                   <span class="sr-only">Open {{ cafe.name }} in Google Maps</span>
-                  <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path fill-rule="evenodd" d="M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765 11.842 11.842 0 00.976.544l.062.029.018.008.006.003zM10 11.25a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5z" clip-rule="evenodd" />
-                  </svg>
+                  {% call icons::location("h-4 w-4") %}
                 </a>
                 {% if cafe.has_website %}
                 <a
@@ -72,16 +71,7 @@
                   title="Visit website"
                 >
                   <span class="sr-only">Visit {{ cafe.name }} website</span>
-                  <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path
-                      fill-rule="evenodd"
-                      d="M11.3 2a.7.7 0 0 0 0 1.4h3.3l-8.1 8.1a.7.7 0 1 0 1 1l8.1-8.1v3.3a.7.7 0 1 0 1.4 0V2.7A.7.7 0 0 0 16.3 2h-5Z"
-                      clip-rule="evenodd"
-                    />
-                    <path
-                      d="M4.7 5.2a1.5 1.5 0 0 1 1.5-1.5h2.1a.7.7 0 1 0 0-1.4H6.2a2.9 2.9 0 0 0-2.9 2.9v7.6a2.9 2.9 0 0 0 2.9 2.9h7.6a2.9 2.9 0 0 0 2.9-2.9v-2.1a.7.7 0 1 0-1.4 0v2.1a1.5 1.5 0 0 1-1.5 1.5H6.1a1.5 1.5 0 0 1-1.5-1.5V5.2Z"
-                    />
-                  </svg>
+                  {% call icons::external_link("h-4 w-4") %}
                 </a>
                 {% else %}
                 <span
@@ -89,16 +79,7 @@
                   title="No website"
                   aria-disabled="true"
                 >
-                  <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path
-                      fill-rule="evenodd"
-                      d="M11.3 2a.7.7 0 0 0 0 1.4h3.3l-8.1 8.1a.7.7 0 1 0 1 1l8.1-8.1v3.3a.7.7 0 1 0 1.4 0V2.7A.7.7 0 0 0 16.3 2h-5Z"
-                      clip-rule="evenodd"
-                    />
-                    <path
-                      d="M4.7 5.2a1.5 1.5 0 0 1 1.5-1.5h2.1a.7.7 0 1 0 0-1.4H6.2a2.9 2.9 0 0 0-2.9 2.9v7.6a2.9 2.9 0 0 0 2.9 2.9h7.6a2.9 2.9 0 0 0 2.9-2.9v-2.1a.7.7 0 1 0-1.4 0v2.1a1.5 1.5 0 0 1-1.5 1.5H6.1a1.5 1.5 0 0 1-1.5-1.5V5.2Z"
-                    />
-                  </svg>
+                  {% call icons::external_link("h-4 w-4") %}
                 </span>
                 {% endif %}
                 {% if is_authenticated %}
@@ -109,13 +90,7 @@
                   data-on:click="confirm('Delete this cafe?') && @delete('/api/v1/cafes/{{ cafe.id }}?{{ navigator.query() }}', {responseOverrides: {selector: '#cafe-list', mode: 'replace'}})"
                 >
                   <span class="sr-only">Delete</span>
-                  <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path
-                      fill-rule="evenodd"
-                      d="M7.5 3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1H15a1 1 0 1 1 0 2h-.4l-.74 10.36A2 2 0 0 1 11.87 17H8.13a2 2 0 0 1-1.99-1.64L5.4 5H5a1 1 0 1 1 0-2h2.5Zm.9 4.5a.75.75 0 0 1 .75.75v6a.75.75 0 1 1-1.5 0v-6a.75.75 0 0 1 .75-.75Zm3.4 0a.75.75 0 0 1 .75.75v6a.75.75 0 1 1-1.5 0v-6a.75.75 0 0 1 .75-.75Z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
+                  {% call icons::delete("h-4 w-4") %}
                 </button>
                 {% endif %}
               </div>
diff --git a/templates/partials/cup_list.html b/templates/partials/cup_list.html
index d5d10f7..ec13b62 100644
--- a/templates/partials/cup_list.html
+++ b/templates/partials/cup_list.html
@@ -1,4 +1,5 @@
 {% import "partials/table.html" as table %}
+{% import "partials/icons.html" as icons %}
 
 <div id="cup-list" class="mt-6" data-star-scope="cups">
   {% if cups.items.is_empty() && !navigator.has_search() %}
@@ -61,13 +62,7 @@
                   data-on:click="confirm('Delete this cup?') && @delete('/api/v1/cups/{{ cup.id }}?{{ navigator.query() }}', {responseOverrides: {selector: '#cup-list', mode: 'replace'}})"
                 >
                   <span class="sr-only">Delete</span>
-                  <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path
-                      fill-rule="evenodd"
-                      d="M7.5 3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1H15a1 1 0 1 1 0 2h-.4l-.74 10.36A2 2 0 0 1 11.87 17H8.13a2 2 0 0 1-1.99-1.64L5.4 5H5a1 1 0 1 1 0-2h2.5Zm.9 4.5a.75.75 0 0 1 .75.75v6a.75.75 0 1 1-1.5 0v-6a.75.75 0 0 1 .75-.75Zm3.4 0a.75.75 0 0 1 .75.75v6a.75.75 0 1 1-1.5 0v-6a.75.75 0 0 1 .75-.75Z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
+                  {% call icons::delete("h-4 w-4") %}
                 </button>
               </div>
               {% endif %}
diff --git a/templates/partials/gear_list.html b/templates/partials/gear_list.html
index 8122773..0f47d20 100644
--- a/templates/partials/gear_list.html
+++ b/templates/partials/gear_list.html
@@ -1,4 +1,5 @@
 {% import "partials/table.html" as table %}
+{% import "partials/icons.html" as icons %}
 
 <div id="gear-list" class="mt-6" data-star-scope="gear">
   {% if gear.items.is_empty() && !navigator.has_search() %}
@@ -54,9 +55,7 @@
                 data-on:click="confirm('Delete this gear?') && @delete('/api/v1/gear/{{ item.id }}?{{ navigator.query() }}', {responseOverrides: {selector: '#gear-list', mode: 'replace'}})"
               >
                 <span class="sr-only">Delete</span>
-                <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                  <path fill-rule="evenodd" d="M7.5 3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1H15a1 1 0 1 1 0 2h-.4l-.74 10.36A2 2 0 0 1 11.87 17H8.13a2 2 0 0 1-1.99-1.64L5.4 5H5a1 1 0 1 1 0-2h2.5Zm.9 4.5a.75.75 0 0 1 .75.75v6a.75.75 0 1 1-1.5 0v-6a.75.75 0 0 1 .75-.75Zm3.4 0a.75.75 0 0 1 .75.75v6a.75.75 0 1 1-1.5 0v-6a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd" />
-                </svg>
+                {% call icons::delete("h-4 w-4") %}
               </button>
             </td>
             {% endif %}
diff --git a/templates/partials/icons.html b/templates/partials/icons.html
new file mode 100644
index 0000000..d89b8b1
--- /dev/null
+++ b/templates/partials/icons.html
@@ -0,0 +1,92 @@
+{% macro camera(class) %}
+<svg class="{{ class }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path fill-rule="evenodd" d="M1 8a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 018.07 3h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0016.07 6H17a2 2 0 012 2v7a2 2 0 01-2 2H3a2 2 0 01-2-2V8zm13.5 3a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM10 14a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
+</svg>
+{% endmacro %}
+
+{% macro spinner(class) %}
+<svg class="{{ class }} animate-spin text-amber-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+</svg>
+{% endmacro %}
+
+{% macro delete(class) %}
+<svg class="{{ class }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path fill-rule="evenodd" d="M7.5 3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1H15a1 1 0 1 1 0 2h-.4l-.74 10.36A2 2 0 0 1 11.87 17H8.13a2 2 0 0 1-1.99-1.64L5.4 5H5a1 1 0 1 1 0-2h2.5Zm.9 4.5a.75.75 0 0 1 .75.75v6a.75.75 0 1 1-1.5 0v-6a.75.75 0 0 1 .75-.75Zm3.4 0a.75.75 0 0 1 .75.75v6a.75.75 0 1 1-1.5 0v-6a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd" />
+</svg>
+{% endmacro %}
+
+{% macro external_link(class) %}
+<svg class="{{ class }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path fill-rule="evenodd" d="M11.3 2a.7.7 0 0 0 0 1.4h3.3l-8.1 8.1a.7.7 0 1 0 1 1l8.1-8.1v3.3a.7.7 0 1 0 1.4 0V2.7A.7.7 0 0 0 16.3 2h-5Z" clip-rule="evenodd" />
+  <path d="M4.7 5.2a1.5 1.5 0 0 1 1.5-1.5h2.1a.7.7 0 1 0 0-1.4H6.2a2.9 2.9 0 0 0-2.9 2.9v7.6a2.9 2.9 0 0 0 2.9 2.9h7.6a2.9 2.9 0 0 0 2.9-2.9v-2.1a.7.7 0 1 0-1.4 0v2.1a1.5 1.5 0 0 1-1.5 1.5H6.1a1.5 1.5 0 0 1-1.5-1.5V5.2Z" />
+</svg>
+{% endmacro %}
+
+{% macro location(class) %}
+<svg class="{{ class }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path fill-rule="evenodd" d="M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765 11.842 11.842 0 00.976.544l.062.029.018.008.006.003ZM10 11.25a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5Z" clip-rule="evenodd" />
+</svg>
+{% endmacro %}
+
+{% macro refresh(class) %}
+<svg class="{{ class }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0v2.43l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389 5.5 5.5 0 0 1 9.2-2.466l.312.311h-2.433a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.22Z" clip-rule="evenodd" />
+</svg>
+{% endmacro %}
+
+{% macro home(class) %}
+<svg class="{{ class }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
+</svg>
+{% endmacro %}
+
+{% macro star(class) %}
+<svg class="{{ class }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" />
+</svg>
+{% endmacro %}
+
+{% macro bag(class) %}
+<svg class="{{ class }}" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <path fill-rule="evenodd" d="M2 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2h2a3 3 0 0 1 0 6h-1.1A5.002 5.002 0 0 1 14 16H6a5 5 0 0 1-5-5V6Zm16 4h2a1 1 0 1 0 0-2h-2v2ZM4 20a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd" />
+</svg>
+{% endmacro %}
+
+{% macro pen(class) %}
+<svg class="{{ class }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path d="M15.993 1.385a1.87 1.87 0 0 1 2.623 2.622l-4.03 5.27a12.75 12.75 0 0 1-4.223 3.358 7.724 7.724 0 0 1-2.71.832 2.14 2.14 0 0 1-.588-.085 1.07 1.07 0 0 1-.725-.723 2.14 2.14 0 0 1-.083-.588 7.724 7.724 0 0 1 .832-2.71 12.75 12.75 0 0 1 3.358-4.223l5.27-4.03.176.177-.176-.177Z" />
+  <path d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v3.75a2.25 2.25 0 0 1-2.25 2.25h-.878a15.262 15.262 0 0 0 .878 3h.75a3.75 3.75 0 0 0 3.75-3.75V6a3.75 3.75 0 0 0-3.75-3.75h-7.5A3.75 3.75 0 0 0 5.25 6v.75a15.262 15.262 0 0 0 .75.128Z" />
+</svg>
+{% endmacro %}
+
+{% macro hamburger(class) %}
+<svg class="{{ class }}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+</svg>
+{% endmacro %}
+
+{% macro close(class) %}
+<svg class="{{ class }}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+</svg>
+{% endmacro %}
+
+{% macro arrow_up(class) %}
+<svg class="{{ class }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" />
+</svg>
+{% endmacro %}
+
+{% macro plus_circle(class) %}
+<svg class="{{ class }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z" clip-rule="evenodd" />
+</svg>
+{% endmacro %}
+
+{% macro x_circle(class) %}
+<svg class="{{ class }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+</svg>
+{% endmacro %}
diff --git a/templates/partials/roast_list.html b/templates/partials/roast_list.html
index 3690d8b..a403186 100644
--- a/templates/partials/roast_list.html
+++ b/templates/partials/roast_list.html
@@ -1,4 +1,5 @@
 {% import "partials/table.html" as table %}
+{% import "partials/icons.html" as icons %}
 
 <div id="roast-list" class="mt-6" data-star-scope="roasts">
   {% if roasts.items.is_empty() && !navigator.has_search() %}
@@ -73,13 +74,7 @@
                 data-on:click="confirm('Delete this roast?') && @delete('/api/v1/roasts/{{ roast.full_id }}?{{ navigator.query() }}', {responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
               >
                 <span class="sr-only">Delete</span>
-                <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                  <path
-                    fill-rule="evenodd"
-                    d="M7.5 3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1H15a1 1 0 1 1 0 2h-.4l-.74 10.36A2 2 0 0 1 11.87 17H8.13a2 2 0 0 1-1.99-1.64L5.4 5H5a1 1 0 1 1 0-2h2.5Zm.9 4.5a.75.75 0 0 1 .75.75v6a.75.75 0 1 1-1.5 0v-6a.75.75 0 0 1 .75-.75Zm3.4 0a.75.75 0 0 1 .75.75v6a.75.75 0 1 1-1.5 0v-6a.75.75 0 0 1 .75-.75Z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
+                {% call icons::delete("h-4 w-4") %}
               </button>
             </td>
             {% endif %}
diff --git a/templates/partials/roaster_list.html b/templates/partials/roaster_list.html
index a6d41c3..716f700 100644
--- a/templates/partials/roaster_list.html
+++ b/templates/partials/roaster_list.html
@@ -1,4 +1,5 @@
 {% import "partials/table.html" as table %}
+{% import "partials/icons.html" as icons %}
 
 <div id="roaster-list" class="mt-6" data-star-scope="roasters">
   {% if roasters.items.is_empty() && !navigator.has_search() %}
@@ -64,16 +65,7 @@
                   title="Visit homepage"
                 >
                   <span class="sr-only">Visit {{ roaster.name }} homepage</span>
-                  <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path
-                      fill-rule="evenodd"
-                      d="M11.3 2a.7.7 0 0 0 0 1.4h3.3l-8.1 8.1a.7.7 0 1 0 1 1l8.1-8.1v3.3a.7.7 0 1 0 1.4 0V2.7A.7.7 0 0 0 16.3 2h-5Z"
-                      clip-rule="evenodd"
-                    />
-                    <path
-                      d="M4.7 5.2a1.5 1.5 0 0 1 1.5-1.5h2.1a.7.7 0 1 0 0-1.4H6.2a2.9 2.9 0 0 0-2.9 2.9v7.6a2.9 2.9 0 0 0 2.9 2.9h7.6a2.9 2.9 0 0 0 2.9-2.9v-2.1a.7.7 0 1 0-1.4 0v2.1a1.5 1.5 0 0 1-1.5 1.5H6.1a1.5 1.5 0 0 1-1.5-1.5V5.2Z"
-                    />
-                  </svg>
+                  {% call icons::external_link("h-4 w-4") %}
                 </a>
                 {% endif %}
                 {% if is_authenticated %}
@@ -84,13 +76,7 @@
                   data-on:click="confirm('Delete this roaster?') && @delete('/api/v1/roasters/{{ roaster.id }}?{{ navigator.query() }}', {responseOverrides: {selector: '#roaster-list', mode: 'replace'}})"
                 >
                   <span class="sr-only">Delete</span>
-                  <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path
-                      fill-rule="evenodd"
-                      d="M7.5 3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1H15a1 1 0 1 1 0 2h-.4l-.74 10.36A2 2 0 0 1 11.87 17H8.13a2 2 0 0 1-1.99-1.64L5.4 5H5a1 1 0 1 1 0-2h2.5Zm.9 4.5a.75.75 0 0 1 .75.75v6a.75.75 0 1 1-1.5 0v-6a.75.75 0 0 1 .75-.75Zm3.4 0a.75.75 0 0 1 .75.75v6a.75.75 0 1 1-1.5 0v-6a.75.75 0 0 1 .75-.75Z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
+                  {% call icons::delete("h-4 w-4") %}
                 </button>
                 {% endif %}
               </div>
diff --git a/templates/partials/timeline_month.html b/templates/partials/timeline_month.html
index 0d30a83..2a61bed 100644
--- a/templates/partials/timeline_month.html
+++ b/templates/partials/timeline_month.html
@@ -1,9 +1,8 @@
+{% import "partials/icons.html" as icons %}
 <h2 id="{{ month.anchor }}" class="timeline-heading scroll-mt-24 mb-6 text-2xl font-semibold text-amber-800" data-timeline-month>
   {{ month.heading }}
   <button type="button" class="timeline-top-btn" onclick="window.scrollTo({top: 0, behavior: 'smooth'})" aria-label="Back to top">
-    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-      <path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" />
-    </svg>
+    {% call icons::arrow_up("h-5 w-5") %}
   </button>
 </h2>
 {% for event in month.events %}
@@ -37,16 +36,7 @@
         rel="noreferrer noopener"
         aria-label="Open external link"
       >
-        <svg class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          <path
-            fill-rule="evenodd"
-            d="M11.3 2a.7.7 0 0 0 0 1.4h3.3l-8.1 8.1a.7.7 0 1 0 1 1l8.1-8.1v3.3a.7.7 0 1 0 1.4 0V2.7A.7.7 0 0 0 16.3 2h-5Z"
-            clip-rule="evenodd"
-          />
-          <path
-            d="M4.7 5.2a1.5 1.5 0 0 1 1.5-1.5h2.1a.7.7 0 1 0 0-1.4H6.2a2.9 2.9 0 0 0-2.9 2.9v7.6a2.9 2.9 0 0 0 2.9 2.9h7.6a2.9 2.9 0 0 0 2.9-2.9v-2.1a.7.7 0 1 0-1.4 0v2.1a1.5 1.5 0 0 1-1.5 1.5H6.1a1.5 1.5 0 0 1-1.5-1.5V5.2Z"
-          />
-        </svg>
+        {% call icons::external_link("h-3.5 w-3.5") %}
         <span class="sr-only">Open external link</span>
       </a>
       {% endif %}
@@ -72,13 +62,7 @@
           title="Brew again"
         >
           <span class="sr-only">Brew again</span>
-          <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path
-              fill-rule="evenodd"
-              d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0v2.43l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389 5.5 5.5 0 0 1 9.2-2.466l.312.311h-2.433a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.22Z"
-              clip-rule="evenodd"
-            />
-          </svg>
+          {% call icons::refresh("h-4 w-4") %}
         </button>
       </form>
       {% endif %}
diff --git a/templates/roaster_detail.html b/templates/roaster_detail.html
index 4a6e14f..8c0bd5b 100644
--- a/templates/roaster_detail.html
+++ b/templates/roaster_detail.html
@@ -1,4 +1,4 @@
-{% extends "base.html" %} {% block title %}Brewlog · Roaster · {{ roaster.name }}{% endblock %} {%
+{% extends "base.html" %} {% import "partials/icons.html" as icons %} {% block title %}Brewlog · Roaster · {{ roaster.name }}{% endblock %} {%
 block content %}
 <header class="flex flex-col gap-2">
   <h1 class="text-3xl font-semibold">{{ roaster.name }}</h1>
@@ -25,16 +25,7 @@ block content %}
           rel="noreferrer noopener"
           aria-label="Visit {{ roaster.name }} homepage"
         >
-          <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path
-              fill-rule="evenodd"
-              d="M11.3 2a.7.7 0 0 0 0 1.4h3.3l-8.1 8.1a.7.7 0 1 0 1 1l8.1-8.1v3.3a.7.7 0 1 0 1.4 0V2.7A.7.7 0 0 0 16.3 2h-5Z"
-              clip-rule="evenodd"
-            />
-            <path
-              d="M4.7 5.2a1.5 1.5 0 0 1 1.5-1.5h2.1a.7.7 0 1 0 0-1.4H6.2a2.9 2.9 0 0 0-2.9 2.9v7.6a2.9 2.9 0 0 0 2.9 2.9h7.6a2.9 2.9 0 0 0 2.9-2.9v-2.1a.7.7 0 1 0-1.4 0v2.1a1.5 1.5 0 0 1-1.5 1.5H6.1a1.5 1.5 0 0 1-1.5-1.5V5.2Z"
-            />
-          </svg>
+          {% call icons::external_link("h-4 w-4") %}
           <span>Visit</span>
         </a>
         {% else %}
diff --git a/templates/roasters.html b/templates/roasters.html
index eb7fda9..d727627 100644
--- a/templates/roasters.html
+++ b/templates/roasters.html
@@ -1,4 +1,4 @@
-{% extends "base.html" %} {% block title %}Brewlog · Roasters{% endblock %}
+{% extends "base.html" %} {% import "partials/icons.html" as icons %} {% block title %}Brewlog · Roasters{% endblock %}
 
 {% block content %}
 <section data-signals:_show-form="false" data-signals:_extracting="false" data-signals:_extract-error="''" data-signals:_submitting="false">
@@ -49,9 +49,7 @@
           onclick="document.getElementById('roaster-photo').click()"
           class="inline-flex items-center gap-2 rounded-md border border-amber-500 px-3 py-2 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
         >
-          <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path fill-rule="evenodd" d="M1 8a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 018.07 3h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0016.07 6H17a2 2 0 012 2v7a2 2 0 01-2 2H3a2 2 0 01-2-2V8zm13.5 3a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM10 14a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
-          </svg>
+          {% call icons::camera("h-4 w-4") %}
           Extract from photo
         </button>
         <span class="text-xs text-stone-400">or</span>
@@ -71,10 +69,7 @@
         </div>
       </div>
       <div data-show="$_extracting" style="display:none" class="flex items-center gap-3 text-sm text-amber-700">
-        <svg class="h-4 w-4 animate-spin text-amber-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-        </svg>
+        {% call icons::spinner("h-4 w-4") %}
         Waiting for response&hellip;
       </div>
       <p data-show="$_extractError" data-text="$_extractError" style="display:none" class="mt-2 text-sm text-red-600"></p>
diff --git a/templates/roasts.html b/templates/roasts.html
index a1c5275..92c5b64 100644
--- a/templates/roasts.html
+++ b/templates/roasts.html
@@ -1,4 +1,4 @@
-{% extends "base.html" %} {% block title %}Brewlog · Roasts{% endblock %}
+{% extends "base.html" %} {% import "partials/icons.html" as icons %} {% block title %}Brewlog · Roasts{% endblock %}
 
 {% block content %}
 <section data-signals:_show-form="false" data-signals:_extracting="false" data-signals:_extract-error="''" data-signals:_submitting="false">
@@ -63,9 +63,7 @@
           onclick="document.getElementById('roast-photo').click()"
           class="inline-flex items-center gap-2 rounded-md border border-amber-500 px-3 py-2 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
         >
-          <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path fill-rule="evenodd" d="M1 8a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 018.07 3h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0016.07 6H17a2 2 0 012 2v7a2 2 0 01-2 2H3a2 2 0 01-2-2V8zm13.5 3a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM10 14a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
-          </svg>
+          {% call icons::camera("h-4 w-4") %}
           Extract from photo
         </button>
         <span class="text-xs text-stone-400">or</span>
@@ -85,10 +83,7 @@
         </div>
       </div>
       <div data-show="$_extracting" style="display:none" class="flex items-center gap-3 text-sm text-amber-700">
-        <svg class="h-4 w-4 animate-spin text-amber-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-        </svg>
+        {% call icons::spinner("h-4 w-4") %}
         Waiting for response&hellip;
       </div>
       <p data-show="$_extractError" data-text="$_extractError" style="display:none" class="mt-2 text-sm text-red-600"></p>