From 8c4120383de97d9703f4cf60563f499f3a7839d9 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 21 Aug 2023 12:17:11 +0300
Subject: [PATCH 01/14] feat: replace green and red checkmarks

---
 public/icons/checkmark-circle-green.png   | Bin 541 -> 0 bytes
 public/icons/remove-circle-red.png        | Bin 486 -> 0 bytes
 src/components/General/IconText.tsx       |   6 +++---
 src/components/General/StatusIconText.tsx |   4 ++--
 src/constants.ts                          |   3 ---
 5 files changed, 5 insertions(+), 8 deletions(-)
 delete mode 100644 public/icons/checkmark-circle-green.png
 delete mode 100644 public/icons/remove-circle-red.png

diff --git a/public/icons/checkmark-circle-green.png b/public/icons/checkmark-circle-green.png
deleted file mode 100644
index af6880d1437bf3fe063894de2202b2073236a9d6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 541
zcmV+&0^<FNP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0kTO%K~#7Ft&>4c
z!cY)~XWpxgy5b0U0wBS}op=KE1j0t*l8wr$bcLS4sEgtaxPf(NBE)h6IRZu^Nc-M6
z4=ffeZgf`do6bMq`)3O9$H271;%&2pBy#{dZ{7*9Z$<j<@uc4WRiNZKnc-y9BZLy7
zZV`%L`Vr|o5grHtUn+8wLUVzgt7cY7yeFb|WRKmT;tqb0U0*r~R1WP?A<m09$;A$L
zX?3dgT3WH8>r~HN64<sT>)rx^=^hHa?^e&ZASGhDaBWlo$bc12UO?%?&Pm;$5=53b
zLP2d<5iy-13o5k%w{4-soXJ@;lPIf&@Y9O7Z<=LIQ0i9C=5(5LPXg{Pc#ynn5}oB8
zrD+dV#Fu~w%&5%MFkJVF*UiQP`qKObik#Vv`4vd19!O~9J;#m4P?Ky}@%Ca@Yse<i
z<KQbFgla}LB`|IR3E!G*I;NX4Ny1DTx}np&P%)JiCnDRf$nfKtKX~O`Xz)=1mb`fj
zHyT8+uhh5j!Yb$4G{$!XyAC{7MbI<n5+O$<%3SO#`@ND}wA7!;2w7$~c)U|H*<=Y2
fJRP4tz<<XltXbV2@(0Tj00000NkvXXu0mjf+`{P)

diff --git a/public/icons/remove-circle-red.png b/public/icons/remove-circle-red.png
deleted file mode 100644
index 6b102d88bd733cbbcda0f33b5d03e7517ff36821..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 486
zcmV<C0U7>@P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0eeYAK~#7Fty8g1
z0znX++0$H(iq;Sl_yRC7c%ADPNF~<^UjlrA@e6>CXd!>#+7T>-FMx!cwpb{+Gwe9a
z<t_*aB>I}o&d$DlGxHYUkHAgAiR(#=C{F~1C_>{<h<2{m8E+*R$x_<>w3`GV38`ff
z3`~5EP!ND6CRCxo#xhYt@aB41B6`$7-7hC><WzUM`kL=v)qt=PI>E`>xnC?d{URsq
z!0TE0hVvfcy@+3DEi%);YwRKj9EWpIPEI|U5NNHhiKW9H$f?#85n7f-d9y!=!k7gj
z1xY!ZO9@lqt*KpW90JmLqF@;#SxLjMudg?Dp@1a~cywmwZ6lG_t-TP!c!b7@f;r+4
z2`a`1updgsSP8*#ucHu9*&p`KG5W4oH-?JMbPyi|DW_`BW-orxd(ZSc_0@|;-Qmox
zbF(kmjTdqJhn0;Vw5FQz#A2*k45OlT9@&AMtb$ZfU2f*a&lC|EZ(w$DpZ^4c9vnU2
cKf!<F8;$p<6G)zRKmY&$07*qoM6N<$f<wN^=l}o!

diff --git a/src/components/General/IconText.tsx b/src/components/General/IconText.tsx
index c65979e9..6f6e8119 100644
--- a/src/components/General/IconText.tsx
+++ b/src/components/General/IconText.tsx
@@ -1,9 +1,9 @@
 import { XStack } from 'tamagui'
-import Icon from './Icon'
 import { Text } from '@status-im/components'
+import { ReactNode } from 'react'
 
 type IconTextProps = {
-  icon: string
+  icon: ReactNode
   children: string
   weight?: 'regular' | 'medium' | 'semibold'
 }
@@ -16,7 +16,7 @@ const IconText = ({ icon, children, weight }: IconTextProps) => {
       }}
       space={'$2'}
     >
-      <Icon src={icon} />
+      {icon}
       <Text size={13} color={'#000000'} weight={weight}>
         {children}
       </Text>
