diff --git a/src/lib/nav.html b/src/lib/nav.html
index abc62a0..79744aa 100644
--- a/src/lib/nav.html
+++ b/src/lib/nav.html
@@ -19,22 +19,22 @@
     <div class="nav-bar--separator"></div>
     <div class="nav-bar--links">
       <a class="nav-bar--link" href="mailto:contact@frog-collective.com">
-          <img src="/img/mail-fill.svg" alt-text="{{ gettext('Mail') }}"></img>
+          <img class="nav-bar--link-icon" src="/img/mail-fill.svg" alt-text="{{ gettext('Mail') }}"></img>
       </a>
       <a class="nav-bar--link" href="https://www.youtube.com/@FrogCoGames" target="_blank">
-          <img src="/img/youtube-fill.svg" alt-text="Youtube"></img>
+          <img class="nav-bar--link-icon" src="/img/youtube-fill.svg" alt-text="Youtube"></img>
       </a>
       <a class="nav-bar--link" href="https://www.twitch.tv/frogcollective" target="_blank">
-          <img src="/img/twitch-fill.svg" alt-text="Twitch"></img>
+          <img class="nav-bar--link-icon" src="/img/twitch-fill.svg" alt-text="Twitch"></img>
       </a>
       <a class="nav-bar--link" href="https://mastodon.social/@frogcollective" target="_blank">
-          <img src="/img/mastodon-fill.svg" alt-text="Mastodon"></img>
+          <img class="nav-bar--link-icon" src="/img/mastodon-fill.svg" alt-text="Mastodon"></img>
       </a>
       <a class="nav-bar--link" href="https://x.com/FrogCoGames" target="_blank">
-          <img src="/img/twitter-x-line.svg" alt-text="Twitter - X"></img>
+          <img class="nav-bar--link-icon" src="/img/twitter-x-line.svg" alt-text="Twitter - X"></img>
       </a>
       <a class="nav-bar--link" href="https://www.facebook.com/profile.php?id=61560180067337" target="_blank">
-          <img src="/img/facebook-circle-fill.svg" alt-text="Facebook"></img>
+          <img class="nav-bar--link-icon" src="/img/facebook-circle-fill.svg" alt-text="Facebook"></img>
       </a>
     </div>
     <div class="nav-bar--separator"></div>
diff --git a/src/lib/nav.scss b/src/lib/nav.scss
index 6f9a472..c47c5b5 100644
--- a/src/lib/nav.scss
+++ b/src/lib/nav.scss
@@ -189,15 +189,15 @@
         align-self: center;
 
         padding: var(--space-small);
-
-        img {
-            width: 2em;
-            filter: invert(100%);
-        }
     }
 
     &--link {
         display: flex;
     }
+
+    &--link-icon {
+        width: 2em;
+        filter: invert(100%);
+    }
 }