diff --git a/.changeset/brave-donkeys-bake.md b/.changeset/brave-donkeys-bake.md
new file mode 100644
index 0000000000..9939cca0d3
--- /dev/null
+++ b/.changeset/brave-donkeys-bake.md
@@ -0,0 +1,6 @@
+---
+"@ultraviolet/icons": patch
+"@ultraviolet/ui": patch
+---
+
+Fix `<ProductIcon />` and `<CategoryIcon />` to have better svg import
diff --git a/.jest/svg.ts b/.jest/svg.ts
new file mode 100644
index 0000000000..13afca51d6
--- /dev/null
+++ b/.jest/svg.ts
@@ -0,0 +1,2 @@
+export default 'SvgrURL'
+export const ReactComponent = 'div'
diff --git a/.jest/unit.config.ts b/.jest/unit.config.ts
index a13d0f8f4b..38ae8e5b5e 100644
--- a/.jest/unit.config.ts
+++ b/.jest/unit.config.ts
@@ -26,6 +26,7 @@ const config = {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/.jest/fileMock.ts',
     '\\.(css|less)$': 'identity-obj-proxy',
+    '\\.svg$': '<rootDir>/.jest/svg.ts',
   },
   setupFilesAfterEnv: ['<rootDir>/.jest/setupTests.ts'],
 } satisfies Config.InitialOptions
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 6803bd7c0b..6333f2daa3 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -19,13 +19,33 @@ export default {
   docs: {
     autodocs: true,
   },
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
   webpackFinal: async config => {
-    config?.module?.rules?.push({
+    const imageRule = config.module?.rules?.find(rule => {
+      const test = (rule as { test: RegExp }).test
+
+      if (!test) {
+        return false
+      }
+
+      return test.test('.svg')
+    }) as { [key: string]: any }
+
+    imageRule['exclude'] = /\.svg$/
+
+    config.module?.rules?.push({
       test: /\.svg$/,
       use: [
         {
           loader: '@svgr/webpack',
-          options: { svgo: false, memo: true }, // We disable svgo because we have custom configuration for it svgo.config.js
+        },
+        {
+          loader: 'file-loader',
+          options: {
+            name: 'static/media/[path][name].[ext]',
+          },
         },
       ],
       type: 'javascript/auto',
diff --git a/global.d.ts b/global.d.ts
index 947b9f375e..21e49791c4 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -1,7 +1,12 @@
 /// <reference types="@emotion/react/types/css-prop" />
 
 declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react'
+
+  const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement>>
   const content: string
+
+  export { ReactComponent }
   export default content
 }
 
diff --git a/package.json b/package.json
index f5c11263d2..2f3f3338cc 100644
--- a/package.json
+++ b/package.json
@@ -162,6 +162,7 @@
     "eslint-plugin-prettier": "5.1.2",
     "eslint-plugin-testing-library": "6.2.0",
     "expect": "29.7.0",
+    "file-loader": "^6.2.0",
     "husky": "8.0.3",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.7.0",
diff --git a/packages/icons/global.d.ts b/packages/icons/global.d.ts
deleted file mode 100644
index 8fb8e1f37b..0000000000
--- a/packages/icons/global.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// We need to declare the svg module so that we can import it and style it with emotion
-declare module '*.svg' {
-  import type styled from '@emotion/styled'
-
-  const svg: Parameters<typeof styled>[0]
-  export default svg
-}
-
-declare module '*.md' {
-  const content: string
-  export default content
-}
diff --git a/packages/icons/src/components/CategoryIcon/Icons.tsx b/packages/icons/src/components/CategoryIcon/Icons.tsx
index e2456e5135..dd475e4582 100644
--- a/packages/icons/src/components/CategoryIcon/Icons.tsx
+++ b/packages/icons/src/components/CategoryIcon/Icons.tsx
@@ -1,26 +1,26 @@
-import ai from './assets/ai.svg'
-import baremetal from './assets/baremetal.svg'
-import billing from './assets/billing.svg'
-import compute from './assets/compute.svg'
-import console from './assets/console.svg'
-import containers from './assets/containers.svg'
-import database from './assets/database.svg'
-import datacenter from './assets/datacenter.svg'
-import dedicatedServer from './assets/dedicated-server.svg'
-import devTools from './assets/dev-tools.svg'
-import documentation from './assets/documentation.svg'
-import iot from './assets/iot.svg'
-import labs from './assets/labs.svg'
-import managedServices from './assets/managed-services.svg'
-import network from './assets/network.svg'
-import observability from './assets/observability.svg'
-import security from './assets/security.svg'
-import serverless from './assets/serverless.svg'
-import storage from './assets/storage.svg'
-import toolsServices from './assets/tools-services.svg'
-import useCase from './assets/use-case.svg'
-import vpc from './assets/vpc.svg'
-import webHosting from './assets/web-hosting.svg'
+import { ReactComponent as ai } from './assets/ai.svg'
+import { ReactComponent as baremetal } from './assets/baremetal.svg'
+import { ReactComponent as billing } from './assets/billing.svg'
+import { ReactComponent as compute } from './assets/compute.svg'
+import { ReactComponent as console } from './assets/console.svg'
+import { ReactComponent as containers } from './assets/containers.svg'
+import { ReactComponent as database } from './assets/database.svg'
+import { ReactComponent as datacenter } from './assets/datacenter.svg'
+import { ReactComponent as dedicatedServer } from './assets/dedicated-server.svg'
+import { ReactComponent as devTools } from './assets/dev-tools.svg'
+import { ReactComponent as documentation } from './assets/documentation.svg'
+import { ReactComponent as iot } from './assets/iot.svg'
+import { ReactComponent as labs } from './assets/labs.svg'
+import { ReactComponent as managedServices } from './assets/managed-services.svg'
+import { ReactComponent as network } from './assets/network.svg'
+import { ReactComponent as observability } from './assets/observability.svg'
+import { ReactComponent as security } from './assets/security.svg'
+import { ReactComponent as serverless } from './assets/serverless.svg'
+import { ReactComponent as storage } from './assets/storage.svg'
+import { ReactComponent as toolsServices } from './assets/tools-services.svg'
+import { ReactComponent as useCase } from './assets/use-case.svg'
+import { ReactComponent as vpc } from './assets/vpc.svg'
+import { ReactComponent as webHosting } from './assets/web-hosting.svg'
 
 export const CATEGORY_ICONS = {
   baremetal,
diff --git a/packages/icons/src/components/CategoryIcon/__tests__/__snapshots__/index.tsx.snap b/packages/icons/src/components/CategoryIcon/__tests__/__snapshots__/index.tsx.snap
deleted file mode 100644
index e323fd77d3..0000000000
--- a/packages/icons/src/components/CategoryIcon/__tests__/__snapshots__/index.tsx.snap
+++ /dev/null
@@ -1,254 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CategoryIcon should work with all names should work with ai 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with baremetal 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with billing 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with compute 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with console 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with containers 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with database 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with datacenter 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with dedicatedServer 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with devTools 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with documentation 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with iot 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with labs 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with managedServices 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with network 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with observability 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with security 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with serverless 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with storage 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with toolsServices 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with useCase 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with vpc 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
-
-exports[`CategoryIcon should work with all names should work with webHosting 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-5j3mhg-StyledIcon e1wwql4e0"
-    height="20"
-    viewbox="0 0 20 20"
-    width="20"
-  />
-</DocumentFragment>
-`;
diff --git a/packages/icons/src/components/CategoryIcon/__tests__/index.tsx b/packages/icons/src/components/CategoryIcon/__tests__/index.tsx
deleted file mode 100644
index 57f9dced4d..0000000000
--- a/packages/icons/src/components/CategoryIcon/__tests__/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { describe, it } from '@jest/globals'
-import { CategoryIcon } from '..'
-import { shouldMatchEmotionSnapshotWithPortal } from '../../../../.jest/helpers'
-import { CATEGORY_ICONS } from '../Icons'
-
-describe('CategoryIcon', () => {
-  describe('should work with all names', () => {
-    Object.keys(CATEGORY_ICONS).forEach(iconName => {
-      it(`should work with ${iconName}`, () =>
-        shouldMatchEmotionSnapshotWithPortal(<CategoryIcon name="console" />))
-    })
-  })
-})
diff --git a/packages/icons/src/components/CategoryIcon/index.tsx b/packages/icons/src/components/CategoryIcon/index.tsx
index 5ef01de540..3584d95487 100644
--- a/packages/icons/src/components/CategoryIcon/index.tsx
+++ b/packages/icons/src/components/CategoryIcon/index.tsx
@@ -1,9 +1,10 @@
 import styled from '@emotion/styled'
+import type { FunctionComponent, SVGProps } from 'react'
 import { CATEGORY_ICONS } from './Icons'
 
-const StyledIcon = (component: Parameters<typeof styled>[0]) => styled(
-  component,
-)`
+const StyledIcon = (
+  component: FunctionComponent<SVGProps<SVGSVGElement>>,
+) => styled(component)`
   .fill {
     fill: ${({ theme }) => theme.colors.other.icon.category.primary.fill};
   }
diff --git a/packages/icons/src/components/ProductIcon/Icons.tsx b/packages/icons/src/components/ProductIcon/Icons.tsx
index 474babfd2d..f6b4b3522d 100644
--- a/packages/icons/src/components/ProductIcon/Icons.tsx
+++ b/packages/icons/src/components/ProductIcon/Icons.tsx
@@ -1,94 +1,94 @@
-import abuse from './assets/abuse.svg'
-import advancedSettings from './assets/advanced-settings.svg'
-import apiGateway from './assets/api-gateway.svg'
-import apiKey from './assets/api-key.svg'
-import appleSilicon from './assets/apple-silicon.svg'
-import applicationLibrary from './assets/application-library.svg'
-import application from './assets/application.svg'
-import backends from './assets/backends.svg'
-import basicSupport from './assets/basic-support.svg'
-import billing from './assets/billing.svg'
-import blockStorage from './assets/block-storage.svg'
-import cb from './assets/cb.svg'
-import cdn from './assets/cdn.svg'
-import changelog from './assets/changelog.svg'
-import cli from './assets/cli.svg'
-import cockpit from './assets/cockpit.svg'
-import console from './assets/console.svg'
-import containers from './assets/containers.svg'
-import dedibox from './assets/dedibox.svg'
-import dedicatedServer from './assets/dedicated-server.svg'
-import devices from './assets/devices.svg'
-import directConnect from './assets/direct-connect.svg'
-import dns from './assets/dns.svg'
-import documentDB from './assets/document-db.svg'
-import documentation from './assets/documentation.svg'
-import domains from './assets/domains.svg'
-import elasticMetal from './assets/elastic-metal.svg'
-import file from './assets/file.svg'
-import flexibleIp from './assets/flexible-ip.svg'
-import folder from './assets/folder.svg'
-import frontends from './assets/front-ends.svg'
-import functions from './assets/functions.svg'
-import goldSupport from './assets/gold-support.svg'
-import hubNetworks from './assets/hub-networks.svg'
-import hubRoutes from './assets/hub-routes.svg'
-import iam from './assets/iam.svg'
-import images from './assets/images.svg'
-import instanceEnterprise from './assets/instance-enterprise.svg'
-import instanceGpu from './assets/instance-gpu.svg'
-import instance from './assets/instance.svg'
-import iotEdge from './assets/iot-edge.svg'
-import iot from './assets/iot.svg'
-import ipFailover from './assets/ip-failover.svg'
-import ipfsNaming from './assets/ipfs-naming.svg'
-import ipfs from './assets/ipfs.svg'
-import k8sKosmos from './assets/k8s-kosmos.svg'
-import kubernetes from './assets/kubernetes.svg'
-import lb from './assets/lb.svg'
-import lifeCycleRules from './assets/life-cycle-rules.svg'
-import macMiniM2 from './assets/mac-mini-m2.svg'
-import multiUser from './assets/multi-user.svg'
-import nats from './assets/nats.svg'
-import objectStorage from './assets/object-storage.svg'
-import packer from './assets/packer.svg'
-import placementGroup from './assets/placement-group.svg'
-import platinumSupport from './assets/platinum-support.svg'
-import policy from './assets/policy.svg'
-import pool from './assets/pool.svg'
-import postgreSqlAndMySql from './assets/postgresql-mysql.svg'
-import privateNetwork from './assets/private-network.svg'
-import publicGateway from './assets/public-gateway.svg'
-import queueing from './assets/queueing.svg'
-import rabbitMQ from './assets/rabbit-mq.svg'
-import rdb from './assets/rdb.svg'
-import redis from './assets/redis.svg'
-import registry from './assets/registry.svg'
-import rocket from './assets/rocket.svg'
-import secretManager from './assets/secret-manager.svg'
-import securityGroup from './assets/security-group.svg'
-import sepa from './assets/sepa.svg'
-import server from './assets/server.svg'
-import serverlessDB from './assets/serverless-db.svg'
-import serverlessJobs from './assets/serverless-jobs.svg'
-import silverSupport from './assets/silver-support.svg'
-import sms from './assets/sms.svg'
-import smtp from './assets/smtp.svg'
-import snapshots from './assets/snapshots.svg'
-import sns from './assets/sns.svg'
-import sqs from './assets/sqs.svg'
-import sslCertificates from './assets/ssl-certificates.svg'
-import support from './assets/support.svg'
-import terraform from './assets/terraform.svg'
-import transactionalEmail from './assets/transactional-email.svg'
-import tutorial from './assets/tutorial.svg'
-import user from './assets/user.svg'
-import verifyCard from './assets/verify-card.svg'
-import video from './assets/video.svg'
-import volume from './assets/volume.svg'
-import vpc from './assets/vpc.svg'
-import webhosting from './assets/webhosting.svg'
-import zone from './assets/zone.svg'
+import { ReactComponent as abuse } from './assets/abuse.svg'
+import { ReactComponent as advancedSettings } from './assets/advanced-settings.svg'
+import { ReactComponent as apiGateway } from './assets/api-gateway.svg'
+import { ReactComponent as apiKey } from './assets/api-key.svg'
+import { ReactComponent as appleSilicon } from './assets/apple-silicon.svg'
+import { ReactComponent as applicationLibrary } from './assets/application-library.svg'
+import { ReactComponent as application } from './assets/application.svg'
+import { ReactComponent as backends } from './assets/backends.svg'
+import { ReactComponent as basicSupport } from './assets/basic-support.svg'
+import { ReactComponent as billing } from './assets/billing.svg'
+import { ReactComponent as blockStorage } from './assets/block-storage.svg'
+import { ReactComponent as cb } from './assets/cb.svg'
+import { ReactComponent as cdn } from './assets/cdn.svg'
+import { ReactComponent as changelog } from './assets/changelog.svg'
+import { ReactComponent as cli } from './assets/cli.svg'
+import { ReactComponent as cockpit } from './assets/cockpit.svg'
+import { ReactComponent as console } from './assets/console.svg'
+import { ReactComponent as containers } from './assets/containers.svg'
+import { ReactComponent as dedibox } from './assets/dedibox.svg'
+import { ReactComponent as dedicatedServer } from './assets/dedicated-server.svg'
+import { ReactComponent as devices } from './assets/devices.svg'
+import { ReactComponent as directConnect } from './assets/direct-connect.svg'
+import { ReactComponent as dns } from './assets/dns.svg'
+import { ReactComponent as documentDB } from './assets/document-db.svg'
+import { ReactComponent as documentation } from './assets/documentation.svg'
+import { ReactComponent as domains } from './assets/domains.svg'
+import { ReactComponent as elasticMetal } from './assets/elastic-metal.svg'
+import { ReactComponent as file } from './assets/file.svg'
+import { ReactComponent as flexibleIp } from './assets/flexible-ip.svg'
+import { ReactComponent as folder } from './assets/folder.svg'
+import { ReactComponent as frontends } from './assets/front-ends.svg'
+import { ReactComponent as functions } from './assets/functions.svg'
+import { ReactComponent as goldSupport } from './assets/gold-support.svg'
+import { ReactComponent as hubNetworks } from './assets/hub-networks.svg'
+import { ReactComponent as hubRoutes } from './assets/hub-routes.svg'
+import { ReactComponent as iam } from './assets/iam.svg'
+import { ReactComponent as images } from './assets/images.svg'
+import { ReactComponent as instanceEnterprise } from './assets/instance-enterprise.svg'
+import { ReactComponent as instanceGpu } from './assets/instance-gpu.svg'
+import { ReactComponent as instance } from './assets/instance.svg'
+import { ReactComponent as iotEdge } from './assets/iot-edge.svg'
+import { ReactComponent as iot } from './assets/iot.svg'
+import { ReactComponent as ipFailover } from './assets/ip-failover.svg'
+import { ReactComponent as ipfsNaming } from './assets/ipfs-naming.svg'
+import { ReactComponent as ipfs } from './assets/ipfs.svg'
+import { ReactComponent as k8sKosmos } from './assets/k8s-kosmos.svg'
+import { ReactComponent as kubernetes } from './assets/kubernetes.svg'
+import { ReactComponent as lb } from './assets/lb.svg'
+import { ReactComponent as lifeCycleRules } from './assets/life-cycle-rules.svg'
+import { ReactComponent as macMiniM2 } from './assets/mac-mini-m2.svg'
+import { ReactComponent as multiUser } from './assets/multi-user.svg'
+import { ReactComponent as nats } from './assets/nats.svg'
+import { ReactComponent as objectStorage } from './assets/object-storage.svg'
+import { ReactComponent as packer } from './assets/packer.svg'
+import { ReactComponent as placementGroup } from './assets/placement-group.svg'
+import { ReactComponent as platinumSupport } from './assets/platinum-support.svg'
+import { ReactComponent as policy } from './assets/policy.svg'
+import { ReactComponent as pool } from './assets/pool.svg'
+import { ReactComponent as postgreSqlAndMySql } from './assets/postgresql-mysql.svg'
+import { ReactComponent as privateNetwork } from './assets/private-network.svg'
+import { ReactComponent as publicGateway } from './assets/public-gateway.svg'
+import { ReactComponent as queueing } from './assets/queueing.svg'
+import { ReactComponent as rabbitMQ } from './assets/rabbit-mq.svg'
+import { ReactComponent as rdb } from './assets/rdb.svg'
+import { ReactComponent as redis } from './assets/redis.svg'
+import { ReactComponent as registry } from './assets/registry.svg'
+import { ReactComponent as rocket } from './assets/rocket.svg'
+import { ReactComponent as secretManager } from './assets/secret-manager.svg'
+import { ReactComponent as securityGroup } from './assets/security-group.svg'
+import { ReactComponent as sepa } from './assets/sepa.svg'
+import { ReactComponent as server } from './assets/server.svg'
+import { ReactComponent as serverlessDB } from './assets/serverless-db.svg'
+import { ReactComponent as serverlessJobs } from './assets/serverless-jobs.svg'
+import { ReactComponent as silverSupport } from './assets/silver-support.svg'
+import { ReactComponent as sms } from './assets/sms.svg'
+import { ReactComponent as smtp } from './assets/smtp.svg'
+import { ReactComponent as snapshots } from './assets/snapshots.svg'
+import { ReactComponent as sns } from './assets/sns.svg'
+import { ReactComponent as sqs } from './assets/sqs.svg'
+import { ReactComponent as sslCertificates } from './assets/ssl-certificates.svg'
+import { ReactComponent as support } from './assets/support.svg'
+import { ReactComponent as terraform } from './assets/terraform.svg'
+import { ReactComponent as transactionalEmail } from './assets/transactional-email.svg'
+import { ReactComponent as tutorial } from './assets/tutorial.svg'
+import { ReactComponent as user } from './assets/user.svg'
+import { ReactComponent as verifyCard } from './assets/verify-card.svg'
+import { ReactComponent as video } from './assets/video.svg'
+import { ReactComponent as volume } from './assets/volume.svg'
+import { ReactComponent as vpc } from './assets/vpc.svg'
+import { ReactComponent as webhosting } from './assets/webhosting.svg'
+import { ReactComponent as zone } from './assets/zone.svg'
 
 export const PRODUCT_ICONS = {
   documentDB,
diff --git a/packages/icons/src/components/ProductIcon/__tests__/__snapshots__/index.tsx.snap b/packages/icons/src/components/ProductIcon/__tests__/__snapshots__/index.tsx.snap
deleted file mode 100644
index 555f12d48b..0000000000
--- a/packages/icons/src/components/ProductIcon/__tests__/__snapshots__/index.tsx.snap
+++ /dev/null
@@ -1,1189 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ProductIcon should work with all names should work with abuse 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with advancedSettings 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with apiGateway 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with apiKey 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with appleSilicon 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with application 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with applicationLibrary 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with backends 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with basicSupport 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with billing 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with blockStorage 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with cb 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with cdn 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with changelog 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with cli 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with cockpit 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with console 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with containers 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with dedibox 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with dedicatedServer 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with devices 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with directConnect 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with dns 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with documentDB 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with documentation 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with domains 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with elasticMetal 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with file 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with flexibleIp 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with folder 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with frontends 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with functions 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with goldSupport 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with hubNetworks 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with hubRoutes 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with iam 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with images 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with instance 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with instanceEnterprise 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with instanceGpu 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with iot 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with iotEdge 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with ipFailover 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with ipfs 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with ipfsNaming 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with k8sKosmos 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with kubernetes 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with lb 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with lifeCycleRules 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with macMiniM2 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with multiUser 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with nats 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with objectStorage 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with packer 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with placementGroup 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with platinumSupport 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with policy 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with pool 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with postgreSqlAndMySql 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with privateNetwork 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with publicGateway 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with queueing 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with rabbitMQ 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with rdb 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with redis 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with registry 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with rocket 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with secretManager 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with securityGroup 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with sepa 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with server 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with serverlessDB 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with serverlessJobs 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with silverSupport 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with sms 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with smtp 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with snapshots 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with sns 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with sqs 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with sslCertificates 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with support 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with terraform 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with transactionalEmail 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with tutorial 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with user 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with verifyCard 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with video 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with volume 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with vpc 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with webhosting 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all names should work with zone 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all sizes should work with large 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-1cn9fyi-StyledIcon euby9wl0"
-    size="large"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all sizes should work with medium 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-7ewfw6-StyledIcon euby9wl0"
-    size="medium"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all sizes should work with small 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all sizes should work with xlarge 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-hy5q6k-StyledIcon euby9wl0"
-    size="xlarge"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all variants should work with danger 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-1a6tz7p-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all variants should work with primary 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-yif6bn-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with all variants should work with warning 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-1fvi5o-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
-
-exports[`ProductIcon should work with disabled 1`] = `
-<DocumentFragment>
-  <test-file-stub
-    classname="cache-ovorz1-StyledIcon euby9wl0"
-    size="small"
-    viewbox="0 0 64 64"
-  >
-    test-file-stub
-  </test-file-stub>
-</DocumentFragment>
-`;
diff --git a/packages/icons/src/components/ProductIcon/__tests__/index.tsx b/packages/icons/src/components/ProductIcon/__tests__/index.tsx
deleted file mode 100644
index 0da7253b74..0000000000
--- a/packages/icons/src/components/ProductIcon/__tests__/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { describe, it } from '@jest/globals'
-import { ProductIcon } from '..'
-import { shouldMatchEmotionSnapshotWithPortal } from '../../../../.jest/helpers'
-import { PRODUCT_ICONS } from '../Icons'
-
-describe('ProductIcon', () => {
-  describe('should work with all names', () => {
-    Object.keys(PRODUCT_ICONS).forEach(iconName => {
-      it(`should work with ${iconName}`, () =>
-        shouldMatchEmotionSnapshotWithPortal(<ProductIcon name="console" />))
-    })
-  })
-
-  it('should work with disabled', () =>
-    shouldMatchEmotionSnapshotWithPortal(
-      <ProductIcon name="console" disabled />,
-    ))
-
-  describe('should work with all sizes', () => {
-    ;(['small', 'medium', 'large', 'xlarge'] as const).forEach(size => {
-      it(`should work with ${size}`, () =>
-        shouldMatchEmotionSnapshotWithPortal(
-          <ProductIcon name="console" size={size} />,
-        ))
-    })
-  })
-
-  describe('should work with all variants', () => {
-    ;(['primary', 'danger', 'warning'] as const).forEach(variant => {
-      it(`should work with ${variant}`, () =>
-        shouldMatchEmotionSnapshotWithPortal(
-          <ProductIcon name="console" variant={variant} />,
-        ))
-    })
-  })
-})
diff --git a/packages/icons/src/components/ProductIcon/index.tsx b/packages/icons/src/components/ProductIcon/index.tsx
index fe73390a25..242fe13614 100644
--- a/packages/icons/src/components/ProductIcon/index.tsx
+++ b/packages/icons/src/components/ProductIcon/index.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled'
+import type { FunctionComponent, SVGProps } from 'react'
 import { PRODUCT_ICONS } from './Icons'
 
 type Variants = 'primary' | 'danger' | 'warning'
@@ -17,12 +18,11 @@ type ProductIconProps = {
   size?: keyof typeof SIZES
 }
 
-const StyledIcon = (component: Parameters<typeof styled>[0]) => styled(
-  component,
-  {
-    shouldForwardProp: prop => !['variant', 'disabled'].includes(prop),
-  },
-)<{ variant: Variants; disabled?: boolean; size: keyof typeof SIZES }>`
+const StyledIcon = (
+  component: FunctionComponent<SVGProps<SVGSVGElement>>,
+) => styled(component, {
+  shouldForwardProp: prop => !['variant', 'disabled'].includes(prop),
+})<{ variant: Variants; disabled?: boolean; size: keyof typeof SIZES }>`
   & {
     width: ${({ size }) => `${SIZES[size]}px`};
     min-width: ${({ size }) =>
@@ -77,8 +77,11 @@ export const ProductIcon = ({
   const Icon = StyledIcon(PRODUCT_ICONS[name])
 
   return (
-    <Icon variant={variant} disabled={disabled} size={size} viewBox="0 0 64 64">
-      {PRODUCT_ICONS[name]}
-    </Icon>
+    <Icon
+      variant={variant}
+      disabled={disabled}
+      size={size}
+      viewBox="0 0 64 64"
+    />
   )
 }
diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json
index 8756f05f25..50f3102585 100644
--- a/packages/icons/tsconfig.json
+++ b/packages/icons/tsconfig.json
@@ -3,6 +3,6 @@
   "compilerOptions": {
     "baseUrl": "."
   },
-  "include": ["src", "global.d.ts", "src/emotion.d.ts"],
+  "include": ["src", "../../global.d.ts", "src/emotion.d.ts"],
   "exclude": ["node_modules", "coverage", "dist"]
 }
diff --git a/packages/ui/src/components/Banner/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/Banner/__tests__/__snapshots__/index.tsx.snap
index 8ab0b70090..0750e4c245 100644
--- a/packages/ui/src/components/Banner/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/ui/src/components/Banner/__tests__/__snapshots__/index.tsx.snap
@@ -279,7 +279,10 @@ exports[`Banner renders correctly with a button 1`] = `
     <div
       class="cache-hmn6z8-Stack-ImageStack e1kdwp5x0"
     >
-      <test-file-stub />
+      <img
+        alt=""
+        src="test-file-stub"
+      />
     </div>
     <div
       class="cache-19d60zd-Stack ehpbis70"
@@ -651,7 +654,10 @@ exports[`Banner renders correctly with a link 1`] = `
     <div
       class="cache-hmn6z8-Stack-ImageStack e1kdwp5x0"
     >
-      <test-file-stub />
+      <img
+        alt=""
+        src="test-file-stub"
+      />
     </div>
     <div
       class="cache-19d60zd-Stack ehpbis70"
@@ -1101,7 +1107,10 @@ exports[`Banner renders correctly with closable to false 1`] = `
     <div
       class="cache-hmn6z8-Stack-ImageStack e1kdwp5x0"
     >
-      <test-file-stub />
+      <img
+        alt=""
+        src="test-file-stub"
+      />
     </div>
     <div
       class="cache-wbv6k9-Stack ehpbis70"
@@ -1329,7 +1338,10 @@ exports[`Banner renders correctly with default values 1`] = `
     <div
       class="cache-hmn6z8-Stack-ImageStack e1kdwp5x0"
     >
-      <test-file-stub />
+      <img
+        alt=""
+        src="test-file-stub"
+      />
     </div>
     <div
       class="cache-19d60zd-Stack ehpbis70"
@@ -1571,7 +1583,10 @@ exports[`Banner renders correctly with direction row 1`] = `
     <div
       class="cache-hmn6z8-Stack-ImageStack e1kdwp5x0"
     >
-      <test-file-stub />
+      <img
+        alt=""
+        src="test-file-stub"
+      />
     </div>
     <div
       class="cache-wbv6k9-Stack ehpbis70"
@@ -1813,7 +1828,10 @@ exports[`Banner sizes and variants renders correctly with size medium and varian
     <div
       class="cache-hmn6z8-Stack-ImageStack e1kdwp5x0"
     >
-      <test-file-stub />
+      <img
+        alt=""
+        src="test-file-stub"
+      />
     </div>
     <div
       class="cache-19d60zd-Stack ehpbis70"
@@ -2055,7 +2073,10 @@ exports[`Banner sizes and variants renders correctly with size medium and varian
     <div
       class="cache-hmn6z8-Stack-ImageStack e1kdwp5x0"
     >
-      <test-file-stub />
+      <img
+        alt=""
+        src="test-file-stub"
+      />
     </div>
     <div
       class="cache-19d60zd-Stack ehpbis70"
@@ -2297,7 +2318,10 @@ exports[`Banner sizes and variants renders correctly with size small and variant
     <div
       class="cache-37jj6f-Stack-ImageStack e1kdwp5x0"
     >
-      <test-file-stub />
+      <img
+        alt=""
+        src="test-file-stub"
+      />
     </div>
     <div
       class="cache-19d60zd-Stack ehpbis70"
@@ -2539,7 +2563,10 @@ exports[`Banner sizes and variants renders correctly with size small and variant
     <div
       class="cache-37jj6f-Stack-ImageStack e1kdwp5x0"
     >
-      <test-file-stub />
+      <img
+        alt=""
+        src="test-file-stub"
+      />
     </div>
     <div
       class="cache-19d60zd-Stack ehpbis70"
diff --git a/packages/ui/src/components/Banner/index.tsx b/packages/ui/src/components/Banner/index.tsx
index 3e479ac6f2..99f781162b 100644
--- a/packages/ui/src/components/Banner/index.tsx
+++ b/packages/ui/src/components/Banner/index.tsx
@@ -134,7 +134,7 @@ export const Banner = ({
   'data-testid': dataTestId,
 }: BannerProps) => {
   const { theme } = useTheme()
-  const DefaultImage =
+  const defaultImage =
     size === 'small' ? defaultIllustrationSmall : defaultIllustration
 
   const [opened, setOpened] = useState(true)
@@ -149,7 +149,7 @@ export const Banner = ({
       data-testid={dataTestId}
     >
       <ImageStack size={size} justifyContent="center">
-        {image ?? <DefaultImage />}
+        {image ?? <img src={defaultImage} alt="" />}
       </ImageStack>
       <Stack
         direction={direction}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 969be8a61e..daeac374c8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -223,6 +223,9 @@ importers:
       expect:
         specifier: 29.7.0
         version: 29.7.0
+      file-loader:
+        specifier: ^6.2.0
+        version: 6.2.0(webpack@5.89.0)
       husky:
         specifier: 8.0.3
         version: 8.0.3
@@ -10266,6 +10269,17 @@ packages:
       flat-cache: 3.1.0
     dev: true
 
+  /file-loader@6.2.0(webpack@5.89.0):
+    resolution: {integrity: sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      webpack: ^4.0.0 || ^5.0.0
+    dependencies:
+      loader-utils: 2.0.4
+      schema-utils: 3.3.0
+      webpack: 5.89.0(@swc/core@1.3.82)(esbuild@0.18.20)
+    dev: true
+
   /file-system-cache@2.3.0:
     resolution: {integrity: sha512-l4DMNdsIPsVnKrgEXbJwDJsA5mB8rGwHYERMgqQx/xAUtChPJMre1bXBzDEqqVbWv9AIbFezXMxeEkZDSrXUOQ==}
     dependencies:
diff --git a/rollup.config.mjs b/rollup.config.mjs
index 62c5a52b27..7d87644f2d 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -78,7 +78,6 @@ export default [
       }),
       url({
         limit: 63488,
-        exclude: ['**/*.svg'], // We use svgr for svg files
       }),
       svgr({ memo: true, svgo: false }), // We disable svgo because we have custom configuration for it svgo.config.js
       PROFILE &&