diff --git a/.changeset/eight-houses-cry.md b/.changeset/eight-houses-cry.md
new file mode 100644
index 000000000..06db77691
--- /dev/null
+++ b/.changeset/eight-houses-cry.md
@@ -0,0 +1,6 @@
+---
+"@just_testing13/components": patch
+"@just_testing13/coin-icons": patch
+---
+
+Rui/refactor icons
diff --git a/package.json b/package.json
index 27fb171b4..5e2f6bf3c 100644
--- a/package.json
+++ b/package.json
@@ -8,11 +8,11 @@
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "lint": "eslint packages/**/src --ext .ts,.tsx --config .eslintrc.json --cache",
+    "lint": "eslint packages/**/src packages/**/**/src --ext .ts,.tsx --config .eslintrc.json --cache",
     "lint:fix": "pnpm lint --fix",
     "typecheck": "turbo typecheck",
-    "format:check": "prettier --check packages/**/src --cache",
-    "format:write": "prettier --write packages/**/src --cache",
+    "format:check": "prettier --check packages/**/src packages/**/**/src --cache",
+    "format:write": "prettier --write packages/**/src packages/**/**/src --cache",
     "clean": "turbo run clean && rm -rf node_modules",
     "build": "turbo run build",
     "build:sb": "storybook build",
diff --git a/packages/components/package.json b/packages/components/package.json
index 869d241da..9e3a22520 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -32,6 +32,7 @@
   "dependencies": {
     "@just_testing13/hooks": "workspace:*",
     "@just_testing13/icons": "workspace:*",
+    "@just_testing13/coin-icons": "workspace:*",
     "@just_testing13/theme": "workspace:*",
     "@react-aria/accordion": "3.0.0-alpha.20",
     "@react-aria/breadcrumbs": "^3.5.4",
diff --git a/packages/components/src/CoinIcon/CoinIcon.stories.tsx b/packages/components/src/CoinIcon/CoinIcon.stories.tsx
index b86d3936a..4cb8721ea 100644
--- a/packages/components/src/CoinIcon/CoinIcon.stories.tsx
+++ b/packages/components/src/CoinIcon/CoinIcon.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryFn, StoryObj } from '@storybook/react';
-import * as coins from '@just_testing13/icons/src/svg/coin';
+import * as coins from '@just_testing13/coin-icons';
 
 import { Flex } from '../Flex';
 
diff --git a/packages/components/src/CoinIcon/CoinIcon.tsx b/packages/components/src/CoinIcon/CoinIcon.tsx
index f548a62df..03c69829e 100644
--- a/packages/components/src/CoinIcon/CoinIcon.tsx
+++ b/packages/components/src/CoinIcon/CoinIcon.tsx
@@ -1,7 +1,6 @@
 import { forwardRef } from 'react';
-import { IconProps } from '@just_testing13/icons';
-
-import * as coins from '../../../icons/src/svg/coin';
+import { IconProps } from '@just_testing13/coin-icons';
+import * as coins from '@just_testing13/coin-icons';
 
 import { FallbackIcon } from './FallbackIcon';
 import { LPCoinIcon } from './LPCoinIcon';
