From a5fdd22d51a2fc3f00d003eb11f77c967acbbe0f Mon Sep 17 00:00:00 2001
From: marcelines <marcio@status.im>
Date: Fri, 10 Feb 2023 16:25:13 +0000
Subject: [PATCH] Add blur and IconButton variants (#340)

* feat: add blurview to topbar and composer with scroll position

* fix: icon button component and adds scrolls var position for the top bar

* fix: changes from review
---
 apps/mobile/app.json                          |   2 +-
 apps/vite/package.json                        |   1 +
 apps/vite/src/app.tsx                         |  40 +++-
 apps/vite/styles/app.css                      |   8 +-
 eas.json                                      |  28 +++
 packages/components/hooks/index.ts            |   2 +
 packages/components/hooks/use-blur.ts         |  68 +++++++
 packages/components/hooks/use-throttle.ts     |  38 ++++
 .../components/src/accordion/accordion.tsx    |   1 +
 .../src/accordion/accordionItem.tsx           |   1 +
 packages/components/src/composer/composer.tsx | 109 ++++++++---
 packages/components/src/divider/divider.tsx   |   2 +-
 .../src/icon-button/icon-button.tsx           | 175 ++++++++++++++----
 packages/components/src/input/input.tsx       |  61 +++---
 .../src/messages/components/reactions.tsx     |   2 -
 packages/components/src/messages/index.tsx    |  16 ++
 packages/components/src/sidebar/sidebar.tsx   |   5 +-
 packages/components/src/tamagui.config.ts     |   8 +-
 packages/components/src/themes.ts             |  50 +++++
 packages/components/src/topbar/topbar.tsx     | 131 ++++++++-----
 packages/icons/12/add-icon.tsx                |   2 +-
 packages/icons/12/add-reaction-icon.tsx       |   2 +-
 packages/icons/12/alert-icon.tsx              |   2 +-
 packages/icons/12/arrow-down-icon.tsx         |   2 +-
 packages/icons/12/arrow-right-icon.tsx        |   2 +-
 packages/icons/12/arrow-up-icon.tsx           |   2 +-
 packages/icons/12/block-icon.tsx              |   4 +-
 packages/icons/12/camera-icon.tsx             |   2 +-
 packages/icons/12/cards-icon.tsx              |   2 +-
 packages/icons/12/check-icon.tsx              |   2 +-
 packages/icons/12/check-large-icon.tsx        |   2 +-
 packages/icons/12/chevron-bottom-icon.tsx     |   2 +-
 packages/icons/12/chevron-left-icon.tsx       |   2 +-
 packages/icons/12/chevron-right-icon.tsx      |   2 +-
 packages/icons/12/chevron-top-icon.tsx        |   2 +-
 packages/icons/12/close-icon.tsx              |   2 +-
 packages/icons/12/color-icon.tsx              |   2 +-
 packages/icons/12/communities-icon.tsx        |   2 +-
 packages/icons/12/contact-icon.tsx            |   6 +-
 packages/icons/12/copy-icon.tsx               |   2 +-
 packages/icons/12/delivered-icon.tsx          |   2 +-
 packages/icons/12/dropdown-icon.tsx           |   2 +-
 packages/icons/12/edit-icon.tsx               |   2 +-
 packages/icons/12/gas-icon.tsx                |   2 +-
 packages/icons/12/hold-icon.tsx               |   4 +-
 packages/icons/12/info-1-icon.tsx             |   2 +-
 packages/icons/12/info-icon.tsx               |   4 +-
 packages/icons/12/jump-to-icon.tsx            |   2 +-
 packages/icons/12/lightning-icon.tsx          |   2 +-
 packages/icons/12/list-icon.tsx               |   2 +-
 packages/icons/12/loading-icon.tsx            |   2 +-
 packages/icons/12/locked-icon.tsx             |   2 +-
 packages/icons/12/mention-icon.tsx            |   2 +-
 packages/icons/12/more-icon.tsx               |   2 +-
 packages/icons/12/negative-icon.tsx           |   4 +-
 packages/icons/12/notification-icon.tsx       |   4 +-
 packages/icons/12/pause-icon.tsx              |   2 +-
 packages/icons/12/pending-icon.tsx            |   4 +-
 packages/icons/12/pick-icon.tsx               |   2 +-
 packages/icons/12/placeholder-icon.tsx        |   2 +-
 packages/icons/12/play-icon.tsx               |   2 +-
 packages/icons/12/positive-icon.tsx           |   4 +-
 packages/icons/12/progress-icon.tsx           |   2 +-
 packages/icons/12/pullup-icon.tsx             |   2 +-
 packages/icons/12/remove-icon.tsx             |   4 +-
 packages/icons/12/search-icon.tsx             |   2 +-
 packages/icons/12/send-message-icon.tsx       |   4 +-
 packages/icons/12/sent-icon.tsx               |   2 +-
 packages/icons/12/timeout-icon.tsx            |   2 +-
 packages/icons/12/total-members-icon.tsx      |   2 +-
 packages/icons/12/trash-icon.tsx              |   2 +-
 packages/icons/12/unlocked-icon.tsx           |   2 +-
 packages/icons/12/untrustworthy-icon.tsx      |   4 +-
 packages/icons/12/verified-1-icon.tsx         |   2 +-
 packages/icons/12/verified-icon.tsx           |   4 +-
 packages/icons/12/whistle-icon.tsx            |   2 +-
 packages/icons/16/add-icon.tsx                |   2 +-
 packages/icons/16/add-user-icon.tsx           |   2 +-
 packages/icons/16/alert-icon.tsx              |   2 +-
 packages/icons/16/arrow-down-icon.tsx         |   2 +-
 packages/icons/16/arrow-right-icon.tsx        |   2 +-
 packages/icons/16/calendar-icon.tsx           |   2 +-
 packages/icons/16/check-circle-icon.tsx       |   2 +-
 packages/icons/16/chevron-down-icon.tsx       |   2 +-
 packages/icons/16/chevron-left-icon.tsx       |   2 +-
 packages/icons/16/chevron-right-icon.tsx      |   2 +-
 packages/icons/16/chevron-top-icon.tsx        |   2 +-
 packages/icons/16/close-icon.tsx              |   2 +-
 packages/icons/16/connection-icon.tsx         |   6 +-
 packages/icons/16/contact-book-icon.tsx       |   2 +-
 packages/icons/16/delete-icon.tsx             |   2 +-
 packages/icons/16/email-icon.tsx              |   2 +-
 packages/icons/16/forward-icon.tsx            |   6 +-
 packages/icons/16/gif-icon.tsx                |   2 +-
 packages/icons/16/group-icon.tsx              |   2 +-
 packages/icons/16/history-icon.tsx            |   6 +-
 packages/icons/16/info-icon.tsx               |   2 +-
 packages/icons/16/lightning-icon.tsx          |   2 +-
 packages/icons/16/locked-icon.tsx             |   2 +-
 packages/icons/16/mention-icon.tsx            |   2 +-
 packages/icons/16/more-icon.tsx               |   2 +-
 packages/icons/16/mute-icon.tsx               |   2 +-
 packages/icons/16/negative-icon.tsx           |   6 +-
 packages/icons/16/notification-icon.tsx       |   4 +-
 packages/icons/16/pin-icon.tsx                |   2 +-
 packages/icons/16/placeholder-icon.tsx        |   2 +-
 packages/icons/16/positive-icon.tsx           |   6 +-
 packages/icons/16/privacy-icon.tsx            |   4 +-
 packages/icons/16/progress-icon.tsx           |   2 +-
 packages/icons/16/remove-user-icon.tsx        |   2 +-
 packages/icons/16/sad-icon.tsx                |   2 +-
 packages/icons/16/stickers-icon.tsx           |   2 +-
 packages/icons/16/unlocked-icon.tsx           |   2 +-
 packages/icons/16/unmute-icon.tsx             |   2 +-
 packages/icons/16/world-icon.tsx              |   4 +-
 packages/icons/20/account-number-icon.tsx     |   2 +-
 packages/icons/20/active-member-icon.tsx      |   2 +-
 packages/icons/20/activity-center-icon.tsx    |   2 +-
 packages/icons/20/add-icon.tsx                |   2 +-
 packages/icons/20/add-reaction-icon.tsx       |   2 +-
 packages/icons/20/add-small-icon.tsx          |   2 +-
 packages/icons/20/add-token-icon.tsx          |   2 +-
 packages/icons/20/add-user-icon.tsx           |   2 +-
 packages/icons/20/alert-icon.tsx              |   2 +-
 packages/icons/20/alphabetically-icon.tsx     |   2 +-
 packages/icons/20/android-icon.tsx            |   2 +-
 packages/icons/20/anonymous-icon.tsx          |   4 +-
 packages/icons/20/arrow-down-icon.tsx         |   2 +-
 packages/icons/20/arrow-left-icon.tsx         |   2 +-
 packages/icons/20/arrow-right-icon.tsx        |   2 +-
 packages/icons/20/arrow-up-icon.tsx           |   2 +-
 packages/icons/20/attach-icon.tsx             |   2 +-
 packages/icons/20/audio-icon.tsx              |   2 +-
 packages/icons/20/automatic-icon.tsx          |   4 +-
 packages/icons/20/block-icon.tsx              |   2 +-
 packages/icons/20/bold-icon.tsx               |   2 +-
 packages/icons/20/bridge-icon.tsx             |   2 +-
 packages/icons/20/browser-icon.tsx            |   2 +-
 packages/icons/20/bullet-icon.tsx             |   2 +-
 packages/icons/20/bullet-list-icon.tsx        |   2 +-
 packages/icons/20/buy-icon.tsx                |   2 +-
 packages/icons/20/camera-icon.tsx             |   2 +-
 packages/icons/20/card-view-icon.tsx          |   2 +-
 packages/icons/20/centre-align-icon.tsx       |   2 +-
 packages/icons/20/chatkey-icon.tsx            |   2 +-
 packages/icons/20/check-icon.tsx              |   2 +-
 packages/icons/20/chevron-down-icon.tsx       |   2 +-
 packages/icons/20/chevron-left-icon.tsx       |   2 +-
 packages/icons/20/chevron-right-icon.tsx      |   2 +-
 packages/icons/20/chevron-up-icon.tsx         |   2 +-
 packages/icons/20/chevrons-left-icon.tsx      |   2 +-
 packages/icons/20/chevrons-right-icon.tsx     |   2 +-
 packages/icons/20/clear-icon.tsx              |   2 +-
 packages/icons/20/close-icon.tsx              |   2 +-
 packages/icons/20/code-block-icon.tsx         |   2 +-
 packages/icons/20/code-icon.tsx               |   2 +-
 packages/icons/20/collapse-icon.tsx           |   4 +-
 packages/icons/20/colour-pick-icon.tsx        |   2 +-
 packages/icons/20/communities-icon.tsx        |   2 +-
 packages/icons/20/connection-icon.tsx         |   6 +-
 packages/icons/20/contact-book-icon.tsx       |   2 +-
 packages/icons/20/contact-icon.tsx            |  10 +-
 packages/icons/20/copy-icon.tsx               |   2 +-
 packages/icons/20/correct-icon.tsx            |   6 +-
 packages/icons/20/crown-icon.tsx              |   2 +-
 packages/icons/20/customize-icon.tsx          |   2 +-
 packages/icons/20/dark-icon.tsx               |   4 +-
 packages/icons/20/data-usage-icon.tsx         |   2 +-
 packages/icons/20/delete-icon.tsx             |   2 +-
 packages/icons/20/desktop-icon.tsx            |   2 +-
 packages/icons/20/download-icon.tsx           |   2 +-
 packages/icons/20/dropdown-icon.tsx           |   2 +-
 packages/icons/20/duration-icon.tsx           |   2 +-
 packages/icons/20/edit-icon.tsx               |   2 +-
 packages/icons/20/email-icon.tsx              |   2 +-
 packages/icons/20/expand-icon.tsx             |   4 +-
 packages/icons/20/external-icon.tsx           |   2 +-
 packages/icons/20/face-id-icon.tsx            |   2 +-
 packages/icons/20/favourite-icon.tsx          |   2 +-
 packages/icons/20/file-icon.tsx               |   2 +-
 packages/icons/20/flag-icon.tsx               |   2 +-
 packages/icons/20/flash-icon.tsx              |   2 +-
 packages/icons/20/flash-off-icon.tsx          |   2 +-
 packages/icons/20/flashlight-off-icon.tsx     |   2 +-
 packages/icons/20/flashlight-on-icon.tsx      |   2 +-
 packages/icons/20/flip-icon.tsx               |   4 +-
 packages/icons/20/folder-icon.tsx             |   2 +-
 packages/icons/20/format-icon.tsx             |   2 +-
 packages/icons/20/forward-icon.tsx            |   2 +-
 packages/icons/20/friend-icon.tsx             |   2 +-
 packages/icons/20/gas-icon.tsx                |   2 +-
 packages/icons/20/gif-icon.tsx                |   2 +-
 packages/icons/20/globe-icon.tsx              |   2 +-
 packages/icons/20/hashtag-1-icon.tsx          |   2 +-
 packages/icons/20/hashtag-icon.tsx            |   2 +-
 packages/icons/20/heart-icon.tsx              |   2 +-
 packages/icons/20/help-icon.tsx               |   2 +-
 packages/icons/20/hide-icon.tsx               |   2 +-
 packages/icons/20/history-icon.tsx            |   6 +-
 packages/icons/20/hold-icon.tsx               |   2 +-
 packages/icons/20/image-icon.tsx              |   3 +-
 packages/icons/20/inactive-icon.tsx           |   4 +-
 packages/icons/20/info-badge-icon.tsx         |   6 +-
 packages/icons/20/info-icon.tsx               |   2 +-
 packages/icons/20/italic-icon.tsx             |   2 +-
 packages/icons/20/justify-icon.tsx            |   2 +-
 packages/icons/20/key-icon.tsx                |   6 +-
 packages/icons/20/keyboard-icon.tsx           |   2 +-
 packages/icons/20/keycard-icon.tsx            |   2 +-
 packages/icons/20/keycard-logo-icon.tsx       |   2 +-
 packages/icons/20/laptop-icon.tsx             |   2 +-
 packages/icons/20/left-align-icon.tsx         |   2 +-
 packages/icons/20/light-icon.tsx              |   6 +-
 packages/icons/20/link-icon.tsx               |   2 +-
 packages/icons/20/list-view-icon.tsx          |   2 +-
 packages/icons/20/loading-icon.tsx            |   2 +-
 packages/icons/20/locked-icon.tsx             |   2 +-
 packages/icons/20/log-out-icon.tsx            |   2 +-
 packages/icons/20/members-icon.tsx            |   2 +-
 packages/icons/20/mention-icon.tsx            |   2 +-
 packages/icons/20/menu-icon.tsx               |   2 +-
 packages/icons/20/messages-icon.tsx           |   2 +-
 packages/icons/20/mobile-icon.tsx             |   2 +-
 packages/icons/20/multi-profile-icon.tsx      |   2 +-
 packages/icons/20/muted-icon.tsx              |   2 +-
 packages/icons/20/mutual-contact-icon.tsx     |   6 +-
 packages/icons/20/new-message-icon.tsx        |   2 +-
 packages/icons/20/nft-icon.tsx                |   2 +-
 packages/icons/20/node-icon.tsx               |   2 +-
 packages/icons/20/notification-icon.tsx       |   4 +-
 packages/icons/20/notifications-icon.tsx      |   2 +-
 packages/icons/20/numbered-list-icon.tsx      |   2 +-
 packages/icons/20/online-icon.tsx             |   4 +-
 packages/icons/20/online-left-icon.tsx        |   4 +-
 packages/icons/20/options-icon.tsx            |   8 +-
 packages/icons/20/password-icon.tsx           |   2 +-
 packages/icons/20/pause-icon.tsx              |   2 +-
 packages/icons/20/pending-icon.tsx            |   2 +-
 packages/icons/20/pending-user-icon.tsx       |   2 +-
 packages/icons/20/pin-1-icon.tsx              |   2 +-
 packages/icons/20/pin-icon.tsx                |   2 +-
 packages/icons/20/placeholder-icon.tsx        |   2 +-
 packages/icons/20/play-icon.tsx               |   2 +-
 packages/icons/20/privacy-icon.tsx            |   4 +-
 packages/icons/20/profile-icon.tsx            |   2 +-
 packages/icons/20/pullup-icon.tsx             |   2 +-
 packages/icons/20/qr-code-icon.tsx            |   2 +-
 packages/icons/20/quarter-icon.tsx            |   2 +-
 packages/icons/20/reaction-icon.tsx           |   3 +-
 packages/icons/20/receive-icon.tsx            |   2 +-
 packages/icons/20/receive-message-icon.tsx    |   2 +-
 packages/icons/20/recent-icon.tsx             |   2 +-
 packages/icons/20/refresh-icon.tsx            |   4 +-
 packages/icons/20/remove-user-icon.tsx        |   2 +-
 packages/icons/20/reply-icon.tsx              |   2 +-
 packages/icons/20/reveal-icon.tsx             |   2 +-
 packages/icons/20/revere-icon.tsx             |   4 +-
 packages/icons/20/right-align-icon.tsx        |   2 +-
 packages/icons/20/rotate-icon.tsx             |   4 +-
 packages/icons/20/sad-icon.tsx                |   2 +-
 packages/icons/20/save-icon.tsx               |   2 +-
 packages/icons/20/scan-icon.tsx               |   2 +-
 packages/icons/20/search-icon.tsx             |   2 +-
 packages/icons/20/seed-icon.tsx               |   2 +-
 packages/icons/20/send-icon.tsx               |   2 +-
 packages/icons/20/send-message-icon.tsx       |   2 +-
 packages/icons/20/settings-icon.tsx           |   2 +-
 packages/icons/20/share-icon.tsx              |   2 +-
 packages/icons/20/signature-icon.tsx          |   2 +-
 packages/icons/20/sort-icon.tsx               |   2 +-
 packages/icons/20/speed-icon.tsx              |   2 +-
 packages/icons/20/status-icon.tsx             |   2 +-
 packages/icons/20/stickers-icon.tsx           |   2 +-
 packages/icons/20/stop-icon.tsx               |   2 +-
 packages/icons/20/strikethrough-icon.tsx      |   2 +-
 packages/icons/20/subscript-icon.tsx          |   2 +-
 packages/icons/20/superscript-icon.tsx        |   2 +-
 packages/icons/20/swap-icon.tsx               |   2 +-
 packages/icons/20/syncing-icon.tsx            |   2 +-
 packages/icons/20/toggle-icon.tsx             |   2 +-
 packages/icons/20/token-icon.tsx              |   2 +-
 packages/icons/20/unblock-icon.tsx            |   2 +-
 packages/icons/20/underline-icon.tsx          |   2 +-
 packages/icons/20/unlocked-icon.tsx           |   2 +-
 packages/icons/20/unread-icon.tsx             |   2 +-
 packages/icons/20/untrustworthy-icon.tsx      |   6 +-
 packages/icons/20/up-to-date-icon.tsx         |   2 +-
 packages/icons/20/verified-icon.tsx           |   6 +-
 packages/icons/20/video-icon.tsx              |   2 +-
 packages/icons/20/wallet-icon.tsx             |   2 +-
 packages/icons/20/warning-icon.tsx            |   2 +-
 packages/icons/20/world-icon.tsx              |   2 +-
 packages/icons/react-native-svg.d.ts          |   8 +
 packages/icons/tsconfig.json                  |   3 +-
 yarn.lock                                     |   6 +-
 295 files changed, 956 insertions(+), 485 deletions(-)
 create mode 100644 eas.json
 create mode 100644 packages/components/hooks/index.ts
 create mode 100644 packages/components/hooks/use-blur.ts
 create mode 100644 packages/components/hooks/use-throttle.ts
 create mode 100644 packages/icons/react-native-svg.d.ts

diff --git a/apps/mobile/app.json b/apps/mobile/app.json
index de9cecc1..ce29ee90 100644
--- a/apps/mobile/app.json
+++ b/apps/mobile/app.json
@@ -2,7 +2,7 @@
   "expo": {
     "name": "mobile",
     "slug": "status-poc",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
diff --git a/apps/vite/package.json b/apps/vite/package.json
index ce5345f2..e7298642 100644
--- a/apps/vite/package.json
+++ b/apps/vite/package.json
@@ -11,6 +11,7 @@
     "@status-im/components": "*",
     "@status-im/icons": "*",
     "@tamagui/core": "1.0.15",
+    "expo-blur": "~12.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-native-web": "^0.18.6"
diff --git a/apps/vite/src/app.tsx b/apps/vite/src/app.tsx
index e0853bc4..b6d560f8 100644
--- a/apps/vite/src/app.tsx
+++ b/apps/vite/src/app.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { cloneElement, useRef, useState } from 'react'
 
 import {
   Composer,
@@ -7,11 +7,15 @@ import {
   SidebarMembers,
   Topbar,
 } from '@status-im/components'
+import { useBlur } from '@status-im/components/hooks'
+import { COMMUNITIES } from '@status-im/components/src/sidebar/mock-data'
 import { Stack, styled, TamaguiProvider } from '@tamagui/core'
 import { AnimatePresence } from 'tamagui'
 
 import tamaguiConfig from '../tamagui.config'
 
+import type { ReactElement, ReactNode } from 'react'
+
 type ThemeVars = 'light' | 'dark'
 
 const AnimatableDrawer = styled(Stack, {
@@ -36,15 +40,28 @@ function App() {
   const [showMembers, setShowMembers] = useState(false)
 
   const [selectedChannel, setSelectedChannel] = useState<string>('welcome')
+  const refMessagesContainer = useRef<HTMLDivElement>(null)
 
-  const onChannelPress = (id: string) => {
+  // TODO - this is a hack to get the icon to show up in the topbar when a channel is selected on mount
+  const [icon, setIcon] = useState<ReactNode>(
+    cloneElement(COMMUNITIES[0].channels[0].icon as ReactElement, {
+      hasBackground: false,
+    })
+  )
+
+  const onChannelPress = (id: string, icon?: ReactNode) => {
     setSelectedChannel(id)
+    setIcon(icon)
   }
 
+  const { shouldBlurTop, shouldBlurBottom } = useBlur({
+    ref: refMessagesContainer,
+  })
+
   return (
     <TamaguiProvider config={tamaguiConfig} defaultTheme={'light'}>
       <div id="app">
-        <div id="sidebar">
+        <div id="sidebar" style={{ zIndex: 200 }}>
           <Sidebar
             name="Rarible"
             description="Multichain community-centric NFT marketplace. Create, buy and sell your NFTs."
@@ -55,15 +72,28 @@ function App() {
         </div>
         <main id="main">
           <Topbar
+            isBlurred={shouldBlurTop}
+            backgroundColor="$blurBackground"
+            icon={
+              icon &&
+              cloneElement(icon as ReactElement, { hasBackground: false })
+            }
             title={`#${selectedChannel}`}
             description="Share random funny stuff with the community. Play nice."
             membersVisisble={showMembers}
             onMembersPress={() => setShowMembers(show => !show)}
           />
-          <div id="content">
+
+          <div id="content" ref={refMessagesContainer}>
             <Messages />
           </div>
-          <Composer />
+
+          <Composer
+            backgroundColor="$blurBackground"
+            paddingBottom={56}
+            isBlurred={shouldBlurBottom}
+            style={{ marginTop: -112 }}
+          />
         </main>
         <AnimatePresence enterVariant="fromRight" exitVariant="fromLeft">
           {showMembers && (
diff --git a/apps/vite/styles/app.css b/apps/vite/styles/app.css
index 6a1f9316..ab34016c 100644
--- a/apps/vite/styles/app.css
+++ b/apps/vite/styles/app.css
@@ -29,6 +29,10 @@ body,
   border: 1px solid rgba(0, 0, 0, 0.1);
 } */
 
+.composer-input::placeholder {
+  transition: color 0.2s ease-in-out;
+}
+
 #sidebar {
   overflow: auto;
   height: 100vh;
@@ -36,7 +40,9 @@ body,
 
 #content {
   overflow: auto;
-  padding: 8px;
+  padding: 72px 8px 132px 8px;
+  height: 100vh;
+  margin-top: -56px;
 }
 
 #members {
diff --git a/eas.json b/eas.json
new file mode 100644
index 00000000..f42223e8
--- /dev/null
+++ b/eas.json
@@ -0,0 +1,28 @@
+{
+  "cli": {
+    "version": ">= 3.4.1"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal",
+      "ios": {
+        "resourceClass": "m1-medium"
+      }
+    },
+    "preview": {
+      "distribution": "internal",
+      "ios": {
+        "resourceClass": "m1-medium"
+      }
+    },
+    "production": {
+      "ios": {
+        "resourceClass": "m1-medium"
+      }
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}
diff --git a/packages/components/hooks/index.ts b/packages/components/hooks/index.ts
new file mode 100644
index 00000000..c5497c4e
--- /dev/null
+++ b/packages/components/hooks/index.ts
@@ -0,0 +1,2 @@
+export { useBlur } from './use-blur'
+export { useThrottle } from './use-throttle'
diff --git a/packages/components/hooks/use-blur.ts b/packages/components/hooks/use-blur.ts
new file mode 100644
index 00000000..0905ae93
--- /dev/null
+++ b/packages/components/hooks/use-blur.ts
@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react'
+
+import { useThrottle } from './use-throttle'
+
+interface UseBlurReturn {
+  shouldBlurBottom: boolean
+  shouldBlurTop: boolean
+}
+
+type UseBlurProps = {
+  ref: React.RefObject<HTMLDivElement>
+  marginBlurBottom?: number
+  heightTop?: number
+  throttle?: number
+}
+
+const useBlur = (props: UseBlurProps): UseBlurReturn => {
+  const {
+    marginBlurBottom = 32,
+    heightTop = 56,
+    throttle = 100,
+    ref,
+  } = props || {}
+
+  const [shouldBlurTop, setShouldBlurTop] = useState(false)
+  const [shouldBlurBottom, setShouldBlurBottom] = useState(false)
+
+  const handleScroll = useThrottle(() => {
+    const scrollPosition = ref.current!.scrollTop
+    const elementHeight = ref.current!.clientHeight
+    const scrollHeight = ref.current?.scrollHeight || 0
+
+    if (scrollPosition >= heightTop) {
+      setShouldBlurTop(true)
+    }
+
+    if (scrollPosition < heightTop) {
+      setShouldBlurTop(false)
+    }
+
+    if (scrollPosition < scrollHeight - (elementHeight + marginBlurBottom)) {
+      setShouldBlurBottom(true)
+    }
+
+    if (scrollPosition >= scrollHeight - (elementHeight + marginBlurBottom)) {
+      setShouldBlurBottom(false)
+    }
+  }, throttle)
+
+  useEffect(() => {
+    const element = props.ref
+    if (!element.current) {
+      throw new Error('useBlur ref not set correctly')
+    }
+
+    element.current!.addEventListener('scroll', handleScroll, { passive: true })
+
+    handleScroll()
+
+    return () => {
+      element.current!.removeEventListener('scroll', handleScroll)
+    }
+  }, [handleScroll, props.ref])
+
+  return { shouldBlurBottom, shouldBlurTop }
+}
+
+export { useBlur }
diff --git a/packages/components/hooks/use-throttle.ts b/packages/components/hooks/use-throttle.ts
new file mode 100644
index 00000000..4ff2dae8
--- /dev/null
+++ b/packages/components/hooks/use-throttle.ts
@@ -0,0 +1,38 @@
+import { useMemo } from 'react'
+
+const throttle = <Args extends unknown[]>(
+  fn: (...args: Args) => void,
+  cooldown: number
+) => {
+  let lastArgs: Args | undefined
+
+  const run = () => {
+    if (lastArgs) {
+      fn(...lastArgs)
+      lastArgs = undefined
+    }
+  }
+
+  const throttled = (...args: Args) => {
+    const isOnCooldown = !!lastArgs
+
+    lastArgs = args
+
+    if (isOnCooldown) {
+      return
+    }
+
+    window.setTimeout(run, cooldown)
+  }
+
+  return throttled
+}
+
+const useThrottle = <Args extends unknown[]>(
+  cb: (...args: Args) => void,
+  cooldown: number
+) => {
+  return useMemo(() => throttle(cb, cooldown), [cb, cooldown])
+}
+
+export { useThrottle }
diff --git a/packages/components/src/accordion/accordion.tsx b/packages/components/src/accordion/accordion.tsx
index 42402593..e9a2a0fd 100644
--- a/packages/components/src/accordion/accordion.tsx
+++ b/packages/components/src/accordion/accordion.tsx
@@ -26,6 +26,7 @@ const Accordion = ({
   const [isExpanded, setIsExpanded] = useState(initialExpanded)
   return (
     <Stack
+      accessibilityRole="button"
       width="100%"
       borderRadius="$0"
       borderTopWidth={1}
diff --git a/packages/components/src/accordion/accordionItem.tsx b/packages/components/src/accordion/accordionItem.tsx
index 484fe7e5..6f1eda6e 100644
--- a/packages/components/src/accordion/accordionItem.tsx
+++ b/packages/components/src/accordion/accordionItem.tsx
@@ -34,6 +34,7 @@ const AccordionItem = ({
   return (
     <Stack
       {...rest}
+      accessibilityRole="button"
       animation={[
         'fast',
         {
diff --git a/packages/components/src/composer/composer.tsx b/packages/components/src/composer/composer.tsx
index 6055296d..c1f2f4f4 100644
--- a/packages/components/src/composer/composer.tsx
+++ b/packages/components/src/composer/composer.tsx
@@ -1,45 +1,108 @@
+import { useState } from 'react'
+
 import {
   AudioIcon,
   FormatIcon,
   ImageIcon,
   ReactionIcon,
 } from '@status-im/icons/20'
+import { BlurView } from 'expo-blur'
 import { Stack, XStack, YStack } from 'tamagui'
 
 import { IconButton } from '../icon-button'
 import { Input } from '../input'
 
 import type { GetProps } from '@tamagui/core'
+import type { ViewProps } from 'react-native'
 
 type BaseProps = GetProps<typeof YStack>
 
-const Composer = (props: BaseProps) => {
+const Composer = (
+  props: Omit<BaseProps, 'style'> & {
+    placeholderTextColor?: BaseProps['backgroundColor']
+    iconOptionsColor?: BaseProps['backgroundColor']
+    isBlurred?: boolean
+    style?: ViewProps['style']
+  }
+) => {
+  const { backgroundColor, isBlurred, style: styleFromProps, ...rest } = props
+  const style = styleFromProps ? Object.assign(styleFromProps) : {}
+
+  const [isFocused, setIsFocused] = useState(false)
+
+  const applyVariantStyles:
+    | {
+        blurred: boolean
+      }
+    | undefined = isBlurred && !isFocused ? { blurred: true } : undefined
+
   return (
-    <YStack
-      backgroundColor="$background"
-      shadowColor="rgba(9, 16, 28, 0.08)"
-      shadowOffset={{ width: 0, height: -4 }}
-      shadowRadius={20}
-      borderTopLeftRadius={20}
-      borderTopRightRadius={20}
-      px={16}
-      pt={8}
-      width="100%"
+    <BlurView
+      intensity={40}
       style={{
-        elevation: 10,
+        zIndex: 100,
+        borderRadius: 20,
+        ...style,
       }}
-      {...props}
     >
-      <Input placeholder="Type something..." borderWidth={0} px={0} />
-      <XStack alignItems="center" justifyContent="space-between" pt={8}>
-        <Stack space={12} flexDirection="row">
-          <IconButton icon={<ImageIcon />} transparent />
-          <IconButton icon={<ReactionIcon />} transparent />
-          <IconButton icon={<FormatIcon />} transparent />
-        </Stack>
-        <IconButton icon={<AudioIcon />} transparent />
-      </XStack>
-    </YStack>
+      <YStack
+        animation="fast"
+        backgroundColor={isFocused ? '$background' : backgroundColor}
+        shadowColor={!isBlurred || isFocused ? 'rgba(9, 16, 28, 0.08)' : 'none'}
+        shadowOffset={{ width: 4, height: !isBlurred || isFocused ? 4 : 0 }}
+        shadowRadius={20}
+        borderTopLeftRadius={20}
+        borderTopRightRadius={20}
+        px={16}
+        pt={8}
+        width="100%"
+        style={{
+          elevation: 10,
+        }}
+        {...rest}
+      >
+        <Input
+          className="composer-input"
+          placeholder="Type something..."
+          px={0}
+          borderWidth={0}
+          blurred={isBlurred}
+          onBlur={() => setIsFocused(false)}
+          onFocus={() => setIsFocused(true)}
+        />
+        <XStack
+          alignItems="center"
+          justifyContent="space-between"
+          pt={8}
+          backgroundColor="transparent"
+        >
+          <Stack space={12} flexDirection="row" backgroundColor="transparent">
+            <IconButton
+              variant="outline"
+              icon={<ImageIcon />}
+              {...applyVariantStyles}
+              selected
+            />
+            <IconButton
+              variant="outline"
+              icon={<ReactionIcon />}
+              {...applyVariantStyles}
+            />
+            <IconButton
+              variant="outline"
+              icon={<FormatIcon />}
+              disabled
+              {...applyVariantStyles}
+            />
+          </Stack>
+          <IconButton
+            variant="outline"
+            icon={<AudioIcon />}
+            {...applyVariantStyles}
+          />
+        </XStack>
+      </YStack>
+    </BlurView>
   )
 }
 
diff --git a/packages/components/src/divider/divider.tsx b/packages/components/src/divider/divider.tsx
index 7d716678..cda0b08b 100644
--- a/packages/components/src/divider/divider.tsx
+++ b/packages/components/src/divider/divider.tsx
@@ -2,7 +2,7 @@ import { Stack, styled } from '@tamagui/core'
 
 export const Divider = styled(Stack, {
   name: 'Divider',
-  backgroundColor: '$neutral-10',
+  backgroundColor: '$neutral-80-opa-10',
   flexShrink: 0,
   // borderWidth: 0,
   flex: 1,
diff --git a/packages/components/src/icon-button/icon-button.tsx b/packages/components/src/icon-button/icon-button.tsx
index 6ddb3053..5a16eaff 100644
--- a/packages/components/src/icon-button/icon-button.tsx
+++ b/packages/components/src/icon-button/icon-button.tsx
@@ -1,6 +1,6 @@
 import { cloneElement } from 'react'
 
-import { Stack, styled, Text } from '@tamagui/core'
+import { Stack, styled } from '@tamagui/core'
 
 import type React from 'react'
 
@@ -20,40 +20,81 @@ const Base = styled(Stack, {
   height: 30,
   borderWidth: 1,
   padding: 4,
-  backgroundColor: '$neutral-10',
-  borderColor: '$neutral-10',
-
-  hoverStyle: {
-    backgroundColor: '$neutral-20',
-  },
-
-  pressStyle: {
-    backgroundColor: '$neutral-20',
-  },
 
   variants: {
-    selected: {
-      true: {
-        backgroundColor: '$neutral-30',
-        borderColor: '$neutral-30',
-      },
-    },
-
-    transparent: {
-      true: {
-        backgroundColor: 'transparent',
-        borderColor: '$neutral-20',
+    variant: {
+      default: {
+        backgroundColor: '$iconButtonBackground',
+        borderColor: 'transparent',
 
         hoverStyle: {
-          backgroundColor: 'transparent',
-          borderColor: '$neutral-30',
+          backgroundColor: '$iconButtonBackgroundHover',
         },
 
         pressStyle: {
-          backgroundColor: 'transparent',
-          borderColor: '$neutral-30',
+          backgroundColor: '$iconButtonBackgroundHover',
         },
       },
+      outline: {
+        backgroundColor: 'transparent',
+        borderColor: '$iconButtonOutlineBorder',
+
+        hoverStyle: {
+          borderColor: '$iconButtonOutlineBorderHover',
+        },
+
+        pressStyle: {
+          borderColor: '$iconButtonOutlineBorderHover',
+        },
+      },
+    },
+    blurred: {
+      default: {
+        backgroundColor: '$iconButtonBackgroundBlurred',
+
+        hoverStyle: {
+          backgroundColor: '$iconButtonBackgroundBlurredHover',
+        },
+
+        pressStyle: {
+          backgroundColor: 'iconButtonBackgroundBlurredHover',
+        },
+      },
+      outline: {
+        borderColor: '$iconButtonOutlineBorderBlurred',
+
+        hoverStyle: {
+          borderColor: '$iconButtonOutlineBorderBlurredHover',
+        },
+
+        pressStyle: {
+          borderColor: '$iconButtonOutlineBorderBlurredHover',
+        },
+      },
+    },
+    selected: {
+      default: {
+        backgroundColor: '$iconButtonBackgroundSelected',
+        borderColor: '$iconButtonBorderSelected',
+      },
+      defaultWithBlur: {
+        backgroundColor: '$iconButtonBackgroundBlurredSelected',
+        borderColor: '$iconButtonBorderBlurredSelected',
+      },
+      outline: {
+        backgroundColor: '$iconButtonOutlineBackgroundSelected',
+        borderColor: '$iconButtonOutlineBorderSelected',
+      },
+      outlineWithBlur: {
+        backgroundColor: '$iconButtonOutBackgroundBlurredSelected',
+        borderColor: '$iconButtonOutlineBorderBlurredSelected',
+      },
+    },
+    disabled: {
+      true: {
+        opacity: 0.3,
+        cursor: 'default',
+      },
     },
   } as const,
 })
@@ -62,20 +103,92 @@ interface Props {
   icon: React.ReactElement
   onPress?: () => void
   selected?: boolean
-  transparent?: boolean
+  blurred?: boolean
+  variant?: 'default' | 'outline'
+  disabled?: boolean
   // FIXME: enforce aria-label for accessibility
   // 'aria-label'?: string
 }
 
+const iconColor = {
+  default: {
+    default: '$iconButtonColor',
+    defaultBlurred: '$iconButtonColorBlurred',
+    selected: '$iconButtonColorSelected',
+    selectedBlurred: '$iconButtonColorBlurred',
+  },
+  outline: {
+    default: '$iconButtonColorOutline',
+    defaultBlurred: '$iconButtonColorOutlineBlurred',
+    selected: '$iconButtonColorOutlineSelected',
+    selectedBlurred: '$iconButtonColorOutlineBlurred',
+  },
+}
+
+const getStateForIconColor = ({
+  blurred,
+  selected,
+}: {
+  blurred?: boolean
+  selected?: boolean
+}) => {
+  if (!selected && blurred) {
+    return 'defaultBlurred'
+  }
+  if (selected && blurred) {
+    return 'selectedBlurred'
+  }
+  if (selected && !blurred) {
+    return 'selected'
+  }
+  return 'default'
+}
+
+const getSelectedVariant = ({
+  selected,
+  blurred,
+  variant,
+}: {
+  selected?: boolean
+  blurred?: boolean
+  variant?: 'default' | 'outline'
+}) => {
+  if (!selected) {
+    return undefined
+  }
+  if (blurred && variant === 'default') {
+    return 'defaultWithBlur'
+  }
+  if (blurred && variant === 'outline') {
+    return 'outlineWithBlur'
+  }
+  return variant
+}
+
 const IconButton = (props: Props) => {
-  const { icon, transparent, selected, onPress } = props
+  const {
+    icon,
+    selected,
+    blurred,
+    onPress,
+    variant = 'default',
+    disabled,
+  } = props
+
+  const state = getStateForIconColor({ blurred, selected })
+  const selectedVariant = getSelectedVariant({ selected, variant, blurred })
 
   return (
-    <Base selected={selected} onPress={onPress} transparent={transparent}>
+    <Base
+      variant={variant}
+      selected={selectedVariant}
+      onPress={onPress}
+      blurred={blurred ? variant : undefined}
+      disabled={disabled}
+    >
       {cloneElement(icon, {
-        color: selected ? '$neutral-100' : '$neutral-50',
+        color: iconColor[variant][state],
         size: 20,
-        pressEvents: 'none',
       })}
     </Base>
   )
diff --git a/packages/components/src/input/input.tsx b/packages/components/src/input/input.tsx
index 266cbb17..e367b682 100644
--- a/packages/components/src/input/input.tsx
+++ b/packages/components/src/input/input.tsx
@@ -1,13 +1,9 @@
-// eslint-disable-next-line eslint-comments/disable-enable-pair
-/* eslint-disable import/namespace */
 import { setupReactNative, styled } from '@tamagui/core'
-// import { focusableInputHOC } from '@tamagui/focusable'
+import { focusableInputHOC } from '@tamagui/focusable'
 import { TextInput } from 'react-native'
 
 import type { GetProps } from '@tamagui/core'
 
-// import { inputSizeVariant } from '../helpers/inputHelpers'
-
 setupReactNative({
   TextInput,
 })
@@ -17,55 +13,50 @@ export const InputFrame = styled(
   {
     tag: 'input',
     name: 'Input',
-    // fontFamily: '$body',
+
     borderWidth: 1,
     outlineWidth: 0,
     borderColor: 'rgba(0, 200, 0, 1)',
 
     paddingHorizontal: 30,
     color: 'hsla(218, 51%, 7%, 1)',
-    placeholderTextColor: 'hsla(219, 17%, 69%, 1)',
-    // color: 'red',
-    // color: '$color',
-    // focusable: true,
-    // borderColor: '$borderColor',
-    // backgroundColor: '$background',
-    // placeholderTextColor: '$placeholderColor',
+    placeholderTextColor: '$placeHolderColor',
 
-    backgroundColor: 'rgb(255, 255, 255)',
+    backgroundColor: 'transparent',
 
     height: 40,
     borderRadius: 12,
 
+    animation: 'fast',
+
     // this fixes a flex bug where it overflows container
     minWidth: 0,
 
-    // hoverStyle: {
-    // borderColor: '$borderColorHover',
-    // },/
+    hoverStyle: {
+      borderColor: '$beigeHover',
+    },
 
-    // focusStyle: {
+    focusStyle: {
+      borderColor: '$blueHover',
+    },
 
-    //   borderWidth: 2,
-    //   marginHorizontal: -1,
-    // },
+    variants: {
+      blurred: {
+        true: {
+          placeholderTextColor: '$placeHolderColorBlurred',
+        },
+      },
+    },
 
-    // variants: {
-    //   size: {
-    //     // '...size': inputSizeVariant,
-    //   },
-    // } as const,
-
-    // defaultVariants: {
-    //   size: '$true',
-    // },
+    defaultVariants: {
+      blurred: '$false',
+    },
+  },
+  {
+    isInput: true,
   }
-  // {
-  //   isInput: true,
-  // }
 )
 
 export type InputProps = GetProps<typeof InputFrame>
 
-// export const Input = focusableInputHOC(InputFrame)
-export const Input = InputFrame
+export const Input = focusableInputHOC(InputFrame)
diff --git a/packages/components/src/messages/components/reactions.tsx b/packages/components/src/messages/components/reactions.tsx
index 13e52302..52a4ba22 100644
--- a/packages/components/src/messages/components/reactions.tsx
+++ b/packages/components/src/messages/components/reactions.tsx
@@ -79,8 +79,6 @@ type Props = {
 export const Reactions = (props: Props) => {
   const { reactions } = props
 
-  console.log(reactions)
-
   return (
     <XStack space={8} flexWrap="wrap">
       <ReactionButton count={1} icon={<LoveIcon />} selected />
diff --git a/packages/components/src/messages/index.tsx b/packages/components/src/messages/index.tsx
index 9db88ef4..04146085 100644
--- a/packages/components/src/messages/index.tsx
+++ b/packages/components/src/messages/index.tsx
@@ -15,6 +15,8 @@ export const Messages = () => {
           },
         ]}
       />
+      <ChatMessage text="fsdjkf kasldjf ksdlfjksdlfj asdklfj sdkljf" />
+      <ChatMessage text="fsdjkf kasldjf ksdlfjksdlfj asdklfj sdkljf" />
       <ChatMessage
         text="fsdjkf kasldjf ksdlfjksdlfj asdklfj sdkljf"
         reactions={['123']}
@@ -30,6 +32,20 @@ export const Messages = () => {
         text="fsdjkf kasldjf ksdlfjksdlfj asdklfj sdkljf"
         reactions={['123']}
       />
+      <ChatMessage
+        images={[
+          {
+            url: 'https://images.unsplash.com/photo-1673433107234-14d1a4424658?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
+          },
+        ]}
+      />
+      <ChatMessage
+        images={[
+          {
+            url: 'https://images.unsplash.com/photo-1673433107234-14d1a4424658?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
+          },
+        ]}
+      />
     </>
   )
 }
diff --git a/packages/components/src/sidebar/sidebar.tsx b/packages/components/src/sidebar/sidebar.tsx
index da58c8c7..a532607f 100644
--- a/packages/components/src/sidebar/sidebar.tsx
+++ b/packages/components/src/sidebar/sidebar.tsx
@@ -11,6 +11,7 @@ import { COMMUNITIES } from './mock-data'
 
 import type { CommunityProps } from './mock-data'
 import type { GetProps } from '@tamagui/core'
+import type { ReactNode } from 'react'
 
 type BaseProps = GetProps<typeof Stack>
 
@@ -20,7 +21,7 @@ type Props = {
   membersCount: number
   selectedChannel?: string
   communities?: CommunityProps[]
-  onChannelPress: (channelId: string) => void
+  onChannelPress: (channelId: string, channelIcon?: ReactNode) => void
 } & BaseProps
 
 const Sidebar = (props: Props) => {
@@ -90,7 +91,7 @@ const Sidebar = (props: Props) => {
                   channelStatus={channel.channelStatus}
                   numberOfMessages={channel.numberOfMessages}
                   isSelected={selectedChannel === channel.id}
-                  onPress={() => onChannelPress(channel.id)}
+                  onPress={() => onChannelPress(channel.id, channel.icon)}
                   mb={isLastChannelOfTheList ? 8 : 0}
                 />
               )
diff --git a/packages/components/src/tamagui.config.ts b/packages/components/src/tamagui.config.ts
index 84cc475d..87d2a64d 100644
--- a/packages/components/src/tamagui.config.ts
+++ b/packages/components/src/tamagui.config.ts
@@ -95,7 +95,13 @@ export const config = createTamagui({
     mono: monoFont,
   },
   themes,
-  tokens,
+  tokens: {
+    colors: {
+      ...tokens.color,
+    },
+    ...tokens,
+  },
+  shouldAddPrefersColorThemes: true,
   media: createMedia({
     xs: { maxWidth: 660 },
     sm: { maxWidth: 800 },
diff --git a/packages/components/src/themes.ts b/packages/components/src/themes.ts
index 1b7c31fd..71d46ee3 100644
--- a/packages/components/src/themes.ts
+++ b/packages/components/src/themes.ts
@@ -33,6 +33,31 @@ const light = createTheme({
   brownHover: tokens.color['brown-60'],
   beige: tokens.color['beige-50'],
   beigeHover: tokens.color['beige-60'],
+  placeHolderColor: tokens.color['neutral-40'],
+  placeHolderColorBlurred: tokens.color['neutral-80-opa-40'],
+  iconButtonBackground: tokens.color['neutral-10'],
+  iconButtonBackgroundHover: tokens.color['neutral-20'],
+  iconButtonBackgroundSelected: tokens.color['neutral-20'],
+  iconButtonBorderSelected: tokens.color['neutral-30'],
+  iconButtonBackgroundBlurred: tokens.color['neutral-80-opa-5'],
+  iconButtonBackgroundBlurredHover: tokens.color['neutral-80-opa-10'],
+  iconButtonBackgroundBlurredSelected: tokens.color['neutral-80-opa-10'],
+  iconButtonBorderBlurredSelected: tokens.color['neutral-80-opa-5'],
+  iconButtonOutlineBackgroundSelected: tokens.color['neutral-10'],
+  iconButtonOutlineBorder: tokens.color['neutral-20'],
+  iconButtonOutlineBorderHover: tokens.color['neutral-30'],
+  iconButtonOutlineBorderSelected: tokens.color['neutral-20'],
+  iconButtonOutBackgroundBlurredSelected: tokens.color['neutral-10'],
+  iconButtonOutlineBorderBlurred: tokens.color['neutral-80-opa-10'],
+  iconButtonOutlineBorderBlurredHover: tokens.color['neutral-80-opa-20'],
+  iconButtonOutlineBorderBlurredSelected: tokens.color['neutral-80-opa-10'],
+  iconButtonColor: tokens.color['neutral-50'],
+  iconButtonColorSelected: tokens.color['neutral-100'],
+  iconButtonColorBlurred: tokens.color['neutral-100'],
+  iconButtonColorOutline: tokens.color['neutral-50'],
+  iconButtonColorOutlineSelected: tokens.color['neutral-100'],
+  iconButtonColorOutlineBlurred: tokens.color['neutral-80-opa-70'],
+  blurBackground: tokens.color['white-70'],
 })
 
 // note: we set up a single consistent base type to validate the rest:
@@ -69,6 +94,31 @@ const dark: BaseTheme = createTheme({
   brownHover: tokens.color['brown-50'],
   beige: tokens.color['beige-60'],
   beigeHover: tokens.color['beige-50'],
+  placeHolderColor: tokens.color['neutral-50'],
+  placeHolderColorBlurred: tokens.color['white-30'],
+  iconButtonBackground: tokens.color['neutral-90'],
+  iconButtonBackgroundHover: tokens.color['neutral-80'],
+  iconButtonBackgroundSelected: tokens.color['neutral-80'],
+  iconButtonBorderSelected: tokens.color['neutral-60'],
+  iconButtonBackgroundBlurred: tokens.color['white-5'],
+  iconButtonBackgroundBlurredHover: tokens.color['white-10'],
+  iconButtonBackgroundBlurredSelected: tokens.color['white-10'],
+  iconButtonBorderBlurredSelected: tokens.color['white-5'],
+  iconButtonOutlineBackgroundSelected: tokens.color['neutral-80-opa-70'],
+  iconButtonOutlineBorder: tokens.color['neutral-80'],
+  iconButtonOutlineBorderHover: tokens.color['neutral-70'],
+  iconButtonOutlineBorderSelected: tokens.color['neutral-70'],
+  iconButtonOutBackgroundBlurredSelected: tokens.color['white-5'],
+  iconButtonOutlineBorderBlurred: tokens.color['white-10'],
+  iconButtonOutlineBorderBlurredHover: tokens.color['white-20'],
+  iconButtonOutlineBorderBlurredSelected: tokens.color['white-10'],
+  iconButtonColor: tokens.color['neutral-40'],
+  iconButtonColorSelected: tokens.color['white-100'],
+  iconButtonColorBlurred: tokens.color['white-100'],
+  iconButtonColorOutline: tokens.color['neutral-40'],
+  iconButtonColorOutlineSelected: tokens.color['white-100'],
+  iconButtonColorOutlineBlurred: tokens.color['white-100'],
+  blurBackground: tokens.color['neutral-80-opa-70'],
 })
 
 const allThemes = {
diff --git a/packages/components/src/topbar/topbar.tsx b/packages/components/src/topbar/topbar.tsx
index c9d6c4cb..ad1bfb2d 100644
--- a/packages/components/src/topbar/topbar.tsx
+++ b/packages/components/src/topbar/topbar.tsx
@@ -6,6 +6,11 @@ import {
   OptionsIcon,
 } from '@status-im/icons/20'
 import { Stack } from '@tamagui/core'
+import { BlurView } from 'expo-blur'
+
+import type { GetProps, StackProps } from '@tamagui/core'
+
+type BaseProps = GetProps<typeof Stack>
 
 type Props = {
   membersVisisble: boolean
@@ -13,58 +18,96 @@ type Props = {
   goBack?: () => void
   title?: string
   description?: string
-}
+  icon?: React.ReactNode
+  refForScroll?: React.RefObject<HTMLDivElement>
+  backgroundColor?: StackProps['backgroundColor']
+  isBlurred?: boolean
+} & BaseProps
 
 const Topbar = (props: Props) => {
-  const { membersVisisble, onMembersPress, goBack, title, description } = props
+  const {
+    membersVisisble,
+    onMembersPress,
+    goBack,
+    title,
+    description,
+    icon,
+    backgroundColor,
+    isBlurred,
+    ...rest
+  } = props
 
   return (
-    <Stack
-      flexDirection="row"
-      height={56}
-      alignItems="center"
-      justifyContent="space-between"
-      padding={16}
-      borderBottomWidth={1}
-      borderColor="$neutral-10"
-      width="100%"
-    >
-      <Stack flexDirection="row" alignItems="center" flexWrap="wrap">
-        <Stack mr={12} $gtSm={{ display: 'none' }}>
-          <IconButton icon={<ArrowLeftIcon />} onPress={() => goBack?.()} />
+    <BlurView intensity={40} style={{ zIndex: 100 }}>
+      <Stack
+        flexDirection="row"
+        height={56}
+        alignItems="center"
+        justifyContent="space-between"
+        padding={16}
+        backgroundColor={backgroundColor || '$background'}
+        borderBottomWidth={1}
+        borderColor={isBlurred ? 'transparent' : '$neutral-80-opa-10'}
+        width="100%"
+        {...rest}
+      >
+        <Stack flexDirection="row" alignItems="center" flexWrap="wrap">
+          <Stack mr={12} $gtSm={{ display: 'none' }}>
+            <IconButton
+              icon={<ArrowLeftIcon />}
+              onPress={() => goBack?.()}
+              blurred={isBlurred}
+            />
+          </Stack>
+
+          {icon && <Stack marginRight={12}>{icon}</Stack>}
+
+          {title && (
+            <Paragraph weight="semibold" marginRight={4}>
+              {title}
+            </Paragraph>
+          )}
+
+          <LockedIcon color="$neutral-80-opa-40" />
+          <Divider height={16} $sm={{ display: 'none' }} />
         </Stack>
 
-        {title && (
-          <Paragraph weight="semibold" marginRight={4}>
-            {title}
-          </Paragraph>
-        )}
-
-        <LockedIcon color="$neutral-80-opa-40" />
-        <Divider height={16} $sm={{ display: 'none' }} />
-        {description && (
-          <Paragraph
-            weight="medium"
-            color="$neutral-80-opa-50"
-            variant="smaller"
-            $sm={{ display: 'none' }}
-          >
-            {description}
-          </Paragraph>
-        )}
-      </Stack>
-
-      <Stack space={12} flexDirection="row">
-        <Stack $sm={{ display: 'none' }}>
-          <IconButton
-            icon={<MembersIcon />}
-            selected={membersVisisble}
-            onPress={onMembersPress}
-          />
+        <Stack
+          space={12}
+          flexDirection="row"
+          alignItems="center"
+          justifyContent={description ? 'space-between' : 'flex-end'}
+          flexGrow={1}
+          flexShrink={1}
+          $sm={{ justifyContent: 'flex-end' }}
+        >
+          {description && (
+            <Paragraph
+              weight="medium"
+              color="$neutral-80-opa-50"
+              variant="smaller"
+              $sm={{ display: 'none' }}
+              flexShrink={1}
+              flexGrow={1}
+              whiteSpace="nowrap"
+              overflow="hidden"
+              textOverflow="ellipsis"
+            >
+              {description}
+            </Paragraph>
+          )}
+          <Stack $sm={{ display: 'none' }}>
+            <IconButton
+              icon={<MembersIcon />}
+              selected={membersVisisble}
+              onPress={onMembersPress}
+              blurred={isBlurred}
+            />
+          </Stack>
+          <IconButton icon={<OptionsIcon />} blurred={isBlurred} />
         </Stack>
-        <IconButton icon={<OptionsIcon />} />
       </Stack>
-    </Stack>
+    </BlurView>
   )
 }
 
diff --git a/packages/icons/12/add-icon.tsx b/packages/icons/12/add-icon.tsx
index ac662aa7..799aa7aa 100644
--- a/packages/icons/12/add-icon.tsx
+++ b/packages/icons/12/add-icon.tsx
@@ -12,7 +12,7 @@ const SvgAddIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/12/add-reaction-icon.tsx b/packages/icons/12/add-reaction-icon.tsx
index 2bbb6722..9347dd98 100644
--- a/packages/icons/12/add-reaction-icon.tsx
+++ b/packages/icons/12/add-reaction-icon.tsx
@@ -12,7 +12,7 @@ const SvgAddReactionIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#add-reaction-icon_svg__a)">
         <Path d="M7.294 1.17A5 5 0 1 0 11 6" stroke={color} strokeWidth={1.1} />
diff --git a/packages/icons/12/alert-icon.tsx b/packages/icons/12/alert-icon.tsx
index dd716a24..d2e83956 100644
--- a/packages/icons/12/alert-icon.tsx
+++ b/packages/icons/12/alert-icon.tsx
@@ -12,7 +12,7 @@ const SvgAlertIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={6} cy={6} r={4.45} stroke={color} strokeWidth={1.1} />
       <Path d="M6 6.5v-3M6 8.5v-1" stroke={color} strokeWidth={1.1} />
diff --git a/packages/icons/12/arrow-down-icon.tsx b/packages/icons/12/arrow-down-icon.tsx
index feb20b51..83c25b5a 100644
--- a/packages/icons/12/arrow-down-icon.tsx
+++ b/packages/icons/12/arrow-down-icon.tsx
@@ -12,7 +12,7 @@ const SvgArrowDownIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/12/arrow-right-icon.tsx b/packages/icons/12/arrow-right-icon.tsx
index 967c5b80..913c0aa7 100644
--- a/packages/icons/12/arrow-right-icon.tsx
+++ b/packages/icons/12/arrow-right-icon.tsx
@@ -12,7 +12,7 @@ const SvgArrowRightIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/12/arrow-up-icon.tsx b/packages/icons/12/arrow-up-icon.tsx
index ff76223d..d1a66098 100644
--- a/packages/icons/12/arrow-up-icon.tsx
+++ b/packages/icons/12/arrow-up-icon.tsx
@@ -12,7 +12,7 @@ const SvgArrowUpIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/12/block-icon.tsx b/packages/icons/12/block-icon.tsx
index 64843f57..0fb677ef 100644
--- a/packages/icons/12/block-icon.tsx
+++ b/packages/icons/12/block-icon.tsx
@@ -12,14 +12,14 @@ const SvgBlockIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#block-icon_svg__a)">
         <Path
           fillRule="evenodd"
           clipRule="evenodd"
           d="M2.05 6a3.95 3.95 0 0 1 6.327-3.155L2.845 8.377A3.933 3.933 0 0 1 2.05 6Zm1.573 3.155a3.95 3.95 0 0 0 5.532-5.532L3.623 9.155ZM6 .95a5.05 5.05 0 1 0 0 10.1A5.05 5.05 0 0 0 6 .95Z"
-          fill="#E65F5C"
+          fill={color}
         />
       </G>
       <Defs>
diff --git a/packages/icons/12/camera-icon.tsx b/packages/icons/12/camera-icon.tsx
index b11731b0..21460e80 100644
--- a/packages/icons/12/camera-icon.tsx
+++ b/packages/icons/12/camera-icon.tsx
@@ -12,7 +12,7 @@ const SvgCameraIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#camera-icon_svg__a)" stroke={color} strokeWidth={1.1}>
         <Path d="M1 4.2c0-.94.76-1.7 1.7-1.7h.211c.514 0 .984-.29 1.214-.75.23-.46.7-.75 1.214-.75H6.66c.514 0 .984.29 1.214.75.23.46.7.75 1.214.75H9.3c.94 0 1.7.76 1.7 1.7v2.55c0 1.164 0 1.745-.16 2.214a3 3 0 0 1-1.876 1.877C8.495 11 7.914 11 6.75 11h-1.5c-1.164 0-1.745 0-2.214-.16a3 3 0 0 1-1.877-1.876C1 8.495 1 7.914 1 6.75V4.2Z" />
diff --git a/packages/icons/12/cards-icon.tsx b/packages/icons/12/cards-icon.tsx
index b546406b..469b6ef9 100644
--- a/packages/icons/12/cards-icon.tsx
+++ b/packages/icons/12/cards-icon.tsx
@@ -12,7 +12,7 @@ const SvgCardsIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#cards-icon_svg__a)" stroke={color} strokeWidth={1.1}>
         <Path d="M1 4.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C2.52 1 3.08 1 4.2 1h3.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C11 2.52 11 3.08 11 4.2v3.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C9.48 11 8.92 11 7.8 11H4.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C1 9.48 1 8.92 1 7.8V4.2Z" />
diff --git a/packages/icons/12/check-icon.tsx b/packages/icons/12/check-icon.tsx
index fb676ac7..86322ba5 100644
--- a/packages/icons/12/check-icon.tsx
+++ b/packages/icons/12/check-icon.tsx
@@ -12,7 +12,7 @@ const SvgCheckIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={6} cy={6} r={4.45} stroke={color} strokeWidth={1.1} />
       <Path d="m4 6.3 1.333 1.2L8 4.5" stroke={color} strokeWidth={1.1} />
diff --git a/packages/icons/12/check-large-icon.tsx b/packages/icons/12/check-large-icon.tsx
index 3bd5994f..46bc70f6 100644
--- a/packages/icons/12/check-large-icon.tsx
+++ b/packages/icons/12/check-large-icon.tsx
@@ -12,7 +12,7 @@ const SvgCheckLargeIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m1.5 6 3 3 6-7" stroke={color} strokeWidth={1.3} />
     </Svg>
diff --git a/packages/icons/12/chevron-bottom-icon.tsx b/packages/icons/12/chevron-bottom-icon.tsx
index eef99484..9b539de9 100644
--- a/packages/icons/12/chevron-bottom-icon.tsx
+++ b/packages/icons/12/chevron-bottom-icon.tsx
@@ -12,7 +12,7 @@ const SvgChevronBottomIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m3 4.5 3 3 3-3" stroke={color} strokeWidth={1.1} />
     </Svg>
diff --git a/packages/icons/12/chevron-left-icon.tsx b/packages/icons/12/chevron-left-icon.tsx
index eebf4ffb..5549759c 100644
--- a/packages/icons/12/chevron-left-icon.tsx
+++ b/packages/icons/12/chevron-left-icon.tsx
@@ -12,7 +12,7 @@ const SvgChevronLeftIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m7.5 3-3 3 3 3" stroke={color} strokeWidth={1.1} />
     </Svg>
diff --git a/packages/icons/12/chevron-right-icon.tsx b/packages/icons/12/chevron-right-icon.tsx
index 01dc4ff4..9c0dfa45 100644
--- a/packages/icons/12/chevron-right-icon.tsx
+++ b/packages/icons/12/chevron-right-icon.tsx
@@ -12,7 +12,7 @@ const SvgChevronRightIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m4.5 9 3-3-3-3" stroke={color} strokeWidth={1.1} />
     </Svg>
diff --git a/packages/icons/12/chevron-top-icon.tsx b/packages/icons/12/chevron-top-icon.tsx
index f88e9391..e7038e26 100644
--- a/packages/icons/12/chevron-top-icon.tsx
+++ b/packages/icons/12/chevron-top-icon.tsx
@@ -12,7 +12,7 @@ const SvgChevronTopIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m9 7.5-3-3-3 3" stroke={color} strokeWidth={1.1} />
     </Svg>
diff --git a/packages/icons/12/close-icon.tsx b/packages/icons/12/close-icon.tsx
index e740c5ca..f5249d12 100644
--- a/packages/icons/12/close-icon.tsx
+++ b/packages/icons/12/close-icon.tsx
@@ -12,7 +12,7 @@ const SvgCloseIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M2.5 9.5 6 6 2.5 2.5M9.5 9.5 6 6l3.5-3.5"
diff --git a/packages/icons/12/color-icon.tsx b/packages/icons/12/color-icon.tsx
index 5108bbc3..f5c2e3ea 100644
--- a/packages/icons/12/color-icon.tsx
+++ b/packages/icons/12/color-icon.tsx
@@ -12,7 +12,7 @@ const SvgColorIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M9 6.4C9 8.9 7.212 10 6 10S3 9 3 6.5 6 2 6 2s3 1.9 3 4.4Z"
diff --git a/packages/icons/12/communities-icon.tsx b/packages/icons/12/communities-icon.tsx
index fd69f9d7..38c6307b 100644
--- a/packages/icons/12/communities-icon.tsx
+++ b/packages/icons/12/communities-icon.tsx
@@ -12,7 +12,7 @@ const SvgCommunitiesIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#communities-icon_svg__a)">
         <Path
diff --git a/packages/icons/12/contact-icon.tsx b/packages/icons/12/contact-icon.tsx
index b1e3627e..46e971b5 100644
--- a/packages/icons/12/contact-icon.tsx
+++ b/packages/icons/12/contact-icon.tsx
@@ -12,15 +12,15 @@ const SvgContactIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
-      <Circle cx={6} cy={6} r={5} fill="#4360DF" />
+      <Circle cx={6} cy={6} r={5} fill={color} />
       <Path
         d="M9 9.5A3.369 3.369 0 0 0 6.197 8h-.394A3.369 3.369 0 0 0 3 9.5"
         stroke="#fff"
         strokeLinejoin="round"
       />
-      <Circle cx={6} cy={6} r={4.25} stroke="#4360DF" strokeWidth={1.5} />
+      <Circle cx={6} cy={6} r={4.25} stroke={color} strokeWidth={1.5} />
       <Circle cx={6} cy={4.5} r={1.5} stroke="#fff" strokeLinejoin="round" />
     </Svg>
   )
diff --git a/packages/icons/12/copy-icon.tsx b/packages/icons/12/copy-icon.tsx
index 1422926f..b0181551 100644
--- a/packages/icons/12/copy-icon.tsx
+++ b/packages/icons/12/copy-icon.tsx
@@ -12,7 +12,7 @@ const SvgCopyIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#copy-icon_svg__a)" strokeWidth={1.1}>
         <Path
diff --git a/packages/icons/12/delivered-icon.tsx b/packages/icons/12/delivered-icon.tsx
index ee5a2294..217ce9c3 100644
--- a/packages/icons/12/delivered-icon.tsx
+++ b/packages/icons/12/delivered-icon.tsx
@@ -12,7 +12,7 @@ const SvgDeliveredIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/12/dropdown-icon.tsx b/packages/icons/12/dropdown-icon.tsx
index 409d2c72..10e04b8a 100644
--- a/packages/icons/12/dropdown-icon.tsx
+++ b/packages/icons/12/dropdown-icon.tsx
@@ -12,7 +12,7 @@ const SvgDropdownIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#dropdown-icon_svg__a)">
         <Circle cx={6} cy={6} r={6} fill="#E7EAEE" />
diff --git a/packages/icons/12/edit-icon.tsx b/packages/icons/12/edit-icon.tsx
index 163cc314..3338412c 100644
--- a/packages/icons/12/edit-icon.tsx
+++ b/packages/icons/12/edit-icon.tsx
@@ -12,7 +12,7 @@ const SvgEditIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M5.94 3.182c.396-.396.594-.594.822-.669a1 1 0 0 1 .618 0c.228.075.426.273.822.669l.566.565c.396.396.594.594.668.823a1 1 0 0 1 0 .618c-.074.228-.272.426-.668.822l-2.85 2.85c-.2.2-.3.3-.417.367a1 1 0 0 1-.337.118c-.133.021-.274.005-.554-.026l-1.782-.198-.198-1.78c-.03-.282-.046-.422-.025-.555a1 1 0 0 1 .118-.337c.067-.117.167-.217.366-.417l2.85-2.85ZM4.839 3.575l3.535 3.536"
diff --git a/packages/icons/12/gas-icon.tsx b/packages/icons/12/gas-icon.tsx
index dcb3e7e2..1ad1885c 100644
--- a/packages/icons/12/gas-icon.tsx
+++ b/packages/icons/12/gas-icon.tsx
@@ -12,7 +12,7 @@ const SvgGasIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#gas-icon_svg__a)" strokeWidth={1.1}>
         <Path
diff --git a/packages/icons/12/hold-icon.tsx b/packages/icons/12/hold-icon.tsx
index feff3515..e2efcb2c 100644
--- a/packages/icons/12/hold-icon.tsx
+++ b/packages/icons/12/hold-icon.tsx
@@ -12,11 +12,11 @@ const SvgHoldIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#hold-icon_svg__a)">
         <Circle cx={6} cy={6} r={6} fill="#647084" />
-        <Path d="M3.333 6.4 5.111 8l3.556-4" stroke="#fff" strokeWidth={1.1} />
+        <Path d="M3.333 6.4 5.111 8l3.556-4" stroke={color} strokeWidth={1.1} />
       </G>
       <Defs>
         <ClipPath id="hold-icon_svg__a">
diff --git a/packages/icons/12/info-1-icon.tsx b/packages/icons/12/info-1-icon.tsx
index 5e45d41b..fdad2f19 100644
--- a/packages/icons/12/info-1-icon.tsx
+++ b/packages/icons/12/info-1-icon.tsx
@@ -12,7 +12,7 @@ const SvgInfo1Icon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/12/info-icon.tsx b/packages/icons/12/info-icon.tsx
index bb9edfb7..e6517727 100644
--- a/packages/icons/12/info-icon.tsx
+++ b/packages/icons/12/info-icon.tsx
@@ -12,9 +12,9 @@ const SvgInfoIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
-      <Circle cx={6} cy={6} r={5} fill="#4360DF" />
+      <Circle cx={6} cy={6} r={5} fill={color} />
       <Path d="M6 5v4M6 3v1" stroke="#fff" strokeWidth={1.1} />
     </Svg>
   )
diff --git a/packages/icons/12/jump-to-icon.tsx b/packages/icons/12/jump-to-icon.tsx
index 01c5d14e..aeba9e70 100644
--- a/packages/icons/12/jump-to-icon.tsx
+++ b/packages/icons/12/jump-to-icon.tsx
@@ -12,7 +12,7 @@ const SvgJumpToIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="M4.575 2.525h4.95v4.95" stroke={color} strokeWidth={1.1} />
       <Path
diff --git a/packages/icons/12/lightning-icon.tsx b/packages/icons/12/lightning-icon.tsx
index 1148bdde..98c0eeaa 100644
--- a/packages/icons/12/lightning-icon.tsx
+++ b/packages/icons/12/lightning-icon.tsx
@@ -12,7 +12,7 @@ const SvgLightningIcon = (props: SvgProps) => {
       height={14}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M7 1.5V6h2.5L5 12.5v-5H2.5l4.5-6Z"
diff --git a/packages/icons/12/list-icon.tsx b/packages/icons/12/list-icon.tsx
index cb981316..c731c98f 100644
--- a/packages/icons/12/list-icon.tsx
+++ b/packages/icons/12/list-icon.tsx
@@ -12,7 +12,7 @@ const SvgListIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#list-icon_svg__a)" stroke={color} strokeWidth={1.1}>
         <Path d="M1 2.5c0-.465 0-.697.051-.888a1.5 1.5 0 0 1 1.06-1.06C2.304.5 2.536.5 3 .5h6c.465 0 .697 0 .888.051a1.5 1.5 0 0 1 1.06 1.06c.052.192.052.424.052.889s0 .697-.051.888a1.5 1.5 0 0 1-1.06 1.06C9.696 4.5 9.464 4.5 9 4.5H3c-.465 0-.697 0-.888-.051a1.5 1.5 0 0 1-1.06-1.06C1 3.196 1 2.964 1 2.5ZM1 9.5c0-.465 0-.697.051-.888a1.5 1.5 0 0 1 1.06-1.06C2.304 7.5 2.536 7.5 3 7.5h6c.465 0 .697 0 .888.051a1.5 1.5 0 0 1 1.06 1.06c.052.192.052.424.052.889s0 .697-.051.888a1.5 1.5 0 0 1-1.06 1.06c-.192.052-.424.052-.889.052H3c-.465 0-.697 0-.888-.051a1.5 1.5 0 0 1-1.06-1.06C1 10.197 1 9.964 1 9.5Z" />
diff --git a/packages/icons/12/loading-icon.tsx b/packages/icons/12/loading-icon.tsx
index 780a16a3..f956bf41 100644
--- a/packages/icons/12/loading-icon.tsx
+++ b/packages/icons/12/loading-icon.tsx
@@ -20,7 +20,7 @@ const SvgLoadingIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#loading-icon_svg__a)">
         <Path
diff --git a/packages/icons/12/locked-icon.tsx b/packages/icons/12/locked-icon.tsx
index afbb62cf..6fcbc784 100644
--- a/packages/icons/12/locked-icon.tsx
+++ b/packages/icons/12/locked-icon.tsx
@@ -12,7 +12,7 @@ const SvgLockedIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M2.5 7.75c0-.465 0-.697.038-.89A2 2 0 0 1 4.11 5.288c.193-.038.425-.038.89-.038h2c.465 0 .697 0 .89.038A2 2 0 0 1 9.462 6.86c.038.193.038.425.038.89s0 .697-.038.89a2 2 0 0 1-1.572 1.572c-.193.038-.425.038-.89.038H5c-.465 0-.697 0-.89-.038A2 2 0 0 1 2.538 8.64C2.5 8.447 2.5 8.215 2.5 7.75ZM4 3.75a2 2 0 1 1 4 0v1.5H4v-1.5Z"
diff --git a/packages/icons/12/mention-icon.tsx b/packages/icons/12/mention-icon.tsx
index 8c18666f..c39f904b 100644
--- a/packages/icons/12/mention-icon.tsx
+++ b/packages/icons/12/mention-icon.tsx
@@ -12,7 +12,7 @@ const SvgMentionIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#mention-icon_svg__a)" stroke={color} strokeWidth={1.1}>
         <Path d="M11 6a5 5 0 1 0-2.5 4.33" />
diff --git a/packages/icons/12/more-icon.tsx b/packages/icons/12/more-icon.tsx
index 44fa8da5..8bbd7fa1 100644
--- a/packages/icons/12/more-icon.tsx
+++ b/packages/icons/12/more-icon.tsx
@@ -12,7 +12,7 @@ const SvgMoreIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={2.5} cy={6} r={1} fill={color} />
       <Circle cx={6} cy={6} r={1} fill={color} />
diff --git a/packages/icons/12/negative-icon.tsx b/packages/icons/12/negative-icon.tsx
index a87bc747..710febe1 100644
--- a/packages/icons/12/negative-icon.tsx
+++ b/packages/icons/12/negative-icon.tsx
@@ -12,9 +12,9 @@ const SvgNegativeIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
-      <G clipPath="url(#negative-icon_svg__a)" stroke="#E65F5C">
+      <G clipPath="url(#negative-icon_svg__a)" stroke={color}>
         <Circle cx={6} cy={6} r={5.5} strokeOpacity={0.4} />
         <Path d="M6 8.5V3M3 5.5l3 3 3-3" strokeWidth={1.2} />
       </G>
diff --git a/packages/icons/12/notification-icon.tsx b/packages/icons/12/notification-icon.tsx
index 24099904..e7894dde 100644
--- a/packages/icons/12/notification-icon.tsx
+++ b/packages/icons/12/notification-icon.tsx
@@ -12,9 +12,9 @@ const SvgNotificationIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
-      <Circle cx={6} cy={6} r={4} fill="#4360DF" />
+      <Circle cx={6} cy={6} r={4} fill={color} />
     </Svg>
   )
 }
diff --git a/packages/icons/12/pause-icon.tsx b/packages/icons/12/pause-icon.tsx
index a45b9be8..0ec5cf00 100644
--- a/packages/icons/12/pause-icon.tsx
+++ b/packages/icons/12/pause-icon.tsx
@@ -12,7 +12,7 @@ const SvgPauseIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Rect x={2} y={2} width={8} height={8} rx={2} fill={color} />
     </Svg>
diff --git a/packages/icons/12/pending-icon.tsx b/packages/icons/12/pending-icon.tsx
index 1254f28d..1d0aa503 100644
--- a/packages/icons/12/pending-icon.tsx
+++ b/packages/icons/12/pending-icon.tsx
@@ -12,10 +12,10 @@ const SvgPendingIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={3} cy={6} r={1} fill="#000" fillOpacity={0.4} />
-      <Circle cx={6} cy={6} r={1} fill="#1B273D" fillOpacity={0.3} />
+      <Circle cx={6} cy={6} r={1} fill={color} fillOpacity={0.3} />
       <Circle cx={9} cy={6} r={1} fill="#000" fillOpacity={0.2} />
     </Svg>
   )
diff --git a/packages/icons/12/pick-icon.tsx b/packages/icons/12/pick-icon.tsx
index 4b0d0ef9..066701ef 100644
--- a/packages/icons/12/pick-icon.tsx
+++ b/packages/icons/12/pick-icon.tsx
@@ -12,7 +12,7 @@ const SvgPickIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#pick-icon_svg__a)">
         <Path
diff --git a/packages/icons/12/placeholder-icon.tsx b/packages/icons/12/placeholder-icon.tsx
index 4302a8fd..f271ec52 100644
--- a/packages/icons/12/placeholder-icon.tsx
+++ b/packages/icons/12/placeholder-icon.tsx
@@ -12,7 +12,7 @@ const SvgPlaceholderIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/12/play-icon.tsx b/packages/icons/12/play-icon.tsx
index b998c788..0c0f012d 100644
--- a/packages/icons/12/play-icon.tsx
+++ b/packages/icons/12/play-icon.tsx
@@ -12,7 +12,7 @@ const SvgPlayIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M3.5 4.73c0-1.205 0-1.807.25-2.131a1.2 1.2 0 0 1 .906-.466c.408-.016.899.335 1.88 1.036l1.777 1.269c.737.527 1.106.79 1.237 1.117a1.2 1.2 0 0 1 0 .89c-.13.327-.5.59-1.237 1.117l-1.777 1.27c-.981.7-1.472 1.05-1.88 1.035a1.2 1.2 0 0 1-.906-.466c-.25-.324-.25-.926-.25-2.132V4.731Z"
diff --git a/packages/icons/12/positive-icon.tsx b/packages/icons/12/positive-icon.tsx
index 42501435..3d113d5c 100644
--- a/packages/icons/12/positive-icon.tsx
+++ b/packages/icons/12/positive-icon.tsx
@@ -12,9 +12,9 @@ const SvgPositiveIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
-      <G clipPath="url(#positive-icon_svg__a)" stroke="#26A69A">
+      <G clipPath="url(#positive-icon_svg__a)" stroke={color}>
         <Circle cx={6} cy={6} r={5.5} strokeOpacity={0.4} />
         <Path d="M6 3.5V9M9 6.5l-3-3-3 3" strokeWidth={1.2} />
       </G>
diff --git a/packages/icons/12/progress-icon.tsx b/packages/icons/12/progress-icon.tsx
index 9a3a9a55..0ab47044 100644
--- a/packages/icons/12/progress-icon.tsx
+++ b/packages/icons/12/progress-icon.tsx
@@ -12,7 +12,7 @@ const SvgProgressIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#progress-icon_svg__a)" strokeWidth={1.1}>
         <Path d="M6 1a5 5 0 1 1 0 10A5 5 0 0 1 6 1Z" stroke="#E7EAEE" />
diff --git a/packages/icons/12/pullup-icon.tsx b/packages/icons/12/pullup-icon.tsx
index c3fa5eff..e1fbbfce 100644
--- a/packages/icons/12/pullup-icon.tsx
+++ b/packages/icons/12/pullup-icon.tsx
@@ -12,7 +12,7 @@ const SvgPullupIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#pullup-icon_svg__a)">
         <Circle
diff --git a/packages/icons/12/remove-icon.tsx b/packages/icons/12/remove-icon.tsx
index fab7232b..4f88b6e7 100644
--- a/packages/icons/12/remove-icon.tsx
+++ b/packages/icons/12/remove-icon.tsx
@@ -12,10 +12,10 @@ const SvgRemoveIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#remove-icon_svg__a)">
-        <Circle cx={6} cy={6} r={6} fill="#647084" />
+        <Circle cx={6} cy={6} r={6} fill={color} />
         <Path
           d="M3.879 3.879 8.12 8.12M8.121 3.879 3.88 8.12"
           stroke="#fff"
diff --git a/packages/icons/12/search-icon.tsx b/packages/icons/12/search-icon.tsx
index 345660ec..7b49a029 100644
--- a/packages/icons/12/search-icon.tsx
+++ b/packages/icons/12/search-icon.tsx
@@ -12,7 +12,7 @@ const SvgSearchIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/12/send-message-icon.tsx b/packages/icons/12/send-message-icon.tsx
index 773dc49e..49f798e5 100644
--- a/packages/icons/12/send-message-icon.tsx
+++ b/packages/icons/12/send-message-icon.tsx
@@ -12,11 +12,11 @@ const SvgSendMessageIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G
         clipPath="url(#send-message-icon_svg__a)"
-        stroke="#000"
+        stroke={color}
         strokeWidth={1.1}
       >
         <Path d="m2.495 5.511 5.466-3.609a1 1 0 0 1 1.55.894l-.393 6.539c-.055.918-1.216 1.28-1.784.558L5.63 7.728l-2.727-.393c-.91-.13-1.175-1.317-.408-1.824ZM9.13 1.666l-3.5 6.062" />
diff --git a/packages/icons/12/sent-icon.tsx b/packages/icons/12/sent-icon.tsx
index 6f5d7816..d7e21780 100644
--- a/packages/icons/12/sent-icon.tsx
+++ b/packages/icons/12/sent-icon.tsx
@@ -12,7 +12,7 @@ const SvgSentIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="M2.5 6.25 5 8.75l4.5-5.5" stroke={color} strokeWidth={1.3} />
     </Svg>
diff --git a/packages/icons/12/timeout-icon.tsx b/packages/icons/12/timeout-icon.tsx
index 96ec81fe..d81761e6 100644
--- a/packages/icons/12/timeout-icon.tsx
+++ b/packages/icons/12/timeout-icon.tsx
@@ -12,7 +12,7 @@ const SvgTimeoutIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#timeout-icon_svg__a)">
         <Path
diff --git a/packages/icons/12/total-members-icon.tsx b/packages/icons/12/total-members-icon.tsx
index 86e0fb22..bdb9123d 100644
--- a/packages/icons/12/total-members-icon.tsx
+++ b/packages/icons/12/total-members-icon.tsx
@@ -12,7 +12,7 @@ const SvgTotalMembersIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M3 9.25A2.25 2.25 0 0 1 5.25 7h1.5A2.25 2.25 0 0 1 9 9.25a.75.75 0 0 1-.75.75h-4.5A.75.75 0 0 1 3 9.25Z"
diff --git a/packages/icons/12/trash-icon.tsx b/packages/icons/12/trash-icon.tsx
index 3609b53c..07f160ee 100644
--- a/packages/icons/12/trash-icon.tsx
+++ b/packages/icons/12/trash-icon.tsx
@@ -12,7 +12,7 @@ const SvgTrashIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#trash-icon_svg__a)" stroke={color} strokeWidth={1.1}>
         <Path d="M2.5 3.5v4.3c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C4.02 11 4.58 11 5.7 11h.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C9.5 9.48 9.5 8.92 9.5 7.8V3.5M8 3a2 2 0 1 0-4 0M5 5.5V8M7 5.5V8" />
diff --git a/packages/icons/12/unlocked-icon.tsx b/packages/icons/12/unlocked-icon.tsx
index e7c20f5c..25dc7d91 100644
--- a/packages/icons/12/unlocked-icon.tsx
+++ b/packages/icons/12/unlocked-icon.tsx
@@ -12,7 +12,7 @@ const SvgUnlockedIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M2.5 7.75c0-.465 0-.697.038-.89A2 2 0 0 1 4.11 5.288c.193-.038.425-.038.89-.038h2c.465 0 .697 0 .89.038A2 2 0 0 1 9.462 6.86c.038.193.038.425.038.89s0 .697-.038.89a2 2 0 0 1-1.572 1.572c-.193.038-.425.038-.89.038H5c-.465 0-.697 0-.89-.038A2 2 0 0 1 2.538 8.64C2.5 8.447 2.5 8.215 2.5 7.75ZM8 5.25v-1.5a2 2 0 1 0-4 0"
diff --git a/packages/icons/12/untrustworthy-icon.tsx b/packages/icons/12/untrustworthy-icon.tsx
index 46a6f78d..ade15196 100644
--- a/packages/icons/12/untrustworthy-icon.tsx
+++ b/packages/icons/12/untrustworthy-icon.tsx
@@ -12,9 +12,9 @@ const SvgUntrustworthyIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
-      <Circle cx={6} cy={6} r={5} fill="#E65F5C" />
+      <Circle cx={6} cy={6} r={5} fill={color} />
       <Path d="M6 7V3M6 9V8" stroke="#fff" strokeWidth={1.1} />
     </Svg>
   )
diff --git a/packages/icons/12/verified-1-icon.tsx b/packages/icons/12/verified-1-icon.tsx
index 903a9323..5787723d 100644
--- a/packages/icons/12/verified-1-icon.tsx
+++ b/packages/icons/12/verified-1-icon.tsx
@@ -12,7 +12,7 @@ const SvgVerified1Icon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#verified-1-icon_svg__a)">
         <Path
diff --git a/packages/icons/12/verified-icon.tsx b/packages/icons/12/verified-icon.tsx
index 4557b389..17c2d369 100644
--- a/packages/icons/12/verified-icon.tsx
+++ b/packages/icons/12/verified-icon.tsx
@@ -12,9 +12,9 @@ const SvgVerifiedIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
-      <Circle cx={6} cy={6} r={5} fill="#26A69A" />
+      <Circle cx={6} cy={6} r={5} fill={color} />
       <Path d="m4 6.3 1.333 1.2L8 4.5" stroke="#fff" strokeWidth={1.1} />
     </Svg>
   )
diff --git a/packages/icons/12/whistle-icon.tsx b/packages/icons/12/whistle-icon.tsx
index 32e204a3..2f561575 100644
--- a/packages/icons/12/whistle-icon.tsx
+++ b/packages/icons/12/whistle-icon.tsx
@@ -12,7 +12,7 @@ const SvgWhistleIcon = (props: SvgProps) => {
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M7.128 7.696A3 3 0 0 0 6.732 6l1.232-1.866-1-1.732-4.33 2.5a3 3 0 1 0 4.494 2.794Z"
diff --git a/packages/icons/16/add-icon.tsx b/packages/icons/16/add-icon.tsx
index 4914483d..d41c4801 100644
--- a/packages/icons/16/add-icon.tsx
+++ b/packages/icons/16/add-icon.tsx
@@ -12,7 +12,7 @@ const SvgAddIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="M8 13V3M3 8h10" stroke={color} strokeWidth={1.2} />
     </Svg>
diff --git a/packages/icons/16/add-user-icon.tsx b/packages/icons/16/add-user-icon.tsx
index 21790ce9..5886ad68 100644
--- a/packages/icons/16/add-user-icon.tsx
+++ b/packages/icons/16/add-user-icon.tsx
@@ -12,7 +12,7 @@ const SvgAddUserIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M8.5 10H6a3 3 0 0 0-3 3 1 1 0 0 0 1 1h4.5"
diff --git a/packages/icons/16/alert-icon.tsx b/packages/icons/16/alert-icon.tsx
index f8bf9cb9..1183e6bb 100644
--- a/packages/icons/16/alert-icon.tsx
+++ b/packages/icons/16/alert-icon.tsx
@@ -12,7 +12,7 @@ const SvgAlertIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle
         cx={8}
diff --git a/packages/icons/16/arrow-down-icon.tsx b/packages/icons/16/arrow-down-icon.tsx
index 2640cb20..319b2cf2 100644
--- a/packages/icons/16/arrow-down-icon.tsx
+++ b/packages/icons/16/arrow-down-icon.tsx
@@ -12,7 +12,7 @@ const SvgArrowDownIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m4 9 4 4 4-4M8 3v10" stroke={color} strokeWidth={1.2} />
     </Svg>
diff --git a/packages/icons/16/arrow-right-icon.tsx b/packages/icons/16/arrow-right-icon.tsx
index ec7aa274..ef0d41c8 100644
--- a/packages/icons/16/arrow-right-icon.tsx
+++ b/packages/icons/16/arrow-right-icon.tsx
@@ -12,7 +12,7 @@ const SvgArrowRightIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m9 12 4-4-4-4M3 8h10" stroke={color} strokeWidth={1.2} />
     </Svg>
diff --git a/packages/icons/16/calendar-icon.tsx b/packages/icons/16/calendar-icon.tsx
index ac65f465..be55f3f4 100644
--- a/packages/icons/16/calendar-icon.tsx
+++ b/packages/icons/16/calendar-icon.tsx
@@ -12,7 +12,7 @@ const SvgCalendarIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M14 9.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C11.72 14 10.88 14 9.2 14H6.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C2 11.72 2 10.88 2 9.2V7.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C4.28 3 5.12 3 6.8 3h2.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C14 5.28 14 6.12 14 7.8v1.4Z"
diff --git a/packages/icons/16/check-circle-icon.tsx b/packages/icons/16/check-circle-icon.tsx
index 9bb3da0d..a59dbe63 100644
--- a/packages/icons/16/check-circle-icon.tsx
+++ b/packages/icons/16/check-circle-icon.tsx
@@ -12,7 +12,7 @@ const SvgCheckCircleIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={8} cy={8} r={6} stroke={color} strokeWidth={1.2} />
       <Path d="m5 8 2 2 4-4" stroke={color} strokeWidth={1.2} />
diff --git a/packages/icons/16/chevron-down-icon.tsx b/packages/icons/16/chevron-down-icon.tsx
index 755d7a67..cf7f9b2e 100644
--- a/packages/icons/16/chevron-down-icon.tsx
+++ b/packages/icons/16/chevron-down-icon.tsx
@@ -12,7 +12,7 @@ const SvgChevronDownIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m5 6.5 3 3 3-3" stroke={color} strokeWidth={1.2} />
     </Svg>
diff --git a/packages/icons/16/chevron-left-icon.tsx b/packages/icons/16/chevron-left-icon.tsx
index 570519cd..c67e4455 100644
--- a/packages/icons/16/chevron-left-icon.tsx
+++ b/packages/icons/16/chevron-left-icon.tsx
@@ -12,7 +12,7 @@ const SvgChevronLeftIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m9.5 5-3 3 3 3" stroke={color} strokeWidth={1.2} />
     </Svg>
diff --git a/packages/icons/16/chevron-right-icon.tsx b/packages/icons/16/chevron-right-icon.tsx
index c66aad7c..2a427956 100644
--- a/packages/icons/16/chevron-right-icon.tsx
+++ b/packages/icons/16/chevron-right-icon.tsx
@@ -12,7 +12,7 @@ const SvgChevronRightIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m6.5 11 3-3-3-3" stroke={color} strokeWidth={1.2} />
     </Svg>
diff --git a/packages/icons/16/chevron-top-icon.tsx b/packages/icons/16/chevron-top-icon.tsx
index 5d1c8053..bee3b0a4 100644
--- a/packages/icons/16/chevron-top-icon.tsx
+++ b/packages/icons/16/chevron-top-icon.tsx
@@ -12,7 +12,7 @@ const SvgChevronTopIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m11 9.5-3-3-3 3" stroke={color} strokeWidth={1.2} />
     </Svg>
diff --git a/packages/icons/16/close-icon.tsx b/packages/icons/16/close-icon.tsx
index c10c8850..1dfa2331 100644
--- a/packages/icons/16/close-icon.tsx
+++ b/packages/icons/16/close-icon.tsx
@@ -12,7 +12,7 @@ const SvgCloseIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="m4.464 11.536 7.072-7.072M4.464 4.464l7.072 7.072"
diff --git a/packages/icons/16/connection-icon.tsx b/packages/icons/16/connection-icon.tsx
index e5812cd3..f1cf86e1 100644
--- a/packages/icons/16/connection-icon.tsx
+++ b/packages/icons/16/connection-icon.tsx
@@ -12,17 +12,17 @@ const SvgConnectionIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M11 14H5l3-7 3 7Z"
-        stroke="#000"
+        stroke={color}
         strokeWidth={1.2}
         strokeLinejoin="round"
       />
       <Path
         d="M8 7V5M4.61 2a3.6 3.6 0 0 0 0 6M5.8 3.531a2.1 2.1 0 0 0 0 2.939M11.39 8a3.601 3.601 0 0 0 0-6M10.2 6.469a2.1 2.1 0 0 0 0-2.939"
-        stroke="#000"
+        stroke={color}
         strokeWidth={1.2}
         strokeLinecap="square"
         strokeLinejoin="round"
diff --git a/packages/icons/16/contact-book-icon.tsx b/packages/icons/16/contact-book-icon.tsx
index 9781ae97..d01ad197 100644
--- a/packages/icons/16/contact-book-icon.tsx
+++ b/packages/icons/16/contact-book-icon.tsx
@@ -12,7 +12,7 @@ const SvgContactBookIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M6 10.625c0-1.036.84-1.875 1.875-1.875h1.25c1.036 0 1.875.84 1.875 1.875 0 .345-.28.625-.625.625h-3.75A.625.625 0 0 1 6 10.625Z"
diff --git a/packages/icons/16/delete-icon.tsx b/packages/icons/16/delete-icon.tsx
index aeb8251c..f01c6709 100644
--- a/packages/icons/16/delete-icon.tsx
+++ b/packages/icons/16/delete-icon.tsx
@@ -12,7 +12,7 @@ const SvgDeleteIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M3.5 4h9l-.348 6.96c-.053 1.069-.08 1.604-.305 2.01a2 2 0 0 1-.868.825c-.417.205-.952.205-2.023.205H7.044c-1.07 0-1.606 0-2.023-.204a2 2 0 0 1-.868-.826c-.225-.406-.252-.94-.305-2.01L3.5 4Z"
diff --git a/packages/icons/16/email-icon.tsx b/packages/icons/16/email-icon.tsx
index a8a2a05f..27efab5c 100644
--- a/packages/icons/16/email-icon.tsx
+++ b/packages/icons/16/email-icon.tsx
@@ -12,7 +12,7 @@ const SvgEmailIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M9.2 13H6.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C2 10.72 2 9.88 2 8.2v-.4c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C4.28 3 5.12 3 6.8 3h2.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C14 5.28 14 6.12 14 7.8v.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C11.72 13 10.88 13 9.2 13Z"
diff --git a/packages/icons/16/forward-icon.tsx b/packages/icons/16/forward-icon.tsx
index af722663..f1193bfc 100644
--- a/packages/icons/16/forward-icon.tsx
+++ b/packages/icons/16/forward-icon.tsx
@@ -12,14 +12,14 @@ const SvgForwardIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M14 8H8.4c-2.24 0-3.36 0-4.216.436a4 4 0 0 0-1.748 1.748C2 11.04 2 12.16 2 14.4v.1"
-        stroke="#000"
+        stroke={color}
         strokeWidth={1.2}
       />
-      <Path d="M10 11.5 14 8l-4-3.5" stroke="#000" strokeWidth={1.2} />
+      <Path d="M10 11.5 14 8l-4-3.5" stroke={color} strokeWidth={1.2} />
     </Svg>
   )
 }
diff --git a/packages/icons/16/gif-icon.tsx b/packages/icons/16/gif-icon.tsx
index a9bf1e6c..57f2f5b7 100644
--- a/packages/icons/16/gif-icon.tsx
+++ b/packages/icons/16/gif-icon.tsx
@@ -12,7 +12,7 @@ const SvgGifIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M9.2 14H6.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C2 11.72 2 10.88 2 9.2V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C4.28 2 5.12 2 6.8 2h2.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C14 4.28 14 5.12 14 6.8v2.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C11.72 14 10.88 14 9.2 14Z"
diff --git a/packages/icons/16/group-icon.tsx b/packages/icons/16/group-icon.tsx
index 17ee4cb8..65ebe67b 100644
--- a/packages/icons/16/group-icon.tsx
+++ b/packages/icons/16/group-icon.tsx
@@ -12,7 +12,7 @@ const SvgGroupIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/16/history-icon.tsx b/packages/icons/16/history-icon.tsx
index 707b3f56..1cc360ae 100644
--- a/packages/icons/16/history-icon.tsx
+++ b/packages/icons/16/history-icon.tsx
@@ -12,15 +12,15 @@ const SvgHistoryIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M2.6 4.204V3H1.4v3.6h3.1V5.4H3.266a5.4 5.4 0 1 1-.534 3.792l-1.165.291A6.6 6.6 0 1 0 2.6 4.204Z"
-        fill="#000"
+        fill={color}
       />
-      <Path d="M7.5 5v3l2.5 2.5" stroke="#000" strokeWidth={1.2} />
+      <Path d="M7.5 5v3l2.5 2.5" stroke={color} strokeWidth={1.2} />
     </Svg>
   )
 }
diff --git a/packages/icons/16/info-icon.tsx b/packages/icons/16/info-icon.tsx
index d2cad24b..b15e2f90 100644
--- a/packages/icons/16/info-icon.tsx
+++ b/packages/icons/16/info-icon.tsx
@@ -12,7 +12,7 @@ const SvgInfoIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={8} cy={8} r={6} stroke={color} strokeWidth={1.2} />
       <Path d="M8 7v4M8 5v1.25" stroke={color} strokeWidth={1.2} />
diff --git a/packages/icons/16/lightning-icon.tsx b/packages/icons/16/lightning-icon.tsx
index ca2b50db..1d9638a6 100644
--- a/packages/icons/16/lightning-icon.tsx
+++ b/packages/icons/16/lightning-icon.tsx
@@ -12,7 +12,7 @@ const SvgLightningIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M9 2v5h3l-5 7V9H4l5-7Z"
diff --git a/packages/icons/16/locked-icon.tsx b/packages/icons/16/locked-icon.tsx
index 108a4bbb..758a0962 100644
--- a/packages/icons/16/locked-icon.tsx
+++ b/packages/icons/16/locked-icon.tsx
@@ -12,7 +12,7 @@ const SvgLockedIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/16/mention-icon.tsx b/packages/icons/16/mention-icon.tsx
index a2a54289..ebdae3e0 100644
--- a/packages/icons/16/mention-icon.tsx
+++ b/packages/icons/16/mention-icon.tsx
@@ -12,7 +12,7 @@ const SvgMentionIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/16/more-icon.tsx b/packages/icons/16/more-icon.tsx
index f423f512..4983f2ee 100644
--- a/packages/icons/16/more-icon.tsx
+++ b/packages/icons/16/more-icon.tsx
@@ -12,7 +12,7 @@ const SvgMoreIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={3.25} cy={8} r={1.25} fill={color} />
       <Circle cx={8} cy={8} r={1.25} fill={color} />
diff --git a/packages/icons/16/mute-icon.tsx b/packages/icons/16/mute-icon.tsx
index 5e04dc90..e93d3617 100644
--- a/packages/icons/16/mute-icon.tsx
+++ b/packages/icons/16/mute-icon.tsx
@@ -12,7 +12,7 @@ const SvgMuteIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/16/negative-icon.tsx b/packages/icons/16/negative-icon.tsx
index 17f59742..77e34d2b 100644
--- a/packages/icons/16/negative-icon.tsx
+++ b/packages/icons/16/negative-icon.tsx
@@ -12,10 +12,10 @@ const SvgNegativeIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
-      <Circle cx={8} cy={8} r={6} stroke="#E65F5C" strokeOpacity={0.4} />
-      <Path d="M8 10.5V5M5 7.5l3 3 3-3" stroke="#E65F5C" strokeWidth={1.2} />
+      <Circle cx={8} cy={8} r={6} stroke={color} strokeOpacity={0.4} />
+      <Path d="M8 10.5V5M5 7.5l3 3 3-3" stroke={color} strokeWidth={1.2} />
     </Svg>
   )
 }
diff --git a/packages/icons/16/notification-icon.tsx b/packages/icons/16/notification-icon.tsx
index 9609cea9..fa1cabd5 100644
--- a/packages/icons/16/notification-icon.tsx
+++ b/packages/icons/16/notification-icon.tsx
@@ -12,9 +12,9 @@ const SvgNotificationIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
-      <Circle cx={8} cy={8} r={4} fill="#4360DF" />
+      <Circle cx={8} cy={8} r={4} fill={color} />
     </Svg>
   )
 }
diff --git a/packages/icons/16/pin-icon.tsx b/packages/icons/16/pin-icon.tsx
index bcc565ed..957483e9 100644
--- a/packages/icons/16/pin-icon.tsx
+++ b/packages/icons/16/pin-icon.tsx
@@ -12,7 +12,7 @@ const SvgPinIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="m8.5 3.5 4 4-4 4-4-4 4-4ZM6.5 9.5 3 13M3.5 6.5l6 6M7.5 2.5l6 6"
diff --git a/packages/icons/16/placeholder-icon.tsx b/packages/icons/16/placeholder-icon.tsx
index 559a2cbb..7a1e85db 100644
--- a/packages/icons/16/placeholder-icon.tsx
+++ b/packages/icons/16/placeholder-icon.tsx
@@ -12,7 +12,7 @@ const SvgPlaceholderIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/16/positive-icon.tsx b/packages/icons/16/positive-icon.tsx
index ed285eca..a6bdadd2 100644
--- a/packages/icons/16/positive-icon.tsx
+++ b/packages/icons/16/positive-icon.tsx
@@ -12,10 +12,10 @@ const SvgPositiveIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
-      <Circle cx={8} cy={8} r={6} stroke="#26A69A" strokeOpacity={0.4} />
-      <Path d="M8 5.5V11M11 8.5l-3-3-3 3" stroke="#26A69A" strokeWidth={1.2} />
+      <Circle cx={8} cy={8} r={6} stroke={color} strokeOpacity={0.4} />
+      <Path d="M8 5.5V11M11 8.5l-3-3-3 3" stroke={color} strokeWidth={1.2} />
     </Svg>
   )
 }
diff --git a/packages/icons/16/privacy-icon.tsx b/packages/icons/16/privacy-icon.tsx
index 44e91ab0..e18f0caf 100644
--- a/packages/icons/16/privacy-icon.tsx
+++ b/packages/icons/16/privacy-icon.tsx
@@ -12,13 +12,13 @@ const SvgPrivacyIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M5.14 4.122a.4.4 0 0 1 .639-.192l1.837 1.53.42.352.388-.388 1.428-1.427a.4.4 0 0 1 .654.134L11.614 6.9H4.306l.834-2.778ZM3.054 6.9l.936-3.122a1.6 1.6 0 0 1 2.557-.77l1.416 1.18 1.04-1.04a1.6 1.6 0 0 1 2.617.537L12.906 6.9H14v1.2H2V6.9h1.054ZM5 10.6a1.15 1.15 0 1 0 0 2.3 1.15 1.15 0 0 0 0-2.3Zm-2.35 1.15a2.35 2.35 0 0 1 4.59-.716 3.31 3.31 0 0 1 1.52 0 2.351 2.351 0 1 1-.053 1.234 2.106 2.106 0 0 0-1.414 0 2.35 2.35 0 0 1-4.643-.518Zm7.2 0a1.15 1.15 0 1 1 2.3 0 1.15 1.15 0 0 1-2.3 0Z"
-        fill="#000"
+        fill={color}
       />
     </Svg>
   )
diff --git a/packages/icons/16/progress-icon.tsx b/packages/icons/16/progress-icon.tsx
index 4be33b87..04a621f0 100644
--- a/packages/icons/16/progress-icon.tsx
+++ b/packages/icons/16/progress-icon.tsx
@@ -12,7 +12,7 @@ const SvgProgressIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle
         cx={8}
diff --git a/packages/icons/16/remove-user-icon.tsx b/packages/icons/16/remove-user-icon.tsx
index 83000c21..950e4430 100644
--- a/packages/icons/16/remove-user-icon.tsx
+++ b/packages/icons/16/remove-user-icon.tsx
@@ -12,7 +12,7 @@ const SvgRemoveUserIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M8.5 10H6a3 3 0 0 0-3 3 1 1 0 0 0 1 1h4.5"
diff --git a/packages/icons/16/sad-icon.tsx b/packages/icons/16/sad-icon.tsx
index b83beb66..38e4de00 100644
--- a/packages/icons/16/sad-icon.tsx
+++ b/packages/icons/16/sad-icon.tsx
@@ -12,7 +12,7 @@ const SvgSadIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={8} cy={8} r={6} stroke={color} strokeWidth={1.2} />
       <Path
diff --git a/packages/icons/16/stickers-icon.tsx b/packages/icons/16/stickers-icon.tsx
index 58e762fd..c2815a82 100644
--- a/packages/icons/16/stickers-icon.tsx
+++ b/packages/icons/16/stickers-icon.tsx
@@ -12,7 +12,7 @@ const SvgStickersIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M8 2h.667c1.24 0 1.86 0 2.368.136a4 4 0 0 1 2.829 2.829C14 5.473 14 6.093 14 7.333c0 1.55 0 2.325-.17 2.961a5 5 0 0 1-3.536 3.536c-.636.17-1.41.17-2.96.17-1.24 0-1.86 0-2.37-.136a4 4 0 0 1-2.828-2.829C2 10.527 2 9.907 2 8.667V8c0-1.864 0-2.796.304-3.53A4 4 0 0 1 4.47 2.303C5.204 2 6.136 2 8 2Z"
diff --git a/packages/icons/16/unlocked-icon.tsx b/packages/icons/16/unlocked-icon.tsx
index ccfda250..61e07214 100644
--- a/packages/icons/16/unlocked-icon.tsx
+++ b/packages/icons/16/unlocked-icon.tsx
@@ -12,7 +12,7 @@ const SvgUnlockedIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/16/unmute-icon.tsx b/packages/icons/16/unmute-icon.tsx
index 7d626f84..bb811c59 100644
--- a/packages/icons/16/unmute-icon.tsx
+++ b/packages/icons/16/unmute-icon.tsx
@@ -12,7 +12,7 @@ const SvgUnmuteIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/16/world-icon.tsx b/packages/icons/16/world-icon.tsx
index ca32b625..844ecfe1 100644
--- a/packages/icons/16/world-icon.tsx
+++ b/packages/icons/16/world-icon.tsx
@@ -12,13 +12,13 @@ const SvgWorldIcon = (props: SvgProps) => {
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M2.6 8a5.4 5.4 0 0 1 5.792-5.386c-.454.248-.926.515-1.33.77-.39.247-.772.516-1.01.772-.105.113-.276.32-.31.593-.02.162.01.34.114.5.098.15.23.24.342.293.266.127.574.231.852.323l.111.037c.248.082.476.157.683.24.242.099.4.188.49.268.07.062.067.086.066.09a.224.224 0 0 1-.032.028c-.079.06-.225.128-.472.202-.164.05-.331.091-.516.137l-.292.073a5.012 5.012 0 0 0-.89.301c-.082.039-.185.08-.316.134l-.242.099a4.845 4.845 0 0 0-.714.352 1.439 1.439 0 0 0-.34.29.807.807 0 0 0-.186.651c.05.285.24.463.386.563.151.103.336.18.532.242.337.107.574.192.745.27.172.078.24.132.268.161l.002.002c.022.022.067.068.067.495 0 .21.047.453.102.677.058.234.137.49.223.744.185.55.634.987 1.235.957.589-.029 1.001-.492 1.156-1.042.244-.862.554-1.555 1.088-1.895.49-.311.76-.682.95-1.057.08-.162.15-.328.21-.473l.015-.038c.066-.16.127-.304.201-.445.207-.396.566-.876 1.627-1.366A5.4 5.4 0 1 1 2.6 8Zm10.16-2.553a5.421 5.421 0 0 0-2.618-2.406l-.227.12c-.674.356-1.545.816-2.212 1.238a8.393 8.393 0 0 0-.418.28l.142.047.106.035c.245.08.515.17.763.27.28.114.588.264.831.479.259.228.473.555.473.99 0 .445-.225.77-.506.984-.257.194-.575.311-.85.395-.194.058-.412.112-.612.162l-.244.061a3.89 3.89 0 0 0-.674.222c-.114.055-.274.12-.428.182l-.167.068c.163.058.31.116.44.175.238.108.46.239.636.422.387.402.405.901.405 1.329 0 .06.017.187.067.388.047.19.115.413.195.65.015.045.032.078.046.102a.51.51 0 0 0 .053-.13c.245-.866.648-1.977 1.6-2.582.268-.17.406-.357.521-.585.06-.119.112-.244.176-.399l.012-.029c.066-.161.145-.35.247-.544.359-.685.949-1.337 2.243-1.924ZM8 1.4a6.6 6.6 0 1 0 0 13.2A6.6 6.6 0 0 0 8 1.4ZM6.894 5.017l.004-.006a.038.038 0 0 1-.004.006Z"
-        fill="#000"
+        fill={color}
       />
     </Svg>
   )
diff --git a/packages/icons/20/account-number-icon.tsx b/packages/icons/20/account-number-icon.tsx
index 2948d8b4..ebf76f5a 100644
--- a/packages/icons/20/account-number-icon.tsx
+++ b/packages/icons/20/account-number-icon.tsx
@@ -12,7 +12,7 @@ const SvgAccountNumberIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Rect x={2.5} y={2.5} width={15} height={15} rx={3.5} stroke={color} />
       <Path
diff --git a/packages/icons/20/active-member-icon.tsx b/packages/icons/20/active-member-icon.tsx
index b5420c81..3b6b8f93 100644
--- a/packages/icons/20/active-member-icon.tsx
+++ b/packages/icons/20/active-member-icon.tsx
@@ -12,7 +12,7 @@ const SvgActiveMemberIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M11.25 2.5v6.25h3.25L8.75 17.5v-6.25H5.5l5.75-8.75Z"
diff --git a/packages/icons/20/activity-center-icon.tsx b/packages/icons/20/activity-center-icon.tsx
index fc8c845c..c4d19307 100644
--- a/packages/icons/20/activity-center-icon.tsx
+++ b/packages/icons/20/activity-center-icon.tsx
@@ -12,7 +12,7 @@ const SvgActivityCenterIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M5.5 7.5a4.5 4.5 0 1 1 9 0v.75c0 .811.263 1.6.75 2.25l.45.6a1.5 1.5 0 0 1-1.2 2.4h-9a1.5 1.5 0 0 1-1.2-2.4l.45-.6a3.75 3.75 0 0 0 .75-2.25V7.5ZM7.878 16.121a2.999 2.999 0 0 0 4.243 0"
diff --git a/packages/icons/20/add-icon.tsx b/packages/icons/20/add-icon.tsx
index c5481464..c3d243ea 100644
--- a/packages/icons/20/add-icon.tsx
+++ b/packages/icons/20/add-icon.tsx
@@ -12,7 +12,7 @@ const SvgAddIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/add-reaction-icon.tsx b/packages/icons/20/add-reaction-icon.tsx
index de6d2ab5..254de58a 100644
--- a/packages/icons/20/add-reaction-icon.tsx
+++ b/packages/icons/20/add-reaction-icon.tsx
@@ -12,7 +12,7 @@ const SvgAddReactionIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M7.525 12a3.5 3.5 0 0 0 4.95 0"
diff --git a/packages/icons/20/add-small-icon.tsx b/packages/icons/20/add-small-icon.tsx
index 267c20fd..da315863 100644
--- a/packages/icons/20/add-small-icon.tsx
+++ b/packages/icons/20/add-small-icon.tsx
@@ -12,7 +12,7 @@ const SvgAddSmallIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/add-token-icon.tsx b/packages/icons/20/add-token-icon.tsx
index 3aead3e3..a78198d1 100644
--- a/packages/icons/20/add-token-icon.tsx
+++ b/packages/icons/20/add-token-icon.tsx
@@ -12,7 +12,7 @@ const SvgAddTokenIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10} cy={10} r={6.75} fill={color} />
       <Path
diff --git a/packages/icons/20/add-user-icon.tsx b/packages/icons/20/add-user-icon.tsx
index c1969a43..25eeea65 100644
--- a/packages/icons/20/add-user-icon.tsx
+++ b/packages/icons/20/add-user-icon.tsx
@@ -12,7 +12,7 @@ const SvgAddUserIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/alert-icon.tsx b/packages/icons/20/alert-icon.tsx
index a046ae09..291edf81 100644
--- a/packages/icons/20/alert-icon.tsx
+++ b/packages/icons/20/alert-icon.tsx
@@ -12,7 +12,7 @@ const SvgAlertIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10} cy={10} r={6.75} stroke={color} strokeWidth={1.3} />
       <Path d="M10 12V6M10 14v-1" stroke={color} strokeWidth={1.3} />
diff --git a/packages/icons/20/alphabetically-icon.tsx b/packages/icons/20/alphabetically-icon.tsx
index 1b3b58fe..7be725a5 100644
--- a/packages/icons/20/alphabetically-icon.tsx
+++ b/packages/icons/20/alphabetically-icon.tsx
@@ -12,7 +12,7 @@ const SvgAlphabeticallyIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M8.412 13H7l2.152-6h1.699l1.074 3L13 13h-1.412l-1.562-4.629h-.049L8.412 13Zm-.088-2.358h3.337v.99H8.324v-.99Z"
diff --git a/packages/icons/20/android-icon.tsx b/packages/icons/20/android-icon.tsx
index 40faaf26..b77c2e42 100644
--- a/packages/icons/20/android-icon.tsx
+++ b/packages/icons/20/android-icon.tsx
@@ -12,7 +12,7 @@ const SvgAndroidIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M4 9a6 6 0 0 1 12 0v5.667A2.333 2.333 0 0 1 13.667 17H6.333A2.333 2.333 0 0 1 4 14.667V9Z"
diff --git a/packages/icons/20/anonymous-icon.tsx b/packages/icons/20/anonymous-icon.tsx
index 8984576c..825d98a2 100644
--- a/packages/icons/20/anonymous-icon.tsx
+++ b/packages/icons/20/anonymous-icon.tsx
@@ -12,13 +12,13 @@ const SvgAnonymousIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M13.545 3.172a9 9 0 0 0-7.09 0l-2.249.964a1 1 0 0 0-.606.919V10.4a4.2 4.2 0 0 0 .84 2.52l.806 1.074a13.8 13.8 0 0 0 2.76 2.76L9.4 17.8V15h1.2v2.8l1.394-1.046a13.802 13.802 0 0 0 2.76-2.76l.806-1.074a4.2 4.2 0 0 0 .84-2.52V5.055a1 1 0 0 0-.606-.92l-2.249-.963ZM5.982 2.07a10.2 10.2 0 0 1 8.036 0l2.248.964A2.2 2.2 0 0 1 17.6 5.055V10.4a5.4 5.4 0 0 1-1.08 3.24l-.806 1.074a14.998 14.998 0 0 1-3 3L10.84 19.12a1.4 1.4 0 0 1-1.68 0l-1.874-1.406a14.999 14.999 0 0 1-3-3L3.48 13.64A5.4 5.4 0 0 1 2.4 10.4V5.055a2.2 2.2 0 0 1 1.333-2.022l2.249-.964ZM9 7.5a2.828 2.828 0 0 1-4 0 2.828 2.828 0 0 1 4 0Zm6 0a2.828 2.828 0 0 1-4 0 2.828 2.828 0 0 1 4 0Zm-9.051 3.601 1.565 1.761a.857.857 0 0 0 1.384-.144l.218-.38c-.572-.253-1.036-.767-1.173-1.541a2.832 2.832 0 0 1-.043-.492v-.93h1.2v.93c0 .095.008.19.025.283.172.98 1.577.98 1.75 0 .017-.093.025-.188.025-.283v-.93h1.2v.93c0 .165-.015.33-.043.492-.137.774-.601 1.288-1.173 1.54l.218.381a.857.857 0 0 0 1.384.144l1.565-1.76.897.796-1.565 1.761a2.057 2.057 0 0 1-3.323-.345l-.06-.105-.06.105a2.057 2.057 0 0 1-3.323.345L5.052 11.9l.897-.797Zm2.509-4.874a1.8 1.8 0 0 0-1.507-.444l-1.852.309L4.9 4.908 6.754 4.6a3 3 0 0 1 2.51.74l.515.467-.808.888-.513-.467Zm4.591-.444a1.8 1.8 0 0 0-1.506.444l-.514.467-.808-.888.514-.467a3 3 0 0 1 2.512-.74l1.852.31-.198 1.183-1.852-.309Z"
-        fill="#0D1625"
+        fill={color}
       />
     </Svg>
   )
diff --git a/packages/icons/20/arrow-down-icon.tsx b/packages/icons/20/arrow-down-icon.tsx
index 080659c2..cd641bb6 100644
--- a/packages/icons/20/arrow-down-icon.tsx
+++ b/packages/icons/20/arrow-down-icon.tsx
@@ -12,7 +12,7 @@ const SvgArrowDownIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/arrow-left-icon.tsx b/packages/icons/20/arrow-left-icon.tsx
index c18680ea..4cca8066 100644
--- a/packages/icons/20/arrow-left-icon.tsx
+++ b/packages/icons/20/arrow-left-icon.tsx
@@ -12,7 +12,7 @@ const SvgArrowLeftIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/arrow-right-icon.tsx b/packages/icons/20/arrow-right-icon.tsx
index 3008d2fc..49f45311 100644
--- a/packages/icons/20/arrow-right-icon.tsx
+++ b/packages/icons/20/arrow-right-icon.tsx
@@ -12,7 +12,7 @@ const SvgArrowRightIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/arrow-up-icon.tsx b/packages/icons/20/arrow-up-icon.tsx
index 4b99dbd9..655c92c0 100644
--- a/packages/icons/20/arrow-up-icon.tsx
+++ b/packages/icons/20/arrow-up-icon.tsx
@@ -12,7 +12,7 @@ const SvgArrowUpIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/attach-icon.tsx b/packages/icons/20/attach-icon.tsx
index 86360952..2f0b9b0e 100644
--- a/packages/icons/20/attach-icon.tsx
+++ b/packages/icons/20/attach-icon.tsx
@@ -12,7 +12,7 @@ const SvgAttachIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/audio-icon.tsx b/packages/icons/20/audio-icon.tsx
index c0eb0024..ddb6bcde 100644
--- a/packages/icons/20/audio-icon.tsx
+++ b/packages/icons/20/audio-icon.tsx
@@ -12,7 +12,7 @@ const SvgAudioIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/automatic-icon.tsx b/packages/icons/20/automatic-icon.tsx
index 9d88002e..3fcf5461 100644
--- a/packages/icons/20/automatic-icon.tsx
+++ b/packages/icons/20/automatic-icon.tsx
@@ -12,13 +12,13 @@ const SvgAutomaticIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M9.25 6.692a4 4 0 1 0 0 6.615A4.98 4.98 0 0 1 8 10c0-1.268.472-2.426 1.25-3.308Z"
-        fill="#A1ABBD"
+        fill={color}
       />
       <Circle cx={13} cy={10} r={4} fill="#26A69A" />
     </Svg>
diff --git a/packages/icons/20/block-icon.tsx b/packages/icons/20/block-icon.tsx
index af2bb82e..c09540a8 100644
--- a/packages/icons/20/block-icon.tsx
+++ b/packages/icons/20/block-icon.tsx
@@ -12,7 +12,7 @@ const SvgBlockIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/bold-icon.tsx b/packages/icons/20/bold-icon.tsx
index 3bc8d099..2f6a43ac 100644
--- a/packages/icons/20/bold-icon.tsx
+++ b/packages/icons/20/bold-icon.tsx
@@ -12,7 +12,7 @@ const SvgBoldIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/bridge-icon.tsx b/packages/icons/20/bridge-icon.tsx
index 2dac0849..84d837ba 100644
--- a/packages/icons/20/bridge-icon.tsx
+++ b/packages/icons/20/bridge-icon.tsx
@@ -12,7 +12,7 @@ const SvgBridgeIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M4 15.5v-11M7 12.5v-5M13 12.5v-5M10 12.5v-4M16 15.5v-11M17 12.5H3"
diff --git a/packages/icons/20/browser-icon.tsx b/packages/icons/20/browser-icon.tsx
index 1f3c6b19..cac8856a 100644
--- a/packages/icons/20/browser-icon.tsx
+++ b/packages/icons/20/browser-icon.tsx
@@ -12,7 +12,7 @@ const SvgBrowserIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/bullet-icon.tsx b/packages/icons/20/bullet-icon.tsx
index dda2eded..32d20439 100644
--- a/packages/icons/20/bullet-icon.tsx
+++ b/packages/icons/20/bullet-icon.tsx
@@ -12,7 +12,7 @@ const SvgBulletIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10} cy={10} r={4} fill={color} />
     </Svg>
diff --git a/packages/icons/20/bullet-list-icon.tsx b/packages/icons/20/bullet-list-icon.tsx
index 86cf4b2d..be99f5c3 100644
--- a/packages/icons/20/bullet-list-icon.tsx
+++ b/packages/icons/20/bullet-list-icon.tsx
@@ -12,7 +12,7 @@ const SvgBulletListIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M15 15H8.5M15 5H8.5"
diff --git a/packages/icons/20/buy-icon.tsx b/packages/icons/20/buy-icon.tsx
index 3968c387..4ce14580 100644
--- a/packages/icons/20/buy-icon.tsx
+++ b/packages/icons/20/buy-icon.tsx
@@ -12,7 +12,7 @@ const SvgBuyIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/camera-icon.tsx b/packages/icons/20/camera-icon.tsx
index b65afb33..34509645 100644
--- a/packages/icons/20/camera-icon.tsx
+++ b/packages/icons/20/camera-icon.tsx
@@ -12,7 +12,7 @@ const SvgCameraIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M3 8.556A3.056 3.056 0 0 1 6.056 5.5c.578 0 1.107-.327 1.366-.845L7.5 4.5c.306-.613.933-1 1.618-1h1.764c.685 0 1.312.387 1.618 1l.078.155c.258.518.788.845 1.366.845A3.056 3.056 0 0 1 17 8.556V11c0 1.396 0 2.093-.172 2.661a4 4 0 0 1-2.667 2.667c-.568.172-1.265.172-2.661.172h-3c-1.396 0-2.093 0-2.661-.172a4 4 0 0 1-2.667-2.667C3 13.093 3 12.396 3 11V8.556Z"
diff --git a/packages/icons/20/card-view-icon.tsx b/packages/icons/20/card-view-icon.tsx
index 617530c4..2ae1edaa 100644
--- a/packages/icons/20/card-view-icon.tsx
+++ b/packages/icons/20/card-view-icon.tsx
@@ -12,7 +12,7 @@ const SvgCardViewIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/centre-align-icon.tsx b/packages/icons/20/centre-align-icon.tsx
index 9c548c61..7c1a3e4f 100644
--- a/packages/icons/20/centre-align-icon.tsx
+++ b/packages/icons/20/centre-align-icon.tsx
@@ -12,7 +12,7 @@ const SvgCentreAlignIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M15 11.75H5M15 5H5M13 15H7M13 8.25H7"
diff --git a/packages/icons/20/chatkey-icon.tsx b/packages/icons/20/chatkey-icon.tsx
index 2aa7036c..968ca24c 100644
--- a/packages/icons/20/chatkey-icon.tsx
+++ b/packages/icons/20/chatkey-icon.tsx
@@ -12,7 +12,7 @@ const SvgChatkeyIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/check-icon.tsx b/packages/icons/20/check-icon.tsx
index 9933ee60..4c4c070c 100644
--- a/packages/icons/20/check-icon.tsx
+++ b/packages/icons/20/check-icon.tsx
@@ -12,7 +12,7 @@ const SvgCheckIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m4 10 4 4 8-8" stroke={color} strokeWidth={1.3} />
     </Svg>
diff --git a/packages/icons/20/chevron-down-icon.tsx b/packages/icons/20/chevron-down-icon.tsx
index 2e7a2a95..7660c324 100644
--- a/packages/icons/20/chevron-down-icon.tsx
+++ b/packages/icons/20/chevron-down-icon.tsx
@@ -12,7 +12,7 @@ const SvgChevronDownIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m6 8 4 4 4-4" stroke={color} strokeWidth={1.3} />
     </Svg>
diff --git a/packages/icons/20/chevron-left-icon.tsx b/packages/icons/20/chevron-left-icon.tsx
index c2731ff1..4576ff4d 100644
--- a/packages/icons/20/chevron-left-icon.tsx
+++ b/packages/icons/20/chevron-left-icon.tsx
@@ -12,7 +12,7 @@ const SvgChevronLeftIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m12 6-4 4 4 4" stroke={color} strokeWidth={1.3} />
     </Svg>
diff --git a/packages/icons/20/chevron-right-icon.tsx b/packages/icons/20/chevron-right-icon.tsx
index e2a7800a..44e78add 100644
--- a/packages/icons/20/chevron-right-icon.tsx
+++ b/packages/icons/20/chevron-right-icon.tsx
@@ -12,7 +12,7 @@ const SvgChevronRightIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m8 14 4-4-4-4" stroke={color} strokeWidth={1.3} />
     </Svg>
diff --git a/packages/icons/20/chevron-up-icon.tsx b/packages/icons/20/chevron-up-icon.tsx
index 29be24cf..8d61a7b4 100644
--- a/packages/icons/20/chevron-up-icon.tsx
+++ b/packages/icons/20/chevron-up-icon.tsx
@@ -12,7 +12,7 @@ const SvgChevronUpIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m14 12-4-4-4 4" stroke={color} strokeWidth={1.3} />
     </Svg>
diff --git a/packages/icons/20/chevrons-left-icon.tsx b/packages/icons/20/chevrons-left-icon.tsx
index e597e6e2..93ac3b92 100644
--- a/packages/icons/20/chevrons-left-icon.tsx
+++ b/packages/icons/20/chevrons-left-icon.tsx
@@ -12,7 +12,7 @@ const SvgChevronsLeftIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m10 6-4 4 4 4M14 6l-4 4 4 4" stroke={color} strokeWidth={1.3} />
     </Svg>
diff --git a/packages/icons/20/chevrons-right-icon.tsx b/packages/icons/20/chevrons-right-icon.tsx
index e89f7f78..502fda06 100644
--- a/packages/icons/20/chevrons-right-icon.tsx
+++ b/packages/icons/20/chevrons-right-icon.tsx
@@ -12,7 +12,7 @@ const SvgChevronsRightIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m6 14 4-4-4-4M10 14l4-4-4-4" stroke={color} strokeWidth={1.3} />
     </Svg>
diff --git a/packages/icons/20/clear-icon.tsx b/packages/icons/20/clear-icon.tsx
index ac088248..a9613a82 100644
--- a/packages/icons/20/clear-icon.tsx
+++ b/packages/icons/20/clear-icon.tsx
@@ -12,7 +12,7 @@ const SvgClearIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10} cy={10} r={6.75} fill={color} />
       <Path
diff --git a/packages/icons/20/close-icon.tsx b/packages/icons/20/close-icon.tsx
index b1e4053d..b22be375 100644
--- a/packages/icons/20/close-icon.tsx
+++ b/packages/icons/20/close-icon.tsx
@@ -12,7 +12,7 @@ const SvgCloseIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/code-block-icon.tsx b/packages/icons/20/code-block-icon.tsx
index 1e809b13..3d63d4a5 100644
--- a/packages/icons/20/code-block-icon.tsx
+++ b/packages/icons/20/code-block-icon.tsx
@@ -12,7 +12,7 @@ const SvgCodeBlockIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/code-icon.tsx b/packages/icons/20/code-icon.tsx
index 225e3321..05cc3b7d 100644
--- a/packages/icons/20/code-icon.tsx
+++ b/packages/icons/20/code-icon.tsx
@@ -12,7 +12,7 @@ const SvgCodeIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/collapse-icon.tsx b/packages/icons/20/collapse-icon.tsx
index 244e1dee..cf28cd3b 100644
--- a/packages/icons/20/collapse-icon.tsx
+++ b/packages/icons/20/collapse-icon.tsx
@@ -12,13 +12,13 @@ const SvgCollapseIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M10.85 2.5v6.65h6.65v-1.3h-5.35V2.5h-1.3ZM2.5 12.15h5.35v5.35h1.3v-6.65H2.5v1.3Z"
-        fill="#000"
+        fill={color}
       />
     </Svg>
   )
diff --git a/packages/icons/20/colour-pick-icon.tsx b/packages/icons/20/colour-pick-icon.tsx
index 4497f179..98bf43cc 100644
--- a/packages/icons/20/colour-pick-icon.tsx
+++ b/packages/icons/20/colour-pick-icon.tsx
@@ -12,7 +12,7 @@ const SvgColourPickIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/communities-icon.tsx b/packages/icons/20/communities-icon.tsx
index 622498b6..ca9da0a5 100644
--- a/packages/icons/20/communities-icon.tsx
+++ b/packages/icons/20/communities-icon.tsx
@@ -12,7 +12,7 @@ const SvgCommunitiesIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/connection-icon.tsx b/packages/icons/20/connection-icon.tsx
index 77dacc51..7693f078 100644
--- a/packages/icons/20/connection-icon.tsx
+++ b/packages/icons/20/connection-icon.tsx
@@ -12,17 +12,17 @@ const SvgConnectionIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M13 17H7l3-8 3 8Z"
-        stroke="#000"
+        stroke={color}
         strokeWidth={1.3}
         strokeLinejoin="round"
       />
       <Path
         d="M10 9V7M5 3a4.695 4.695 0 0 0-1.468 1.73A5.082 5.082 0 0 0 3 7c0 .792.183 1.572.532 2.27A4.694 4.694 0 0 0 5 11M7 5c-.641.534-1 1.252-1 2s.359 1.466 1 2M15 11a4.694 4.694 0 0 0 1.468-1.73A5.082 5.082 0 0 0 17 7c0-.792-.183-1.572-.532-2.27A4.695 4.695 0 0 0 15 3M13 9c.641-.534 1-1.252 1-2s-.359-1.466-1-2"
-        stroke="#000"
+        stroke={color}
         strokeWidth={1.3}
         strokeLinecap="square"
         strokeLinejoin="round"
diff --git a/packages/icons/20/contact-book-icon.tsx b/packages/icons/20/contact-book-icon.tsx
index a78abeb9..2eb14664 100644
--- a/packages/icons/20/contact-book-icon.tsx
+++ b/packages/icons/20/contact-book-icon.tsx
@@ -12,7 +12,7 @@ const SvgContactBookIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/contact-icon.tsx b/packages/icons/20/contact-icon.tsx
index f43d8425..6a3a7e46 100644
--- a/packages/icons/20/contact-icon.tsx
+++ b/packages/icons/20/contact-icon.tsx
@@ -12,14 +12,14 @@ const SvgContactIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle
         cx={10}
         cy={10}
         r={6.75}
-        fill="#4360DF"
-        stroke="#4360DF"
+        fill={color}
+        stroke={color}
         strokeWidth={1.5}
       />
       <Path
@@ -36,8 +36,8 @@ const SvgContactIcon = (props: SvgProps) => {
         strokeWidth={1.3}
         strokeLinejoin="round"
       />
-      <Circle cx={10} cy={10} r={6.75} stroke="#4360DF" strokeWidth={1.5} />
-      <Circle cx={10} cy={10} r={6.25} stroke="#4360DF" />
+      <Circle cx={10} cy={10} r={6.75} stroke={color} strokeWidth={1.5} />
+      <Circle cx={10} cy={10} r={6.25} stroke={color} />
     </Svg>
   )
 }
diff --git a/packages/icons/20/copy-icon.tsx b/packages/icons/20/copy-icon.tsx
index 3c79f2c7..4eaac366 100644
--- a/packages/icons/20/copy-icon.tsx
+++ b/packages/icons/20/copy-icon.tsx
@@ -12,7 +12,7 @@ const SvgCopyIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M12.5 5.75c0-.232 0-.348-.01-.446a2 2 0 0 0-1.794-1.794c-.098-.01-.214-.01-.446-.01H8.3c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C3.5 5.78 3.5 6.62 3.5 8.3v1.95c0 .232 0 .348.01.446a2 2 0 0 0 1.794 1.794c.098.01.214.01.446.01"
diff --git a/packages/icons/20/correct-icon.tsx b/packages/icons/20/correct-icon.tsx
index fd2e01a5..bce5a5b1 100644
--- a/packages/icons/20/correct-icon.tsx
+++ b/packages/icons/20/correct-icon.tsx
@@ -12,17 +12,17 @@ const SvgCorrectIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle
         cx={10}
         cy={10}
         r={6.75}
-        stroke="#26A69A"
+        stroke={color}
         strokeOpacity={0.4}
         strokeWidth={1.3}
       />
-      <Path d="M6.833 10.5 9 12.5l4.333-5" stroke="#26A69A" strokeWidth={1.3} />
+      <Path d="M6.833 10.5 9 12.5l4.333-5" stroke={color} strokeWidth={1.3} />
     </Svg>
   )
 }
diff --git a/packages/icons/20/crown-icon.tsx b/packages/icons/20/crown-icon.tsx
index 69376a14..9ef791b8 100644
--- a/packages/icons/20/crown-icon.tsx
+++ b/packages/icons/20/crown-icon.tsx
@@ -12,7 +12,7 @@ const SvgCrownIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="m11 4 1.007 2.014c.335.67.503 1.006.753 1.156a1 1 0 0 0 .73.118c.285-.063.55-.328 1.08-.858L16 5M9 4 7.993 6.014c-.335.67-.503 1.006-.753 1.156a1 1 0 0 1-.73.118c-.285-.063-.55-.328-1.08-.858L4 5m-1.625.625L2.5 6.5 3 10l.215 1.505c.278 1.948.418 2.923.888 3.655a4 4 0 0 0 1.704 1.478C6.598 17 7.583 17 9.55 17h.898c1.969 0 2.953 0 3.745-.362a4 4 0 0 0 1.703-1.478c.47-.732.61-1.707.888-3.655L17 10l.5-3.5.125-.875"
diff --git a/packages/icons/20/customize-icon.tsx b/packages/icons/20/customize-icon.tsx
index 45f38a64..30e79366 100644
--- a/packages/icons/20/customize-icon.tsx
+++ b/packages/icons/20/customize-icon.tsx
@@ -12,7 +12,7 @@ const SvgCustomizeIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/dark-icon.tsx b/packages/icons/20/dark-icon.tsx
index fcb41a0c..d8766f4c 100644
--- a/packages/icons/20/dark-icon.tsx
+++ b/packages/icons/20/dark-icon.tsx
@@ -12,11 +12,11 @@ const SvgDarkIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="m7.525 4.025.249.6-.249-.6Zm2.127-.483.627.171.237-.868-.9.048.036.65ZM4.025 7.525l.6.249-.6-.249Zm0 4.95.6-.249-.6.249Zm11.95 0 .6.249-.6-.25Zm.483-2.127.649.035.048-.899-.868.237.17.627Zm-3.58-.227.25-.6-.25.6Zm-3-3-.6.25.6-.25ZM7.775 4.626a5.815 5.815 0 0 1 1.913-.435l-.07-1.298a7.116 7.116 0 0 0-2.34.532l.497 1.2ZM4.626 7.774a5.817 5.817 0 0 1 3.148-3.148l-.497-1.201a7.117 7.117 0 0 0-3.852 3.851l1.2.498Zm0 4.452a5.817 5.817 0 0 1 0-4.452l-1.201-.498a7.117 7.117 0 0 0 0 5.448l1.2-.498Zm3.148 3.148a5.818 5.818 0 0 1-3.148-3.148l-1.201.498a7.117 7.117 0 0 0 3.852 3.851l.497-1.2Zm4.452 0a5.817 5.817 0 0 1-4.452 0l-.497 1.201a7.118 7.118 0 0 0 5.447 0l-.498-1.2Zm3.148-3.148a5.817 5.817 0 0 1-3.148 3.148l.498 1.201a7.117 7.117 0 0 0 3.852-3.851l-1.202-.498Zm.435-1.913a5.816 5.816 0 0 1-.434 1.913l1.2.498a7.117 7.117 0 0 0 .532-2.34l-1.298-.07Zm.478-.592a4.894 4.894 0 0 1-3.16-.2l-.497 1.2a6.193 6.193 0 0 0 3.999.254l-.342-1.254Zm-3.16-.2a4.893 4.893 0 0 1-2.648-2.648l-1.2.497a6.193 6.193 0 0 0 3.351 3.352l.497-1.201ZM10.48 6.873a4.893 4.893 0 0 1-.2-3.16l-1.254-.342a6.193 6.193 0 0 0 .253 4l1.201-.498Z"
-        fill="#000"
+        fill={color}
       />
     </Svg>
   )
diff --git a/packages/icons/20/data-usage-icon.tsx b/packages/icons/20/data-usage-icon.tsx
index e82d3414..d89dbc68 100644
--- a/packages/icons/20/data-usage-icon.tsx
+++ b/packages/icons/20/data-usage-icon.tsx
@@ -12,7 +12,7 @@ const SvgDataUsageIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/delete-icon.tsx b/packages/icons/20/delete-icon.tsx
index c6c0ec42..ff7a0a76 100644
--- a/packages/icons/20/delete-icon.tsx
+++ b/packages/icons/20/delete-icon.tsx
@@ -12,7 +12,7 @@ const SvgDeleteIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/desktop-icon.tsx b/packages/icons/20/desktop-icon.tsx
index 32824fd9..55494b31 100644
--- a/packages/icons/20/desktop-icon.tsx
+++ b/packages/icons/20/desktop-icon.tsx
@@ -12,7 +12,7 @@ const SvgDesktopIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/download-icon.tsx b/packages/icons/20/download-icon.tsx
index 0c21dd66..1810f355 100644
--- a/packages/icons/20/download-icon.tsx
+++ b/packages/icons/20/download-icon.tsx
@@ -12,7 +12,7 @@ const SvgDownloadIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/dropdown-icon.tsx b/packages/icons/20/dropdown-icon.tsx
index 76c410ac..653653dc 100644
--- a/packages/icons/20/dropdown-icon.tsx
+++ b/packages/icons/20/dropdown-icon.tsx
@@ -12,7 +12,7 @@ const SvgDropdownIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10} cy={10} r={7} fill="#E7EAEE" />
       <Path d="m7 8.5 3 3 3-3" stroke={color} strokeWidth={1.3} />
diff --git a/packages/icons/20/duration-icon.tsx b/packages/icons/20/duration-icon.tsx
index 3fe0af47..01fc355d 100644
--- a/packages/icons/20/duration-icon.tsx
+++ b/packages/icons/20/duration-icon.tsx
@@ -12,7 +12,7 @@ const SvgDurationIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10} cy={11} r={6} stroke={color} strokeWidth={1.3} />
       <Path
diff --git a/packages/icons/20/edit-icon.tsx b/packages/icons/20/edit-icon.tsx
index 34724c46..6ff17528 100644
--- a/packages/icons/20/edit-icon.tsx
+++ b/packages/icons/20/edit-icon.tsx
@@ -12,7 +12,7 @@ const SvgEditIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/email-icon.tsx b/packages/icons/20/email-icon.tsx
index 782b2ee7..9c0848b5 100644
--- a/packages/icons/20/email-icon.tsx
+++ b/packages/icons/20/email-icon.tsx
@@ -12,7 +12,7 @@ const SvgEmailIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path d="m6 7 4 3 4-3" stroke={color} strokeWidth={1.3} />
       <Path
diff --git a/packages/icons/20/expand-icon.tsx b/packages/icons/20/expand-icon.tsx
index 91be5bd6..f800c1f8 100644
--- a/packages/icons/20/expand-icon.tsx
+++ b/packages/icons/20/expand-icon.tsx
@@ -12,13 +12,13 @@ const SvgExpandIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M8.5 6.15h5.35v5.35h1.3V4.85H8.5v1.3ZM4.85 8.5v6.65h6.65v-1.3H6.15V8.5h-1.3Z"
-        fill="#000"
+        fill={color}
       />
     </Svg>
   )
diff --git a/packages/icons/20/external-icon.tsx b/packages/icons/20/external-icon.tsx
index 399ff5b4..49f6934e 100644
--- a/packages/icons/20/external-icon.tsx
+++ b/packages/icons/20/external-icon.tsx
@@ -12,7 +12,7 @@ const SvgExternalIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/face-id-icon.tsx b/packages/icons/20/face-id-icon.tsx
index e30c5406..3bbab87d 100644
--- a/packages/icons/20/face-id-icon.tsx
+++ b/packages/icons/20/face-id-icon.tsx
@@ -12,7 +12,7 @@ const SvgFaceIdIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M8.143 3.5c-1.532 0-2.298 0-2.894.273A3 3 0 0 0 3.773 5.25C3.5 5.845 3.5 6.611 3.5 8.143M11.857 3.5c1.532 0 2.298 0 2.894.273a3 3 0 0 1 1.476 1.476c.273.596.273 1.362.273 2.894m0 3.714c0 1.532 0 2.298-.273 2.894a3 3 0 0 1-1.476 1.476c-.596.273-1.362.273-2.894.273m-3.714 0c-1.532 0-2.298 0-2.894-.273a3 3 0 0 1-1.476-1.476c-.273-.596-.273-1.362-.273-2.894M7 6.5V9M10 6.5v3.086a1 1 0 0 0 .293.707L11 11M7 13s1 1 3 1 3-1 3-1M13 6.5V9"
diff --git a/packages/icons/20/favourite-icon.tsx b/packages/icons/20/favourite-icon.tsx
index e5b9e396..fd7886b0 100644
--- a/packages/icons/20/favourite-icon.tsx
+++ b/packages/icons/20/favourite-icon.tsx
@@ -12,7 +12,7 @@ const SvgFavouriteIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="m10 3 2.057 4.168 4.6.669-3.328 3.245.785 4.581L10 13.5l-4.114 2.163.785-4.581-3.328-3.245 4.6-.669L10 3Z"
diff --git a/packages/icons/20/file-icon.tsx b/packages/icons/20/file-icon.tsx
index 7fe2c8da..4750b2ff 100644
--- a/packages/icons/20/file-icon.tsx
+++ b/packages/icons/20/file-icon.tsx
@@ -12,7 +12,7 @@ const SvgFileIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M11 3c.64 0 1.254.254 1.707.707l2.586 2.586C15.746 6.746 16 7.36 16 8v4.2c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C13.72 17 12.88 17 11.2 17H8.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C4 14.72 4 13.88 4 12.2V7.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C6.28 3 7.12 3 8.8 3H11Z"
diff --git a/packages/icons/20/flag-icon.tsx b/packages/icons/20/flag-icon.tsx
index 3e755958..ef900a44 100644
--- a/packages/icons/20/flag-icon.tsx
+++ b/packages/icons/20/flag-icon.tsx
@@ -12,7 +12,7 @@ const SvgFlagIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/flash-icon.tsx b/packages/icons/20/flash-icon.tsx
index 200e8f4b..36c396ac 100644
--- a/packages/icons/20/flash-icon.tsx
+++ b/packages/icons/20/flash-icon.tsx
@@ -12,7 +12,7 @@ const SvgFlashIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M11.25 2.5v6.25h3.25L8.75 17.5v-6.25H5.5l5.75-8.75Z"
diff --git a/packages/icons/20/flash-off-icon.tsx b/packages/icons/20/flash-off-icon.tsx
index 9be06f6c..3cd2f49d 100644
--- a/packages/icons/20/flash-off-icon.tsx
+++ b/packages/icons/20/flash-off-icon.tsx
@@ -12,7 +12,7 @@ const SvgFlashOffIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M11.25 2.5v6.25h3.25L8.75 17.5v-6.25H5.5l5.75-8.75Z"
diff --git a/packages/icons/20/flashlight-off-icon.tsx b/packages/icons/20/flashlight-off-icon.tsx
index 52689cb5..f8c4ae93 100644
--- a/packages/icons/20/flashlight-off-icon.tsx
+++ b/packages/icons/20/flashlight-off-icon.tsx
@@ -12,7 +12,7 @@ const SvgFlashlightOffIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/flashlight-on-icon.tsx b/packages/icons/20/flashlight-on-icon.tsx
index c26d873d..9d1feddf 100644
--- a/packages/icons/20/flashlight-on-icon.tsx
+++ b/packages/icons/20/flashlight-on-icon.tsx
@@ -12,7 +12,7 @@ const SvgFlashlightOnIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M7 3s1-1 3-1 3 1 3 1"
diff --git a/packages/icons/20/flip-icon.tsx b/packages/icons/20/flip-icon.tsx
index 8928966e..8dee2b1f 100644
--- a/packages/icons/20/flip-icon.tsx
+++ b/packages/icons/20/flip-icon.tsx
@@ -12,13 +12,13 @@ const SvgFlipIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M7.073 2.932a7.65 7.65 0 0 1 8.337 1.659l-.92.919A6.35 6.35 0 0 0 3.682 9.364L4.7 8.6l.6.8-2 1.5-.3.225-.3-.225-2-1.5.6-.8 1.073.805a7.65 7.65 0 0 1 4.7-6.473Zm5.855 14.136a7.65 7.65 0 0 1-8.337-1.659l.92-.919a6.35 6.35 0 0 0 10.725-3.292l-.936.702-.6-.8 2-1.5.3-.225.3.225 2 1.5-.6.8-1.123-.843a7.65 7.65 0 0 1-4.65 6.01ZM8.15 10a1.85 1.85 0 1 1 3.7 0 1.85 1.85 0 0 1-3.7 0ZM10 6.85a3.15 3.15 0 1 0 0 6.3 3.15 3.15 0 0 0 0-6.3Z"
-        fill="#000"
+        fill={color}
       />
     </Svg>
   )
