diff --git a/src/components/services/group.jsx b/src/components/services/group.jsx
index daae1909..a963181c 100644
--- a/src/components/services/group.jsx
+++ b/src/components/services/group.jsx
@@ -1,6 +1,8 @@
+import Image from "next/future/image";
 import classNames from "classnames";
 
 import List from "components/services/list";
+import { resolveIcon } from "utils/icon-resolver";
 
 export default function ServicesGroup({ services, layout }) {
   return (
@@ -11,7 +13,12 @@ export default function ServicesGroup({ services, layout }) {
         "flex-1 p-1"
       )}
     >
-      <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
+      <div className="flex select-none">
+      {services.icon &&
+        <Image src={resolveIcon(services.icon)} width={32} height={32} alt="logo" className="flex-shrink-0 flex items-center justify-center w-10"/>
+      }
+        <h2 className={services.icon ? "text-theme-800 dark:text-theme-300 text-xl font-medium flex-1 flex items-center justify-between rounded-r-md flex-1 px-2 py-2 text-sm text-left" : "text-theme-800 dark:text-theme-300 text-xl font-medium h2-title-noicon"}>{services.name}</h2>
+      </div>
       <List services={services.services} layout={layout} />
     </div>
   );
diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index abd06ffe..6cf22ce1 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -7,22 +7,7 @@ import Widget from "./widget";
 
 import Docker from "widgets/docker/component";
 import { SettingsContext } from "utils/contexts/settings";
-
-function resolveIcon(icon) {
-  if (icon.startsWith("http")) {
-    return `/api/proxy?url=${encodeURIComponent(icon)}`;
-  }
-
-  if (icon.startsWith("/")) {
-    return icon;
-  }
-
-  if (icon.endsWith(".png")) {
-    return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}`;
-  }
-
-  return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`;
-}
+import { resolveIcon } from "utils/icon-resolver";
 
 export default function Item({ service }) {
   const hasLink = service.href && service.href !== "#";
diff --git a/src/skeleton/services.yaml b/src/skeleton/services.yaml
index 9514f67e..a06b9286 100644
--- a/src/skeleton/services.yaml
+++ b/src/skeleton/services.yaml
@@ -3,16 +3,21 @@
 # https://github.com/benphelps/homepage/wiki/Services
 
 - My First Group:
-    - My First Service:
-        href: http://localhost/
-        description: Homepage is awesome
-
+    icon: 'https://cdn-icons-png.flaticon.com/512/252/252035.png'
+    services:
+        - My First Service:
+            icon: "https://cdn-icons-png.flaticon.com/512/1835/1835948.png"
+            href: http://localhost/
+            description: Homepage is awesome
 - My Second Group:
-    - My Second Service:
-        href: http://localhost/
-        description: Homepage is the best
+    services:
+        - My Second Service:
+            href: http://localhost/
+            description: Homepage is the best
 
 - My Third Group:
-    - My Third Service:
-        href: http://localhost/
-        description: Homepage is 😎
+    icon: 'https://cdn-icons-png.flaticon.com/512/2382/2382533.png'
+    services:
+        - My Third Service:
+            href: http://localhost/
+            description: Homepage is 😎
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ce1ee181..3901cbbb 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -39,3 +39,8 @@ body {
   background-color: rgb(var(--color-600));
   border-radius: 0.25em;
 }
+
+.h2-title-noicon {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
\ No newline at end of file
diff --git a/src/utils/config/api-response.js b/src/utils/config/api-response.js
index 1b4c1b5f..161e59be 100644
--- a/src/utils/config/api-response.js
+++ b/src/utils/config/api-response.js
@@ -74,6 +74,7 @@ export async function servicesResponse() {
 
     const mergedGroup = {
       name: groupName,
+      icon: configuredGroup.icon,
       services: [...discoveredGroup.services, ...configuredGroup.services].filter((service) => service),
     };
 
diff --git a/src/utils/config/service-helpers.js b/src/utils/config/service-helpers.js
index f36e0a56..b788e8af 100644
--- a/src/utils/config/service-helpers.js
+++ b/src/utils/config/service-helpers.js
@@ -20,9 +20,11 @@ export async function servicesFromConfig() {
   }
 
   // map easy to write YAML objects into easy to consume JS arrays
-  const servicesArray = services.map((servicesGroup) => ({
+  const servicesArray = services.map((servicesGroup) => (
+    {
     name: Object.keys(servicesGroup)[0],
-    services: servicesGroup[Object.keys(servicesGroup)[0]].map((entries) => ({
+    icon: Object.prototype.hasOwnProperty.call(servicesGroup[Object.keys(servicesGroup)[0]], 'icon') ? servicesGroup[Object.keys(servicesGroup)[0]].icon : '',
+    services: servicesGroup[Object.keys(servicesGroup)[0]].services.map((entries) => ({
       name: Object.keys(entries)[0],
       ...entries[Object.keys(entries)[0]],
     })),
@@ -106,6 +108,7 @@ export async function servicesFromDocker() {
 export function cleanServiceGroups(groups) {
   return groups.map((serviceGroup) => ({
     name: serviceGroup.name,
+    icon: serviceGroup.icon,
     services: serviceGroup.services.map((service) => {
       const cleanedService = { ...service };
 
diff --git a/src/utils/icon-resolver.js b/src/utils/icon-resolver.js
new file mode 100644
index 00000000..0a7f1211
--- /dev/null
+++ b/src/utils/icon-resolver.js
@@ -0,0 +1,15 @@
+export function resolveIcon(icon) {
+    if (icon.startsWith("http")) {
+        return `/api/proxy?url=${encodeURIComponent(icon)}`;
+    }
+
+    if (icon.startsWith("/")) {
+        return icon;
+    }
+
+    if (icon.endsWith(".png")) {
+        return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}`;
+    }
+
+    return `https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/png/${icon}.png`;
+}
\ No newline at end of file