diff --git a/frontend/src/components/ActivitySearchFilter/ActivityButton/ActivityButton.tsx b/frontend/src/components/ActivitySearchFilter/ActivityButton/ActivityButton.tsx
index 21e2eb5a1..9ff43e363 100644
--- a/frontend/src/components/ActivitySearchFilter/ActivityButton/ActivityButton.tsx
+++ b/frontend/src/components/ActivitySearchFilter/ActivityButton/ActivityButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import SVG from 'react-inlinesvg';
 
-import { fillSvgWithColor } from 'stylesheet';
+import { optimizeAndDefineColor } from 'stylesheet';
 import { Link } from 'components/Link';
 
 interface Props {
@@ -16,7 +16,7 @@ export const ActivityButton: React.FC<Props> = ({ iconUrl, href, label }) => {
       href={href}
       className="flex flex-col items-center text-center mt-6 text-greyDarkColored bg-white transition hover:text-primary3 focus:text-primary3"
     >
-      <SVG src={iconUrl} className="h-9 desktop:w-12" preProcessor={fillSvgWithColor()} />
+      <SVG src={iconUrl} className="h-9 desktop:w-12" preProcessor={optimizeAndDefineColor()} />
       <span className="w-20 text-sm mt-2 text-ellipsis overflow-hidden">{label}</span>
     </Link>
   );
diff --git a/frontend/src/components/CardIcon/CardIcon.tsx b/frontend/src/components/CardIcon/CardIcon.tsx
index ea4a684bc..580a5c41b 100644
--- a/frontend/src/components/CardIcon/CardIcon.tsx
+++ b/frontend/src/components/CardIcon/CardIcon.tsx
@@ -1,4 +1,4 @@
-import { fillSvgWithColor } from 'stylesheet';
+import { optimizeAndDefineColor } from 'stylesheet';
 import SVG from 'react-inlinesvg';
 import styled from 'styled-components';
 import Image from 'next/image';
@@ -36,7 +36,7 @@ const Icon: React.FC<IconProps> = ({ iconUri = '', className = '', color }) => {
       <SVG
         src={iconUri}
         className={`p-1 text-white ${className}`}
-        preProcessor={fillSvgWithColor()}
+        preProcessor={optimizeAndDefineColor()}
       />
     );
   }
diff --git a/frontend/src/components/Information/RemoteIconInformation/index.tsx b/frontend/src/components/Information/RemoteIconInformation/index.tsx
index 4cbc30a7e..df8f68250 100644
--- a/frontend/src/components/Information/RemoteIconInformation/index.tsx
+++ b/frontend/src/components/Information/RemoteIconInformation/index.tsx
@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import SVG from 'react-inlinesvg';
 
-import { fillSvgWithColor } from 'stylesheet';
+import { optimizeAndDefineColor } from 'stylesheet';
 import { Information } from '../BaseInformation';
 
 export interface Props {
@@ -16,7 +16,7 @@ export interface Props {
 export const RemoteIconInformation: React.FC<Props> = ({ iconUri, ...props }) => {
   let icon = null;
   if (RegExp(/(.*).svg/).test(iconUri)) {
-    icon = <SVG src={iconUri} className="w-6 h-full" preProcessor={fillSvgWithColor()} />;
+    icon = <SVG src={iconUri} className="w-6 h-full" preProcessor={optimizeAndDefineColor()} />;
   } else if (typeof iconUri === 'string' && iconUri.length) {
     icon = (
       <Image
diff --git a/frontend/src/components/pages/details/components/DetailsSource/DetailsSource.tsx b/frontend/src/components/pages/details/components/DetailsSource/DetailsSource.tsx
index d6ea7991d..f94a1e323 100644
--- a/frontend/src/components/pages/details/components/DetailsSource/DetailsSource.tsx
+++ b/frontend/src/components/pages/details/components/DetailsSource/DetailsSource.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import SVG from 'react-inlinesvg';
-import { colorPalette, fillSvgWithColor } from 'stylesheet';
+import { optimizeAndDefineColor } from 'stylesheet';
 
 interface DetailsSourceProps {
   name: string;
@@ -46,7 +46,7 @@ const SourceIcon: React.FC<{ pictogramUri: string }> = ({ pictogramUri }) => {
         <SVG
           src={pictogramUri}
           className="h-full w-full p-1 text-white"
-          preProcessor={fillSvgWithColor()}
+          preProcessor={optimizeAndDefineColor()}
         />
       </div>
     );
diff --git a/frontend/src/components/pages/details/components/DetailsTopIcons/DetailsTopIcons.tsx b/frontend/src/components/pages/details/components/DetailsTopIcons/DetailsTopIcons.tsx
index cac9aa080..2209c1fec 100644
--- a/frontend/src/components/pages/details/components/DetailsTopIcons/DetailsTopIcons.tsx
+++ b/frontend/src/components/pages/details/components/DetailsTopIcons/DetailsTopIcons.tsx
@@ -3,7 +3,7 @@ import getActivityColor from 'components/pages/search/components/ResultCard/getA
 import { Activity } from 'modules/activities/interface';
 import Image from 'next/image';
 import SVG from 'react-inlinesvg';
-import { fillSvgWithColor } from 'stylesheet';
+import { optimizeAndDefineColor } from 'stylesheet';
 import { Details } from '../../../../../modules/details/interface';
 import { OutdoorCourseDetails } from '../../../../../modules/outdoorCourse/interface';
 import { OutdoorSiteDetails } from '../../../../../modules/outdoorSite/interface';
@@ -33,7 +33,9 @@ const Icon: React.FC<IconProps> = ({ src = '', ...props }) => {
     return null;
   }
   if (RegExp(/(.*).svg/).test(src)) {
-    return <SVG src={src} {...props} className="text-white" preProcessor={fillSvgWithColor()} />;
+    return (
+      <SVG src={src} {...props} className="text-white" preProcessor={optimizeAndDefineColor()} />
+    );
   }
   return <Image loading="lazy" src={src} {...props} alt="" />;
 };
diff --git a/frontend/src/components/pages/home/components/HomeSection/HomeSection.tsx b/frontend/src/components/pages/home/components/HomeSection/HomeSection.tsx
index 40d548ef5..a8912fd39 100644
--- a/frontend/src/components/pages/home/components/HomeSection/HomeSection.tsx
+++ b/frontend/src/components/pages/home/components/HomeSection/HomeSection.tsx
@@ -4,7 +4,7 @@ import { getHoverId } from 'components/pages/search/utils';
 import { ActivitySuggestion } from 'modules/activitySuggestions/interface';
 import SVG from 'react-inlinesvg';
 import styled from 'styled-components';
-import { fillSvgWithColor } from 'stylesheet';
+import { optimizeAndDefineColor } from 'stylesheet';
 
 export interface HomeSectionProps {
   title: string;
@@ -19,7 +19,11 @@ export const HomeSection: React.FC<HomeSectionProps> = ({ title, iconUrl, result
         id="home_sectionTitle"
         className="flex border-t border-greySoft border-solid pt-4 desktop:pt-10 mb-2 desktop:mb-6 mx-4 desktop:mx-10percent"
       >
-        <SVG src={iconUrl} preProcessor={fillSvgWithColor()} className="h-10 mr-2 desktop:mr-3" />
+        <SVG
+          src={iconUrl}
+          preProcessor={optimizeAndDefineColor()}
+          className="h-10 mr-2 desktop:mr-3"
+        />
         <span className="mt-1 desktop:mt-0 text-H2 desktop:text-H2 font-bold">{title}</span>
       </h2>
       <ScrollContainer className="flex p-5 overflow-scroll desktop:overflow-auto desktop:mx-10percent desktop:px-0 desktop:grid desktop:grid-cols-3 desktop:gap-3">
diff --git a/frontend/src/components/pages/search/components/FilterBar/Field.tsx b/frontend/src/components/pages/search/components/FilterBar/Field.tsx
index cb83c33ab..ae623c760 100644
--- a/frontend/src/components/pages/search/components/FilterBar/Field.tsx
+++ b/frontend/src/components/pages/search/components/FilterBar/Field.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import SVG from 'react-inlinesvg';
 import { useIntl } from 'react-intl';
-import { fillSvgWithColor } from 'stylesheet';
+import { optimizeAndDefineColor } from 'stylesheet';
 import { cn } from 'services/utils/cn';
 import { FilterState, Option } from '../../../../../modules/filters/interface';
 
@@ -24,7 +24,7 @@ const Icon: React.FC<IconProps> = ({ option, isSelected }) => {
     <SVG
       className={cn('w-6 h-6 mr-2', isSelected ? 'text-primary1' : 'text-greyDarkColored')}
       src={option.pictogramUrl}
-      preProcessor={fillSvgWithColor()}
+      preProcessor={optimizeAndDefineColor()}
     />
   );
 };