diff --git a/src/components/header/examples/header-colors.scss b/src/components/header/examples/header-colors.scss
index f38a1003b9..ff93814eaa 100644
--- a/src/components/header/examples/header-colors.scss
+++ b/src/components/header/examples/header-colors.scss
@@ -1,6 +1,5 @@
 :host(limel-example-header-colors) {
     --header-background-color: rgb(var(--color-yellow-dark));
-    --header-icon-color: rgb(var(--color-white));
     --header-heading-color: rgb(var(--color-brown-default));
     --header-subheading-color: rgb(var(--color-brown-darker));
 }
diff --git a/src/components/header/examples/header-colors.tsx b/src/components/header/examples/header-colors.tsx
index 3857618f59..e355a0bf30 100644
--- a/src/components/header/examples/header-colors.tsx
+++ b/src/components/header/examples/header-colors.tsx
@@ -25,7 +25,10 @@ export class HeaderExample {
     public render() {
         return (
             <limel-header
-                icon="create_new"
+                icon={{
+                    name: 'create_new',
+                    color: 'rgb(var(--color-white))',
+                }}
                 heading="Edit note"
                 subheading="Created: 17 Jan 2023"
             >
diff --git a/src/components/header/examples/header-narrow.scss b/src/components/header/examples/header-narrow.scss
index 77ee4e0cfa..e89e0d7efa 100644
--- a/src/components/header/examples/header-narrow.scss
+++ b/src/components/header/examples/header-narrow.scss
@@ -1,4 +1,3 @@
 :host(limel-example-header-narrow) {
-    --header-icon-color: rgb(var(--color-blue-default));
     --header-top-right-left-border-radius: 0;
 }
diff --git a/src/components/header/examples/header-narrow.tsx b/src/components/header/examples/header-narrow.tsx
index 4a82733949..be55ed8313 100644
--- a/src/components/header/examples/header-narrow.tsx
+++ b/src/components/header/examples/header-narrow.tsx
@@ -26,7 +26,10 @@ export class HeaderExample {
         return (
             <limel-header
                 class="is-narrow"
-                icon="ok"
+                icon={{
+                    name: 'ok',
+                    color: 'rgb(var(--color-blue-default))',
+                }}
                 heading="This is a narrow header"
             />
         );
diff --git a/src/components/header/header.scss b/src/components/header/header.scss
index 7defa1bd70..aac91f7008 100644
--- a/src/components/header/header.scss
+++ b/src/components/header/header.scss
@@ -6,8 +6,6 @@
  * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.
  * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.
  * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.
- * @prop --header-icon-color: Color of header icon, defaults to `--contrast-1100`.
- * @prop --header-icon-background-color: Background color of header icon, defaults to `transparent`.
  * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.
  * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.
  */
@@ -36,8 +34,14 @@
 .icon {
     --limel-icon-svg-margin: 0.25rem;
     flex-shrink: 0;
-    color: var(--header-icon-color, rgb(var(--contrast-1100)));
-    background-color: var(--header-icon-background-color, transparent);
+    color: var(
+        --limel-header-icon-color,
+        var(--header-icon-color, rgb(var(--contrast-1100)))
+    );
+    background-color: var(
+        --limel-header-icon-background-color,
+        var(--header-icon-background-color, transparent)
+    );
     width: 2.25rem;
     border-radius: 0.56rem;
 }
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 633b1dc11b..b0b8919f6e 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -118,7 +118,20 @@ export class Header {
             return;
         }
 
-        return <limel-icon class="icon" badge={true} name={icon} />;
+        return (
+            <limel-icon
+                class="icon"
+                badge={true}
+                name={icon}
+                style={{
+                    '--limel-header-icon-color': `${(this.icon as Icon)?.color ?? ''}`,
+                    '--limel-header-icon-background-color': `${
+                        (this.icon as Icon)?.backgroundColor ?? ''
+                    }`,
+                    title: `${(this.icon as Icon)?.title}`,
+                }}
+            />
+        );
     }
 
     private renderSupportingText() {