diff --git a/apps/rosen/app/(bridge)/BridgeForm.tsx b/apps/rosen/app/(bridge)/BridgeForm.tsx
index 412348df..e98d4f56 100644
--- a/apps/rosen/app/(bridge)/BridgeForm.tsx
+++ b/apps/rosen/app/(bridge)/BridgeForm.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useCallback, ChangeEvent } from 'react';
-import Image from 'next/image';
 import { getDecimalString, getNonDecimalString } from '@rosen-ui/utils';
 
 import {
@@ -14,6 +13,7 @@ import {
   MenuItem,
   Button,
   CircularProgress,
+  SvgIcon,
 } from '@rosen-bridge/ui-kit';
 
 import useBridgeForm from '@/_hooks/useBridgeForm';
@@ -100,9 +100,12 @@ const BridgeForm = () => {
     const network = availableNetworks.find(
       (network) => network.name === value,
     )!;
+    const Logo = network.logo;
     return (
       <SelectedAsset>
-        <Image src={network.logo} width={24} height={24} alt="network logo" />
+        <SvgIcon>
+          <Logo />
+        </SvgIcon>
         <Typography color="text.secondary">{network.label}</Typography>
       </SelectedAsset>
     );
@@ -227,15 +230,12 @@ const BridgeForm = () => {
             }}
             onChange={handleSourceChange}
           >
-            {availableNetworks.map((network) => (
+            {availableNetworks.map(({ logo: Logo, ...network }) => (
               <MenuItem key={network.name} value={network.name}>
                 <ListItemIcon>
-                  <Image
-                    src={network.logo}
-                    width={24}
-                    height={24}
-                    alt="network logo"
-                  />
+                  <SvgIcon>
+                    <Logo />
+                  </SvgIcon>
                 </ListItemIcon>
                 <Typography color="text.secondary">{network.label}</Typography>
               </MenuItem>
@@ -257,15 +257,14 @@ const BridgeForm = () => {
             }}
             onChange={handleTargetChange}
           >
-            {targetNetworks.map((network) => (
+            {targetNetworks.map(({ logo: Logo, ...network }) => (
               <MenuItem key={network.name} value={network.name}>
                 <ListItemIcon>
-                  <Image
-                    src={network.logo}
-                    width={24}
-                    height={24}
-                    alt="network logo"
-                  />
+                  <ListItemIcon>
+                    <SvgIcon>
+                      <Logo />
+                    </SvgIcon>
+                  </ListItemIcon>
                 </ListItemIcon>
                 <Typography color="text.secondary">{network.label}</Typography>
               </MenuItem>
diff --git a/apps/rosen/app/_networks/cardano/index.ts b/apps/rosen/app/_networks/cardano/index.ts
index 507c3c8f..31ddec8d 100644
--- a/apps/rosen/app/_networks/cardano/index.ts
+++ b/apps/rosen/app/_networks/cardano/index.ts
@@ -12,12 +12,12 @@ import { Network } from '@/_types/network';
 import { decodeWasmValue } from '@/_actions/cardanoDecoder';
 import { Wallet } from '@rosen-ui/wallet-api';
 import { RosenChainToken } from '@rosen-bridge/tokens';
-import { getDecimalString } from '@rosen-ui/utils';
 import {
   generateLockAuxiliaryData,
   setTxWitnessSet,
 } from './transaction/utils';
 import { generateUnsignedTx } from './transaction/generateTx';
+import { CardanoIcon } from '@rosen-bridge/icons';
 
 /**
  * the main object for Cardano network
@@ -89,7 +89,7 @@ const CardanoNetwork: Network<Wallet> = {
     },
   ]),
   nextHeightInterval: 25,
-  logo: '/cardano.svg',
+  logo: CardanoIcon,
   api: {
     explorerUrl: 'https://api.koios.rest/api',
   },
diff --git a/apps/rosen/app/_networks/ergo/index.ts b/apps/rosen/app/_networks/ergo/index.ts
index 7277d21b..48b7b912 100644
--- a/apps/rosen/app/_networks/ergo/index.ts
+++ b/apps/rosen/app/_networks/ergo/index.ts
@@ -10,6 +10,7 @@ import { Network } from '@/_types/network';
 import { ErgoToken, Wallet } from '@rosen-ui/wallet-api';
 import { generateUnsignedTx } from './transaction/generateTx';
 import { RosenChainToken } from '@rosen-bridge/tokens';
+import { ErgoIcon } from '@rosen-bridge/icons';
 
 /**
  * the main object for Ergo network
@@ -71,7 +72,7 @@ const ErgoNetwork: Network<Wallet> = {
       },
     },
   ]),
-  logo: '/ergo.svg',
+  logo: ErgoIcon,
   nextHeightInterval: 5,
   api: {
     explorerUrl: 'https://api.ergoplatform.com/',
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
index 1e4d7cbb..d380f475 100644
--- a/packages/icons/src/index.ts
+++ b/packages/icons/src/index.ts
@@ -1,3 +1,4 @@
+export * from './networks';
 export * from './wallets';
 
 export { ReactComponent as AngleDown } from './icons/angle-down.svg';
diff --git a/apps/rosen/public/cardano.svg b/packages/icons/src/networks/cardano.svg
similarity index 99%
rename from apps/rosen/public/cardano.svg
rename to packages/icons/src/networks/cardano.svg
index c1895147..964a4554 100644
--- a/apps/rosen/public/cardano.svg
+++ b/packages/icons/src/networks/cardano.svg
@@ -2,9 +2,6 @@
 <!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 375 346.5" style="enable-background:new 0 0 375 346.5;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#0033AD;}
-</style>
 <g id="Layer_2_1_">
 	<g id="Layer_1-2">
 		<path class="st0" d="M102.8,172c-0.8,13.9,9.9,25.8,23.8,26.6c0.5,0,1,0,1.5,0c14,0,25.3-11.3,25.2-25.3c0-14-11.3-25.3-25.3-25.2
diff --git a/apps/rosen/public/ergo.svg b/packages/icons/src/networks/ergo.svg
similarity index 100%
rename from apps/rosen/public/ergo.svg
rename to packages/icons/src/networks/ergo.svg
diff --git a/packages/icons/src/networks/index.ts b/packages/icons/src/networks/index.ts
new file mode 100644
index 00000000..8b9f7b35
--- /dev/null
+++ b/packages/icons/src/networks/index.ts
@@ -0,0 +1,2 @@
+export { ReactComponent as CardanoIcon } from './cardano.svg';
+export { ReactComponent as ErgoIcon } from './ergo.svg';