diff --git a/packages/components/src/TokenInput/TokenInput.stories.tsx b/packages/components/src/TokenInput/TokenInput.stories.tsx
index c32bd3904..7cbf6ee71 100644
--- a/packages/components/src/TokenInput/TokenInput.stories.tsx
+++ b/packages/components/src/TokenInput/TokenInput.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import * as coins from '@just_testing13/icons/src/svg/coin';
+import * as coins from '@just_testing13/coin-icons';
 import { useState } from 'react';
 import { mergeProps } from '@react-aria/utils';
 
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
deleted file mode 100644
index 209d35076..000000000
--- a/packages/icons/CHANGELOG.md
+++ /dev/null
@@ -1,62 +0,0 @@
-# @just_testing13/icons
-
-## 0.1.3
-
-### Patch Changes
-
-- css
-- Updated dependencies
-  - @just_testing13/theme@0.1.3
-
-## 0.1.2
-
-### Patch Changes
-
-- failed
-- Updated dependencies
-  - @just_testing13/theme@0.1.2
-
-## 0.1.1
-
-### Patch Changes
-
-- c86347b: fixing icons
-- testing
-- Updated dependencies [c86347b]
-- Updated dependencies
-  - @just_testing13/theme@0.1.1
-
-## 0.1.0
-
-### Minor Changes
-
-- testing
-
-### Patch Changes
-
-- Updated dependencies
-  - @just_testing13/theme@0.1.0
-
-## 0.0.0
-
-### Minor Changes
-
-- test
-- test
-
-### Patch Changes
-
-- Updated dependencies
-- Updated dependencies
-  - @just_testing13/theme@0.0.0
-
-## 0.0.0-dev-20230913104927
-
-### Minor Changes
-
-- fix
-
-### Patch Changes
-
-- Updated dependencies
-  - @just_testing13/theme@0.0.0-dev-20230913104927
diff --git a/packages/icons/coin/package.json b/packages/icons/coin/package.json
new file mode 100644
index 000000000..97aee8b21
--- /dev/null
+++ b/packages/icons/coin/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@just_testing13/coin-icons",
+  "version": "0.0.0",
+  "main": "src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "sideEffects": false,
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --ext ts,tsx --fix",
+    "build": "tsup src/index.ts --dts",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "clean-package": "^2.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@just_testing13/icon": "workspace:*"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}
diff --git a/packages/icons/src/svg/coin/common/BTC.tsx b/packages/icons/coin/src/common/BTC.tsx
similarity index 96%
rename from packages/icons/src/svg/coin/common/BTC.tsx
rename to packages/icons/coin/src/common/BTC.tsx
index 019690bf8..fc1fcf780 100644
--- a/packages/icons/src/svg/coin/common/BTC.tsx
+++ b/packages/icons/coin/src/common/BTC.tsx
@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
-
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const BTC = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/common/ETH.tsx b/packages/icons/coin/src/common/ETH.tsx
similarity index 96%
rename from packages/icons/src/svg/coin/common/ETH.tsx
rename to packages/icons/coin/src/common/ETH.tsx
index af4c2e57a..deb120ae7 100644
--- a/packages/icons/src/svg/coin/common/ETH.tsx
+++ b/packages/icons/coin/src/common/ETH.tsx
@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
-
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const ETH = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/common/USDT.tsx b/packages/icons/coin/src/common/USDT.tsx
similarity index 95%
rename from packages/icons/src/svg/coin/common/USDT.tsx
rename to packages/icons/coin/src/common/USDT.tsx
index 74d80c41c..579e2726d 100644
--- a/packages/icons/src/svg/coin/common/USDT.tsx
+++ b/packages/icons/coin/src/common/USDT.tsx
@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
-
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const USDT = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/common/index.ts b/packages/icons/coin/src/common/index.ts
similarity index 100%
rename from packages/icons/src/svg/coin/common/index.ts
rename to packages/icons/coin/src/common/index.ts
diff --git a/packages/icons/coin/src/index.ts b/packages/icons/coin/src/index.ts
new file mode 100644
index 000000000..28218a47f
--- /dev/null
+++ b/packages/icons/coin/src/index.ts
@@ -0,0 +1,4 @@
+export * from './common';
+export * from './polkadot';
+export { Icon } from '@just_testing13/icon';
+export type { IconProps, IconSize } from '@just_testing13/icon';
diff --git a/packages/icons/src/svg/coin/polkadot/AUSD.tsx b/packages/icons/coin/src/polkadot/AUSD.tsx
similarity index 98%
rename from packages/icons/src/svg/coin/polkadot/AUSD.tsx
rename to packages/icons/coin/src/polkadot/AUSD.tsx
index 5d723d1bb..0dff4e9d8 100644
--- a/packages/icons/src/svg/coin/polkadot/AUSD.tsx
+++ b/packages/icons/coin/src/polkadot/AUSD.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const AUSD = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/DOT.tsx b/packages/icons/coin/src/polkadot/DOT.tsx
similarity index 96%
rename from packages/icons/src/svg/coin/polkadot/DOT.tsx
rename to packages/icons/coin/src/polkadot/DOT.tsx
index 589a255da..678662762 100644
--- a/packages/icons/src/svg/coin/polkadot/DOT.tsx
+++ b/packages/icons/coin/src/polkadot/DOT.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const DOT = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 45 45' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/IBTC.tsx b/packages/icons/coin/src/polkadot/IBTC.tsx
similarity index 98%
rename from packages/icons/src/svg/coin/polkadot/IBTC.tsx
rename to packages/icons/coin/src/polkadot/IBTC.tsx
index bdc2292dd..0c6931a3c 100644
--- a/packages/icons/src/svg/coin/polkadot/IBTC.tsx
+++ b/packages/icons/coin/src/polkadot/IBTC.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const IBTC = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/INTR.tsx b/packages/icons/coin/src/polkadot/INTR.tsx
similarity index 97%
rename from packages/icons/src/svg/coin/polkadot/INTR.tsx
rename to packages/icons/coin/src/polkadot/INTR.tsx
index d7cc5d515..c9eda937d 100644
--- a/packages/icons/src/svg/coin/polkadot/INTR.tsx
+++ b/packages/icons/coin/src/polkadot/INTR.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const INTR = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/KAR.tsx b/packages/icons/coin/src/polkadot/KAR.tsx
similarity index 97%
rename from packages/icons/src/svg/coin/polkadot/KAR.tsx
rename to packages/icons/coin/src/polkadot/KAR.tsx
index 2417b7b07..f108b4a95 100644
--- a/packages/icons/src/svg/coin/polkadot/KAR.tsx
+++ b/packages/icons/coin/src/polkadot/KAR.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const KAR = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/KBTC.tsx b/packages/icons/coin/src/polkadot/KBTC.tsx
similarity index 99%
rename from packages/icons/src/svg/coin/polkadot/KBTC.tsx
rename to packages/icons/coin/src/polkadot/KBTC.tsx
index 097f4b45b..e4beb77eb 100644
--- a/packages/icons/src/svg/coin/polkadot/KBTC.tsx
+++ b/packages/icons/coin/src/polkadot/KBTC.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const KBTC = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/KINT.tsx b/packages/icons/coin/src/polkadot/KINT.tsx
similarity index 99%
rename from packages/icons/src/svg/coin/polkadot/KINT.tsx
rename to packages/icons/coin/src/polkadot/KINT.tsx
index 67ef105bc..daef0adcf 100644
--- a/packages/icons/src/svg/coin/polkadot/KINT.tsx
+++ b/packages/icons/coin/src/polkadot/KINT.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const KINT = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/KSM.tsx b/packages/icons/coin/src/polkadot/KSM.tsx
similarity index 97%
rename from packages/icons/src/svg/coin/polkadot/KSM.tsx
rename to packages/icons/coin/src/polkadot/KSM.tsx
index 1421d1802..b2337463e 100644
--- a/packages/icons/src/svg/coin/polkadot/KSM.tsx
+++ b/packages/icons/coin/src/polkadot/KSM.tsx
@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
-
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const KSM = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/LDOT.tsx b/packages/icons/coin/src/polkadot/LDOT.tsx
similarity index 97%
rename from packages/icons/src/svg/coin/polkadot/LDOT.tsx
rename to packages/icons/coin/src/polkadot/LDOT.tsx
index 75b28c983..b44790515 100644
--- a/packages/icons/src/svg/coin/polkadot/LDOT.tsx
+++ b/packages/icons/coin/src/polkadot/LDOT.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const LDOT = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/LKSM.tsx b/packages/icons/coin/src/polkadot/LKSM.tsx
similarity index 96%
rename from packages/icons/src/svg/coin/polkadot/LKSM.tsx
rename to packages/icons/coin/src/polkadot/LKSM.tsx
index 01bb9e69f..e0c5df7d0 100644
--- a/packages/icons/src/svg/coin/polkadot/LKSM.tsx
+++ b/packages/icons/coin/src/polkadot/LKSM.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const LKSM = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/LSKSM.tsx b/packages/icons/coin/src/polkadot/LSKSM.tsx
similarity index 97%
rename from packages/icons/src/svg/coin/polkadot/LSKSM.tsx
rename to packages/icons/coin/src/polkadot/LSKSM.tsx
index 2af1468fb..75e354f75 100644
--- a/packages/icons/src/svg/coin/polkadot/LSKSM.tsx
+++ b/packages/icons/coin/src/polkadot/LSKSM.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const LSKSM = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/MOVR.tsx b/packages/icons/coin/src/polkadot/MOVR.tsx
similarity index 99%
rename from packages/icons/src/svg/coin/polkadot/MOVR.tsx
rename to packages/icons/coin/src/polkadot/MOVR.tsx
index 67d4ef199..871981c53 100644
--- a/packages/icons/src/svg/coin/polkadot/MOVR.tsx
+++ b/packages/icons/coin/src/polkadot/MOVR.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const MOVR = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/SKSM.tsx b/packages/icons/coin/src/polkadot/SKSM.tsx
similarity index 97%
rename from packages/icons/src/svg/coin/polkadot/SKSM.tsx
rename to packages/icons/coin/src/polkadot/SKSM.tsx
index 2f6bb35f0..41eebb399 100644
--- a/packages/icons/src/svg/coin/polkadot/SKSM.tsx
+++ b/packages/icons/coin/src/polkadot/SKSM.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const SKSM = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/VKSM.tsx b/packages/icons/coin/src/polkadot/VKSM.tsx
similarity index 97%
rename from packages/icons/src/svg/coin/polkadot/VKSM.tsx
rename to packages/icons/coin/src/polkadot/VKSM.tsx
index b2e2f7348..a7fbb6e43 100644
--- a/packages/icons/src/svg/coin/polkadot/VKSM.tsx
+++ b/packages/icons/coin/src/polkadot/VKSM.tsx
@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
-
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const VKSM = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/index.ts b/packages/icons/coin/src/polkadot/index.ts
similarity index 100%
rename from packages/icons/src/svg/coin/polkadot/index.ts
rename to packages/icons/coin/src/polkadot/index.ts
diff --git a/packages/icons/src/svg/coin/polkadot/qDOT.tsx b/packages/icons/coin/src/polkadot/qDOT.tsx
similarity index 97%
rename from packages/icons/src/svg/coin/polkadot/qDOT.tsx
rename to packages/icons/coin/src/polkadot/qDOT.tsx
index 4cf5b4556..b840bf19a 100644
--- a/packages/icons/src/svg/coin/polkadot/qDOT.tsx
+++ b/packages/icons/coin/src/polkadot/qDOT.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const qDOT = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/qIBTC.tsx b/packages/icons/coin/src/polkadot/qIBTC.tsx
similarity index 98%
rename from packages/icons/src/svg/coin/polkadot/qIBTC.tsx
rename to packages/icons/coin/src/polkadot/qIBTC.tsx
index cbe8f2f26..c9dfdd9c7 100644
--- a/packages/icons/src/svg/coin/polkadot/qIBTC.tsx
+++ b/packages/icons/coin/src/polkadot/qIBTC.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const qIBTC = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/qINTR.tsx b/packages/icons/coin/src/polkadot/qINTR.tsx
similarity index 97%
rename from packages/icons/src/svg/coin/polkadot/qINTR.tsx
rename to packages/icons/coin/src/polkadot/qINTR.tsx
index 3e289205b..2be187129 100644
--- a/packages/icons/src/svg/coin/polkadot/qINTR.tsx
+++ b/packages/icons/coin/src/polkadot/qINTR.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const qINTR = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/qKBTC.tsx b/packages/icons/coin/src/polkadot/qKBTC.tsx
similarity index 99%
rename from packages/icons/src/svg/coin/polkadot/qKBTC.tsx
rename to packages/icons/coin/src/polkadot/qKBTC.tsx
index 27f660c90..2ca0f11da 100644
--- a/packages/icons/src/svg/coin/polkadot/qKBTC.tsx
+++ b/packages/icons/coin/src/polkadot/qKBTC.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const qKBTC = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/qKINT.tsx b/packages/icons/coin/src/polkadot/qKINT.tsx
similarity index 99%
rename from packages/icons/src/svg/coin/polkadot/qKINT.tsx
rename to packages/icons/coin/src/polkadot/qKINT.tsx
index 195b80ad4..661acb8c4 100644
--- a/packages/icons/src/svg/coin/polkadot/qKINT.tsx
+++ b/packages/icons/coin/src/polkadot/qKINT.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const qKINT = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/qKSM.tsx b/packages/icons/coin/src/polkadot/qKSM.tsx
similarity index 96%
rename from packages/icons/src/svg/coin/polkadot/qKSM.tsx
rename to packages/icons/coin/src/polkadot/qKSM.tsx
index 887f04111..049f71216 100644
--- a/packages/icons/src/svg/coin/polkadot/qKSM.tsx
+++ b/packages/icons/coin/src/polkadot/qKSM.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const qKSM = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/qMOVR.tsx b/packages/icons/coin/src/polkadot/qMOVR.tsx
similarity index 99%
rename from packages/icons/src/svg/coin/polkadot/qMOVR.tsx
rename to packages/icons/coin/src/polkadot/qMOVR.tsx
index 19bca704b..ee36cda6a 100644
--- a/packages/icons/src/svg/coin/polkadot/qMOVR.tsx
+++ b/packages/icons/coin/src/polkadot/qMOVR.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const qMOVR = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/svg/coin/polkadot/qUSDT.tsx b/packages/icons/coin/src/polkadot/qUSDT.tsx
similarity index 95%
rename from packages/icons/src/svg/coin/polkadot/qUSDT.tsx
rename to packages/icons/coin/src/polkadot/qUSDT.tsx
index ec05cde52..f4598edfb 100644
--- a/packages/icons/src/svg/coin/polkadot/qUSDT.tsx
+++ b/packages/icons/coin/src/polkadot/qUSDT.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const qUSDT = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon {...props} ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
diff --git a/packages/icons/src/stories/coin.stories.tsx b/packages/icons/coin/src/stories/index.stories.tsx
similarity index 92%
rename from packages/icons/src/stories/coin.stories.tsx
rename to packages/icons/coin/src/stories/index.stories.tsx
index b4245dbf9..7b4ce1561 100644
--- a/packages/icons/src/stories/coin.stories.tsx
+++ b/packages/icons/coin/src/stories/index.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { Icon, IconProps } from '@just_testing13/icon';
 
-import * as SVGS from '../svg/coin';
-import { Icon, IconProps } from '../Icon';
+import * as SVGS from '../';
 
 export const Default: StoryObj<IconProps> = {
   args: {
diff --git a/packages/icons/tsconfig.json b/packages/icons/coin/tsconfig.json
similarity index 69%
rename from packages/icons/tsconfig.json
rename to packages/icons/coin/tsconfig.json
index bdf2529ae..f61004816 100644
--- a/packages/icons/tsconfig.json
+++ b/packages/icons/coin/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../../tsconfig.json",
   "compilerOptions": { "baseUrl": ".", "declaration": false },
   "include": ["src"]
 }
diff --git a/packages/icons/tsup.config.ts b/packages/icons/coin/tsup.config.ts
similarity index 100%
rename from packages/icons/tsup.config.ts
rename to packages/icons/coin/tsup.config.ts
diff --git a/packages/icons/package.json b/packages/icons/common/package.json
similarity index 66%
rename from packages/icons/package.json
rename to packages/icons/common/package.json
index 0188e225c..d716a7d25 100644
--- a/packages/icons/package.json
+++ b/packages/icons/common/package.json
@@ -16,18 +16,15 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "react-dom": ">=18",
-    "styled-components": ">=6.0.0"
+    "react-dom": ">=18"
   },
   "devDependencies": {
-    "@types/styled-components": "^5.1.26",
     "clean-package": "^2.2.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^6.0.7"
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@just_testing13/theme": "workspace:*"
+    "@just_testing13/icon": "workspace:*"
   },
-  "clean-package": "../../clean-package.config.json"
+  "clean-package": "../../../clean-package.config.json"
 }
diff --git a/packages/icons/src/svg/common/ArrowPathRoundedSquare.tsx b/packages/icons/common/src/ArrowPathRoundedSquare.tsx
similarity index 93%
rename from packages/icons/src/svg/common/ArrowPathRoundedSquare.tsx
rename to packages/icons/common/src/ArrowPathRoundedSquare.tsx
index 217778d15..2fc00f39d 100644
--- a/packages/icons/src/svg/common/ArrowPathRoundedSquare.tsx
+++ b/packages/icons/common/src/ArrowPathRoundedSquare.tsx
@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
-
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const ArrowPathRoundedSquare = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon
diff --git a/packages/icons/src/svg/common/ArrowRight.tsx b/packages/icons/common/src/ArrowRight.tsx
similarity index 89%
rename from packages/icons/src/svg/common/ArrowRight.tsx
rename to packages/icons/common/src/ArrowRight.tsx
index 8ce3e9fd2..9c1fa1b96 100644
--- a/packages/icons/src/svg/common/ArrowRight.tsx
+++ b/packages/icons/common/src/ArrowRight.tsx
@@ -1,6 +1,5 @@
 import { forwardRef } from 'react';