diff --git a/packages/icons/20/folder-icon.tsx b/packages/icons/20/folder-icon.tsx
index 66a5cab2..c73f8b2f 100644
--- a/packages/icons/20/folder-icon.tsx
+++ b/packages/icons/20/folder-icon.tsx
@@ -12,7 +12,7 @@ const SvgFolderIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/format-icon.tsx b/packages/icons/20/format-icon.tsx
index 91027947..db5adc46 100644
--- a/packages/icons/20/format-icon.tsx
+++ b/packages/icons/20/format-icon.tsx
@@ -12,7 +12,7 @@ const SvgFormatIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <G clipPath="url(#format-icon_svg__a)" fill={color}>
         <Path d="M4.343 14.047a.858.858 0 1 1-1.622-.558l2.575-7.314a1.493 1.493 0 0 1 2.817 0l2.579 7.314a.858.858 0 1 1-1.622.559L6.753 7.15a.051.051 0 0 0-.097 0l-2.313 6.896Zm-.136-2.434c0-.38.308-.688.688-.688h3.61a.688.688 0 0 1 0 1.376h-3.61a.688.688 0 0 1-.688-.688ZM13.82 14.823c-.449 0-.857-.085-1.223-.254a2.1 2.1 0 0 1-.872-.744c-.216-.326-.324-.72-.324-1.181 0-.407.08-.736.24-.988.16-.256.374-.456.642-.6.268-.145.563-.253.886-.324.327-.073.654-.132.984-.175.43-.056.78-.097 1.048-.125.27-.03.467-.081.59-.152.127-.07.19-.194.19-.37v-.036c0-.456-.125-.81-.374-1.062-.246-.252-.62-.379-1.122-.379-.52 0-.928.114-1.223.342-.13.1-.244.204-.34.311-.193.213-.49.344-.76.248-.303-.108-.457-.453-.275-.717.133-.192.285-.355.456-.488.311-.243.65-.413 1.016-.508.37-.099.732-.148 1.09-.148.227 0 .489.028.784.083.299.053.586.162.863.328.28.166.513.417.697.752.185.336.277.785.277 1.349v4.127c0 .3-.244.544-.544.544h-.065a.48.48 0 0 1-.48-.48v-.446a.034.034 0 0 0-.065-.015 1.96 1.96 0 0 1-.36.475 2.131 2.131 0 0 1-.688.448c-.286.123-.635.185-1.048.185Zm.167-.98c.43 0 .794-.084 1.09-.253a1.729 1.729 0 0 0 .904-1.5v-.653c0-.117-.193-.225-.305-.192a5.124 5.124 0 0 1-.535.115 24.109 24.109 0 0 1-1.044.139 4.165 4.165 0 0 0-.794.18 1.37 1.37 0 0 0-.59.364c-.148.16-.222.379-.222.656 0 .379.14.665.42.859.283.19.642.286 1.076.286Z" />
