diff --git a/templates/nav.html b/templates/nav.html
index 3041b84..72143c9 100644
--- a/templates/nav.html
+++ b/templates/nav.html
@@ -20,10 +20,14 @@
                 {% call icons::checkin("inline h-4 w-4") %}
             </a>
             <form method="post" action="/logout" class="inline">
-                <button type="submit" class="border-b-2 pb-1 transition text-stone-500 border-transparent hover:text-amber-600 hover:border-amber-400">Logout</button>
+                <button type="submit" class="border-b-2 pb-1 transition text-stone-500 border-transparent hover:text-amber-600 hover:border-amber-400" aria-label="Logout">
+                    {% call icons::logout("inline h-4 w-4") %}
+                </button>
             </form>
             {% else %}
-            <a class="border-b-2 pb-1 transition text-stone-500 border-transparent hover:text-amber-600 hover:border-amber-400" href="/login">Login</a>
+            <a class="border-b-2 pb-1 transition text-stone-500 border-transparent hover:text-amber-600 hover:border-amber-400" href="/login" aria-label="Login">
+                {% call icons::login("inline h-4 w-4") %}
+            </a>
             {% endif %}
         </div>
         <!-- Hamburger button (mobile only) -->
@@ -52,10 +56,16 @@
             Check In
         </a>
         <form method="post" action="/logout" class="inline">
-            <button type="submit" class="py-1 transition text-stone-500 hover:text-amber-600 text-left">Logout</button>
+            <button type="submit" class="py-1 transition inline-flex items-center gap-1 text-stone-500 hover:text-amber-600 text-left">
+                {% call icons::logout("inline h-4 w-4") %}
+                Logout
+            </button>
         </form>
         {% else %}
-        <a class="py-1 transition text-stone-500 hover:text-amber-600" href="/login">Login</a>
+        <a class="py-1 transition inline-flex items-center gap-1 text-stone-500 hover:text-amber-600" href="/login">
+            {% call icons::login("inline h-4 w-4") %}
+            Login
+        </a>
         {% endif %}
     </div>
 </nav>
diff --git a/templates/partials/icons.html b/templates/partials/icons.html
index 6193150..6185e37 100644
--- a/templates/partials/icons.html
+++ b/templates/partials/icons.html
@@ -91,6 +91,20 @@
 </svg>
 {% endmacro %}
 
+{% macro login(class) %}
+<svg class="{{ class }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75V4.25Z" clip-rule="evenodd" />
+  <path fill-rule="evenodd" d="M19 10a.75.75 0 0 0-.75-.75H8.704l1.048-.943a.75.75 0 1 0-1.004-1.114l-2.5 2.25a.75.75 0 0 0 0 1.114l2.5 2.25a.75.75 0 1 0 1.004-1.114l-1.048-.943h9.546A.75.75 0 0 0 19 10Z" clip-rule="evenodd" />
+</svg>
+{% endmacro %}
+
+{% macro logout(class) %}
+<svg class="{{ class }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75V4.25Z" clip-rule="evenodd" />
+  <path fill-rule="evenodd" d="M6 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H6.75A.75.75 0 0 1 6 10Z" 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" />