diff --git a/public/assets/config-demo.yml.dist b/public/assets/config-demo.yml.dist
index 566c0eee..c5909e1e 100644
--- a/public/assets/config-demo.yml.dist
+++ b/public/assets/config-demo.yml.dist
@@ -118,6 +118,7 @@ services:
     items:
       - name: "r/selfhosted"
         icon: "fa-brands fa-reddit-alien"
+        color: "#ff4500"
         subtitle: "selfhosted community on Reddit"
         tag: "community"
         url: "https://www.reddit.com/r/selfhosted/"
diff --git a/src/components/services/Generic.vue b/src/components/services/Generic.vue
index 5dc38929..42b5bf84 100644
--- a/src/components/services/Generic.vue
+++ b/src/components/services/Generic.vue
@@ -12,7 +12,7 @@
               </div>
               <div v-if="item.icon" class="media-left">
                 <figure class="image is-48x48">
-                  <i style="font-size: 32px" :class="['fa-fw', item.icon]"></i>
+                  <i style="font-size: 32px" :class="['fa-fw', item.icon]" :style="{ color: item.color }"></i>
                 </figure>
               </div>
             </slot>