diff --git a/src/lib/nav.html b/src/lib/nav.html
index 58812ef..ac868cc 100644
--- a/src/lib/nav.html
+++ b/src/lib/nav.html
@@ -16,27 +16,9 @@
       <a href="#news" class="nav-bar--menu-link">{{ gettext('News') }}</a>
     </div>
     <div class="nav-bar--links">
-      <a class="nav-bar--link" href="mailto:contact@frog-collective.com">
-          <img class="nav-bar--link-icon" src="/img/mail-fill.svg" alt-text="{{ gettext('Mail') }}"></img>
-      </a>
-      <a class="nav-bar--link" href="https://frog-collective.itch.io/" target="_blank">
-          <img class="nav-bar--link-icon" src="/img/itchio-fill.svg" alt-text="Itch.io"></img>
-      </a>
-      <a class="nav-bar--link" href="https://www.youtube.com/@FrogCoGames" target="_blank">
-          <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 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 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 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 class="nav-bar--link-icon" src="/img/facebook-circle-fill.svg" alt-text="Facebook"></img>
-      </a>
+      {% with class_prefix="nav-bar" %}
+      {% include "lib/social_links.html" %}
+      {% endwith %}
     </div>
     <div class="nav-bar--separator"></div>
     <div class="nav-bar--languages">
diff --git a/src/lib/social_links.html b/src/lib/social_links.html
new file mode 100644
index 0000000..82c983d
--- /dev/null
+++ b/src/lib/social_links.html
@@ -0,0 +1,13 @@
+{% macro social_link(name, icon_name, link) %}
+  <a class="{{class_prefix}}--link" href="{{link}}">
+    <img class="{{class_prefix}}--link-icon" src="/img/{{icon_name}}" alt-text="{{name}}"></img>
+  </a>
+{% endmacro %}
+
+{{ social_link(gettext('Mail'), 'mail-fill.svg', 'mailto:contact@frog-collective.com') }}
+{{ social_link('Itch.io', 'itchio-fill.svg', 'https://frog-collective.itch.io/') }}
+{{ social_link('Youtube', 'youtube-fill.svg', 'https://www.youtube.com/@FrogCoGames') }}
+{{ social_link('Twitch', 'twitch-fill.svg', 'https://www.twitch.tv/frogcollective') }}
+{{ social_link('Mastodon', 'mastodon-fill.svg', 'https://mastodon.social/@frogcollective') }}
+{{ social_link('Twitter - X', 'twitter-x-line.svg', 'https://x.com/FrogCoGames') }}
+{{ social_link('Facebook', 'facebook-circle-fill.svg', 'https://www.facebook.com/profile.php?id=61560180067337') }}
diff --git a/src/pages/index/footer.html b/src/pages/index/footer.html
index 08aba8a..aadc54f 100644
--- a/src/pages/index/footer.html
+++ b/src/pages/index/footer.html
@@ -7,27 +7,9 @@
             {% endtrans %}
         </div>
         <div class="footer--links">
-            <a class="footer--link" href="mailto:contact@frog-collective.com">
-                <img src="/img/mail-fill.svg" alt-text=="{{ gettext('Mail') }}"></img>
-            </a>
-            <a class="footer--link" href="https://frog-collective.itch.io/" target="_blank">
-                <img src="/img/itchio-fill.svg" alt-text="Itch.io"></img>
-            </a>
-            <a class="footer--link" href="https://www.youtube.com/@FrogCoGames" target="_blank">
-                <img src="/img/youtube-fill.svg" alt-text=="Youtube"></img>
-            </a>
-            <a class="footer--link" href="https://www.twitch.tv/frogcollective" target="_blank">
-                <img src="/img/twitch-fill.svg" alt-text=="Twitch"></img>
-            </a>
-            <a class="footer--link" href="https://mastodon.social/@frogcollective" target="_blank">
-                <img src="/img/mastodon-fill.svg" alt-text=="Mastodon"></img>
-            </a>
-            <a class="footer--link" href="https://x.com/FrogCoGames" target="_blank">
-                <img src="/img/twitter-x-line.svg" alt-text=="Twitter - X"></img>
-            </a>
-            <a class="footer--link" href="https://www.facebook.com/profile.php?id=61560180067337" target="_blank">
-                <img src="/img/facebook-circle-fill.svg" alt-text=="Facebook"></img>
-            </a>
+            {% with class_prefix="footer" %}
+            {% include "lib/social_links.html" %}
+            {% endwith %}
         </div>
     </div>
 </div>