-
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const ArrowRight = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon
diff --git a/packages/icons/src/svg/common/ArrowRightCircle.tsx b/packages/icons/common/src/ArrowRightCircle.tsx
similarity index 92%
rename from packages/icons/src/svg/common/ArrowRightCircle.tsx
rename to packages/icons/common/src/ArrowRightCircle.tsx
index b0368029d..8610d3a0a 100644
--- a/packages/icons/src/svg/common/ArrowRightCircle.tsx
+++ b/packages/icons/common/src/ArrowRightCircle.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const ArrowRightCircle = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon ref={ref} fill='currentColor' stroke='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
diff --git a/packages/icons/src/svg/common/ArrowTopRightOnSquare.tsx b/packages/icons/common/src/ArrowTopRightOnSquare.tsx
similarity index 91%
rename from packages/icons/src/svg/common/ArrowTopRightOnSquare.tsx
rename to packages/icons/common/src/ArrowTopRightOnSquare.tsx
index f0f95950c..325b44b36 100644
--- a/packages/icons/src/svg/common/ArrowTopRightOnSquare.tsx
+++ b/packages/icons/common/src/ArrowTopRightOnSquare.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const ArrowTopRightOnSquare = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon
diff --git a/packages/icons/src/svg/common/ArrowsUpDown.tsx b/packages/icons/common/src/ArrowsUpDown.tsx
similarity index 90%
rename from packages/icons/src/svg/common/ArrowsUpDown.tsx
rename to packages/icons/common/src/ArrowsUpDown.tsx
index 5578fa6e3..2bfd8d431 100644
--- a/packages/icons/src/svg/common/ArrowsUpDown.tsx
+++ b/packages/icons/common/src/ArrowsUpDown.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const ArrowsUpDown = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon
diff --git a/packages/icons/src/svg/common/CheckCircle.tsx b/packages/icons/common/src/CheckCircle.tsx
similarity index 90%
rename from packages/icons/src/svg/common/CheckCircle.tsx
rename to packages/icons/common/src/CheckCircle.tsx
index 6e22a96a3..794413dc9 100644
--- a/packages/icons/src/svg/common/CheckCircle.tsx
+++ b/packages/icons/common/src/CheckCircle.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const CheckCircle = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon
diff --git a/packages/icons/src/svg/common/ChevronDown.tsx b/packages/icons/common/src/ChevronDown.tsx
similarity index 88%
rename from packages/icons/src/svg/common/ChevronDown.tsx
rename to packages/icons/common/src/ChevronDown.tsx
index 6f9801e20..97f75c905 100644
--- a/packages/icons/src/svg/common/ChevronDown.tsx
+++ b/packages/icons/common/src/ChevronDown.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const ChevronDown = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon
diff --git a/packages/icons/src/svg/common/ChevronRight.tsx b/packages/icons/common/src/ChevronRight.tsx
similarity index 89%
rename from packages/icons/src/svg/common/ChevronRight.tsx
rename to packages/icons/common/src/ChevronRight.tsx
index 5561743b2..383cf7acd 100644
--- a/packages/icons/src/svg/common/ChevronRight.tsx
+++ b/packages/icons/common/src/ChevronRight.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const ChevronRight = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon
diff --git a/packages/icons/src/svg/common/Cog.tsx b/packages/icons/common/src/Cog.tsx
similarity index 97%
rename from packages/icons/src/svg/common/Cog.tsx
rename to packages/icons/common/src/Cog.tsx
index 9b0781086..56a593def 100644
--- a/packages/icons/src/svg/common/Cog.tsx
+++ b/packages/icons/common/src/Cog.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const Cog = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon ref={ref} fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
diff --git a/packages/icons/src/svg/common/DocumentDuplicate.tsx b/packages/icons/common/src/DocumentDuplicate.tsx
similarity index 94%
rename from packages/icons/src/svg/common/DocumentDuplicate.tsx
rename to packages/icons/common/src/DocumentDuplicate.tsx
index 2c3957229..01095268f 100644
--- a/packages/icons/src/svg/common/DocumentDuplicate.tsx
+++ b/packages/icons/common/src/DocumentDuplicate.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const DocumentDuplicate = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon
diff --git a/packages/icons/src/svg/common/InformationCircle.tsx b/packages/icons/common/src/InformationCircle.tsx
similarity index 91%
rename from packages/icons/src/svg/common/InformationCircle.tsx
rename to packages/icons/common/src/InformationCircle.tsx
index 2785c23ea..63b9df0b9 100644
--- a/packages/icons/src/svg/common/InformationCircle.tsx
+++ b/packages/icons/common/src/InformationCircle.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const InformationCircle = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon
diff --git a/packages/icons/src/svg/common/ListBullet.tsx b/packages/icons/common/src/ListBullet.tsx
similarity index 92%
rename from packages/icons/src/svg/common/ListBullet.tsx
rename to packages/icons/common/src/ListBullet.tsx
index 7a76280ae..f6d68af88 100644
--- a/packages/icons/src/svg/common/ListBullet.tsx
+++ b/packages/icons/common/src/ListBullet.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const ListBullet = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon
diff --git a/packages/icons/src/svg/common/PencilSquare.tsx b/packages/icons/common/src/PencilSquare.tsx
similarity index 92%
rename from packages/icons/src/svg/common/PencilSquare.tsx
rename to packages/icons/common/src/PencilSquare.tsx
index f027fb8ea..761fbb7e0 100644
--- a/packages/icons/src/svg/common/PencilSquare.tsx
+++ b/packages/icons/common/src/PencilSquare.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const PencilSquare = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon
diff --git a/packages/icons/src/svg/common/PlusCircle.tsx b/packages/icons/common/src/PlusCircle.tsx
similarity index 89%
rename from packages/icons/src/svg/common/PlusCircle.tsx
rename to packages/icons/common/src/PlusCircle.tsx
index 460ee4022..ca9207e5c 100644
--- a/packages/icons/src/svg/common/PlusCircle.tsx
+++ b/packages/icons/common/src/PlusCircle.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const PlusCircle = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon
diff --git a/packages/icons/src/svg/common/PresentationChartBar.tsx b/packages/icons/common/src/PresentationChartBar.tsx
similarity index 92%
rename from packages/icons/src/svg/common/PresentationChartBar.tsx
rename to packages/icons/common/src/PresentationChartBar.tsx
index 5e5782348..877f17783 100644
--- a/packages/icons/src/svg/common/PresentationChartBar.tsx
+++ b/packages/icons/common/src/PresentationChartBar.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const PresentationChartBar = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon
diff --git a/packages/icons/src/svg/common/Warning.tsx b/packages/icons/common/src/Warning.tsx
similarity index 91%
rename from packages/icons/src/svg/common/Warning.tsx
rename to packages/icons/common/src/Warning.tsx
index 3349ea124..035bf339f 100644
--- a/packages/icons/src/svg/common/Warning.tsx
+++ b/packages/icons/common/src/Warning.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const Warning = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon
diff --git a/packages/icons/src/svg/common/XCircle.tsx b/packages/icons/common/src/XCircle.tsx
similarity index 89%
rename from packages/icons/src/svg/common/XCircle.tsx
rename to packages/icons/common/src/XCircle.tsx
index 5c573969c..374ca08cb 100644
--- a/packages/icons/src/svg/common/XCircle.tsx
+++ b/packages/icons/common/src/XCircle.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const XCircle = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon
diff --git a/packages/icons/src/svg/common/XMark.tsx b/packages/icons/common/src/XMark.tsx
similarity index 88%
rename from packages/icons/src/svg/common/XMark.tsx
rename to packages/icons/common/src/XMark.tsx
index 831d122f4..2c345f917 100644
--- a/packages/icons/src/svg/common/XMark.tsx
+++ b/packages/icons/common/src/XMark.tsx
@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Icon, IconProps } from '../../Icon';
+import { Icon, IconProps } from '@just_testing13/icon';
 
 const XMark = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
   <Icon
