From d37c0bf04fbb313338b8634f8b07c02b4732ea1d Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Wed, 12 Nov 2025 17:00:26 +0100
Subject: [PATCH] Remove usage of MUI SvgIcon

---
 .changelog/2341.internal.md                           |  1 +
 src/app/components/CustomIcons/ExplorerIcon.tsx       |  8 ++++----
 src/app/components/CustomIcons/Mainnet.tsx            |  8 ++++----
 src/app/components/CustomIcons/OasisIcon.tsx          |  8 ++++----
 src/app/components/CustomIcons/Testnet.tsx            |  8 ++++----
 src/app/components/PageLayout/Logotype.tsx            | 11 +----------
 .../pages/HomePage/Graph/GraphTooltipMobile/index.tsx |  2 +-
 src/app/utils/content.tsx                             |  8 ++++----
 8 files changed, 23 insertions(+), 31 deletions(-)
 create mode 100644 .changelog/2341.internal.md

diff --git a/.changelog/2341.internal.md b/.changelog/2341.internal.md
new file mode 100644
index 0000000000..26eb128198
--- /dev/null
+++ b/.changelog/2341.internal.md
@@ -0,0 +1 @@
+Remove usage of MUI SvgIcon
diff --git a/src/app/components/CustomIcons/ExplorerIcon.tsx b/src/app/components/CustomIcons/ExplorerIcon.tsx
index 625ad8abb4..d2c3a443f8 100644
--- a/src/app/components/CustomIcons/ExplorerIcon.tsx
+++ b/src/app/components/CustomIcons/ExplorerIcon.tsx
@@ -1,9 +1,9 @@
 import { FC } from 'react'
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 
-export const ExplorerIcon: FC<SvgIconProps> = props => {
+export const ExplorerIcon: FC<{ className?: string }> = ({ className }) => {
   return (
-    <SvgIcon {...props} viewBox="0 0 782.02 146.19">
+    <svg className={cn('fill-current h-10 w-[214px]', className)} viewBox="0 0 782.02 146.19">
       <g>
         <path d="M125.26,21.97c-6.14-6.26-13.4-11.41-21.44-15.15-.33-.17-.66-.32-1-.47-1.58-.71-3.18-1.38-4.81-1.97-4.58-1.66-9.37-2.88-14.32-3.6-3.46-.5-7-.78-10.6-.78C32.79,0,0,32.79,0,73.09c0,31.4,19.9,58.23,47.76,68.56,3.28,1.21,6.66,2.2,10.14,2.93,4.91,1.04,9.99,1.6,15.2,1.6,27.76,0,51.96-15.56,64.33-38.42,5.59-10.32,8.77-22.14,8.77-34.68,0-19.89-7.99-37.94-20.92-51.13ZM21.8,112.2c-8.64-11.39-13.2-24.98-13.2-39.3,0-24.45,13.56-45.8,33.55-56.91,.53-.29,1.05,.41,.61,.82-1.83,1.72-3.58,3.56-5.25,5.52-11.59,13.55-18.26,31.98-18.32,50.58,0,24.14,16.15,50.2,42.24,50.2,23.28,0,42.23-22.52,42.23-50.2,0-13.01-4.36-25.5-11.81-34.76-.26-.33,.05-.79,.45-.67,12.59,3.72,22,18.2,22,35.44,0,15.22-5.52,30.37-15.15,41.57-9.98,11.61-23.38,18.01-37.72,18.01-15.1,0-29.56-7.41-39.63-20.28ZM125.54,33.63c8.63,11.36,13.18,24.94,13.17,39.25,0,24.45-13.56,45.8-33.55,56.92-.53,.29-1.05-.41-.61-.82,1.83-1.72,3.58-3.56,5.25-5.52,11.59-13.55,18.26-31.98,18.32-50.58,0-24.14-16.15-50.2-42.24-50.2-23.28,0-42.23,22.52-42.23,50.2,0,13.01,4.36,25.5,11.81,34.77,.26,.33-.05,.79-.45,.67-12.59-3.72-22-18.19-22-35.42,0-15.22,5.52-30.37,15.15-41.56,9.98-11.61,23.38-18.01,37.73-18.01,15.09,0,29.54,7.4,39.65,20.3Zm-29.53,39.27c0,17.24-8.38,32.12-20.38,38.8-1.49,.83-3.32,.72-4.7-.28l-2.57-1.87c-10.53-7.68-17.07-21.73-17.07-36.67,0-17.24,8.38-32.12,20.38-38.8,1.49-.83,3.32-.72,4.7,.28l2.57,1.87c10.53,7.68,17.07,21.73,17.07,36.66Z" />
         <g>
@@ -24,6 +24,6 @@ export const ExplorerIcon: FC<SvgIconProps> = props => {
         <path d="M777.13,72.87c1.58-1.34,2.79-2.86,3.63-4.57,.84-1.7,1.26-3.49,1.26-5.36,0-2.83-.71-5.25-2.12-7.26-1.41-2.01-3.34-3.55-5.79-4.6-2.44-1.05-5.2-1.58-8.27-1.58h-16.92c-1.26,0-2.28,1.02-2.28,2.28v45.63c0,1.26,1.02,2.28,2.28,2.28h.19c1.26,0,2.28-1.02,2.28-2.28v-17.95c0-1.26,1.02-2.28,2.28-2.28h4.21c1.45,0,2.81,.67,3.7,1.82l15.28,19.81c.43,.56,1.1,.89,1.8,.89h0c1.89,0,2.96-2.18,1.8-3.67l-13.03-16.84c-.66-.85-.19-2.11,.87-2.3,.95-.17,2.04-.43,3.04-.84,2.28-.77,4.21-1.82,5.79-3.16Zm-13.45,.07h-9.78c-1.39,0-2.52-1.13-2.52-2.52v-14.98c0-.9,.73-1.63,1.63-1.63h12.82c2.01,0,3.86,.37,5.54,1.11,1.68,.74,3.02,1.79,4.03,3.13,1.01,1.34,1.51,2.97,1.51,4.89,0,2.01-.58,3.78-1.73,5.28-1.15,1.51-2.71,2.67-4.67,3.49-1.97,.82-4.24,1.22-6.83,1.22Z" />
         <path d="M683.65,72.87c1.58-1.34,2.79-2.86,3.63-4.57,.84-1.7,1.26-3.49,1.26-5.36,0-2.83-.71-5.25-2.12-7.26-1.41-2.01-3.34-3.55-5.79-4.6-2.44-1.05-5.2-1.58-8.27-1.58h-16.92c-1.26,0-2.28,1.02-2.28,2.28v45.63c0,1.26,1.02,2.28,2.28,2.28h.19c1.26,0,2.28-1.02,2.28-2.28v-17.95c0-1.26,1.02-2.28,2.28-2.28h4.21c1.45,0,2.81,.67,3.7,1.82l15.28,19.81c.43,.56,1.1,.89,1.8,.89h0c1.89,0,2.96-2.18,1.8-3.67l-13.03-16.84c-.66-.85-.19-2.11,.87-2.3,.95-.17,2.04-.43,3.04-.84,2.28-.77,4.21-1.82,5.79-3.16Zm-13.45,.07h-9.78c-1.39,0-2.52-1.13-2.52-2.52v-14.98c0-.9,.73-1.63,1.63-1.63h12.82c2.01,0,3.86,.37,5.54,1.11,1.68,.74,3.02,1.79,4.03,3.13,1.01,1.34,1.51,2.97,1.51,4.89,0,2.01-.58,3.78-1.73,5.28-1.15,1.51-2.71,2.67-4.67,3.49-1.97,.82-4.24,1.22-6.83,1.22Z" />
       </g>
-    </SvgIcon>
+    </svg>
   )
 }
diff --git a/src/app/components/CustomIcons/Mainnet.tsx b/src/app/components/CustomIcons/Mainnet.tsx
index 5c7bb22939..d26eb2ded2 100644
--- a/src/app/components/CustomIcons/Mainnet.tsx
+++ b/src/app/components/CustomIcons/Mainnet.tsx
@@ -1,10 +1,10 @@
 import { FC } from 'react'
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 
-export const MainnetIcon: FC<SvgIconProps> = props => {
+export const MainnetIcon: FC<{ className?: string }> = ({ className }) => {
   return (
-    <SvgIcon {...props}>
+    <svg className={cn('fill-current w-6 h-6', className)} viewBox="0 0 24 24">
       <path d="M11.99 18.54L4.62 12.81L3 14.07L12 21.07L21 14.07L19.37 12.8L11.99 18.54V18.54ZM12 16L19.36 10.27L21 9L12 2L3 9L4.63 10.27L12 16Z" />
-    </SvgIcon>
+    </svg>
   )
 }
diff --git a/src/app/components/CustomIcons/OasisIcon.tsx b/src/app/components/CustomIcons/OasisIcon.tsx
index de7b91f1e7..f713f3b371 100644
--- a/src/app/components/CustomIcons/OasisIcon.tsx
+++ b/src/app/components/CustomIcons/OasisIcon.tsx
@@ -1,10 +1,10 @@
 import { FC } from 'react'
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 
-export const OasisIcon: FC<SvgIconProps> = props => {
+export const OasisIcon: FC<{ className?: string }> = ({ className }) => {
   return (
-    <SvgIcon {...props} viewBox="145 145 790 790">
+    <svg className={cn('fill-current h-8 w-8 sm:h-10 sm:w-10', className)} viewBox="145 145 790 790">
       <path d="M819.3,266.28c-32.86-33.52-71.73-61.06-114.78-81.11-1.75-.9-3.53-1.72-5.37-2.49-8.46-3.78-17.01-7.38-25.77-10.56-24.51-8.91-50.16-15.41-76.66-19.28-18.53-2.7-37.46-4.16-56.72-4.16-215.77,0-391.32,175.54-391.32,391.32,0,168.1,106.56,311.76,255.67,367.04,17.54,6.5,35.67,11.76,54.28,15.71,26.26,5.58,53.47,8.57,81.36,8.57,148.63,0,278.16-83.31,344.39-205.68,29.91-55.27,46.93-118.5,46.93-185.64,0-106.47-42.79-203.09-112.02-273.72ZM265.4,749.35c-46.24-60.99-70.68-133.75-70.68-210.42,0-130.92,72.58-245.19,179.61-304.7,2.83-1.58,5.63,2.18,3.27,4.4-9.78,9.21-19.16,19.05-28.13,29.53-62.03,72.55-97.77,171.21-98.08,270.77,0,129.26,86.46,268.77,226.15,268.77,124.66,0,226.07-120.57,226.07-268.77,0-69.63-23.34-136.49-63.2-186.11-1.41-1.75.26-4.23,2.41-3.6,67.38,19.93,117.77,97.42,117.77,189.71,0,81.48-29.56,162.59-81.11,222.56-53.43,62.15-125.15,96.4-201.94,96.43-80.87,0-158.26-39.65-212.15-108.56ZM820.8,328.72c46.2,60.84,70.58,133.49,70.51,210.14,0,130.91-72.58,245.19-179.62,304.7-2.83,1.58-5.63-2.18-3.27-4.4,9.78-9.21,19.16-19.06,28.13-29.53,62.03-72.54,97.77-171.21,98.08-270.77,0-129.26-86.46-268.77-226.15-268.77-124.66,0-226.07,120.57-226.07,268.77,0,69.63,23.35,136.5,63.21,186.12,1.4,1.75-.26,4.23-2.41,3.6-67.39-19.92-117.78-97.39-117.78-189.64,0-81.46,29.56-162.56,81.12-222.51,53.45-62.16,125.19-96.4,202.01-96.4,80.81,0,158.17,39.62,212.25,108.69ZM662.71,538.93c0,92.31-44.84,171.97-109.11,207.74-7.96,4.43-17.77,3.88-25.14-1.49l-13.75-10.03c-56.37-41.13-91.39-116.35-91.39-196.29,0-92.3,44.84-171.96,109.12-207.73,7.97-4.43,17.78-3.88,25.14,1.49l13.74,10.03c56.37,41.13,91.39,116.34,91.39,196.29Z" />
-    </SvgIcon>
+    </svg>
   )
 }
diff --git a/src/app/components/CustomIcons/Testnet.tsx b/src/app/components/CustomIcons/Testnet.tsx
index f192243ff2..aabf6b488c 100644
--- a/src/app/components/CustomIcons/Testnet.tsx
+++ b/src/app/components/CustomIcons/Testnet.tsx
@@ -1,10 +1,10 @@
 import { FC } from 'react'
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 
-export const TestnetIcon: FC<SvgIconProps> = props => {
+export const TestnetIcon: FC<{ className?: string }> = ({ className }) => {
   return (
-    <SvgIcon {...props}>
+    <svg className={cn('fill-current w-6 h-6', className)} viewBox="0 0 24 24">
       <path d="M19.7999 18.4L13.9999 10.67V6.5L15.3499 4.81C15.6099 4.48 15.3799 4 14.9599 4H9.03993C8.61993 4 8.38993 4.48 8.64993 4.81L9.99993 6.5V10.67L4.19993 18.4C3.70993 19.06 4.17993 20 4.99993 20H18.9999C19.8199 20 20.2899 19.06 19.7999 18.4Z" />
-    </SvgIcon>
+    </svg>
   )
 }
diff --git a/src/app/components/PageLayout/Logotype.tsx b/src/app/components/PageLayout/Logotype.tsx
index 5c971b3e6d..40b589390a 100644
--- a/src/app/components/PageLayout/Logotype.tsx
+++ b/src/app/components/PageLayout/Logotype.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useScreenSize } from '../../hooks/useScreensize'
 import { Link as RouterLink } from 'react-router-dom'
 import { OasisIcon } from '../CustomIcons/OasisIcon'
 import { ExplorerIcon } from '../CustomIcons/ExplorerIcon'
@@ -20,13 +19,5 @@ export const HomePageLink: FC<LogotypeProps> = ({ showText }) => {
 }
 
 export const Logotype: FC<LogotypeProps> = ({ showText }) => {
-  const { isMobile } = useScreenSize()
-  const oasisLogoSize = isMobile ? 32 : 40
-  const logoSize = !showText ? { height: oasisLogoSize, width: oasisLogoSize } : { height: 40, width: 214 }
-
-  return (
-    <div className="flex items-center text-primary">
-      {!showText ? <OasisIcon sx={logoSize} /> : <ExplorerIcon sx={logoSize} />}
-    </div>
-  )
+  return <div className="flex items-center text-primary">{showText ? <ExplorerIcon /> : <OasisIcon />}</div>
 }
diff --git a/src/app/pages/HomePage/Graph/GraphTooltipMobile/index.tsx b/src/app/pages/HomePage/Graph/GraphTooltipMobile/index.tsx
index bf454b09e5..a95a711566 100644
--- a/src/app/pages/HomePage/Graph/GraphTooltipMobile/index.tsx
+++ b/src/app/pages/HomePage/Graph/GraphTooltipMobile/index.tsx
@@ -105,7 +105,7 @@ interface GraphTooltipHeaderProps {
 
 const GraphTooltipHeader: FC<GraphTooltipHeaderProps> = ({ disabled, network, area }) => {
   const { t } = useTranslation()
-  const icons = getNetworkIcons({ size: 38 })
+  const icons = getNetworkIcons({ className: 'h-9 w-9' })
 
   return (
     <div
diff --git a/src/app/utils/content.tsx b/src/app/utils/content.tsx
index e5ea4cfd9c..13e958bce6 100644
--- a/src/app/utils/content.tsx
+++ b/src/app/utils/content.tsx
@@ -15,8 +15,8 @@ export const getLayerLabels = (t: TFunction): Record<Layer, string> => ({
   consensus: t('common.consensus'),
 })
 
-export const getNetworkIcons = ({ size }: { size?: number } = {}): Record<Network, ReactNode> => ({
-  mainnet: <MainnetIcon sx={{ fontSize: size }} />,
-  testnet: <TestnetIcon sx={{ fontSize: size }} />,
-  localnet: <ConstructionIcon sx={{ fontSize: size }} />,
+export const getNetworkIcons = ({ className }: { className?: string } = {}): Record<Network, ReactNode> => ({
+  mainnet: <MainnetIcon className={className} />,
+  testnet: <TestnetIcon className={className} />,
+  localnet: <ConstructionIcon className={className} />,
 })