diff --git a/packages/icons/20/forward-icon.tsx b/packages/icons/20/forward-icon.tsx
index 3af6d47e..f9411545 100644
--- a/packages/icons/20/forward-icon.tsx
+++ b/packages/icons/20/forward-icon.tsx
@@ -12,7 +12,7 @@ const SvgForwardIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/friend-icon.tsx b/packages/icons/20/friend-icon.tsx
index 52a62a06..3a8238be 100644
--- a/packages/icons/20/friend-icon.tsx
+++ b/packages/icons/20/friend-icon.tsx
@@ -12,7 +12,7 @@ const SvgFriendIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M5 14.75A3.75 3.75 0 0 1 8.75 11h2.5A3.75 3.75 0 0 1 15 14.75c0 .69-.56 1.25-1.25 1.25h-7.5C5.56 16 5 15.44 5 14.75Z"
diff --git a/packages/icons/20/gas-icon.tsx b/packages/icons/20/gas-icon.tsx
index f3d97b96..d1fa6aca 100644
--- a/packages/icons/20/gas-icon.tsx
+++ b/packages/icons/20/gas-icon.tsx
@@ -12,7 +12,7 @@ const SvgGasIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M4 7.5c0-1.398 0-2.097.228-2.648a3 3 0 0 1 1.624-1.624C6.403 3 7.102 3 8.5 3c1.398 0 2.097 0 2.648.228a3 3 0 0 1 1.624 1.624C13 5.403 13 6.102 13 7.5V17H4V7.5ZM4 9h9"
diff --git a/packages/icons/20/gif-icon.tsx b/packages/icons/20/gif-icon.tsx
index f5762ee0..dc358f7f 100644
--- a/packages/icons/20/gif-icon.tsx
+++ b/packages/icons/20/gif-icon.tsx
@@ -12,7 +12,7 @@ const SvgGifIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Rect
         x={3.5}
diff --git a/packages/icons/20/globe-icon.tsx b/packages/icons/20/globe-icon.tsx
index 046f4f2f..ecdfc0c6 100644
--- a/packages/icons/20/globe-icon.tsx
+++ b/packages/icons/20/globe-icon.tsx
@@ -12,7 +12,7 @@ const SvgGlobeIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/hashtag-1-icon.tsx b/packages/icons/20/hashtag-1-icon.tsx
index dc4260a1..7c16730a 100644
--- a/packages/icons/20/hashtag-1-icon.tsx
+++ b/packages/icons/20/hashtag-1-icon.tsx
@@ -12,7 +12,7 @@ const SvgHashtag1Icon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/hashtag-icon.tsx b/packages/icons/20/hashtag-icon.tsx
index 6e2f7eae..3e786a80 100644
--- a/packages/icons/20/hashtag-icon.tsx
+++ b/packages/icons/20/hashtag-icon.tsx
@@ -12,7 +12,7 @@ const SvgHashtagIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/heart-icon.tsx b/packages/icons/20/heart-icon.tsx
index f7999115..37219767 100644
--- a/packages/icons/20/heart-icon.tsx
+++ b/packages/icons/20/heart-icon.tsx
@@ -12,7 +12,7 @@ const SvgHeartIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         clipRule="evenodd"
diff --git a/packages/icons/20/help-icon.tsx b/packages/icons/20/help-icon.tsx
index 0268c176..1bae3b78 100644
--- a/packages/icons/20/help-icon.tsx
+++ b/packages/icons/20/help-icon.tsx
@@ -12,7 +12,7 @@ const SvgHelpIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/hide-icon.tsx b/packages/icons/20/hide-icon.tsx
index 196dbce1..ebaed30a 100644
--- a/packages/icons/20/hide-icon.tsx
+++ b/packages/icons/20/hide-icon.tsx
@@ -12,7 +12,7 @@ const SvgHideIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M10 4c4.5 0 7 5 7 6s-2.5 6-7 6-7-5-7-6 2.5-6 7-6Z"
diff --git a/packages/icons/20/history-icon.tsx b/packages/icons/20/history-icon.tsx
index d664a6bc..5b1cb596 100644
--- a/packages/icons/20/history-icon.tsx
+++ b/packages/icons/20/history-icon.tsx
@@ -12,12 +12,12 @@ const SvgHistoryIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M7.516 2.287A7.99 7.99 0 0 1 10 1.9c1.091 0 2.143.211 3.156.633a8.092 8.092 0 0 1 2.571 1.74 8.096 8.096 0 0 1 1.74 2.57l-.003.002.003-.001A8.132 8.132 0 0 1 18.1 10a8.132 8.132 0 0 1-.633 3.156 8.093 8.093 0 0 1-1.74 2.571 8.09 8.09 0 0 1-2.57 1.74h-.001a8.131 8.131 0 0 1-5.814.182m.174-15.362.03.095-.03-.095Zm0 0a8.207 8.207 0 0 0-2.238 1.131h-.001a8.115 8.115 0 0 0-1.74 1.709c-.116.153-.227.31-.332.47-.036.055-.07.11-.105.167m0 0V3.9H1.9V8.1H6.1V6.9H3.84M3.1 5.764a6.39 6.39 0 0 0-.1.169V4H2v4h4V7H3.79l.05-.1M3.1 5.764v.196a8.094 8.094 0 0 1 .517-.772l-.36 6.68M3.84 6.9c.27-.54.605-1.032 1.004-1.478a6.955 6.955 0 0 1 3.216-2.04A6.727 6.727 0 0 1 10 3.1c.632 0 1.241.082 1.829.246a6.889 6.889 0 0 1 3.045 1.78 6.871 6.871 0 0 1 0 9.75 6.871 6.871 0 0 1-7.1 1.656l-.032.093M3.84 6.9h-.112a6.861 6.861 0 0 1 1.041-1.544 7.055 7.055 0 0 1 3.262-2.07A6.827 6.827 0 0 1 10 3c.64 0 1.26.083 1.855.25a6.99 6.99 0 0 1 3.09 1.805 6.968 6.968 0 0 1 0 9.89 6.973 6.973 0 0 1-7.203 1.68m0 0 .033-.095a6.902 6.902 0 0 1-3.47-2.642l-.075.052.075-.051a6.724 6.724 0 0 1-.95-2.048l-.027-.097-.097.027-.96.266-.097.026.026.096a7.879 7.879 0 0 0 1.092 2.373m4.45 2.093a7.002 7.002 0 0 1-3.52-2.68 6.821 6.821 0 0 1-.962-2.069l-.002-.009m.034 2.666a8.21 8.21 0 0 0 1.764 1.882c.691.533 1.453.944 2.286 1.234m-4.05-3.116.083-.056-.083.056Zm4.05 3.116.033-.094m-.033.094.033-.094m0 0a7.966 7.966 0 0 1-2.258-1.219 8.11 8.11 0 0 1-2.379-2.984m4.637 4.203a8.032 8.032 0 0 0 5.742-.18 7.99 7.99 0 0 0 2.54-1.719 7.99 7.99 0 0 0 1.718-2.539c.416-1 .625-2.039.625-3.117a8.03 8.03 0 0 0-.617-3.098l.092-.02-14.737 6.47m0 0a7.778 7.778 0 0 1-.414-1.123l-.008-.028a7.1 7.1 0 0 1-.02-.068l.865-.24.096-.026m-.519 1.485.52-1.485M10.1 6v-.1H8.9v4.853l.03.029 3.148 3.14.07.07.071-.07.703-.703.07-.07-.07-.071-2.822-2.83V6Z"
-        fill="#000"
-        stroke="#000"
+        fill={color}
+        stroke={color}
         strokeWidth={0.2}
       />
     </Svg>
diff --git a/packages/icons/20/hold-icon.tsx b/packages/icons/20/hold-icon.tsx
index d8c48cc3..d0eb0431 100644
--- a/packages/icons/20/hold-icon.tsx
+++ b/packages/icons/20/hold-icon.tsx
@@ -12,7 +12,7 @@ const SvgHoldIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10} cy={10} r={6.75} fill={color} />
       <Path d="M6.833 10.5 9 12.5l4.333-5" stroke="#fff" strokeWidth={1.3} />
diff --git a/packages/icons/20/image-icon.tsx b/packages/icons/20/image-icon.tsx
index dae7ba47..668d3daa 100644
--- a/packages/icons/20/image-icon.tsx
+++ b/packages/icons/20/image-icon.tsx
@@ -6,13 +6,14 @@ import type { SvgProps } from 'react-native-svg'
 const SvgImageIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
+
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/inactive-icon.tsx b/packages/icons/20/inactive-icon.tsx
index d11882c7..e41137ba 100644
--- a/packages/icons/20/inactive-icon.tsx
+++ b/packages/icons/20/inactive-icon.tsx
@@ -12,9 +12,9 @@ const SvgInactiveIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
-      <Circle cx={10} cy={10} r={4} fill="#A1ABBD" />
+      <Circle cx={10} cy={10} r={4} fill={color} />
     </Svg>
   )
 }
diff --git a/packages/icons/20/info-badge-icon.tsx b/packages/icons/20/info-badge-icon.tsx
index a7ef6405..23b81081 100644
--- a/packages/icons/20/info-badge-icon.tsx
+++ b/packages/icons/20/info-badge-icon.tsx
@@ -12,11 +12,11 @@ const SvgInfoBadgeIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10} cy={10} r={6.75} fill={color} />
-      <Path d="M10 9.5V14" stroke="#fff" strokeWidth={1.3} />
-      <Circle cx={10} cy={7} r={1} transform="rotate(-180 10 7)" fill="#fff" />
+      <Path d="M10 9.5V14" stroke={color} strokeWidth={1.3} />
+      <Circle cx={10} cy={7} r={1} transform="rotate(-180 10 7)" fill={color} />
     </Svg>
   )
 }
diff --git a/packages/icons/20/info-icon.tsx b/packages/icons/20/info-icon.tsx
index bcd2fe7b..ca2d701b 100644
--- a/packages/icons/20/info-icon.tsx
+++ b/packages/icons/20/info-icon.tsx
@@ -12,7 +12,7 @@ const SvgInfoIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10} cy={10} r={6.75} stroke={color} strokeWidth={1.3} />
       <Path d="M10 9.5V14" stroke={color} strokeWidth={1.3} />
diff --git a/packages/icons/20/italic-icon.tsx b/packages/icons/20/italic-icon.tsx
index f64ca531..fef0fe89 100644
--- a/packages/icons/20/italic-icon.tsx
+++ b/packages/icons/20/italic-icon.tsx
@@ -12,7 +12,7 @@ const SvgItalicIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/justify-icon.tsx b/packages/icons/20/justify-icon.tsx
index 4b4525f7..0c62ee25 100644
--- a/packages/icons/20/justify-icon.tsx
+++ b/packages/icons/20/justify-icon.tsx
@@ -12,7 +12,7 @@ const SvgJustifyIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M15 11.75H5M15 5H5M15 15H5M15 8.25H5"
diff --git a/packages/icons/20/key-icon.tsx b/packages/icons/20/key-icon.tsx
index 73c777d1..4d04e41f 100644
--- a/packages/icons/20/key-icon.tsx
+++ b/packages/icons/20/key-icon.tsx
@@ -12,18 +12,18 @@ const SvgKeyIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="m16.63 15.797-.65-.012.65.012Zm-.49.49.012.65-.012-.65Zm-2.287-1.438-.64.116.64-.116Zm-.402-.402-.117.639.117-.64Zm-1.643-1.643-.64.117.64-.117Zm-.402-.402-.116.64.116-.64Zm.566 1.298.64-.117-.64.117Zm.583.583-.116.64.116-.64Zm2.069 2.032-.012-.65.012.65Zm-.608-.57-.64.116.64-.117Zm-2.282-6.651.607.233-.607-.233Zm-1.223 3.145-.117.64.117-.64Zm6.089 1.896-.46.46.46-.46Zm.058.146.65.011-.65-.011Zm-7.22-2.89.232.607-.233-.607Zm-.234-.607a3.35 3.35 0 0 1-3.573-.758l-.92.919a4.65 4.65 0 0 0 4.96 1.053l-.467-1.214Zm-3.573-.758a3.35 3.35 0 0 1 0-4.738l-.92-.92a4.65 4.65 0 0 0 0 6.577l.92-.92Zm0-4.738a3.35 3.35 0 0 1 4.738 0l.919-.92a4.65 4.65 0 0 0-6.576 0l.92.92Zm4.738 0a3.35 3.35 0 0 1 .758 3.573l1.214.466a4.65 4.65 0 0 0-1.053-4.958l-.92.92Zm.95 4.486 4.821 4.821.92-.92-4.822-4.82-.919.919Zm4.69 4.495-.028 1.516 1.3.024.027-1.517-1.3-.024Zm-.028 1.516a.15.15 0 0 1 .147-.148l.024 1.3a1.15 1.15 0 0 0 1.128-1.128l-1.3-.024Zm.147-.148-1.516.028.024 1.3 1.516-.028-.024-1.3Zm-1.19.16-.407-.407-.919.92.407.406.92-.919Zm-.282-.17-.164-.895-1.278.233.163.896 1.279-.233Zm-.164-.895a1.15 1.15 0 0 0-.925-.925l-.233 1.279a.15.15 0 0 1-.12-.12l1.278-.234Zm-.925-.925-.895-.163-.233 1.279.895.163.233-1.279Zm-.658-.039-.422-.423-.92.92.423.423.92-.92Zm-.298-.185-.163-.895-1.28.233.164.895 1.28-.233Zm-.163-.895a1.15 1.15 0 0 0-.925-.926l-.233 1.28a.15.15 0 0 1-.121-.121l1.279-.233Zm-.925-.926-.896-.163-.233 1.28.896.162.233-1.279Zm-.658-.038-.748-.748-.92.92.749.747.919-.92Zm1.622 1.621a.45.45 0 0 1 .124.238l-1.279.233a.85.85 0 0 0 .235.449l.92-.92Zm.185.299a.45.45 0 0 1 .237.124l-.919.92a.85.85 0 0 0 .449.235l.233-1.28Zm1.94 2.021a.45.45 0 0 1 .326.132l-.92.92a.85.85 0 0 0 .618.248l-.024-1.3Zm-.08-.275a.45.45 0 0 1 .124.238l-1.28.233a.85.85 0 0 0 .236.448l.92-.919Zm-3.405-6.53a.857.857 0 0 0 .192.914l.92-.92c.132.134.16.321.102.473l-1.214-.466Zm-.5 2.74a.45.45 0 0 1 .238.124l-.92.919a.85.85 0 0 0 .45.235l.232-1.279Zm5.513 2.995a.45.45 0 0 1-.131-.327l1.3.024a.85.85 0 0 0-.25-.616l-.919.919Zm-6.47-2.597a.444.444 0 0 1-.472-.103l.92-.919a.856.856 0 0 0-.914-.192l.466 1.214Z"
-        fill="#000"
+        fill={color}
       />
       <Circle
         cx={7.293}
         cy={6.95}
         r={1}
         transform="rotate(45 7.293 6.95)"
-        fill="#000"
+        fill={color}
       />
     </Svg>
   )
diff --git a/packages/icons/20/keyboard-icon.tsx b/packages/icons/20/keyboard-icon.tsx
index d11255a2..cf65f666 100644
--- a/packages/icons/20/keyboard-icon.tsx
+++ b/packages/icons/20/keyboard-icon.tsx
@@ -12,7 +12,7 @@ const SvgKeyboardIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M3 8.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C5.28 4 6.12 4 7.8 4h4.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C17 6.28 17 7.12 17 8.8v2.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C14.72 16 13.88 16 12.2 16H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 13.72 3 12.88 3 11.2V8.8Z"
diff --git a/packages/icons/20/keycard-icon.tsx b/packages/icons/20/keycard-icon.tsx
index 0317ff1e..489ffd56 100644
--- a/packages/icons/20/keycard-icon.tsx
+++ b/packages/icons/20/keycard-icon.tsx
@@ -12,7 +12,7 @@ const SvgKeycardIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Rect
         x={4}
diff --git a/packages/icons/20/keycard-logo-icon.tsx b/packages/icons/20/keycard-logo-icon.tsx
index 3ac4aedf..235beb04 100644
--- a/packages/icons/20/keycard-logo-icon.tsx
+++ b/packages/icons/20/keycard-logo-icon.tsx
@@ -12,7 +12,7 @@ const SvgKeycardLogoIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/laptop-icon.tsx b/packages/icons/20/laptop-icon.tsx
index 153a1931..98d41694 100644
--- a/packages/icons/20/laptop-icon.tsx
+++ b/packages/icons/20/laptop-icon.tsx
@@ -12,7 +12,7 @@ const SvgLaptopIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/left-align-icon.tsx b/packages/icons/20/left-align-icon.tsx
index f1b1dfe0..38b7974b 100644
--- a/packages/icons/20/left-align-icon.tsx
+++ b/packages/icons/20/left-align-icon.tsx
@@ -12,7 +12,7 @@ const SvgLeftAlignIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M15 11.75H5M15 5H5M11 15H5M11 8.25H5"
diff --git a/packages/icons/20/light-icon.tsx b/packages/icons/20/light-icon.tsx
index 3251be42..e9fb9b13 100644
--- a/packages/icons/20/light-icon.tsx
+++ b/packages/icons/20/light-icon.tsx
@@ -12,14 +12,14 @@ const SvgLightIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M10 2v3M13.535 6.464l2.122-2.12M15 10h3M13.535 13.536l2.122 2.12M10 15v3M6.464 13.536l-2.121 2.12M5 10H2M6.464 6.464l-2.121-2.12"
-        stroke="#000"
+        stroke={color}
         strokeWidth={1.3}
       />
-      <Circle cx={10} cy={10} r={3.5} stroke="#000" strokeWidth={1.3} />
+      <Circle cx={10} cy={10} r={3.5} stroke={color} strokeWidth={1.3} />
     </Svg>
   )
 }
diff --git a/packages/icons/20/link-icon.tsx b/packages/icons/20/link-icon.tsx
index 5d1d2987..ab2eb4ae 100644
--- a/packages/icons/20/link-icon.tsx
+++ b/packages/icons/20/link-icon.tsx
@@ -12,7 +12,7 @@ const SvgLinkIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/list-view-icon.tsx b/packages/icons/20/list-view-icon.tsx
index 23594c48..e63c2ed1 100644
--- a/packages/icons/20/list-view-icon.tsx
+++ b/packages/icons/20/list-view-icon.tsx
@@ -12,7 +12,7 @@ const SvgListViewIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Rect
         x={3}
diff --git a/packages/icons/20/loading-icon.tsx b/packages/icons/20/loading-icon.tsx
index caaaded8..cd9424b0 100644
--- a/packages/icons/20/loading-icon.tsx
+++ b/packages/icons/20/loading-icon.tsx
@@ -12,7 +12,7 @@ const SvgLoadingIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M10 2.25a.75.75 0 0 1 0 1.5v-1.5ZM3.75 10A6.25 6.25 0 0 0 10 16.25v1.5A7.75 7.75 0 0 1 2.25 10h1.5ZM10 3.75A6.25 6.25 0 0 0 3.75 10h-1.5A7.75 7.75 0 0 1 10 2.25v1.5Z"
diff --git a/packages/icons/20/locked-icon.tsx b/packages/icons/20/locked-icon.tsx
index c65b96f9..d8c3f82a 100644
--- a/packages/icons/20/locked-icon.tsx
+++ b/packages/icons/20/locked-icon.tsx
@@ -12,7 +12,7 @@ const SvgLockedIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/log-out-icon.tsx b/packages/icons/20/log-out-icon.tsx
index 30c66ecd..96704872 100644
--- a/packages/icons/20/log-out-icon.tsx
+++ b/packages/icons/20/log-out-icon.tsx
@@ -12,7 +12,7 @@ const SvgLogOutIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M9.5 4H8.3c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C3.5 6.28 3.5 7.12 3.5 8.8v2.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C5.78 16 6.62 16 8.3 16h1.2"
diff --git a/packages/icons/20/members-icon.tsx b/packages/icons/20/members-icon.tsx
index bf7d06ff..6cd3455f 100644
--- a/packages/icons/20/members-icon.tsx
+++ b/packages/icons/20/members-icon.tsx
@@ -12,7 +12,7 @@ const SvgMembersIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/mention-icon.tsx b/packages/icons/20/mention-icon.tsx
index da8f8409..6b74bca2 100644
--- a/packages/icons/20/mention-icon.tsx
+++ b/packages/icons/20/mention-icon.tsx
@@ -12,7 +12,7 @@ const SvgMentionIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/menu-icon.tsx b/packages/icons/20/menu-icon.tsx
index e6404dc1..248180c7 100644
--- a/packages/icons/20/menu-icon.tsx
+++ b/packages/icons/20/menu-icon.tsx
@@ -12,7 +12,7 @@ const SvgMenuIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M15 15H5M15 10H5M15 5H5"
diff --git a/packages/icons/20/messages-icon.tsx b/packages/icons/20/messages-icon.tsx
index ddeee6d0..8d239233 100644
--- a/packages/icons/20/messages-icon.tsx
+++ b/packages/icons/20/messages-icon.tsx
@@ -12,7 +12,7 @@ const SvgMessagesIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M16.75 10a6.75 6.75 0 0 0-13.5 0v.28c0 1.172.347 2.317.997 3.292.026.04.036.089.026.136l-.54 2.56 2.56-.541c.046-.01.095 0 .135.026.975.65 2.12.997 3.292.997H10A6.75 6.75 0 0 0 16.75 10ZM7.5 8.5h5M7.5 11.5h4"
diff --git a/packages/icons/20/mobile-icon.tsx b/packages/icons/20/mobile-icon.tsx
index 0fe4cf28..647eb7ed 100644
--- a/packages/icons/20/mobile-icon.tsx
+++ b/packages/icons/20/mobile-icon.tsx
@@ -12,7 +12,7 @@ const SvgMobileIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Rect
         x={4}
diff --git a/packages/icons/20/multi-profile-icon.tsx b/packages/icons/20/multi-profile-icon.tsx
index 624809a6..b680f665 100644
--- a/packages/icons/20/multi-profile-icon.tsx
+++ b/packages/icons/20/multi-profile-icon.tsx
@@ -12,7 +12,7 @@ const SvgMultiProfileIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/muted-icon.tsx b/packages/icons/20/muted-icon.tsx
index 6660aa75..b2246e0e 100644
--- a/packages/icons/20/muted-icon.tsx
+++ b/packages/icons/20/muted-icon.tsx
@@ -12,7 +12,7 @@ const SvgMutedIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/mutual-contact-icon.tsx b/packages/icons/20/mutual-contact-icon.tsx
index 999e6fb3..8f9a6d3a 100644
--- a/packages/icons/20/mutual-contact-icon.tsx
+++ b/packages/icons/20/mutual-contact-icon.tsx
@@ -12,10 +12,10 @@ const SvgMutualContactIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
-      <Circle cx={15} cy={10} r={7} fill="#4360DF" />
-      <Circle cx={9} cy={10} r={7} fill="#4360DF" fillOpacity={0.3} />
+      <Circle cx={15} cy={10} r={7} fill={color} />
+      <Circle cx={9} cy={10} r={7} fill={color} fillOpacity={0.3} />
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
diff --git a/packages/icons/20/new-message-icon.tsx b/packages/icons/20/new-message-icon.tsx
index f7162d5e..0588b876 100644
--- a/packages/icons/20/new-message-icon.tsx
+++ b/packages/icons/20/new-message-icon.tsx
@@ -12,7 +12,7 @@ const SvgNewMessageIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/nft-icon.tsx b/packages/icons/20/nft-icon.tsx
index abce588b..9b85b251 100644
--- a/packages/icons/20/nft-icon.tsx
+++ b/packages/icons/20/nft-icon.tsx
@@ -12,7 +12,7 @@ const SvgNftIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M3.886 12.4c-.505-.874-.758-1.312-.856-1.776a3 3 0 0 1 0-1.248c.098-.465.35-.902.856-1.776l.978-1.695c.505-.875.758-1.312 1.11-1.63a3 3 0 0 1 1.081-.623c.452-.147.957-.147 1.966-.147h1.958c1.01 0 1.514 0 1.966.147a3 3 0 0 1 1.08.623c.353.318.606.755 1.11 1.63l.98 1.695c.504.874.757 1.311.855 1.776.088.411.088.837 0 1.248-.098.464-.35.902-.856 1.776l-.978 1.695c-.505.874-.758 1.312-1.11 1.63-.313.28-.681.493-1.081.623-.452.147-.957.147-1.966.147H9.02c-1.01 0-1.514 0-1.966-.147-.4-.13-.768-.342-1.08-.623-.353-.318-.606-.755-1.11-1.63l-.98-1.695Z"
diff --git a/packages/icons/20/node-icon.tsx b/packages/icons/20/node-icon.tsx
index 565fdd38..5c465b10 100644
--- a/packages/icons/20/node-icon.tsx
+++ b/packages/icons/20/node-icon.tsx
@@ -12,7 +12,7 @@ const SvgNodeIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/notification-icon.tsx b/packages/icons/20/notification-icon.tsx
index 90703e20..fec43505 100644
--- a/packages/icons/20/notification-icon.tsx
+++ b/packages/icons/20/notification-icon.tsx
@@ -12,9 +12,9 @@ const SvgNotificationIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
-      <Circle cx={10} cy={10} r={4} fill="#4360DF" />
+      <Circle cx={10} cy={10} r={4} fill={color} />
     </Svg>
   )
 }
diff --git a/packages/icons/20/notifications-icon.tsx b/packages/icons/20/notifications-icon.tsx
index af68bf1d..33616d34 100644
--- a/packages/icons/20/notifications-icon.tsx
+++ b/packages/icons/20/notifications-icon.tsx
@@ -12,7 +12,7 @@ const SvgNotificationsIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/numbered-list-icon.tsx b/packages/icons/20/numbered-list-icon.tsx
index a5220c7c..83f49113 100644
--- a/packages/icons/20/numbered-list-icon.tsx
+++ b/packages/icons/20/numbered-list-icon.tsx
@@ -12,7 +12,7 @@ const SvgNumberedListIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M15 15H8.5M15 5H8.5"
diff --git a/packages/icons/20/online-icon.tsx b/packages/icons/20/online-icon.tsx
index 679f006d..1a192bf6 100644
--- a/packages/icons/20/online-icon.tsx
+++ b/packages/icons/20/online-icon.tsx
@@ -12,9 +12,9 @@ const SvgOnlineIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
-      <Circle cx={10} cy={10} r={4} fill="#26A69A" />
+      <Circle cx={10} cy={10} r={4} fill={color} />
     </Svg>
   )
 }
diff --git a/packages/icons/20/online-left-icon.tsx b/packages/icons/20/online-left-icon.tsx
index 2ade6eda..4dc40c6e 100644
--- a/packages/icons/20/online-left-icon.tsx
+++ b/packages/icons/20/online-left-icon.tsx
@@ -12,9 +12,9 @@ const SvgOnlineLeftIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
-      <Circle cx={4} cy={10} r={4} fill="#26A69A" />
+      <Circle cx={4} cy={10} r={4} fill={color} />
     </Svg>
   )
 }
diff --git a/packages/icons/20/options-icon.tsx b/packages/icons/20/options-icon.tsx
index 80718f6e..8794e2da 100644
--- a/packages/icons/20/options-icon.tsx
+++ b/packages/icons/20/options-icon.tsx
@@ -12,11 +12,11 @@ const SvgOptionsIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
-      <Circle cx={4.5} cy={10} r={1.5} fill="#0D1625" />
-      <Circle cx={10} cy={10} r={1.5} fill="#0D1625" />
-      <Circle cx={15.5} cy={10} r={1.5} fill="#0D1625" />
+      <Circle cx={4.5} cy={10} r={1.5} fill={color} />
+      <Circle cx={10} cy={10} r={1.5} fill={color} />
+      <Circle cx={15.5} cy={10} r={1.5} fill={color} />
     </Svg>
   )
 }
diff --git a/packages/icons/20/password-icon.tsx b/packages/icons/20/password-icon.tsx
index 17174b1e..dcd1b0f6 100644
--- a/packages/icons/20/password-icon.tsx
+++ b/packages/icons/20/password-icon.tsx
@@ -12,7 +12,7 @@ const SvgPasswordIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Rect
         x={3.5}
diff --git a/packages/icons/20/pause-icon.tsx b/packages/icons/20/pause-icon.tsx
index be9d6190..48ae9914 100644
--- a/packages/icons/20/pause-icon.tsx
+++ b/packages/icons/20/pause-icon.tsx
@@ -12,7 +12,7 @@ const SvgPauseIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Rect x={4} y={4} width={4} height={12} rx={1.5} fill={color} />
       <Rect x={12} y={4} width={4} height={12} rx={1.5} fill={color} />
diff --git a/packages/icons/20/pending-icon.tsx b/packages/icons/20/pending-icon.tsx
index 5dd6cdf2..e66bd702 100644
--- a/packages/icons/20/pending-icon.tsx
+++ b/packages/icons/20/pending-icon.tsx
@@ -12,7 +12,7 @@ const SvgPendingIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10} cy={10} r={7} stroke={color} strokeWidth={1.3} />
       <Path d="M10 5.5V10l-2 2" stroke="#000" strokeWidth={1.3} />
diff --git a/packages/icons/20/pending-user-icon.tsx b/packages/icons/20/pending-user-icon.tsx
index 028f5f6d..4520e87b 100644
--- a/packages/icons/20/pending-user-icon.tsx
+++ b/packages/icons/20/pending-user-icon.tsx
@@ -12,7 +12,7 @@ const SvgPendingUserIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/pin-1-icon.tsx b/packages/icons/20/pin-1-icon.tsx
index acb4f0ca..c2446c9b 100644
--- a/packages/icons/20/pin-1-icon.tsx
+++ b/packages/icons/20/pin-1-icon.tsx
@@ -12,7 +12,7 @@ const SvgPin1Icon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="m10.564 5.26 4.243 4.243-4.243 4.243-4.243-4.243 4.243-4.242ZM8.442 11.625 4.2 15.867M4.554 7.736l7.778 7.778M9.503 4.2l6.364 6.364"
diff --git a/packages/icons/20/pin-icon.tsx b/packages/icons/20/pin-icon.tsx
index fd22723d..9b92800f 100644
--- a/packages/icons/20/pin-icon.tsx
+++ b/packages/icons/20/pin-icon.tsx
@@ -12,7 +12,7 @@ const SvgPinIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/placeholder-icon.tsx b/packages/icons/20/placeholder-icon.tsx
index e4896fd0..fa4fd3c1 100644
--- a/packages/icons/20/placeholder-icon.tsx
+++ b/packages/icons/20/placeholder-icon.tsx
@@ -12,7 +12,7 @@ const SvgPlaceholderIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/play-icon.tsx b/packages/icons/20/play-icon.tsx
index f7b4c073..45c75c48 100644
--- a/packages/icons/20/play-icon.tsx
+++ b/packages/icons/20/play-icon.tsx
@@ -12,7 +12,7 @@ const SvgPlayIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M6 6.83c0-1.413 0-2.12.296-2.518a1.5 1.5 0 0 1 1.084-.6c.494-.04 1.094.334 2.292 1.083l5.072 3.17c1.08.675 1.62 1.012 1.805 1.444a1.5 1.5 0 0 1 0 1.182c-.186.432-.726.77-1.805 1.444l-5.072 3.17c-1.198.749-1.798 1.124-2.292 1.084a1.5 1.5 0 0 1-1.084-.601C6 15.29 6 14.583 6 13.17V6.83Z"
diff --git a/packages/icons/20/privacy-icon.tsx b/packages/icons/20/privacy-icon.tsx
index 65e44bfe..3f725bad 100644
--- a/packages/icons/20/privacy-icon.tsx
+++ b/packages/icons/20/privacy-icon.tsx
@@ -12,13 +12,13 @@ const SvgPrivacyIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M6.5 12.15a1.35 1.35 0 1 0 0 2.7 1.35 1.35 0 0 0 0-2.7ZM3.85 13.5a2.65 2.65 0 0 1 5.127-.944 3.357 3.357 0 0 1 2.046 0 2.651 2.651 0 1 1-.144 1.337 2.055 2.055 0 0 0-1.758 0 2.65 2.65 0 0 1-5.27-.393Zm9.65-1.35a1.35 1.35 0 1 0 0 2.7 1.35 1.35 0 0 0 0-2.7ZM6.96 4.532a.35.35 0 0 1 .561-.091l1.02 1.019 1 1 .503.503.455-.547 1.587-1.904a.35.35 0 0 1 .571.048l2.211 3.79H5.052L6.96 4.532ZM3.599 8.35l2.2-4.4a1.65 1.65 0 0 1 2.643-.429l1.019 1.02.496.496 1.131-1.357a1.65 1.65 0 0 1 2.693.225l2.593 4.445H18v1.3H2v-1.3h1.598Z"
-        fill="#000"
+        fill={color}
       />
     </Svg>
   )
diff --git a/packages/icons/20/profile-icon.tsx b/packages/icons/20/profile-icon.tsx
index 0165c8a3..a6593898 100644
--- a/packages/icons/20/profile-icon.tsx
+++ b/packages/icons/20/profile-icon.tsx
@@ -12,7 +12,7 @@ const SvgProfileIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10} cy={10} r={6.75} stroke={color} strokeWidth={1.3} />
       <Path
diff --git a/packages/icons/20/pullup-icon.tsx b/packages/icons/20/pullup-icon.tsx
index 343e9846..d82cc5d9 100644
--- a/packages/icons/20/pullup-icon.tsx
+++ b/packages/icons/20/pullup-icon.tsx
@@ -12,7 +12,7 @@ const SvgPullupIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle
         cx={10}
diff --git a/packages/icons/20/qr-code-icon.tsx b/packages/icons/20/qr-code-icon.tsx
index 61b0b9cf..6ba627e6 100644
--- a/packages/icons/20/qr-code-icon.tsx
+++ b/packages/icons/20/qr-code-icon.tsx
@@ -12,7 +12,7 @@ const SvgQrCodeIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Rect
         x={3.5}
diff --git a/packages/icons/20/quarter-icon.tsx b/packages/icons/20/quarter-icon.tsx
index f725b27d..ac69c745 100644
--- a/packages/icons/20/quarter-icon.tsx
+++ b/packages/icons/20/quarter-icon.tsx
@@ -12,7 +12,7 @@ const SvgQuarterIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M9.35 16.317v1.306a7.652 7.652 0 0 1-6.973-6.973h1.306a6.352 6.352 0 0 0 5.667 5.667ZM10.65 17.623a7.652 7.652 0 0 0 6.973-6.973h-1.306a6.352 6.352 0 0 1-5.667 5.667v1.306ZM10.65 3.683a6.352 6.352 0 0 1 5.667 5.667h1.306a7.652 7.652 0 0 0-6.973-6.973v1.306ZM9.35 2.377v1.306A6.352 6.352 0 0 0 3.683 9.35H2.377A7.652 7.652 0 0 1 9.35 2.377Z"
diff --git a/packages/icons/20/reaction-icon.tsx b/packages/icons/20/reaction-icon.tsx
index ad7d0e85..0483d5c1 100644
--- a/packages/icons/20/reaction-icon.tsx
+++ b/packages/icons/20/reaction-icon.tsx
@@ -6,13 +6,14 @@ import type { SvgProps } from 'react-native-svg'
 const SvgReactionIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
+
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10} cy={10} r={6.75} stroke={color} strokeWidth={1.3} />
       <Path
diff --git a/packages/icons/20/receive-icon.tsx b/packages/icons/20/receive-icon.tsx
index eaeca04a..cfcbff7c 100644
--- a/packages/icons/20/receive-icon.tsx
+++ b/packages/icons/20/receive-icon.tsx
@@ -12,7 +12,7 @@ const SvgReceiveIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/receive-message-icon.tsx b/packages/icons/20/receive-message-icon.tsx
index e14c1386..9ffc96c0 100644
--- a/packages/icons/20/receive-message-icon.tsx
+++ b/packages/icons/20/receive-message-icon.tsx
@@ -12,7 +12,7 @@ const SvgReceiveMessageIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/recent-icon.tsx b/packages/icons/20/recent-icon.tsx
index bf5888fa..5e53eef5 100644
--- a/packages/icons/20/recent-icon.tsx
+++ b/packages/icons/20/recent-icon.tsx
@@ -12,7 +12,7 @@ const SvgRecentIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10} cy={10} r={7} stroke={color} strokeWidth={1.3} />
       <Path d="M10 6.5V10l2.5 2.5" stroke={color} strokeWidth={1.3} />
diff --git a/packages/icons/20/refresh-icon.tsx b/packages/icons/20/refresh-icon.tsx
index 3bfa21a4..90127975 100644
--- a/packages/icons/20/refresh-icon.tsx
+++ b/packages/icons/20/refresh-icon.tsx
@@ -12,13 +12,13 @@ const SvgRefreshIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M8.583 3.503 7.54 2.46l.92-.92 2 2 .358.36-.26.434-1.5 2.5-1.115-.668.822-1.372a5.35 5.35 0 1 0 5.868 2.531l1.126-.65a6.65 6.65 0 1 1-7.176-3.172Z"
-        fill="#000"
+        fill={color}
       />
     </Svg>
   )
diff --git a/packages/icons/20/remove-user-icon.tsx b/packages/icons/20/remove-user-icon.tsx
index 62215457..04e0606e 100644
--- a/packages/icons/20/remove-user-icon.tsx
+++ b/packages/icons/20/remove-user-icon.tsx
@@ -12,7 +12,7 @@ const SvgRemoveUserIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/reply-icon.tsx b/packages/icons/20/reply-icon.tsx
index 55974b4e..c5d9d485 100644
--- a/packages/icons/20/reply-icon.tsx
+++ b/packages/icons/20/reply-icon.tsx
@@ -12,7 +12,7 @@ const SvgReplyIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/reveal-icon.tsx b/packages/icons/20/reveal-icon.tsx
index cebec71e..b87e8f0d 100644
--- a/packages/icons/20/reveal-icon.tsx
+++ b/packages/icons/20/reveal-icon.tsx
@@ -12,7 +12,7 @@ const SvgRevealIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M10 4c4.5 0 7 5 7 6s-2.5 6-7 6-7-5-7-6 2.5-6 7-6Z"
diff --git a/packages/icons/20/revere-icon.tsx b/packages/icons/20/revere-icon.tsx
index f6513a40..05927556 100644
--- a/packages/icons/20/revere-icon.tsx
+++ b/packages/icons/20/revere-icon.tsx
@@ -12,13 +12,13 @@ const SvgRevereIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M11.417 3.503 12.46 2.46l-.92-.92-2 2-.358.36.26.434 1.5 2.5 1.115-.668-.822-1.372a5.35 5.35 0 1 1-5.868 2.531l-1.126-.65a6.65 6.65 0 1 0 7.176-3.172Z"
-        fill="#000"
+        fill={color}
       />
     </Svg>
   )
diff --git a/packages/icons/20/right-align-icon.tsx b/packages/icons/20/right-align-icon.tsx
index c5e5b186..599445e0 100644
--- a/packages/icons/20/right-align-icon.tsx
+++ b/packages/icons/20/right-align-icon.tsx
@@ -12,7 +12,7 @@ const SvgRightAlignIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M15 11.75H5M15 5H5M15 15H9M15 8.25H9"
diff --git a/packages/icons/20/rotate-icon.tsx b/packages/icons/20/rotate-icon.tsx
index 2ef52333..76ba2145 100644
--- a/packages/icons/20/rotate-icon.tsx
+++ b/packages/icons/20/rotate-icon.tsx
@@ -12,13 +12,13 @@ const SvgRotateIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M10 2.35a7.65 7.65 0 0 0-6.214 3.187L3.26 4.304l-.92.392.983 2.3.147.344.373-.045 2.482-.299-.12-.992-1.258.151a6.35 6.35 0 0 1 10.553.67l1.126-.65A7.65 7.65 0 0 0 10 2.35Zm-.46 3.69a.65.65 0 0 1 .92 0l4.95 4.95a.65.65 0 0 1 0 .92l-4.95 4.95a.65.65 0 0 1-.92 0l-4.95-4.95a.65.65 0 0 1 0-.92l4.95-4.95ZM10 7.42l-4.03 4.03L10 15.48l4.03-4.03L10 7.42Z"
-        fill="#000"
+        fill={color}
       />
     </Svg>
   )
diff --git a/packages/icons/20/sad-icon.tsx b/packages/icons/20/sad-icon.tsx
index ce26ba04..40ba56c8 100644
--- a/packages/icons/20/sad-icon.tsx
+++ b/packages/icons/20/sad-icon.tsx
@@ -12,7 +12,7 @@ const SvgSadIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10} cy={10} r={6.75} stroke={color} strokeWidth={1.3} />
       <Path
