diff --git a/package.json b/package.json
index 0504140c92c6095642911456c86befc6ecfe9d74..38f56a9847d6782f154dbedf8f08254d52ee5aa6 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "bulma": "^0.9.4"
+    "bulma": "^0.9.4",
+    "@fortawesome/fontawesome-free": "^6.5.1"
   }
 }
diff --git a/sass/style.scss b/sass/style.scss
index 07e28b8fa41644a84975bb489b4d8bed6142258b..3672ce49ec18a2785810c5413ea69cc8cf77a175 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -6,6 +6,10 @@ $title-color: inherit;
 @import "./_teckids.scss";
 $footer-background-color: $teckids-blue-light;
 
+@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "../node_modules/@fortawesome/fontawesome-free/scss/brands.scss";
+@import "../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
+
 @import "../node_modules/bulma/bulma.sass";
 
 @import "./_menu.scss";
diff --git a/static/webfonts b/static/webfonts
new file mode 120000
index 0000000000000000000000000000000000000000..886ba37d9bbd441b85a758ef2edadfdfff7f26d3
--- /dev/null
+++ b/static/webfonts
@@ -0,0 +1 @@
+../node_modules/@fortawesome/fontawesome-free/webfonts
\ No newline at end of file
diff --git a/templates/shortcodes/teckids_related.html b/templates/shortcodes/teckids_related.html
index e959c8bf11823eded15c75f7168023081667f159..1ef29a2da9cc699a80f0077d1ee5be27a13832d7 100644
--- a/templates/shortcodes/teckids_related.html
+++ b/templates/shortcodes/teckids_related.html
@@ -7,9 +7,9 @@
     <div class="column is-one-third">
       <div class="media">
         <div class="media-left">
-          <figure class="image is-48x48">
-            <img src="" alt="Wiki-Icon">
-          </figure>
+          <div class="icon is-large">
+            <i class="fa-solid fa-2x fa-book"></i>
+          </div>
         </div>
         <div class="media-content">
           <a href="https://wiki.teckids.org/{{page.extra.platforms.wiki}}">
@@ -20,9 +20,9 @@
       </div>
       <div class="media">
         <div class="media-left">
-          <figure class="image is-48x48">
-            <img src="" alt="Forum-Icon">
-          </figure>
+          <div class="icon is-large">
+            <i class="fa-brands fa-2x fa-discourse"></i>
+          </div>
         </div>
         <div class="media-content">
           <a href="https://forum.teckids.org/{{page.extra.platforms.forum}}">
@@ -33,9 +33,9 @@
       </div>
       <div class="media">
         <div class="media-left">
-          <figure class="image is-48x48">
-            <img src="" alt="Wiki-Icon">
-          </figure>
+          <div class="icon is-large">
+            <i class="fa-solid fa-2x fa-comments"></i>
+          </div>
         </div>
         <div class="media-content">
           <a href="https://matrix.to/#/{{page.extra.platforms.chat}}">
diff --git a/yarn.lock b/yarn.lock
index 5d2f031a363efb1465e4d1655adc241299c56074..b25640a0a61f77174edf5ca9da04233218cea99a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@fortawesome/fontawesome-free@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.1.tgz#55cc8410abf1003b726324661ce5b0d1c10de258"
+  integrity sha512-CNy5vSwN3fsUStPRLX7fUYojyuzoEMSXPl7zSLJ8TgtRfjv24LOnOWKT2zYwaHZCJGkdyRnTmstR0P+Ah503Gw==
+
 bulma@^0.9.4:
   version "0.9.4"
   resolved "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz"