diff --git a/packages/presentation/src/icons/Icon.tsx b/packages/presentation/src/icons/Icon.tsx
index c16ee496d08..1c130325915 100644
--- a/packages/presentation/src/icons/Icon.tsx
+++ b/packages/presentation/src/icons/Icon.tsx
@@ -1,3 +1,4 @@
+import type { SVGComponent } from '*.svg';
 import React, { memo } from 'react';
 
 import { iconsByName } from './iconsByName';
@@ -5,7 +6,8 @@ import { iconsByName } from './iconsByName';
 export type IconNames = keyof typeof iconsByName;
 
 export type IIconProps = {
-  name: IconNames;
+  name?: IconNames;
+  reactComponent?: SVGComponent;
   appearance?: 'light' | 'neutral' | 'dark';
   size?: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | string;
   color?: string;
@@ -27,11 +29,19 @@ const throwInvalidIconError = (name: string) => {
   throw new Error(`No icon with the name ${name} exists`);
 };
 
-export const Icon = memo(({ name, appearance, size, color, className }: IIconProps) => {
-  const Component = iconsByName[name];
+const throwInvalidIconComponentError = () => {
+  throw new Error('No name or reactComponent provided in Icon props');
+};
 
-  if (!Component) {
-    throwInvalidIconError(name);
+export const Icon = memo(({ name, reactComponent, appearance, size, color, className }: IIconProps) => {
+  let Component;
+  if (name) {
+    Component = iconsByName[name];
+    if (!Component) {
+      throwInvalidIconError(name);
+    }
+  } else {
+    Component = reactComponent || throwInvalidIconComponentError();
   }
 
   const width = size ? pxDimensionsBySize[size] || size : pxDimensionsBySize[DEFAULT_SIZE];
diff --git a/packages/presentation/src/types/svg.d.ts b/packages/presentation/src/types/svg.d.ts
index 3c9e42d2fd8..f4aa80cc5e1 100644
--- a/packages/presentation/src/types/svg.d.ts
+++ b/packages/presentation/src/types/svg.d.ts
@@ -1,6 +1,7 @@
 declare module '*.svg' {
   import type { ComponentType, SVGProps } from 'react';
-  export const ReactComponent: ComponentType<SVGProps<HTMLOrSVGElement>>;
+  export type SVGComponent = ComponentType<SVGProps<HTMLOrSVGElement>>;
+  export const ReactComponent: SVGComponent;
   const URL: string;
   export default URL;
 }