diff --git a/packages/icons/20/save-icon.tsx b/packages/icons/20/save-icon.tsx
index 3f5fcc72..70aabb19 100644
--- a/packages/icons/20/save-icon.tsx
+++ b/packages/icons/20/save-icon.tsx
@@ -12,7 +12,7 @@ const SvgSaveIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/scan-icon.tsx b/packages/icons/20/scan-icon.tsx
index d335e450..47710776 100644
--- a/packages/icons/20/scan-icon.tsx
+++ b/packages/icons/20/scan-icon.tsx
@@ -12,7 +12,7 @@ const SvgScanIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M8.143 3.5c-1.532 0-2.298 0-2.894.273A3 3 0 0 0 3.773 5.25C3.5 5.845 3.5 6.611 3.5 8.143M11.857 3.5c1.532 0 2.298 0 2.894.273a3 3 0 0 1 1.476 1.476c.273.596.273 1.362.273 2.894m0 3.714c0 1.532 0 2.298-.273 2.894a3 3 0 0 1-1.476 1.476c-.596.273-1.362.273-2.894.273m-3.714 0c-1.532 0-2.298 0-2.894-.273a3 3 0 0 1-1.476-1.476c-.273-.596-.273-1.362-.273-2.894M6 10h8"
diff --git a/packages/icons/20/search-icon.tsx b/packages/icons/20/search-icon.tsx
index 51f5e191..4b29bfdd 100644
--- a/packages/icons/20/search-icon.tsx
+++ b/packages/icons/20/search-icon.tsx
@@ -12,7 +12,7 @@ const SvgSearchIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/seed-icon.tsx b/packages/icons/20/seed-icon.tsx
index 781f08f2..65bae63c 100644
--- a/packages/icons/20/seed-icon.tsx
+++ b/packages/icons/20/seed-icon.tsx
@@ -12,7 +12,7 @@ const SvgSeedIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M1 3.765C1 3.342 1.336 3 1.75 3H8.5c.414 0 .75.342.75.765a.757.757 0 0 1-.75.764H1.75A.757.757 0 0 1 1 3.765ZM11 3.765c0-.423.336-.765.75-.765h6.5c.414 0 .75.342.75.765a.757.757 0 0 1-.75.764h-6.5a.757.757 0 0 1-.75-.764ZM14 7.588c0-.422.336-.764.75-.764h3.5c.414 0 .75.342.75.764a.757.757 0 0 1-.75.765h-3.5a.757.757 0 0 1-.75-.765ZM6 11.412a.757.757 0 0 0-.75-.765h-3.5a.757.757 0 0 0-.75.765c0 .422.336.764.75.764h3.5c.414 0 .75-.342.75-.764ZM1 7.588c0-.422.336-.764.75-.764h9.75c.414 0 .75.342.75.764a.757.757 0 0 1-.75.765H1.75A.757.757 0 0 1 1 7.588ZM19 11.412a.757.757 0 0 0-.75-.765H8.5a.757.757 0 0 0-.75.765c0 .422.336.764.75.764h9.75c.414 0 .75-.342.75-.764ZM1 15.235c0-.422.336-.764.75-.764H8.5c.414 0 .75.342.75.764A.757.757 0 0 1 8.5 16H1.75a.757.757 0 0 1-.75-.765ZM11 15.235c0-.422.336-.764.75-.764h6.5c.414 0 .75.342.75.764a.757.757 0 0 1-.75.765h-6.5a.757.757 0 0 1-.75-.765Z"
diff --git a/packages/icons/20/send-icon.tsx b/packages/icons/20/send-icon.tsx
index 5f44840a..dfd7c136 100644
--- a/packages/icons/20/send-icon.tsx
+++ b/packages/icons/20/send-icon.tsx
@@ -12,7 +12,7 @@ const SvgSendIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/send-message-icon.tsx b/packages/icons/20/send-message-icon.tsx
index b667fc78..06488e34 100644
--- a/packages/icons/20/send-message-icon.tsx
+++ b/packages/icons/20/send-message-icon.tsx
@@ -12,7 +12,7 @@ const SvgSendMessageIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/settings-icon.tsx b/packages/icons/20/settings-icon.tsx
index 60ec78b0..9ebaa5c9 100644
--- a/packages/icons/20/settings-icon.tsx
+++ b/packages/icons/20/settings-icon.tsx
@@ -12,7 +12,7 @@ const SvgSettingsIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="m6.877 4.876-.483.435.361.4.46-.28-.338-.555Zm1.708-.708.153.632.524-.127-.028-.539-.649.034Zm-2.02.426.33-.56-.33.56Zm-.95-.034-.288-.583.288.583Zm-.565.49.46.46-.46-.46Zm-.49.565.582.288-.582-.288Zm.034.95.56-.33-.56.33Zm.282.312.555.339.28-.46-.4-.362-.435.483Zm-.708 1.708-.034.65.539.027.127-.524-.632-.153Zm-.42.021-.163-.629.163.63Zm-.695.648.615.208-.615-.208Zm0 1.492-.616.208.616-.208Zm.695.648.164-.63-.164.63Zm.42.02.632-.152-.127-.524-.539.028.034.649Zm.708 1.71.435.482.4-.361-.28-.46-.555.338Zm-.282.311-.56-.33.56.33Zm-.034.95-.583.289.583-.289Zm.49.565.46-.46-.46.46Zm.565.49-.288.583.288-.583Zm.95-.034-.33-.56.33.56Zm.312-.282.339-.555-.46-.28-.362.4.483.435Zm1.708.708.65.034.027-.539-.524-.127-.153.632Zm.021.42-.629.163.63-.163Zm.648.695.208-.615-.208.615Zm1.492 0-.208-.615.208.615Zm.648-.695-.63-.164.63.164Zm.02-.42-.152-.632-.524.127.028.539.649-.034Zm1.71-.708.482-.436-.361-.4-.46.281.338.555Zm.311.282.33-.56-.33.56Zm.95.034.289.583-.289-.583Zm1.055-1.055-.582-.288.582.288Zm-.034-.95-.56.33.56-.33Zm-.282-.312-.555-.338-.28.46.4.36.435-.482Zm.708-1.708.034-.65-.539-.027-.127.524.632.153Zm.42-.021-.164-.63.164.63Zm.695-.648-.615-.208.615.208Zm0-1.492-.615.208.615-.208Zm-.695-.648.163-.629-.163.63Zm-.42-.02-.632.152.127.524.539-.028-.034-.649Zm-.708-1.71-.435-.482-.4.361.28.46.555-.338Zm.282-.311-.56-.33.56.33Zm.034-.95.583-.288-.583.288Zm-.49-.565.46-.46-.46.46Zm-.565-.49.289-.583-.289.583Zm-.95.034.33.56-.33-.56Zm-.312.282-.338.555.46.28.36-.4-.482-.435Zm-1.708-.708-.65-.034-.027.539.524.127.153-.632Zm-.021-.42-.63.164.63-.164Zm-.648-.695-.208.615.208-.615Zm-1.492 0-.208-.616.208.616Zm-.648.695-.629-.163.63.163Zm-1.39 1.683c.465-.285.977-.5 1.522-.631l-.305-1.264a6.614 6.614 0 0 0-1.895.785l.678 1.11Zm-.98-.277c-.002 0 .008.004.034.028.028.026.066.065.124.13l.965-.871a2.01 2.01 0 0 0-.465-.408l-.658 1.121Zm-.333-.012a.35.35 0 0 1 .333.012l.658-1.12a1.65 1.65 0 0 0-1.567-.057l.576 1.165Zm-.393.368a8.65 8.65 0 0 1 .305-.297c.068-.062.09-.071.088-.07l-.576-1.166c-.268.133-.496.373-.736.614l.919.919Zm-.368.393c0 .002.01-.02.07-.088.064-.071.154-.16.298-.305l-.92-.92c-.24.24-.48.47-.613.737l1.165.576Zm.012.333a.35.35 0 0 1-.012-.333l-1.165-.576a1.65 1.65 0 0 0 .056 1.567l1.121-.658Zm.157.158a1.988 1.988 0 0 1-.129-.124c-.024-.026-.029-.036-.028-.034l-1.12.658c.11.188.262.335.407.465l.87-.965ZM4.8 8.738a5.315 5.315 0 0 1 .63-1.522l-1.109-.678a6.615 6.615 0 0 0-.785 1.895l1.264.305Zm-.888.497a1.978 1.978 0 0 1 .223 0L4.2 7.935a2.009 2.009 0 0 0-.616.041l.327 1.258Zm-.244.227a.35.35 0 0 1 .244-.227l-.327-1.258a1.65 1.65 0 0 0-1.148 1.069l1.231.416ZM3.65 10c0-.204 0-.33.006-.426.005-.092.013-.114.012-.112l-1.231-.416c-.096.283-.087.614-.087.954h1.3Zm.018.538c.001.002-.007-.02-.012-.112A8.657 8.657 0 0 1 3.65 10h-1.3c0 .34-.009.671.087.954l1.231-.416Zm.244.227a.35.35 0 0 1-.244-.227l-1.231.416c.178.527.61.929 1.148 1.069l.327-1.258Zm.222 0a2.016 2.016 0 0 1-.178.004c-.036-.002-.046-.005-.044-.004l-.327 1.258c.21.055.421.05.616.04l-.067-1.297Zm1.297 2.02a5.315 5.315 0 0 1-.631-1.523l-1.264.305c.164.679.432 1.316.785 1.895l1.11-.678Zm-.277.98s.004-.009.028-.035c.026-.028.065-.066.13-.124l-.871-.965c-.145.13-.297.277-.408.465l1.121.658Zm-.012.332a.35.35 0 0 1 .012-.333l-1.12-.658a1.65 1.65 0 0 0-.057 1.568l1.165-.577Zm.368.393a8.7 8.7 0 0 1-.297-.305c-.062-.069-.071-.09-.07-.088l-1.166.577c.133.267.373.495.614.735l.919-.919Zm.393.367c.002.001-.02-.008-.088-.07a8.65 8.65 0 0 1-.305-.297l-.92.92c.24.24.47.48.737.613l.576-1.165Zm.333-.011a.35.35 0 0 1-.333.011l-.576 1.166a1.65 1.65 0 0 0 1.567-.056l-.658-1.121Zm.158-.157a1.995 1.995 0 0 1-.124.129c-.026.024-.036.029-.034.028l.658 1.12a2.01 2.01 0 0 0 .465-.407l-.965-.87Zm2.344.511a5.312 5.312 0 0 1-1.522-.63l-.678 1.109a6.617 6.617 0 0 0 1.895.785l.305-1.264Zm.497.888a1.979 1.979 0 0 1 0-.223L7.935 15.8c-.01.195-.014.405.041.616l1.258-.327Zm.227.244a.35.35 0 0 1-.227-.244l-1.258.327c.14.539.542.97 1.069 1.148l.416-1.231Zm.538.018c-.204 0-.33 0-.426-.006-.092-.005-.114-.013-.112-.012l-.416 1.231c.283.096.614.087.954.087v-1.3Zm.538-.018c.002-.001-.02.007-.112.012a8.542 8.542 0 0 1-.426.006v1.3c.34 0 .671.009.954-.087l-.416-1.231Zm.227-.244a.35.35 0 0 1-.227.244l.416 1.231a1.65 1.65 0 0 0 1.069-1.148l-1.258-.327Zm0-.223c.005.087.006.142.004.18-.002.035-.005.045-.004.043l1.258.327c.055-.21.05-.421.04-.616l-1.297.067Zm2.02-1.296c-.466.285-.978.5-1.523.631l.305 1.264a6.616 6.616 0 0 0 1.895-.785l-.678-1.11Zm.98.277s-.009-.005-.035-.028a1.973 1.973 0 0 1-.124-.13l-.965.871c.13.145.277.297.465.408l.658-1.121Zm.332.011a.35.35 0 0 1-.333-.011l-.658 1.12a1.65 1.65 0 0 0 1.568.057l-.577-1.165Zm.393-.367a8.69 8.69 0 0 1-.305.297c-.069.062-.09.071-.088.07l.577 1.166c.267-.133.495-.373.735-.614l-.919-.919Zm.367-.393c.001-.002-.008.02-.07.088a8.69 8.69 0 0 1-.297.305l.92.92c.24-.24.48-.47.613-.736l-1.165-.577Zm-.011-.333a.35.35 0 0 1 .011.333l1.166.577a1.65 1.65 0 0 0-.056-1.568l-1.121.658Zm-.157-.158c.064.058.103.096.129.124.024.026.029.036.028.034l1.12-.658a2.013 2.013 0 0 0-.407-.465l-.87.965Zm.511-2.344a5.313 5.313 0 0 1-.63 1.522l1.109.678a6.616 6.616 0 0 0 .785-1.895l-1.264-.305Zm.888-.497a2.017 2.017 0 0 1-.223 0l-.066 1.299c.195.01.405.014.616-.041l-.327-1.258Zm.244-.227a.35.35 0 0 1-.244.227l.327 1.258a1.65 1.65 0 0 0 1.148-1.069l-1.231-.416ZM16.35 10c0 .204 0 .33-.006.426-.005.092-.013.114-.012.112l1.231.416c.096-.283.087-.614.087-.954h-1.3Zm-.018-.538c-.001-.002.007.02.012.112.006.096.006.222.006.426h1.3c0-.34.009-.671-.087-.954l-1.231.416Zm-.244-.227a.35.35 0 0 1 .244.227l1.231-.416a1.65 1.65 0 0 0-1.148-1.069l-.327 1.258Zm-.223 0c.087-.005.142-.006.18-.004.035.002.045.005.043.004l.327-1.258a2.009 2.009 0 0 0-.616-.04l.067 1.297Zm-1.296-2.02c.285.466.5.978.631 1.523l1.264-.305a6.617 6.617 0 0 0-.785-1.895l-1.11.678Zm.277-.98s-.005.009-.028.035a1.995 1.995 0 0 1-.13.124l.871.965a2.01 2.01 0 0 0 .408-.465l-1.121-.658Zm.011-.332a.35.35 0 0 1-.011.333l1.12.658a1.65 1.65 0 0 0 .057-1.567l-1.165.576Zm-.367-.393c.144.144.234.234.297.305.062.068.071.09.07.088l1.166-.576c-.133-.268-.373-.496-.614-.736l-.919.919Zm-.393-.368c-.002 0 .02.01.088.07a8.7 8.7 0 0 1 .305.298l.92-.92c-.24-.24-.47-.48-.736-.613l-.577 1.165Zm-.333.012a.35.35 0 0 1 .333-.012l.577-1.165a1.65 1.65 0 0 0-1.568.056l.658 1.121Zm-.158.157c.058-.064.096-.103.124-.129.026-.024.036-.029.034-.028l-.658-1.12c-.188.11-.335.262-.465.407l.965.87ZM11.262 4.8a5.315 5.315 0 0 1 1.522.63l.678-1.109a6.614 6.614 0 0 0-1.895-.785L11.262 4.8Zm-.497-.888a2.016 2.016 0 0 1 0 .223l1.299.066c.01-.195.014-.405-.041-.616l-1.258.327Zm-.227-.244a.35.35 0 0 1 .227.244l1.258-.327a1.65 1.65 0 0 0-1.069-1.148l-.416 1.231ZM10 3.65c.204 0 .33 0 .426.006.092.005.114.013.112.012l.416-1.231c-.283-.096-.614-.087-.954-.087v1.3Zm-.538.018c-.002.001.02-.007.112-.012.096-.006.222-.006.426-.006v-1.3c-.34 0-.671-.009-.954.087l.416 1.231Zm-.227.244a.35.35 0 0 1 .227-.244l-.416-1.231a1.65 1.65 0 0 0-1.069 1.148l1.258.327Zm0 .222a1.978 1.978 0 0 1-.004-.178c.002-.036.005-.046.004-.044l-1.258-.327c-.055.21-.05.421-.04.616l1.297-.067ZM11.85 10A1.85 1.85 0 0 1 10 11.85v1.3A3.15 3.15 0 0 0 13.15 10h-1.3ZM10 8.15A1.85 1.85 0 0 1 11.85 10h1.3A3.15 3.15 0 0 0 10 6.85v1.3ZM8.15 10A1.85 1.85 0 0 1 10 8.15v-1.3A3.15 3.15 0 0 0 6.85 10h1.3ZM10 11.85A1.85 1.85 0 0 1 8.15 10h-1.3A3.15 3.15 0 0 0 10 13.15v-1.3Z"
diff --git a/packages/icons/20/share-icon.tsx b/packages/icons/20/share-icon.tsx
index 5723db44..3d382435 100644
--- a/packages/icons/20/share-icon.tsx
+++ b/packages/icons/20/share-icon.tsx
@@ -12,7 +12,7 @@ const SvgShareIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/signature-icon.tsx b/packages/icons/20/signature-icon.tsx
index 385100e6..10d6f780 100644
--- a/packages/icons/20/signature-icon.tsx
+++ b/packages/icons/20/signature-icon.tsx
@@ -12,7 +12,7 @@ const SvgSignatureIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M8.594 10.666a16.591 16.591 0 0 1 2.045-1.992c.042.183.045.39.004.531-.1.252-.158.526-.195.776v-.543l-.832.74c-.38.339-.745.725-1.095 1.106a1.267 1.267 0 0 1-.016-.337c.015-.157.059-.246.09-.282l-.379-.327.378.328Zm1.839.057v-.002l.62-.147c.66-.157 1.202-.55 1.706-1.177a.585.585 0 0 0 .402.285.78.78 0 0 0 .393-.035c.177-.059.363-.17.511-.268a7.43 7.43 0 0 0 .41-.294 1.146 1.146 0 0 1 .028.171c.012.093.018.138.018.188v.257l-.582.405c-.269.188-.466.31-.622.351-.066.017-.092.01-.098.009-.003-.001-.031-.01-.08-.073l-.377-.497-.403.477c-.62.734-1.237 1.027-1.86 1.01a.5.5 0 0 1-.015-.039 1.629 1.629 0 0 1-.054-.582V10.736l.003-.013Zm4.284-.298-.094-.508.362.026c.354.025.71-.076.984-.167.114-.038.213-.073.302-.105l.21-.073c.01.064.019.145.019.24 0 .178-.03.347-.073.462a.526.526 0 0 1-.03.066c-.16.038-.319.085-.466.127l-.007.002c-.172.051-.33.097-.486.133-.263.06-.473.08-.649.048a1.156 1.156 0 0 1-.072-.25Zm1.719-.973.001.002a.015.015 0 0 1-.001-.002Zm-.055.938.003-.003a.016.016 0 0 1-.003.003Z"
diff --git a/packages/icons/20/sort-icon.tsx b/packages/icons/20/sort-icon.tsx
index b974e1d2..08ca187e 100644
--- a/packages/icons/20/sort-icon.tsx
+++ b/packages/icons/20/sort-icon.tsx
@@ -12,7 +12,7 @@ const SvgSortIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/speed-icon.tsx b/packages/icons/20/speed-icon.tsx
index 6bb6a3f8..3f8a4d3e 100644
--- a/packages/icons/20/speed-icon.tsx
+++ b/packages/icons/20/speed-icon.tsx
@@ -12,7 +12,7 @@ const SvgSpeedIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="m6.5 13.5-1.45 1.45a7 7 0 1 1 9.9 0L13.5 13.5"
diff --git a/packages/icons/20/status-icon.tsx b/packages/icons/20/status-icon.tsx
index a09cd869..bb4a9a66 100644
--- a/packages/icons/20/status-icon.tsx
+++ b/packages/icons/20/status-icon.tsx
@@ -12,7 +12,7 @@ const SvgStatusIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M10.079 9.74c.7.07 1.402.142 2.264.095 2.337-.127 3.753-1.3 3.652-3.05-.102-1.783-1.985-2.881-3.87-2.778-3.07.167-5.328 2.8-5.582 5.812a7.636 7.636 0 0 1 1.27-.175c.862-.047 1.564.024 2.266.095ZM4.005 13.394c.098 1.668 1.902 2.696 3.707 2.6 2.941-.157 5.104-2.622 5.347-5.44a7.48 7.48 0 0 1-1.216.164c-.826.044-1.498-.023-2.17-.09-.672-.066-1.344-.133-2.17-.089-2.238.12-3.595 1.216-3.498 2.855Z"
diff --git a/packages/icons/20/stickers-icon.tsx b/packages/icons/20/stickers-icon.tsx
index cafc6d1e..74c0c0c6 100644
--- a/packages/icons/20/stickers-icon.tsx
+++ b/packages/icons/20/stickers-icon.tsx
@@ -12,7 +12,7 @@ const SvgStickersIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/stop-icon.tsx b/packages/icons/20/stop-icon.tsx
index ffae40e6..bcfad991 100644
--- a/packages/icons/20/stop-icon.tsx
+++ b/packages/icons/20/stop-icon.tsx
@@ -12,7 +12,7 @@ const SvgStopIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Rect x={3.5} y={3.5} width={13} height={13} rx={4} fill={color} />
     </Svg>
diff --git a/packages/icons/20/strikethrough-icon.tsx b/packages/icons/20/strikethrough-icon.tsx
index 1fa6c4c8..e22cf3c6 100644
--- a/packages/icons/20/strikethrough-icon.tsx
+++ b/packages/icons/20/strikethrough-icon.tsx
@@ -12,7 +12,7 @@ const SvgStrikethroughIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/subscript-icon.tsx b/packages/icons/20/subscript-icon.tsx
index dab7e1b4..785aaae3 100644
--- a/packages/icons/20/subscript-icon.tsx
+++ b/packages/icons/20/subscript-icon.tsx
@@ -12,7 +12,7 @@ const SvgSubscriptIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M18.664 16.768c.123 0 .216.032.28.096.064.07.096.16.096.272v.672h-4.152v-.376c0-.075.014-.152.04-.232a.757.757 0 0 1 .152-.232l1.744-1.72c.267-.256.488-.525.664-.808.181-.283.272-.56.272-.832 0-.256-.075-.453-.224-.592a.763.763 0 0 0-.552-.208.833.833 0 0 0-.56.184c-.139.117-.242.28-.312.488a.566.566 0 0 1-.2.216c-.07.037-.181.043-.336.016l-.624-.104c.037-.288.115-.539.232-.752.123-.219.275-.397.456-.536.181-.144.39-.25.624-.32.24-.075.499-.112.776-.112.288 0 .547.043.776.128.23.08.424.195.584.344.16.144.283.32.368.528.09.208.136.435.136.68 0 .213-.035.413-.104.6a2.275 2.275 0 0 1-.264.52c-.112.165-.24.328-.384.488-.144.155-.293.312-.448.472l-1.216 1.24a3.32 3.32 0 0 1 .384-.088 2.2 2.2 0 0 1 .36-.032h1.432Z"
diff --git a/packages/icons/20/superscript-icon.tsx b/packages/icons/20/superscript-icon.tsx
index 0b3fa9ef..f4757364 100644
--- a/packages/icons/20/superscript-icon.tsx
+++ b/packages/icons/20/superscript-icon.tsx
@@ -12,7 +12,7 @@ const SvgSuperscriptIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M16.885 7.785c.071-.016.142-.03.213-.042.13-.022.253-.033.369-.033h1.432c.131 0 .24.037.316.12m-2.33-.045 2.294.079m-2.294-.079 1.09-1.11c.154-.16.304-.318.448-.473.146-.162.276-.327.389-.494.114-.169.204-.346.27-.531m-2.197 2.608 1.502-1.617c.144-.16.272-.323.384-.488.112-.165.2-.339.264-.52m.18 2.67-.036.034m.036-.035h-.001l-.035.035m.036-.035c.075.076.11.177.11.299V8.85h-4.252v-.426c0-.08.014-.163.042-.248l.001-.003a.806.806 0 0 1 .162-.247l.001-.002 1.744-1.72c.265-.253.483-.52.657-.798v-.001c.178-.277.265-.545.265-.805 0-.246-.072-.428-.209-.555v-.001a.713.713 0 0 0-.517-.194c-.22 0-.395.059-.528.172-.13.11-.23.265-.297.466l-.003.01-.001-.001a.615.615 0 0 1-.219.234v.001c-.086.046-.212.048-.369.021l.009-.049m3.368 3.16a.357.357 0 0 1 .096.264V8.8H15.123v-.376c0-.075.013-.152.04-.232a.755.755 0 0 1 .152-.232l1.744-1.72c.266-.256.488-.525.664-.808.18-.283.272-.56.272-.832 0-.256-.075-.453-.224-.592a.763.763 0 0 0-.552-.208.833.833 0 0 0-.56.184 1.06 1.06 0 0 0-.312.488.567.567 0 0 1-.2.216c-.07.037-.182.043-.336.016m0 0-.624-.104c.037-.288.114-.539.232-.752l.392.856Zm3.224.456.046.017m-.046-.017a1.71 1.71 0 0 0 .104-.6c0-.245-.046-.472-.136-.68m.032 1.28.047.017m0 0a1.76 1.76 0 0 0 .107-.617c0-.251-.047-.485-.14-.7a1.479 1.479 0 0 0-.38-.545 1.68 1.68 0 0 0-.602-.354 2.263 2.263 0 0 0-.792-.131 2.65 2.65 0 0 0-.791.114c-.24.071-.454.18-.64.329a1.776 1.776 0 0 0-.469.55c-.121.22-.2.478-.238.77l-.006.048.047.008.624.104 3.2-.873m0 0a1.43 1.43 0 0 0-.367-.528l.368.528Z"
diff --git a/packages/icons/20/swap-icon.tsx b/packages/icons/20/swap-icon.tsx
index a06056a1..73a4aa11 100644
--- a/packages/icons/20/swap-icon.tsx
+++ b/packages/icons/20/swap-icon.tsx
@@ -12,7 +12,7 @@ const SvgSwapIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/syncing-icon.tsx b/packages/icons/20/syncing-icon.tsx
index 8abb0b26..2db49d8e 100644
--- a/packages/icons/20/syncing-icon.tsx
+++ b/packages/icons/20/syncing-icon.tsx
@@ -12,7 +12,7 @@ const SvgSyncingIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/toggle-icon.tsx b/packages/icons/20/toggle-icon.tsx
index 7705f340..064a2539 100644
--- a/packages/icons/20/toggle-icon.tsx
+++ b/packages/icons/20/toggle-icon.tsx
@@ -12,7 +12,7 @@ const SvgToggleIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Rect
         x={2}
diff --git a/packages/icons/20/token-icon.tsx b/packages/icons/20/token-icon.tsx
index 8d71e231..0d5cf4c1 100644
--- a/packages/icons/20/token-icon.tsx
+++ b/packages/icons/20/token-icon.tsx
@@ -12,7 +12,7 @@ const SvgTokenIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/unblock-icon.tsx b/packages/icons/20/unblock-icon.tsx
index 05cf2ea9..18b0e383 100644
--- a/packages/icons/20/unblock-icon.tsx
+++ b/packages/icons/20/unblock-icon.tsx
@@ -12,7 +12,7 @@ const SvgUnblockIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10} cy={10} r={6.75} stroke={color} strokeWidth={1.3} />
       <Path d="M7 10h6" stroke="#000" strokeWidth={1.3} />
diff --git a/packages/icons/20/underline-icon.tsx b/packages/icons/20/underline-icon.tsx
index 8ee17c48..45ed4246 100644
--- a/packages/icons/20/underline-icon.tsx
+++ b/packages/icons/20/underline-icon.tsx
@@ -12,7 +12,7 @@ const SvgUnderlineIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M13.5 4.5V9a3.5 3.5 0 0 1-3.5 3.5v0A3.5 3.5 0 0 1 6.5 9V4.5"
diff --git a/packages/icons/20/unlocked-icon.tsx b/packages/icons/20/unlocked-icon.tsx
index 6c77ce8b..03d97919 100644
--- a/packages/icons/20/unlocked-icon.tsx
+++ b/packages/icons/20/unlocked-icon.tsx
@@ -12,7 +12,7 @@ const SvgUnlockedIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/unread-icon.tsx b/packages/icons/20/unread-icon.tsx
index 69e91bd4..d9a7912a 100644
--- a/packages/icons/20/unread-icon.tsx
+++ b/packages/icons/20/unread-icon.tsx
@@ -12,7 +12,7 @@ const SvgUnreadIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M12 15H8M14 10H6M16 5H4"
diff --git a/packages/icons/20/untrustworthy-icon.tsx b/packages/icons/20/untrustworthy-icon.tsx
index 7bbe76d9..66e88d44 100644
--- a/packages/icons/20/untrustworthy-icon.tsx
+++ b/packages/icons/20/untrustworthy-icon.tsx
@@ -12,14 +12,14 @@ const SvgUntrustworthyIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle
         cx={10}
         cy={10}
         r={6.75}
-        fill="#E65F5C"
-        stroke="#E65F5C"
+        fill={color}
+        stroke={color}
         strokeWidth={1.3}
       />
       <Path d="M10 12V6M10 14v-1" stroke="#fff" strokeWidth={1.3} />
diff --git a/packages/icons/20/up-to-date-icon.tsx b/packages/icons/20/up-to-date-icon.tsx
index 4ce81c31..78bcf321 100644
--- a/packages/icons/20/up-to-date-icon.tsx
+++ b/packages/icons/20/up-to-date-icon.tsx
@@ -12,7 +12,7 @@ const SvgUpToDateIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10.25} cy={10.25} r={6.75} stroke={color} strokeWidth={1.3} />
       <Path d="M6.833 10.5 9 12.5l4.333-5" stroke={color} strokeWidth={1.3} />
diff --git a/packages/icons/20/verified-icon.tsx b/packages/icons/20/verified-icon.tsx
index 665f4e7a..be76d01b 100644
--- a/packages/icons/20/verified-icon.tsx
+++ b/packages/icons/20/verified-icon.tsx
@@ -12,14 +12,14 @@ const SvgVerifiedIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle
         cx={10.25}
         cy={10.25}
         r={6.75}
-        fill="#26A69A"
-        stroke="#26A69A"
+        fill={color}
+        stroke={color}
         strokeWidth={1.3}
       />
       <Path d="M6.833 10.5 9 12.5l4.333-5" stroke="#fff" strokeWidth={1.3} />
diff --git a/packages/icons/20/video-icon.tsx b/packages/icons/20/video-icon.tsx
index f632fd74..bdb75db1 100644
--- a/packages/icons/20/video-icon.tsx
+++ b/packages/icons/20/video-icon.tsx
@@ -12,7 +12,7 @@ const SvgVideoIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/wallet-icon.tsx b/packages/icons/20/wallet-icon.tsx
index 40f28972..b797960e 100644
--- a/packages/icons/20/wallet-icon.tsx
+++ b/packages/icons/20/wallet-icon.tsx
@@ -12,7 +12,7 @@ const SvgWalletIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/warning-icon.tsx b/packages/icons/20/warning-icon.tsx
index e2790a34..bcb86aad 100644
--- a/packages/icons/20/warning-icon.tsx
+++ b/packages/icons/20/warning-icon.tsx
@@ -12,7 +12,7 @@ const SvgWarningIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Path
         d="M8.775 3.757c.452-.187.678-.28.912-.318a2 2 0 0 1 .626 0c.234.037.46.131.912.318l2.323.963c.452.187.678.28.87.42a2 2 0 0 1 .442.442c.14.192.233.418.42.87l.963 2.323c.187.452.28.678.318.912.032.207.032.419 0 .626-.037.234-.131.46-.318.912l-.963 2.323c-.187.452-.28.678-.42.87-.123.17-.272.319-.442.442-.192.14-.418.233-.87.42l-2.323.963c-.452.187-.678.28-.912.318a2.002 2.002 0 0 1-.626 0c-.234-.037-.46-.131-.912-.318l-2.323-.963c-.452-.187-.678-.28-.87-.42a2 2 0 0 1-.442-.442c-.14-.192-.233-.418-.42-.87l-.963-2.323c-.187-.452-.28-.678-.318-.912a2 2 0 0 1 0-.626c.037-.234.131-.46.318-.912l.963-2.323c.187-.452.28-.678.42-.87a2 2 0 0 1 .442-.442c.192-.14.418-.233.87-.42l2.323-.963ZM10 7v4"
diff --git a/packages/icons/20/world-icon.tsx b/packages/icons/20/world-icon.tsx
index 5dca1394..52511ea6 100644
--- a/packages/icons/20/world-icon.tsx
+++ b/packages/icons/20/world-icon.tsx
@@ -12,7 +12,7 @@ const SvgWorldIcon = (props: SvgProps) => {
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...rest}
     >
       <Circle cx={10} cy={10} r={7} stroke={color} strokeWidth={1.3} />
       <Path
diff --git a/packages/icons/react-native-svg.d.ts b/packages/icons/react-native-svg.d.ts
new file mode 100644
index 00000000..f8bed460
--- /dev/null
+++ b/packages/icons/react-native-svg.d.ts
@@ -0,0 +1,8 @@
+import 'react-native-svg'
+
+declare module 'react-native-svg' {
+  export interface SvgProps {
+    xmlns?: string
+    xmlnsXlink?: string
+  }
+}
diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json
index 2d57b0ed..d06c4940 100644
--- a/packages/icons/tsconfig.json
+++ b/packages/icons/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["12", "16", "20", "reactions"],
+  "include": ["12", "16", "20", "reactions", "./react-native-svg.d.ts"],
+
   "compilerOptions": {
     "outDir": "./dist",
     "declarationDir": "dist/types",
diff --git a/yarn.lock b/yarn.lock
index fd4f93bb..2e31731c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10595,6 +10595,11 @@ expo-asset@~8.7.0:
     path-browserify "^1.0.0"
     url-parse "^1.5.9"
 
+expo-blur@~12.0.1:
+  version "12.0.1"
+  resolved "https://registry.yarnpkg.com/expo-blur/-/expo-blur-12.0.1.tgz#7aa4186620359acfa976dda84360070b634ffe3d"
+  integrity sha512-7oF/xRIFJukM4/qL6ejZ4Z/4YcVExvBPsBrz7rGYz6PtgAkWwYFR62+ExZOzTEG4hgoPPmlnt1ncimsk/MYUgQ==
+
 expo-constants@^14.0.2, expo-constants@~14.0.0, expo-constants@~14.0.2:
   version "14.0.2"
   resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-14.0.2.tgz#2cb1dec8f41a64c2fc5b4eecaf77d7661cad01cc"
@@ -14432,7 +14437,6 @@ node-fetch-native@^1.0.1:
 
 node-fetch@2.6.7, node-fetch@^2.2.0, node-fetch@^2.6.0, node-fetch@^2.6.1, node-fetch@^2.6.7, node-fetch@^2.x.x:
   version "2.6.7"
-  uid "1b5d62978f2ed07b99444f64f0df39f960a6d34d"
   resolved "https://registry.npmjs.org/@achingbrain/node-fetch/-/node-fetch-2.6.7.tgz#1b5d62978f2ed07b99444f64f0df39f960a6d34d"
 
 node-forge@^1.1.0, node-forge@^1.2.1, node-forge@^1.3.1: