diff --git a/src/en/contact.html b/src/en/contact.html
index 22a4f6c..881d8ca 100644
--- a/src/en/contact.html
+++ b/src/en/contact.html
@@ -14,27 +14,27 @@ eleventyNavigation:
diff --git a/src/img/bg-light.png b/src/img/bg-light.png
new file mode 100644
index 0000000..190b85a
Binary files /dev/null and b/src/img/bg-light.png differ
diff --git a/src/img/gitea-white.svg b/src/img/gitea-white.svg
new file mode 100644
index 0000000..17188ec
--- /dev/null
+++ b/src/img/gitea-white.svg
@@ -0,0 +1 @@
+
diff --git a/src/img/gitea.svg b/src/img/gitea.svg
index 17188ec..6ff0f33 100644
--- a/src/img/gitea.svg
+++ b/src/img/gitea.svg
@@ -1 +1 @@
-
+
diff --git a/src/img/matrix-white.svg b/src/img/matrix-white.svg
new file mode 100644
index 0000000..a0b2d62
--- /dev/null
+++ b/src/img/matrix-white.svg
@@ -0,0 +1 @@
+
diff --git a/src/img/matrix.svg b/src/img/matrix.svg
index a0b2d62..1dcf4b6 100644
--- a/src/img/matrix.svg
+++ b/src/img/matrix.svg
@@ -1 +1 @@
-
+
diff --git a/src/img/opencollective-white.svg b/src/img/opencollective-white.svg
new file mode 100644
index 0000000..dcf7bd2
--- /dev/null
+++ b/src/img/opencollective-white.svg
@@ -0,0 +1 @@
+
diff --git a/src/img/opencollective.svg b/src/img/opencollective.svg
index dcf7bd2..eea0b36 100644
--- a/src/img/opencollective.svg
+++ b/src/img/opencollective.svg
@@ -1 +1 @@
-
+
diff --git a/src/img/threema-white.svg b/src/img/threema-white.svg
new file mode 100644
index 0000000..7b89b35
--- /dev/null
+++ b/src/img/threema-white.svg
@@ -0,0 +1 @@
+
diff --git a/src/img/threema.svg b/src/img/threema.svg
index 7b89b35..a2e3619 100644
--- a/src/img/threema.svg
+++ b/src/img/threema.svg
@@ -1 +1 @@
-
+
diff --git a/src/img/xmpp-white.svg b/src/img/xmpp-white.svg
new file mode 100644
index 0000000..5a0b67c
--- /dev/null
+++ b/src/img/xmpp-white.svg
@@ -0,0 +1 @@
+
diff --git a/src/img/xmpp.svg b/src/img/xmpp.svg
index 5a0b67c..1b5e5b1 100644
--- a/src/img/xmpp.svg
+++ b/src/img/xmpp.svg
@@ -1 +1 @@
-
+
diff --git a/src/scss/icons.scss b/src/scss/icons.scss
new file mode 100644
index 0000000..3caf123
--- /dev/null
+++ b/src/scss/icons.scss
@@ -0,0 +1,41 @@
+.si {
+ display: inline-block;
+ background-repeat: no-repeat;
+ background-position: center;
+ margin: 0 8px;
+ width: 4em;
+ height: 4em;
+}
+
+@media (max-width: 767.98px) {
+ .si {
+ margin: 0 4px;
+ width: 2em;
+ height: 2em;
+ }
+}
+
+.h2si {
+ margin: 0;
+ width: 30px;
+ height: 24px;
+}
+
+@mixin svg-icon($name) {
+ .si-#{$name} {
+ content: ' ';
+ background-image: url("../img/#{$name}-white.svg");
+ }
+
+ @media screen and (prefers-color-scheme: light) {
+ .si-#{$name} {
+ background-image: url("../img/#{$name}.svg");
+ }
+ }
+}
+
+@include svg-icon('matrix');
+@include svg-icon('gitea');
+@include svg-icon('xmpp');
+@include svg-icon('threema');
+@include svg-icon('opencollective');