diff --git a/packages/icons/src/svg/common/index.ts b/packages/icons/common/src/index.ts
similarity index 88%
rename from packages/icons/src/svg/common/index.ts
rename to packages/icons/common/src/index.ts
index 94ef00075..ea0f05b2e 100644
--- a/packages/icons/src/svg/common/index.ts
+++ b/packages/icons/common/src/index.ts
@@ -16,3 +16,5 @@ export { PresentationChartBar } from './PresentationChartBar';
 export { Warning } from './Warning';
 export { XCircle } from './XCircle';
 export { XMark } from './XMark';
+export { Icon } from '@just_testing13/icon';
+export type { IconProps, IconSize } from '@just_testing13/icon';
diff --git a/packages/icons/src/stories/common.stories.tsx b/packages/icons/common/src/stories/index.stories.tsx
similarity index 92%
rename from packages/icons/src/stories/common.stories.tsx
rename to packages/icons/common/src/stories/index.stories.tsx
index dbfcd4454..19b08f8e1 100644
--- a/packages/icons/src/stories/common.stories.tsx
+++ b/packages/icons/common/src/stories/index.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { Icon, IconProps } from '@just_testing13/icon';
 
-import * as SVGS from '../svg/common';
-import { Icon, IconProps } from '../Icon';
+import * as SVGS from '../';
 
 export const Default: StoryObj<IconProps> = {
   args: {
diff --git a/packages/icons/common/tsconfig.json b/packages/icons/common/tsconfig.json
new file mode 100644
index 000000000..f61004816
--- /dev/null
+++ b/packages/icons/common/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": { "baseUrl": ".", "declaration": false },
+  "include": ["src"]
+}
diff --git a/packages/icons/common/tsup.config.ts b/packages/icons/common/tsup.config.ts
new file mode 100644
index 000000000..fd2bba042
--- /dev/null
+++ b/packages/icons/common/tsup.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  clean: true,
+  target: 'es2019',
+  format: ['cjs', 'esm'],
+  banner: { js: '"use client";' }
+});
diff --git a/packages/icons/core/package.json b/packages/icons/core/package.json
new file mode 100644
index 000000000..6433ae7bb
--- /dev/null
+++ b/packages/icons/core/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@just_testing13/icon",
+  "version": "0.0.0",
+  "main": "src/index.ts",
+  "private": true,
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "sideEffects": false,
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --ext ts,tsx --fix"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "styled-components": ">=6.0.0"
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.26",
+    "clean-package": "^2.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.0.7"
+  },
+  "dependencies": {
+    "@just_testing13/theme": "workspace:*"
+  }
+}
diff --git a/packages/icons/src/Icon.tsx b/packages/icons/core/src/index.tsx
similarity index 100%
rename from packages/icons/src/Icon.tsx
rename to packages/icons/core/src/index.tsx
diff --git a/packages/icons/core/tsconfig.json b/packages/icons/core/tsconfig.json
new file mode 100644
index 000000000..f61004816
--- /dev/null
+++ b/packages/icons/core/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": { "baseUrl": ".", "declaration": false },
+  "include": ["src"]
+}
diff --git a/packages/icons/core/tsup.config.ts b/packages/icons/core/tsup.config.ts
new file mode 100644
index 000000000..fd2bba042
--- /dev/null
+++ b/packages/icons/core/tsup.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  clean: true,
+  target: 'es2019',
+  format: ['cjs', 'esm'],
+  banner: { js: '"use client";' }
+});
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
deleted file mode 100644
index cc92b8e5a..000000000
--- a/packages/icons/src/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { Icon } from './Icon';
-export type { IconProps, IconSize } from './Icon';
-export * from './svg';
diff --git a/packages/icons/src/svg/coin/index.ts b/packages/icons/src/svg/coin/index.ts
deleted file mode 100644
index bca99087e..000000000
--- a/packages/icons/src/svg/coin/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './common';
-export * from './polkadot';
diff --git a/packages/icons/src/svg/index.ts b/packages/icons/src/svg/index.ts
deleted file mode 100644
index 9eb41f45a..000000000
--- a/packages/icons/src/svg/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './coin';
-export * from './common';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 07272a900..93062bc9d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -120,12 +120,15 @@ importers:
 
   packages/components:
     dependencies:
