diff --git a/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx b/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx
index 9731f9dbd..4571deffb 100644
--- a/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx
+++ b/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx
@@ -52,11 +52,7 @@ export default function LinkEmploymentErrorPage() {
             </span>
           </ButtonLink>
           <div className={styles.logoContainer}>
-            <ScandicLogoIcon
-              color="Icon/Interactive/Accent"
-              height="20px"
-              width="94px"
-            />
+            <ScandicLogoIcon height="20px" width="94px" />
           </div>
         </nav>
 
diff --git a/apps/scandic-web/components/Header/MainMenu/LogoLink/index.tsx b/apps/scandic-web/components/Header/MainMenu/LogoLink/index.tsx
index b005c53d4..6b95e0313 100644
--- a/apps/scandic-web/components/Header/MainMenu/LogoLink/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/LogoLink/index.tsx
@@ -32,11 +32,7 @@ export function LogoLink() {
         defaultMessage: "Back to scandichotels.com",
       })}
     >
-      <ScandicLogoIcon
-        width="103px"
-        height="22px"
-        color="Icon/Interactive/Accent"
-      />
+      <ScandicLogoIcon width="103px" height="22px" />
     </NextLink>
   )
 }
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/index.tsx
index 4a90286fd..9484d4df5 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Receipt/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Receipt/index.tsx
@@ -119,7 +119,7 @@ export async function Receipt({ refId }: { refId: string }) {
     return (
       <main className={styles.main}>
         <div>
-          <ScandicLogoIcon width="89px" height="19px" color="Icon/Accent" />
+          <ScandicLogoIcon width="89px" height="19px" />
           <div className={styles.addresses}>
             <div>
               <Typography variant="Body/Supporting text (caption)/smRegular">
diff --git a/packages/design-system/lib/components/Icons/Logos/DowntownCamper.tsx b/packages/design-system/lib/components/Icons/Logos/DowntownCamper.tsx
index 1f8cf5099..c55caefc6 100644
--- a/packages/design-system/lib/components/Icons/Logos/DowntownCamper.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/DowntownCamper.tsx
@@ -1,17 +1,15 @@
 import type { LogoProps } from '../icon'
-import { iconVariants } from '../variants'
 
 export default function DowntownCamperIcon({
-  className,
-  color,
+  className = '',
   height = 30,
+  width = 123,
   ...props
 }: LogoProps) {
-  const classNames = iconVariants({ className, color })
   return (
     <svg
-      className={classNames}
-      width="123"
+      className={className}
+      width={width}
       height={height}
       viewBox="0 0 123 30"
       fill="none"
diff --git a/packages/design-system/lib/components/Icons/Logos/GrandHotelOslo.tsx b/packages/design-system/lib/components/Icons/Logos/GrandHotelOslo.tsx
index e7c2f231a..5ae0a8aff 100644
--- a/packages/design-system/lib/components/Icons/Logos/GrandHotelOslo.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/GrandHotelOslo.tsx
@@ -1,18 +1,15 @@
-import { iconVariants } from '../variants'
-
 import type { LogoProps } from '../icon'
 
 export default function GrandHotelOsloLogoIcon({
-  className,
-  color,
+  className = '',
   height = 30,
+  width = 69,
   ...props
 }: LogoProps) {
-  const classNames = iconVariants({ className, color })
   return (
     <svg
-      className={classNames}
-      width="69"
+      className={className}
+      width={width}
       height={height}
       viewBox="0 0 69 30"
       fill="none"
diff --git a/packages/design-system/lib/components/Icons/Logos/Haymarket.tsx b/packages/design-system/lib/components/Icons/Logos/Haymarket.tsx
index 3921e2323..67cf4de7f 100644
--- a/packages/design-system/lib/components/Icons/Logos/Haymarket.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/Haymarket.tsx
@@ -1,18 +1,15 @@
-import { iconVariants } from '../variants'
-
 import type { LogoProps } from '../icon'
 
 export default function HaymarketIcon({
-  className,
-  color,
+  className = '',
   height = 26,
+  width = 100,
   ...props
 }: LogoProps) {
-  const classNames = iconVariants({ className, color })
   return (
     <svg
-      className={classNames}
-      width="100"
+      className={className}
+      width={width}
       height={height}
       viewBox="0 0 100 26"
       fill="none"
diff --git a/packages/design-system/lib/components/Icons/Logos/HotelNorge.tsx b/packages/design-system/lib/components/Icons/Logos/HotelNorge.tsx
index 2438a6804..54e762f37 100644
--- a/packages/design-system/lib/components/Icons/Logos/HotelNorge.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/HotelNorge.tsx
@@ -1,18 +1,15 @@
-import { iconVariants } from '../variants'
-
 import type { LogoProps } from '../icon'
 
 export default function HotelNorgeIcon({
-  className,
-  color,
+  className = '',
   height = 24,
+  width = 117,
   ...props
 }: LogoProps) {
-  const classNames = iconVariants({ className, color })
   return (
     <svg
-      className={classNames}
-      width="117"
+      className={className}
+      width={width}
       height={height}
       viewBox="0 0 117 24"
       fill="none"
diff --git a/packages/design-system/lib/components/Icons/Logos/Marski.tsx b/packages/design-system/lib/components/Icons/Logos/Marski.tsx
index b4ca5ea5b..1ef4ff1c3 100644
--- a/packages/design-system/lib/components/Icons/Logos/Marski.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/Marski.tsx
@@ -1,18 +1,15 @@
-import { iconVariants } from '../variants'
-
 import type { LogoProps } from '../icon'
 
 export default function MarskiLogoIcon({
-  className,
-  color,
+  className = '',
   height = 30,
+  width = 92,
   ...props
 }: LogoProps) {
-  const classNames = iconVariants({ className, color })
   return (
     <svg
-      className={classNames}
-      width="92"
+      className={className}
+      width={width}
       height={height}
       viewBox="0 0 92 30"
       fill="none"
diff --git a/packages/design-system/lib/components/Icons/Logos/ScandicGoLogo.tsx b/packages/design-system/lib/components/Icons/Logos/ScandicGoLogo.tsx
index 87445f24f..c45ae0396 100644
--- a/packages/design-system/lib/components/Icons/Logos/ScandicGoLogo.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/ScandicGoLogo.tsx
@@ -1,18 +1,15 @@
-import { iconVariants } from '../variants'
-
 import type { LogoProps } from '../icon'
 
 export default function ScandicGoLogoIcon({
-  className,
-  color,
+  className = '',
   height = 18,
+  width = 90,
   ...props
 }: LogoProps) {
-  const classNames = iconVariants({ className, color })
   return (
     <svg
-      className={classNames}
-      width="90"
+      className={className}
+      width={width}
       height={height}
       viewBox="0 0 90 18"
       fill="none"
diff --git a/packages/design-system/lib/components/Icons/Logos/ScandicLogo.tsx b/packages/design-system/lib/components/Icons/Logos/ScandicLogo.tsx
index 3ab536f6b..0112369c1 100644
--- a/packages/design-system/lib/components/Icons/Logos/ScandicLogo.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/ScandicLogo.tsx
@@ -1,18 +1,15 @@
-import { iconVariants } from '../variants'
-
 import type { LogoProps } from '../icon'
 
 export default function ScandicLogoIcon({
-  className,
-  color,
+  className = '',
   height = 14,
+  width = 58,
   ...props
 }: LogoProps) {
-  const classNames = iconVariants({ className, color })
   return (
     <svg
-      className={classNames}
-      width="58"
+      className={className}
+      width={width}
       height={height}
       viewBox="0 0 58 14"
       fill="none"
diff --git a/packages/design-system/lib/components/Icons/Logos/TheDock.tsx b/packages/design-system/lib/components/Icons/Logos/TheDock.tsx
index 0bc556656..1a95c8b62 100644
--- a/packages/design-system/lib/components/Icons/Logos/TheDock.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/TheDock.tsx
@@ -1,18 +1,15 @@
 import type { LogoProps } from '../icon'
-import { iconVariants } from '../variants'
 
 export default function TheDockIcon({
-  className,
-  color,
+  className = '',
   height = 30,
+  width = 128,
   ...props
 }: LogoProps) {
-  const classNames = iconVariants({ className, color })
-
   return (
     <svg
-      className={classNames}
-      width="128"
+      className={className}
+      width={width}
       height={height}
       viewBox="0 0 128 30"
       fill="none"
diff --git a/packages/design-system/lib/components/Icons/Logos/index.tsx b/packages/design-system/lib/components/Icons/Logos/index.tsx
index aa1bfeb44..4005bbba8 100644
--- a/packages/design-system/lib/components/Icons/Logos/index.tsx
+++ b/packages/design-system/lib/components/Icons/Logos/index.tsx
@@ -51,6 +51,6 @@ export default function HotelLogoIcon({
     case SignatureHotelEnum.TheDock:
       return <TheDockIcon height={height} />
     default:
-      return <ScandicLogoIcon height={height} color="Icon/Interactive/Accent" />
+      return <ScandicLogoIcon height={height} />
   }
 }
diff --git a/packages/design-system/lib/components/Icons/icon.ts b/packages/design-system/lib/components/Icons/icon.ts
index f9739138a..6ab7ef344 100644
--- a/packages/design-system/lib/components/Icons/icon.ts
+++ b/packages/design-system/lib/components/Icons/icon.ts
@@ -15,8 +15,7 @@ export interface IllustrationProps
 }
 
 export interface LogoProps
-  extends Omit<React.SVGAttributes<HTMLOrSVGElement>, 'color'>,
-    VariantProps<typeof iconVariants> {
+  extends Omit<React.SVGAttributes<HTMLOrSVGElement>, 'color'> {
   width?: string | number
   height?: string | number
 }