diff --git a/src/components/General/StatusIconText.tsx b/src/components/General/StatusIconText.tsx
index 7954b318..e1f43490 100644
--- a/src/components/General/StatusIconText.tsx
+++ b/src/components/General/StatusIconText.tsx
@@ -1,4 +1,4 @@
-import { GREEN_CHECKMARK_ICON, RED_CHECKMARK_ICON } from '../../constants'
+import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
 import IconText from './IconText'
 
 type StatusIconTextProps = {
@@ -10,7 +10,7 @@ type StatusIconTextProps = {
 
 const StatusIconText = ({ percentage, threshold, goodText, badText }: StatusIconTextProps) => {
   const isGood = percentage < threshold
-  const icon = isGood ? GREEN_CHECKMARK_ICON : RED_CHECKMARK_ICON
+  const icon = isGood ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />
   const text = isGood ? goodText : badText
 
   return <IconText icon={icon}>{text}</IconText>
diff --git a/src/constants.ts b/src/constants.ts
index 2467e6ef..0967460f 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,6 +1,3 @@
-export const GREEN_CHECKMARK_ICON = '/icons/checkmark-circle-green.png'
-export const RED_CHECKMARK_ICON = '/icons/remove-circle-red.png'
-
 export const GOOD_STORAGE_TEXT =
   'You have plenty of storage available for additional node services.'
 export const GOOD_CPU_CLOCK_RATE_TEXT = '2.4GHz is recommended for CPU.'

From 9ff09dedba08613698b59fc100416e3f5b00e36e Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 21 Aug 2023 12:34:51 +0300
Subject: [PATCH 02/14] feat: replace alert and check circle

---
 public/icons/alert.png                        | Bin 499 -> 0 bytes
 public/icons/check-circle.png                 | Bin 446 -> 0 bytes
 src/components/Charts/DeviceCPULoad.tsx       |   5 +++--
 src/components/Charts/DeviceMemoryHealth.tsx  |   5 ++++-
 src/components/Charts/DeviceNetworkHealth.tsx |   5 ++++-
 src/components/Charts/DeviceStorageHealth.tsx |   3 ++-
 6 files changed, 13 insertions(+), 5 deletions(-)
 delete mode 100644 public/icons/alert.png
 delete mode 100644 public/icons/check-circle.png

diff --git a/public/icons/alert.png b/public/icons/alert.png
deleted file mode 100644
index 149dff5bf29fc95b53ace2e8d63704833422f3eb..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 499
zcmV<P0Sx|$P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0f<RNK~#7FjZ?u*
z!$1(6Jtv5#KM3+7C8PtA3OK+>{5V7b&_PTGPyyymB-}xu13E}PC?X&^{CMPi?3yGv
zwqvo9b-umbx!svPpvETJv`5<bbum;*3QSiyoD)Giz+VK-;1FAjn^qi+^YJRbc@Ip;
zj-ey?3S_oYuPq-DX~zeufe~L2R#qU%yt$I#oyYqZRJFv_dBBqe?plK=TmekZOk2${
zQbgT+@-#5Rl-IpM)LUzjt7LzVL7uY~Jc~Z}7!_}J(tE)qiI-S-`s2VsD@9SMX2Ogd
z#wEYQ1E1*(AYqw=?S@t5zzvo*@yd&z9AECM?`_oUOyxF~HcRbS_QPZ)pTWf;{%Jxa
ztCq-r#sTXdTR2k;oSvG_+lkRdzeh|U57r7G6;c2#$oW9$&~FkBinp`hq&$^bi_3$L
z!1P($YyOTFQdO2NgT$oY?hc}LfE-B3(nXfIs`;;ksfSL3GTo(}aG6{J$ZnCT<iTQ)
pwa3I|$1*FM#=O$xDT~&1F+UdIp!NlUt<wMi002ovPDHLkV1jUv*8~6n

diff --git a/public/icons/check-circle.png b/public/icons/check-circle.png
deleted file mode 100644
index e42c84fb9ad1e977553e23688b6101bda183c38c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 446
zcmV;v0YUzWP)<h;3K|Lk000e1NJLTq000mG000pP1^@s6)UPbW00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0aHmtK~#7Ft&_1%
z!!Qs)?+if#LFvQ-gT>UbBMeB%#K3@%SSpa9U(j#h4`71LWk5^_7@3H~4|HTfm_G=x
zrIL@kwuwxXgi7=l%g()L`z{9fXJFZ)zBgKd+6PB%o+hBsI&hEnplfRdEe3~#1_;73
zF#+_QqBCEF1^Ah>G}HtkScep45|w?J1|IFmIf`?&G0j}Cd1p?ifqzLFs+S7@u~!E)
zf(5wTj$mVH*^^Kx<NU<fu7huOcBO#uIZVA{Kq%Kx(lQ^AU9PqwSYgnIk6xbO+ZTvq
zEm)NkB>v(TC#|zYKxt7GEb+c~{GqrV31`N>K!CqsA{gW~AjCK;iZ2mC89Xilp36Au
z0{^BLJlNt@s$dq|x5Ja`Tp-s7Qi_U_D%g#4As0xzcDi;V>DSP)z_wHJ7W`=48l49G
o8j&<ln_Q#;EzUhi)nV5015u2h-$(!Ho&W#<07*qoM6N<$g1jlU4gdfE

diff --git a/src/components/Charts/DeviceCPULoad.tsx b/src/components/Charts/DeviceCPULoad.tsx
index e481b904..9d4b6821 100644
--- a/src/components/Charts/DeviceCPULoad.tsx
+++ b/src/components/Charts/DeviceCPULoad.tsx
@@ -2,6 +2,7 @@ import StandartLineChart from './StandardLineChart'
 import IconText from '../General/IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
 import { Shadow, Text } from '@status-im/components'
+import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
 
 type DataPoint = {
   x: number
@@ -49,7 +50,7 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
           justifyContent="space-between"
           style={{
             padding: '8px 16px',
-            position: 'relative', // Make XStack a positioning context
+            position: 'relative',
           }}
         >
           <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
@@ -67,7 +68,7 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
         <Separator borderColor={'#e3e3e3'} />
         <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
           <IconText
-            icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}
+            icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
             weight={'semibold'}
           >
             {message}
diff --git a/src/components/Charts/DeviceMemoryHealth.tsx b/src/components/Charts/DeviceMemoryHealth.tsx
index 444674c8..1dbfc560 100644
--- a/src/components/Charts/DeviceMemoryHealth.tsx
+++ b/src/components/Charts/DeviceMemoryHealth.tsx
@@ -3,6 +3,7 @@ import StandartLineChart from './StandardLineChart'
 import IconText from '../General/IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
 import { Shadow as ShadowBox, Text } from '@status-im/components'
+import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
 
 type DataPoint = {
   x: number
@@ -70,7 +71,9 @@ const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProp
         </XStack>
         <Separator borderColor={'#e3e3e3'} />
         <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
-          <IconText icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}>
+          <IconText
+            icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
+          >
             {message}
           </IconText>
           {message === 'Poor' && (
diff --git a/src/components/Charts/DeviceNetworkHealth.tsx b/src/components/Charts/DeviceNetworkHealth.tsx
index 2dbfdb51..3604fb8b 100644
--- a/src/components/Charts/DeviceNetworkHealth.tsx
+++ b/src/components/Charts/DeviceNetworkHealth.tsx
@@ -2,6 +2,7 @@ import StandartLineChart from './StandardLineChart'
 import IconText from '../General/IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
 import { Shadow as ShadowBox, Text } from '@status-im/components'
+import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
 
 type DataPoint = {
   x: number
@@ -75,7 +76,9 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
         </XStack>
         <Separator borderColor={'#e3e3e3'} />
         <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
-          <IconText icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}>
+          <IconText
+            icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
+          >
             {message}
           </IconText>
           {message === 'Poor' && (
diff --git a/src/components/Charts/DeviceStorageHealth.tsx b/src/components/Charts/DeviceStorageHealth.tsx
index 6c6da6c5..4ff8ccca 100644
--- a/src/components/Charts/DeviceStorageHealth.tsx
+++ b/src/components/Charts/DeviceStorageHealth.tsx
@@ -2,6 +2,7 @@ import IconText from '../General/IconText'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
 import StandardGauge from './StandardGauge'
 import { Shadow, Text } from '@status-im/components'
+import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
 interface DeviceStorageHealthProps {
   storage: number
   maxStorage: number
@@ -69,7 +70,7 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
         <Separator borderColor={'#e3e3e3'} />
         <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
           <IconText
-            icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}
+            icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
             weight={'semibold'}
           >
             {message}

From 7c86d7a412dc078341a990227021fc51be30705c Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 21 Aug 2023 12:36:57 +0300
Subject: [PATCH 03/14] feat: replace close icon

---
 public/icons/close.png                            | Bin 427 -> 0 bytes
 src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx |   4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 delete mode 100644 public/icons/close.png

diff --git a/public/icons/close.png b/public/icons/close.png
deleted file mode 100644
index 454b44071982979d17c5ef07799775d7b27e7a7e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 427
zcmV;c0aX5pP)<h;3K|Lk000e1NJLTq000aC000aK1^@s6R&`wG00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0YFJaK~#7FeNsD4
z!$1(7Sw3}c0676BP?!!wLx(v5wt&=jO(GP6>$nD@m=h%2fFqa_B)LIE1%h~Z<76dU
zNQ`88ci+sLd2g4g5>a&5_@HgyknHGQNZyBOcT&w^yJ$y!zaSoAnXf;MV<u@7M6oU8
zO7a+t8Gx|LcpW8U^zwmSXi-^k6D3oy<Y4m+OYk`8zO2sg10gdK;!Lq0`fhGqfgPAT
zOgr9zdpZ}Q?C{8&wOnssla=5(?etpi$r-cxG)%mQf;VM+N^il$VIiE^WZO-3vGA^;
zKe43$!a(dCf2TULGTTn=xPNIKgGD(9@P3oFrVurOxS%dN0fE43239z5scEvbx4>bj
z$qH0vwwf}v72CLWaVxjX0G$?QZ33)zq#Rem+Qro_Dt<V}n<zC2o7qynUUdqK{{rzq
VmGHcVS&0Au002ovPDHLkV1j~2t-b&N

diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
index 4bb9d649..8da4f36c 100644
--- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
+++ b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
@@ -6,9 +6,9 @@ import DeviceStorageHealth from '../../components/Charts/DeviceStorageHealth'
 import DeviceCPULoad from '../../components/Charts/DeviceCPULoad'
 import HealthInfoSection from '../../components/General/HealthInfoSection'
 import { Button, InformationBox } from '@status-im/components'
-import Icon from '../../components/General/Icon'
 import DeviceMemory from '../../components/Charts/DeviceMemoryHealth'
 import DeviceNetworkHealth from '../../components/Charts/DeviceNetworkHealth'
+import { CloseCircleIcon } from '@status-im/icons'
 
 const DeviceHealthCheck = () => {
   return (
@@ -45,7 +45,7 @@ const DeviceHealthCheck = () => {
           networkLatency={75}
         />
         <InformationBox
-          icon={<Icon src="/icons/close.png" width={11} height={11} />}
+          icon={<CloseCircleIcon size={20} />}
           message="The information provided in the Nodes Health Check is meant to utilized as a guide to guage the readiness of your device, however please do your own due diligence prior to commiting any funds. Read our Health Check Disclosure for more information."
         />
         <Stack style={{ marginTop: '1rem' }}>

From 2f5086002a4c7b609cb3cd09696ae3953948ae01 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 21 Aug 2023 12:43:19 +0300
Subject: [PATCH 04/14] feat: replace reveal icon

---
 public/icons/reveal.png           | Bin 557 -> 0 bytes
 src/components/General/Titles.tsx |   4 ++--
 2 files changed, 2 insertions(+), 2 deletions(-)
 delete mode 100644 public/icons/reveal.png

diff --git a/public/icons/reveal.png b/public/icons/reveal.png
deleted file mode 100644
index 36bc9e757f56a0f25194c7fcdd640e9a19b80e53..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 557
zcmV+|0@D47P)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0m4Z{K~#7F?NVJ%
z!axw7*;>MzcmlYAaD#FKIf2DsLgGskpZp=E5#u9$G>TGBpq`-h1bT#e0{fsZwe30s
zEiMEM@tH4~>|}TL+i$-afDM+RYuPo9b!u_dLC3l<=-8&TPEk>g0)f)I8TKC5BJ5gM
zwFJ^Jr3PP?D7>=Bf;hz;iLxps?jcB%!qXseu3aZwNyua=WPS!22-M8m;pq$STb4ah
z=(<kCt4Vbl)d{L2(xyr(7Re;YD21d^kkQxspP+wmbgaRU_dNF`Od)PaK&svHRexuM
zDWs3AEP?N)mn%86E=~3kQ5YFuo5fDOWl|^NS|&|EAI}l8iVT1hCNnYysof>QCsup!
zo_Xvkd9+`gPf4{FrFBwoDGD)SGs^%A9YgX?Djmj%6{$7Ko$cwJ9Q1-uOGW*1J~}>)
ziJ3`w=bSoi-sL01&H94UEBiij&l__dlJqvcUfBZOH}kHJ++IM7n@RMTjPm|GneOMl
zw|;-6VAVJj52(r!#F)u)-@~PZ3aMQTFE#5~fCx2+qZmqt0Le`;C<0Q}_Wl}d6$dmj
v%H;_p05|WA#;9M+>A!GvJg9QO2FvgR%VX(=u#)xT00000NkvXXu0mjfZ`|##

diff --git a/src/components/General/Titles.tsx b/src/components/General/Titles.tsx
index 29aaae53..fdc9662c 100644
--- a/src/components/General/Titles.tsx
+++ b/src/components/General/Titles.tsx
@@ -1,7 +1,7 @@
 import { XStack, YStack } from 'tamagui'
 import { Button, Text } from '@status-im/components'
-import Icon from './Icon'
 import Title from './Title'
+import { RevealIcon } from '@status-im/icons'
 
 type TitlesProps = {
   title: string
@@ -15,7 +15,7 @@ const Titles = ({ title, subtitle, isAdvancedSettings }: TitlesProps) => {
       <XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
         <Title color={'#09101C'}>{title}</Title>
         {isAdvancedSettings && (
-          <Button size={32} variant="outline" icon={<Icon src={'/icons/reveal.png'} />}>
+          <Button size={32} variant="outline" icon={<RevealIcon size={20} />}>
             Advanced Settings
           </Button>
         )}

From d120f9b7de4e41a5bae70b431ca9dee34944964e Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 21 Aug 2023 12:56:30 +0300
Subject: [PATCH 05/14] fix: replace token icons

---
 public/icons/token.svg                                 | 10 ----------
 src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx |  3 ++-
 src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx |  3 ++-
 3 files changed, 4 insertions(+), 12 deletions(-)
 delete mode 100644 public/icons/token.svg

diff --git a/public/icons/token.svg b/public/icons/token.svg
deleted file mode 100644
index cf171b59..00000000
--- a/public/icons/token.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="16/token" clip-path="url(#clip0_101_177067)">
-<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M2.0999 8.00002C2.0999 4.74154 4.74142 2.10002 7.9999 2.10002C11.2584 2.10002 13.8999 4.74154 13.8999 8.00002C13.8999 11.2585 11.2584 13.9 7.9999 13.9C4.74142 13.9 2.0999 11.2585 2.0999 8.00002ZM7.9999 0.900024C4.07868 0.900024 0.899902 4.0788 0.899902 8.00002C0.899902 11.9212 4.07868 15.1 7.9999 15.1C11.9211 15.1 15.0999 11.9212 15.0999 8.00002C15.0999 4.0788 11.9211 0.900024 7.9999 0.900024ZM7.31034 5.76572C7.64449 5.59963 8.00358 5.55901 8.34841 5.64132C8.69532 5.72413 9.03172 5.93274 9.30682 6.26287L10.2287 5.49464C9.80453 4.98565 9.25002 4.62282 8.62702 4.47411L8.59999 4.46781V3.50007H7.39999V4.46782C7.18648 4.5165 6.97733 4.59119 6.77622 4.69115C6.19937 4.97788 5.7242 5.45404 5.3971 6.04147C5.07015 6.62866 4.89999 7.30995 4.89999 8.00008C4.89999 8.6902 5.07015 9.37149 5.3971 9.95868C5.7242 10.5461 6.19937 11.0223 6.77622 11.309C6.97725 11.4089 7.18632 11.4836 7.39975 11.5323V12.5001H8.59975V11.5324C8.60884 11.5303 8.61793 11.5282 8.62702 11.526C9.25002 11.3773 9.80453 11.0145 10.2287 10.5055L9.30682 9.73728C9.03172 10.0674 8.69532 10.276 8.34841 10.3588C8.00358 10.4411 7.64449 10.4005 7.31034 10.2344C6.97357 10.067 6.66784 9.77415 6.44553 9.3749C6.22308 8.97539 6.09999 8.49664 6.09999 8.00008C6.09999 7.50351 6.22308 7.02476 6.44553 6.62525C6.66784 6.226 6.97357 5.93312 7.31034 5.76572Z" fill="#647084"/>
-</g>
-<defs>
-<clipPath id="clip0_101_177067">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx b/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx
index d21f5ef0..040a1f58 100644
--- a/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx
+++ b/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx
@@ -4,6 +4,7 @@ import { Shadow, Text } from '@status-im/components'
 import Icon from '../../components/General/Icon'
 import StandardGauge from '../../components/Charts/StandardGauge'
 import IconText from '../../components/General/IconText'
+import { TokenIcon } from '@status-im/icons'
 
 interface DeviceStorageHealthProps {
   synced: number
@@ -71,7 +72,7 @@ const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, t
         <Separator borderColor={'#e3e3e3'} />
 
         <XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
-          <IconText icon="/icons/token.svg">{message}</IconText>
+          <IconText icon={<TokenIcon size={16} />}>{message}</IconText>
 
           <Text size={13}>
             {formatNumber(synced)} / {formatNumber(total)}
diff --git a/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx b/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx
index 355ecd19..457f7256 100644
--- a/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx
+++ b/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx
@@ -2,6 +2,7 @@ import { Separator, Stack, XStack, YStack } from 'tamagui'
 import { Shadow, Text } from '@status-im/components'
 import StandardGauge from '../../components/Charts/StandardGauge'
 import IconText from '../../components/General/IconText'
+import { TokenIcon } from '@status-im/icons'
 
 interface DeviceStorageHealthProps {
   synced: number
@@ -72,7 +73,7 @@ const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, t
         <Separator borderColor={'#e3e3e3'} />
 
         <XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
-          <IconText icon="/icons/token.svg">{message}</IconText>
+          <IconText icon={<TokenIcon size={16} />}>{message}</IconText>
 
           <Text size={13}>
             {' '}

From b297085a9e8a6846fa9a1cb24126ea30eadfbe0a Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 21 Aug 2023 14:07:42 +0300
Subject: [PATCH 06/14] fix: remove and use status icons for connect device

---
 src/components/Icons/ConnectIcon.tsx          | 18 ------
 src/components/Icons/CreateIcon.tsx           | 16 -----
 src/components/Icons/NodeIcon.tsx             | 34 -----------
 src/components/Icons/PairIcon.tsx             | 61 -------------------
 .../ConnectDevicePage/ConnectDevicePage.tsx   | 13 ++--
 5 files changed, 5 insertions(+), 137 deletions(-)
 delete mode 100644 src/components/Icons/ConnectIcon.tsx
 delete mode 100644 src/components/Icons/CreateIcon.tsx
 delete mode 100644 src/components/Icons/NodeIcon.tsx
 delete mode 100644 src/components/Icons/PairIcon.tsx

diff --git a/src/components/Icons/ConnectIcon.tsx b/src/components/Icons/ConnectIcon.tsx
deleted file mode 100644
index 530659a7..00000000
--- a/src/components/Icons/ConnectIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-function ConnectIcon() {
-  return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g id="20/connection">
-        <path
-          id="body"
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M9.99978 1.8999C8.21669 1.8999 6.48343 2.48826 5.06881 3.57374C3.6542 4.65921 2.63728 6.18114 2.17578 7.90347L3.33489 8.21405C3.72802 6.74688 4.59428 5.45043 5.79933 4.52576C7.00437 3.6011 8.48086 3.0999 9.99978 3.0999C11.5187 3.0999 12.9952 3.6011 14.2002 4.52577C15.4053 5.45043 16.2715 6.74688 16.6647 8.21405L17.8238 7.90347C17.3623 6.18114 16.3454 4.65922 14.9307 3.57374C13.5161 2.48827 11.7829 1.8999 9.99978 1.8999ZM9.99988 4.9C8.87719 4.9 7.78588 5.27045 6.8952 5.9539C6.00451 6.63734 5.36423 7.59559 5.07366 8.68002L6.23277 8.9906C6.45497 8.16133 6.9446 7.42856 7.62571 6.90592C8.30682 6.38329 9.14136 6.1 9.99988 6.1C10.8584 6.1 11.6929 6.38329 12.374 6.90592C13.0552 7.42856 13.5448 8.16134 13.767 8.99061L14.9261 8.68002C14.6355 7.59559 13.9952 6.63735 13.1046 5.9539C12.2139 5.27045 11.1226 4.9 9.99988 4.9ZM9.99988 10.1C8.95054 10.1 8.09988 10.9507 8.09988 12C8.09988 13.0493 8.95054 13.9 9.99988 13.9C11.0492 13.9 11.8999 13.0493 11.8999 12C11.8999 10.9507 11.0492 10.1 9.99988 10.1ZM6.89988 12C6.89988 10.2879 8.2878 8.9 9.99988 8.9C11.712 8.9 13.0999 10.2879 13.0999 12C13.0999 13.5068 12.0248 14.7625 10.5999 15.042V17.5H9.39988V15.042C7.97494 14.7625 6.89988 13.5068 6.89988 12Z"
-          fill="#1B273D"
-          fillOpacity="0.7"
-        />
-      </g>
-    </svg>
-  )
-}
-
-export default ConnectIcon
diff --git a/src/components/Icons/CreateIcon.tsx b/src/components/Icons/CreateIcon.tsx
deleted file mode 100644
index 07a051b9..00000000
--- a/src/components/Icons/CreateIcon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-function CreateIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-      <circle cx="10" cy="10" r="7.5" stroke="#1B273D" strokeOpacity="0.7" strokeWidth="1.2" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10.6 9.4V6.5H9.4V9.4L6.5 9.4V10.6L9.4 10.6V13.5H10.6V10.6L13.5 10.6L13.5 9.4L10.6 9.4Z"
-        fill="#1B273D"
-        fillOpacity="0.7"
-      />
-    </svg>
-  )
-}
-
-export default CreateIcon
diff --git a/src/components/Icons/NodeIcon.tsx b/src/components/Icons/NodeIcon.tsx
deleted file mode 100644
index 9c25f8fa..00000000
--- a/src/components/Icons/NodeIcon.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-function NodeIcon() {
-  return (
-    <span>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-      >
-        <g clipPath="url(#clip0_760_1602)">
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M4.9999 2.60002C3.67442 2.60002 2.5999 3.67454 2.5999 5.00002C2.5999 6.32551 3.67442 7.40002 4.9999 7.40002C6.32539 7.40002 7.3999 6.32551 7.3999 5.00002C7.3999 3.67454 6.32539 2.60002 4.9999 2.60002ZM1.3999 5.00002C1.3999 3.0118 3.01168 1.40002 4.9999 1.40002C6.98813 1.40002 8.5999 3.0118 8.5999 5.00002C8.5999 5.77749 8.35345 6.4974 7.9344 7.08587L9.48712 8.63859C10.4478 7.86383 11.6697 7.4 13 7.4C16.0928 7.4 18.6 9.90721 18.6 13C18.6 16.0928 16.0928 18.6 13 18.6C9.9072 18.6 7.4 16.0928 7.4 13C7.4 11.6697 7.86383 10.4478 8.63859 9.48712L7.08589 7.93442C6.49739 8.35353 5.77743 8.60002 4.9999 8.60002C3.01168 8.60002 1.3999 6.98825 1.3999 5.00002ZM8.6 13C8.6 10.5699 10.5699 8.6 13 8.6C15.4301 8.6 17.4 10.5699 17.4 13C17.4 15.4301 15.4301 17.4 13 17.4C10.5699 17.4 8.6 15.4301 8.6 13Z"
-            fill="white"
-            fillOpacity="0.7"
-          />
-          <path
-            d="M7.9344 7.08587L7.52711 6.79585C7.3855 6.99472 7.40821 7.26679 7.58085 7.43943L7.9344 7.08587ZM9.48712 8.63859L9.13357 8.99215C9.31425 9.17283 9.6021 9.18821 9.801 9.0278L9.48712 8.63859ZM8.63859 9.48712L9.0278 9.801C9.18821 9.6021 9.17283 9.31425 8.99215 9.13357L8.63859 9.48712ZM7.08589 7.93442L7.43945 7.58087C7.26681 7.40823 6.99472 7.38552 6.79585 7.52715L7.08589 7.93442ZM3.0999 5.00002C3.0999 3.95068 3.95056 3.10002 4.9999 3.10002V2.10002C3.39828 2.10002 2.0999 3.3984 2.0999 5.00002H3.0999ZM4.9999 6.90002C3.95056 6.90002 3.0999 6.04937 3.0999 5.00002H2.0999C2.0999 6.60165 3.39828 7.90002 4.9999 7.90002V6.90002ZM6.8999 5.00002C6.8999 6.04937 6.04924 6.90002 4.9999 6.90002V7.90002C6.60153 7.90002 7.8999 6.60165 7.8999 5.00002H6.8999ZM4.9999 3.10002C6.04924 3.10002 6.8999 3.95068 6.8999 5.00002H7.8999C7.8999 3.3984 6.60153 2.10002 4.9999 2.10002V3.10002ZM4.9999 0.900024C2.73553 0.900024 0.899902 2.73566 0.899902 5.00002H1.8999C1.8999 3.28794 3.28782 1.90002 4.9999 1.90002V0.900024ZM9.0999 5.00002C9.0999 2.73566 7.26427 0.900024 4.9999 0.900024V1.90002C6.71198 1.90002 8.0999 3.28794 8.0999 5.00002H9.0999ZM8.34169 7.3759C8.81905 6.70553 9.0999 5.88483 9.0999 5.00002H8.0999C8.0999 5.67015 7.88784 6.28926 7.52711 6.79585L8.34169 7.3759ZM9.84068 8.28504L8.28795 6.73232L7.58085 7.43943L9.13357 8.99215L9.84068 8.28504ZM9.801 9.0278C10.676 8.32213 11.788 7.9 13 7.9V6.9C11.5514 6.9 10.2196 7.40554 9.17324 8.24939L9.801 9.0278ZM13 7.9C15.8167 7.9 18.1 10.1833 18.1 13H19.1C19.1 9.63106 16.3689 6.9 13 6.9V7.9ZM18.1 13C18.1 15.8167 15.8167 18.1 13 18.1V19.1C16.3689 19.1 19.1 16.3689 19.1 13H18.1ZM13 18.1C10.1833 18.1 7.9 15.8167 7.9 13H6.9C6.9 16.3689 9.63106 19.1 13 19.1V18.1ZM7.9 13C7.9 11.788 8.32213 10.676 9.0278 9.801L8.24939 9.17324C7.40554 10.2196 6.9 11.5514 6.9 13H7.9ZM6.73234 8.28798L8.28504 9.84068L8.99215 9.13357L7.43945 7.58087L6.73234 8.28798ZM4.9999 9.10002C5.88478 9.10002 6.70554 8.81913 7.37594 8.3417L6.79585 7.52715C6.28924 7.88793 5.67008 8.10002 4.9999 8.10002V9.10002ZM0.899902 5.00002C0.899902 7.26439 2.73553 9.10002 4.9999 9.10002V8.10002C3.28782 8.10002 1.8999 6.71211 1.8999 5.00002H0.899902ZM13 8.1C10.2938 8.1 8.1 10.2938 8.1 13H9.1C9.1 10.8461 10.8461 9.1 13 9.1V8.1ZM17.9 13C17.9 10.2938 15.7062 8.1 13 8.1V9.1C15.1539 9.1 16.9 10.8461 16.9 13H17.9ZM13 17.9C15.7062 17.9 17.9 15.7062 17.9 13H16.9C16.9 15.1539 15.1539 16.9 13 16.9V17.9ZM8.1 13C8.1 15.7062 10.2938 17.9 13 17.9V16.9C10.8461 16.9 9.1 15.1539 9.1 13H8.1Z"
-            fill="white"
-          />
-        </g>
-        <defs>
-          <clipPath id="clip0_760_1602">
-            <rect width="20" height="20" fill="white" />
-          </clipPath>
-        </defs>
-      </svg>
-    </span>
-  )
-}
-
-export default NodeIcon
diff --git a/src/components/Icons/PairIcon.tsx b/src/components/Icons/PairIcon.tsx
deleted file mode 100644
index 51a93aef..00000000
--- a/src/components/Icons/PairIcon.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-function PairIcon() {
-  return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M13.4517 10.8951L16.952 6.89508L17.2978 6.49996L16.952 6.10484L13.4517 2.10489L12.5486 2.89514L15.7032 6.49997L12.5486 10.1049L13.4517 10.8951ZM6.5487 9.10488L3.0484 13.1049L2.70264 13.5001L3.0484 13.8952L6.5487 17.8951L7.45176 17.1049L4.29722 13.5L7.45176 9.89512L6.5487 9.10488Z"
-        fill="#1B273D"
-        fillOpacity="0.7"
-      />
-      <rect
-        x="4"
-        y="7.5"
-        width="2"
-        height="12"
-        transform="rotate(-90 4 7.5)"
-        fill="url(#paint0_linear_760_2959)"
-      />
-      <g mask="url(#mask0_760_2959)">
-        <path d="M4.5 6.50006L16 6.50006" stroke="#1B273D" strokeOpacity="0.7" strokeWidth="1.2" />
-      </g>
-      <rect
-        x="16"
-        y="12.5"
-        width="2"
-        height="12"
-        transform="rotate(90 16 12.5)"
-        fill="url(#paint1_linear_760_2959)"
-      />
-      <g mask="url(#mask1_760_2959)">
-        <path d="M15.5 13.4999L4 13.4999" stroke="#1B273D" strokeOpacity="0.7" strokeWidth="1.2" />
-      </g>
-      <defs>
-        <linearGradient
-          id="paint0_linear_760_2959"
-          x1="5"
-          y1="8"
-          x2="5"
-          y2="13.5"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#09101C" stopOpacity="0" />
-          <stop offset="1" stopColor="#09101C" />
-        </linearGradient>
-        <linearGradient
-          id="paint1_linear_760_2959"
-          x1="17"
-          y1="13"
-          x2="17"
-          y2="18.5"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#09101C" stopOpacity="0" />
-          <stop offset="1" stopColor="#09101C" />
-        </linearGradient>
-      </defs>
-    </svg>
-  )
-}
-
-export default PairIcon
diff --git a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx
index e9b22cc1..0e429721 100644
--- a/src/pages/ConnectDevicePage/ConnectDevicePage.tsx
+++ b/src/pages/ConnectDevicePage/ConnectDevicePage.tsx
@@ -5,11 +5,8 @@ import { Label, Separator, XStack, YStack } from 'tamagui'
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import NimbusLogo from '../../components/Logos/NimbusLogo'
 import Titles from '../../components/General/Titles'
-import NodeIcon from '../../components/Icons/NodeIcon'
-import ConnectIcon from '../../components/Icons/ConnectIcon'
-import PairIcon from '../../components/Icons/PairIcon'
-import CreateIcon from '../../components/Icons/CreateIcon'
 import LabelInputField from '../../components/General/LabelInputField'
+import { AddSmallIcon, ConnectionIcon, NodeIcon, SwapIcon } from '@status-im/icons'
 
 const ConnectDevicePage = () => {
   const [autoConnectChecked, setAutoConnectChecked] = useState(false)
@@ -24,9 +21,9 @@ const ConnectDevicePage = () => {
         <XStack justifyContent={'space-between'}>
           <NimbusLogo />
           <XStack space={'$2'} alignItems="center">
-            <Tag icon={ConnectIcon} label="Connect" size={32} selected />
-            <Tag icon={PairIcon} label="Pair" size={32} />
-            <Tag icon={CreateIcon} label="Create" size={32} />
+            <Tag icon={ConnectionIcon} label="Connect" size={32} selected />
+            <Tag icon={SwapIcon} label="Pair" size={32} />
+            <Tag icon={AddSmallIcon} label="Create" size={32} />
           </XStack>
         </XStack>
         <article className="content">
@@ -105,7 +102,7 @@ const ConnectDevicePage = () => {
             </XStack>
             <Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
           </section>
-          <StatusButton icon={<NodeIcon />}>Connect Device</StatusButton>
+          <StatusButton icon={<NodeIcon size={20} />}>Connect Device</StatusButton>
         </article>
       </div>
     </PageWrapperShadow>

From f136c8b54eb6e72e48e7cad496ce589fe07543cc Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 21 Aug 2023 14:41:33 +0300
Subject: [PATCH 07/14] fix: delete reaction icon

---
 src/components/Icons/ReactionIcon.tsx | 16 ----------------
 1 file changed, 16 deletions(-)
 delete mode 100644 src/components/Icons/ReactionIcon.tsx

diff --git a/src/components/Icons/ReactionIcon.tsx b/src/components/Icons/ReactionIcon.tsx
deleted file mode 100644
index 74a71de2..00000000
--- a/src/components/Icons/ReactionIcon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-function ReactionIcon() {
-  return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g id="20/reaction">
-        <path
-          id="body"
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M9.2416 3.15729C10.5065 2.96514 11.7973 3.25797 12.9173 4.00409L13.5826 3.0054C12.2242 2.10051 10.6337 1.73206 9.06137 1.9709C7.49044 2.20954 6.04779 3.03734 4.9503 4.30368C3.8539 5.56876 3.15891 7.20428 2.95938 8.95297C2.75985 10.7017 3.06503 12.4813 3.83416 14.0184C4.60352 15.556 5.80023 16.7757 7.25373 17.4704C8.70989 18.1663 10.3311 18.2901 11.8595 17.8176C13.3854 17.3458 14.7159 16.312 15.6563 14.8979C16.5962 13.4846 17.0999 11.763 17.0999 9.99994H15.8999C15.8999 10.2934 15.8839 10.585 15.8524 10.8732C15.8428 10.8931 15.8307 10.9166 15.816 10.943C15.7594 11.0449 15.6664 11.185 15.5256 11.3258C15.2556 11.5958 14.7804 11.9 13.9499 11.9C13.1194 11.9 12.6442 11.5958 12.3742 11.3258C12.2334 11.185 12.1404 11.0449 12.0838 10.943C12.0556 10.8924 12.0372 10.8524 12.0268 10.8281C12.0216 10.8161 12.0185 10.8081 12.0173 10.8048L12.0169 10.8037L12.0177 10.806L12.0183 10.8079L12.0187 10.809L12.0189 10.8096C12.019 10.81 12.0191 10.8103 11.4499 11C10.8807 11.1898 10.8808 11.1901 10.8809 11.1905L10.8812 11.1912L10.8817 11.1927L10.8829 11.1963L10.8859 11.205L10.8947 11.2289C10.9018 11.2477 10.9114 11.2719 10.9238 11.3008C10.9486 11.3586 10.9848 11.4358 11.0348 11.5258C11.1344 11.7052 11.2914 11.94 11.5256 12.1743C12.0056 12.6542 12.7804 13.1 13.9499 13.1C14.514 13.1 14.9863 12.9963 15.3779 12.8351C15.1868 13.3304 14.9453 13.8001 14.6571 14.2334C13.8554 15.4389 12.7433 16.2883 11.505 16.6712C10.2691 17.0533 8.95894 16.9554 7.77119 16.3877C6.58079 15.8187 5.56884 14.8035 4.90732 13.4814C4.24558 12.159 3.97764 10.614 4.15165 9.08901C4.32565 7.56394 4.92997 6.15939 5.85712 5.08959C6.78319 4.02105 7.97527 3.34966 9.2416 3.15729ZM10.4999 8.49994C11.0522 8.49994 11.4999 7.82836 11.4999 6.99994C11.4999 6.17151 11.0522 5.49993 10.4999 5.49993C9.94762 5.49993 9.49991 6.17151 9.49991 6.99994C9.49991 7.82836 9.94762 8.49994 10.4999 8.49994ZM16.9999 6.99994C16.9999 7.82836 16.5522 8.49994 15.9999 8.49994C15.4476 8.49994 14.9999 7.82836 14.9999 6.99994C14.9999 6.17151 15.4476 5.49993 15.9999 5.49993C16.5522 5.49993 16.9999 6.17151 16.9999 6.99994Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  )
-}
-export default ReactionIcon

From b16ee6665220809cc9f14b757a7b4684352399ba Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 21 Aug 2023 14:52:38 +0300
Subject: [PATCH 08/14] fix: replace reaction icon

---
 src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx | 7 +++----
 src/pages/PairDevice/CreateAvatar.tsx                 | 9 +++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
index dcc4b61f..f569b550 100644
--- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
+++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.tsx
@@ -5,10 +5,9 @@ import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import NimbusLogo from '../../components/Logos/NimbusLogo'
 import TagContainer from '../../components/General/TagContainer'
 import Titles from '../../components/General/Titles'
-import NodeIcon from '../../components/Icons/NodeIcon'
 import LabelInputField from '../../components/General/LabelInputField'
-import ReactionIcon from '../../components/Icons/ReactionIcon'
 import ColorPicker from '../../components/General/ColorPicker'
+import { NodeIcon, ReactionIcon } from '@status-im/icons'
 
 const CreateLocalNodePage = () => {
   const [autoConnectChecked, setAutoConnectChecked] = useState(false)
@@ -36,7 +35,7 @@ const CreateLocalNodePage = () => {
                 </Text>
                 <XStack my={10}>
                   <Avatar type="account" size={80} name="Device Avatar" />
-                  <Avatar type="icon" size={32} icon={<ReactionIcon />} backgroundColor={'white'} />
+                  <ReactionIcon size={20} />
                 </XStack>
               </YStack>
               <YStack>
@@ -66,7 +65,7 @@ const CreateLocalNodePage = () => {
             </XStack>
             <Separator alignSelf="stretch" borderColor={'#F0F2F5'} />
           </YStack>
-          <StatusButton icon={<NodeIcon />}>Continue</StatusButton>
+          <StatusButton icon={<NodeIcon size={16} />}>Continue</StatusButton>
         </article>
       </div>
     </PageWrapperShadow>
diff --git a/src/pages/PairDevice/CreateAvatar.tsx b/src/pages/PairDevice/CreateAvatar.tsx
index c55f7b1e..d23c9127 100644
--- a/src/pages/PairDevice/CreateAvatar.tsx
+++ b/src/pages/PairDevice/CreateAvatar.tsx
@@ -2,10 +2,9 @@ import { XStack, YStack } from 'tamagui'
 import LabelInputField from '../../components/General/LabelInputField'
 import { Avatar, Text } from '@status-im/components'
 import ColorPicker from '../../components/General/ColorPicker'
+import { ReactionIcon } from '@status-im/icons'
 
-import ReactionIcon from '../../components/Icons/ReactionIcon'
-// create func component
-export const CreateAvatar = () => {
+const CreateAvatar = () => {
   return (
     <YStack my={16}>
       <XStack space>
@@ -18,7 +17,7 @@ export const CreateAvatar = () => {
           </Text>
           <XStack my={10}>
             <Avatar type="account" size={80} name="Device Avatar" />
-            <Avatar type="icon" size={32} icon={<ReactionIcon />} backgroundColor={'white'} />
+            <ReactionIcon size={20} />
           </XStack>
         </YStack>
         <YStack>
@@ -31,3 +30,5 @@ export const CreateAvatar = () => {
     </YStack>
   )
 }
+
+export default CreateAvatar

From 1ef443f87e57e234a93e46921fb59b53b7c000d1 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 21 Aug 2023 15:21:09 +0300
Subject: [PATCH 09/14] fix: landing page node icon

---
 src/pages/LandingPage/LandingPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx
index 733fe697..31f55911 100644
--- a/src/pages/LandingPage/LandingPage.tsx
+++ b/src/pages/LandingPage/LandingPage.tsx
@@ -3,9 +3,9 @@ import './LandingPage.css'
 import QuickStartBar from '../../components/General/QuickStartBar/QuickStartBar'
 import Titles from '../../components/General/Titles'
 import { Button as StatusButton } from '@status-im/components'
-import NodeIcon from '../../components/Icons/NodeIcon'
 import NimbusLogo from '../../components/Logos/NimbusLogo'
 import { XStack, YStack } from 'tamagui'
+import { NodeIcon } from '@status-im/icons'
 
 function LandingPage() {
   return (
@@ -21,7 +21,7 @@ function LandingPage() {
               subtitle="Nimbus Nodes allows you to take control and ownership of the services you wish to run in a completely trustless and decentralized manner."
             />
             <XStack>
-              <StatusButton icon={<NodeIcon />}>Get Started</StatusButton>
+              <StatusButton icon={<NodeIcon size={20} />}>Get Started</StatusButton>
             </XStack>
           </YStack>
         </div>

From 502241fb63c18c8ef6c5972e4fea07026d520019 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 22 Aug 2023 09:26:37 +0300
Subject: [PATCH 10/14] fix: replace existing icons after merge from mein

---
 src/components/General/TagContainer.tsx           |  7 +++----
 src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx |  3 +--
 src/pages/PairDevice/PairDevice.tsx               | 14 ++++++--------
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/components/General/TagContainer.tsx b/src/components/General/TagContainer.tsx
index 42dbfd0d..4b11be71 100644
--- a/src/components/General/TagContainer.tsx
+++ b/src/components/General/TagContainer.tsx
@@ -1,14 +1,13 @@
 import { Tag } from '@status-im/components'
 import { XStack } from 'tamagui'
-import PairIcon from '../Icons/PairIcon'
-import CreateIcon from '../Icons/CreateIcon'
 import './TagContainer.css'
+import { AddSmallIcon, SwapIcon } from '@status-im/icons'
 
 const TagContainer = () => {
   return (
     <XStack space={'$2'} alignItems="center" className="tag-container">
-      <Tag icon={PairIcon} label="Pair" size={32} />
-      <Tag selected icon={CreateIcon} label="Create" size={32} />
+      <Tag icon={SwapIcon} label="Pair" size={32} />
+      <Tag selected icon={AddSmallIcon} label="Create" size={32} />
     </XStack>
   )
 }
diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
index 8422dbbb..5454b378 100644
--- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
+++ b/src/pages/DeviceHealthCheck/DeviceHealthCheck.tsx
@@ -13,9 +13,8 @@ import { useSelector } from 'react-redux'
 import { RootState } from '../../redux/store'
 
 const DeviceHealthCheck = () => {
- 
   const deviceHealthState = useSelector((state: RootState) => state.deviceHealth)
-  console.log(deviceHealthState)
+
   return (
     <PageWrapperShadow rightImageSrc="/background-images/eye-background.png">
       <YStack
diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx
index 21696fee..dc7643b7 100644
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/src/pages/PairDevice/PairDevice.tsx
@@ -5,18 +5,16 @@ import { Button, Checkbox, Tag, Text } from '@status-im/components'
 import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
 import SyncStatus from './SyncStatus'
 import NimbusLogo from '../../components/Logos/NimbusLogo'
-import PairIcon from '../../components/Icons/PairIcon'
-import CreateIcon from '../../components/Icons/CreateIcon'
-import NodeIcon from '../../components/Icons/NodeIcon'
 import Titles from '../../components/General/Titles'
 import PairedSuccessfully from './PairedSuccessfully'
-import { CreateAvatar } from './CreateAvatar'
+import CreateAvatar from './CreateAvatar'
 import GenerateId from './GenerateId'
+import { AddSmallIcon, NodeIcon, SwapIcon } from '@status-im/icons'
 
 const PairDevice = () => {
   const [autoChecked, setAutoChecked] = useState(false)
   const [isAwaitingPairing, setIsAwaitingPairing] = useState(false)
-  const isPaired = false
+  const isPaired = true
   const isPairing = true
 
   const changeSetIsAwaitingPairing = (result: boolean) => {
@@ -34,8 +32,8 @@ const PairDevice = () => {
         <XStack style={{ justifyContent: 'space-between' }}>
           <NimbusLogo />
           <XStack space={'$2'} style={{ alignItems: 'center' }}>
-            <Tag icon={PairIcon} label="Pair" size={32} selected />
-            <Tag icon={CreateIcon} label="Create" size={32} />
+            <Tag icon={SwapIcon} label="Pair" size={32} selected />
+            <Tag icon={AddSmallIcon} label="Create" size={32} />
           </XStack>
         </XStack>
         <Titles title="Pair Device" subtitle="Pair your device to the Nimbus Node Manager" />
@@ -66,7 +64,7 @@ const PairDevice = () => {
         {isPaired && <CreateAvatar></CreateAvatar>}
         <Separator borderColor={'#e3e3e3'} />
         <XStack>
-          <Button icon={<NodeIcon />} disabled={!isPaired}>
+          <Button icon={<NodeIcon size={20} />} disabled={!isPaired}>
             Continue
           </Button>
         </XStack>

From 9da0cad3e69434c7f8e417a85f26e099549d3c62 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 22 Aug 2023 09:31:05 +0300
Subject: [PATCH 11/14] fix: remove block and set close icon

---
 public/icons/block.svg              | 10 ----------
 src/pages/PairDevice/PairDevice.tsx |  2 +-
 src/pages/PairDevice/SyncStatus.tsx |  4 ++--
 3 files changed, 3 insertions(+), 13 deletions(-)
 delete mode 100644 public/icons/block.svg

diff --git a/public/icons/block.svg b/public/icons/block.svg
deleted file mode 100644
index 4a98b7a2..00000000
--- a/public/icons/block.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="16/placeholder" clip-path="url(#clip0_1311_16617)">
-<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M0.900146 7.9999C0.900146 4.07868 4.07892 0.899902 8.00015 0.899902C11.9214 0.899902 15.1001 4.07868 15.1001 7.9999C15.1001 11.9211 11.9214 15.0999 8.00015 15.0999C4.07893 15.0999 0.900146 11.9211 0.900146 7.9999ZM8.00015 2.0999C6.58695 2.0999 5.2898 2.59676 4.27385 3.42531L7.99995 7.15142L11.7262 3.42514C10.7103 2.59669 9.41325 2.0999 8.00015 2.0999ZM12.5748 4.27366L8.84848 7.99995L12.5747 11.7262C13.4033 10.7103 13.9001 9.4131 13.9001 7.9999C13.9001 6.58673 13.4033 5.2896 12.5748 4.27366ZM7.15143 7.99995L3.42534 4.27387C2.59692 5.28978 2.10015 6.58683 2.10015 7.9999C2.10015 9.413 2.59693 10.7101 3.42539 11.726L7.15143 7.99995ZM4.2739 12.5745L7.99995 8.84848L11.7262 12.5747C10.7103 13.4031 9.41322 13.8999 8.00015 13.8999C6.58697 13.8999 5.28984 13.4031 4.2739 12.5745Z" fill="#E95460"/>
-</g>
-<defs>
-<clipPath id="clip0_1311_16617">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx
index dc7643b7..393a4d07 100644
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/src/pages/PairDevice/PairDevice.tsx
@@ -14,7 +14,7 @@ import { AddSmallIcon, NodeIcon, SwapIcon } from '@status-im/icons'
 const PairDevice = () => {
   const [autoChecked, setAutoChecked] = useState(false)
   const [isAwaitingPairing, setIsAwaitingPairing] = useState(false)
-  const isPaired = true
+  const isPaired = false
   const isPairing = true
 
   const changeSetIsAwaitingPairing = (result: boolean) => {
diff --git a/src/pages/PairDevice/SyncStatus.tsx b/src/pages/PairDevice/SyncStatus.tsx
index 763239e8..d18631e3 100644
--- a/src/pages/PairDevice/SyncStatus.tsx
+++ b/src/pages/PairDevice/SyncStatus.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react'
 import { XStack, YStack } from 'tamagui'
 import { Button, IconButton, InformationBox, Text } from '@status-im/components'
+import { CloseCircleIcon } from '@status-im/icons'
 
 import Icon from '../../components/General/Icon'
 import RefreshBlackIcon from '/icons/refresh-black.svg'
 import RefreshIcon from '/icons/refresh.svg'
-import BlockIcon from '/icons/block.svg'
 import ConnectionIcon from '/icons/connection.svg'
 import { convertSecondsToTimerFormat } from '../../utilities'
 
@@ -79,7 +79,7 @@ const SyncStatus = ({
         <InformationBox
           message="No connection has been created to a Nimbus service for over 3 minutes. Please ensure that the generated pairing ID was input into the CLI. If you are unable to pair device, consider connect via IP.   "
           variant="error"
-          icon={<Icon src={BlockIcon} />}
+          icon={<CloseCircleIcon size={20} />}
         />
       )}
       {isAwaitingPairing && (

From 2320fb4866059d02fc97affc95dd63f91ff2d220 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 22 Aug 2023 09:38:11 +0300
Subject: [PATCH 12/14] fix: delete refresh icons

---
 public/icons/refresh-black.svg      | 6 ------
 public/icons/refresh.svg            | 5 -----
 src/pages/PairDevice/PairDevice.tsx | 2 +-
 3 files changed, 1 insertion(+), 12 deletions(-)
 delete mode 100644 public/icons/refresh-black.svg
 delete mode 100644 public/icons/refresh.svg

diff --git a/public/icons/refresh-black.svg b/public/icons/refresh-black.svg
deleted file mode 100644
index feb66937..00000000
--- a/public/icons/refresh-black.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g id="20/refresh">
-    <path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M12.6404 3.62514C11.2371 3.04387 9.68124 2.94189 8.21407 3.33502C6.7469 3.72814 5.45045 4.59441 4.52578 5.79945C3.60112 7.0045 3.09992 8.48098 3.09992 9.99991C3.09992 11.5188 3.60112 12.9953 4.52578 14.2004C5.45045 15.4054 6.7469 16.2717 8.21407 16.6648C9.68124 17.0579 11.2371 16.9559 12.6404 16.3747C14.0437 15.7934 15.216 14.7653 15.9755 13.4499L17.0147 14.0499C16.1232 15.5941 14.747 16.801 13.0997 17.4833C11.4523 18.1657 9.62582 18.2854 7.90349 17.8239C6.18116 17.3624 4.65923 16.3455 3.57376 14.9309C2.48828 13.5163 1.89992 11.783 1.89992 9.99991C1.89992 8.21682 2.48828 6.48356 3.57376 5.06894C4.65923 3.65432 6.18116 2.6374 7.90349 2.17591C9.62582 1.71441 11.4523 1.83412 13.0997 2.51648C14.166 2.95819 15.1188 3.61967 15.9 4.45017L15.9 2.99978L17.1 2.99979L17.1 6.49979L17.0999 7.09979H16.5L13 7.09979V5.89979L15.5496 5.89979C14.8075 4.89526 13.8033 4.1068 12.6404 3.62514Z" fill="#09101C"/>
-    </g>
-    </svg>
-    
\ No newline at end of file
diff --git a/public/icons/refresh.svg b/public/icons/refresh.svg
deleted file mode 100644
index ead09ed3..00000000
--- a/public/icons/refresh.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="20/refresh">
-<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M12.6404 3.62514C11.2371 3.04387 9.68124 2.94189 8.21407 3.33502C6.7469 3.72814 5.45045 4.59441 4.52578 5.79945C3.60112 7.0045 3.09992 8.48098 3.09992 9.99991C3.09992 11.5188 3.60112 12.9953 4.52578 14.2004C5.45045 15.4054 6.7469 16.2717 8.21407 16.6648C9.68124 17.0579 11.2371 16.9559 12.6404 16.3747C14.0437 15.7934 15.216 14.7653 15.9755 13.4499L17.0147 14.0499C16.1232 15.5941 14.747 16.801 13.0997 17.4833C11.4523 18.1657 9.62582 18.2854 7.90349 17.8239C6.18116 17.3624 4.65923 16.3455 3.57376 14.9309C2.48828 13.5163 1.89992 11.783 1.89992 9.99991C1.89992 8.21682 2.48828 6.48356 3.57376 5.06894C4.65923 3.65432 6.18116 2.6374 7.90349 2.17591C9.62582 1.71441 11.4523 1.83412 13.0997 2.51648C14.166 2.95819 15.1188 3.61967 15.9 4.45017L15.9 2.99978L17.1 2.99979L17.1 6.49979L17.0999 7.09979H16.5L13 7.09979V5.89979L15.5496 5.89979C14.8075 4.89526 13.8033 4.1068 12.6404 3.62514Z" fill="#A1ABBD"/>
-</g>
-</svg>
diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx
index 393a4d07..2d97f1cc 100644
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/src/pages/PairDevice/PairDevice.tsx
@@ -15,7 +15,7 @@ const PairDevice = () => {
   const [autoChecked, setAutoChecked] = useState(false)
   const [isAwaitingPairing, setIsAwaitingPairing] = useState(false)
   const isPaired = false
-  const isPairing = true
+  const isPairing = false
 
   const changeSetIsAwaitingPairing = (result: boolean) => {
     setIsAwaitingPairing(result)

From afa54e395096f3ef450d34914eea1e1308bcfe50 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 22 Aug 2023 09:48:49 +0300
Subject: [PATCH 13/14] feat: use new icon and disable it

---
 src/pages/PairDevice/SyncStatus.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/PairDevice/SyncStatus.tsx b/src/pages/PairDevice/SyncStatus.tsx
index d18631e3..e7c689a6 100644
--- a/src/pages/PairDevice/SyncStatus.tsx
+++ b/src/pages/PairDevice/SyncStatus.tsx
@@ -4,10 +4,9 @@ import { Button, IconButton, InformationBox, Text } from '@status-im/components'
 import { CloseCircleIcon } from '@status-im/icons'
 
 import Icon from '../../components/General/Icon'
-import RefreshBlackIcon from '/icons/refresh-black.svg'
-import RefreshIcon from '/icons/refresh.svg'
 import ConnectionIcon from '/icons/connection.svg'
 import { convertSecondsToTimerFormat } from '../../utilities'
+import { RefreshIcon } from '@status-im/icons'
 
 type SyncStatusProps = {
   isPairing: boolean
@@ -61,9 +60,10 @@ const SyncStatus = ({
           </Text>
         )}
         <IconButton
-          icon={<Icon src={isPairing ? RefreshBlackIcon : RefreshIcon} />}
+          icon={<RefreshIcon size={16} />}
           onPress={resetTimer}
           variant="ghost"
+          disabled={!isPairing}
         />
       </XStack>
       {isPairing ? (

From 7acdd1553a11988ba947fc583ac0aa0056ce896f Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 22 Aug 2023 09:57:19 +0300
Subject: [PATCH 14/14] fix: leave self closing tag

---
 src/pages/PairDevice/PairDevice.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/PairDevice/PairDevice.tsx b/src/pages/PairDevice/PairDevice.tsx
index aec5aa44..b19bb3fc 100644
--- a/src/pages/PairDevice/PairDevice.tsx
+++ b/src/pages/PairDevice/PairDevice.tsx
@@ -61,7 +61,7 @@ const PairDevice = () => {
           />
           <Text size={15}>Auto Connect Paired Device</Text>
         </XStack>
-        {isPaired && <CreateAvatar></CreateAvatar>}
+        {isPaired && <CreateAvatar />}
         <Separator borderColor={'#e3e3e3'} />
         <XStack>
           <Button icon={<NodeIcon size={20} />} disabled={!isPaired}>