+      '@just_testing13/coin-icons':
+        specifier: workspace:*
+        version: link:../icons/coin
       '@just_testing13/hooks':
         specifier: workspace:*
         version: link:../hooks
       '@just_testing13/icons':
         specifier: workspace:*
-        version: link:../icons
+        version: link:../icons/common
       '@just_testing13/theme':
         specifier: workspace:*
         version: link:../theme
@@ -276,11 +279,43 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
 
-  packages/icons:
+  packages/icons/coin:
+    dependencies:
+      '@just_testing13/icon':
+        specifier: workspace:*
+        version: link:../core
+    devDependencies:
+      clean-package:
+        specifier: ^2.2.0
+        version: 2.2.0
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+
+  packages/icons/common:
+    dependencies:
+      '@just_testing13/icon':
+        specifier: workspace:*
+        version: link:../core
+    devDependencies:
+      clean-package:
+        specifier: ^2.2.0
+        version: 2.2.0
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+
+  packages/icons/core:
     dependencies:
       '@just_testing13/theme':
         specifier: workspace:*
-        version: link:../theme
+        version: link:../../theme
     devDependencies:
       '@types/styled-components':
         specifier: ^5.1.26
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 18ec407ef..96d3bf7fa 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,2 +1,3 @@
 packages:
   - 'packages/*'
+  - 'packages/**/**'