diff --git a/packages/icons/12/add-icon.tsx b/packages/icons/12/add-icon.tsx
index 799aa7aa..724ec075 100644
--- a/packages/icons/12/add-icon.tsx
+++ b/packages/icons/12/add-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAddIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAddIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/12/add-reaction-icon.tsx b/packages/icons/12/add-reaction-icon.tsx
index 9347dd98..b7d34ed7 100644
--- a/packages/icons/12/add-reaction-icon.tsx
+++ b/packages/icons/12/add-reaction-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAddReactionIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAddReactionIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 d2e83956..8c6e4b56 100644
--- a/packages/icons/12/alert-icon.tsx
+++ b/packages/icons/12/alert-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAlertIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAlertIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 83c25b5a..0a069d14 100644
--- a/packages/icons/12/arrow-down-icon.tsx
+++ b/packages/icons/12/arrow-down-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgArrowDownIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgArrowDownIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/12/arrow-right-icon.tsx b/packages/icons/12/arrow-right-icon.tsx
index 913c0aa7..3703c501 100644
--- a/packages/icons/12/arrow-right-icon.tsx
+++ b/packages/icons/12/arrow-right-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgArrowRightIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgArrowRightIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/12/arrow-up-icon.tsx b/packages/icons/12/arrow-up-icon.tsx
index d1a66098..4a9b8f31 100644
--- a/packages/icons/12/arrow-up-icon.tsx
+++ b/packages/icons/12/arrow-up-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgArrowUpIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgArrowUpIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/12/block-icon.tsx b/packages/icons/12/block-icon.tsx
index 0fb677ef..6983e2ee 100644
--- a/packages/icons/12/block-icon.tsx
+++ b/packages/icons/12/block-icon.tsx
@@ -1,25 +1,29 @@
+import { useTheme } from '@tamagui/core'
 import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgBlockIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgBlockIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+          fill="#E65F5C"
         />
       </G>
       <Defs>
diff --git a/packages/icons/12/camera-icon.tsx b/packages/icons/12/camera-icon.tsx
index 21460e80..b16bfe14 100644
--- a/packages/icons/12/camera-icon.tsx
+++ b/packages/icons/12/camera-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCameraIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCameraIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 469b6ef9..d5ac4198 100644
--- a/packages/icons/12/cards-icon.tsx
+++ b/packages/icons/12/cards-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCardsIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCardsIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 86322ba5..666cb4fe 100644
--- a/packages/icons/12/check-icon.tsx
+++ b/packages/icons/12/check-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCheckIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCheckIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 46bc70f6..29abde01 100644
--- a/packages/icons/12/check-large-icon.tsx
+++ b/packages/icons/12/check-large-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCheckLargeIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCheckLargeIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 9b539de9..43f76d77 100644
--- a/packages/icons/12/chevron-bottom-icon.tsx
+++ b/packages/icons/12/chevron-bottom-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgChevronBottomIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgChevronBottomIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 5549759c..5f2d1c9a 100644
--- a/packages/icons/12/chevron-left-icon.tsx
+++ b/packages/icons/12/chevron-left-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgChevronLeftIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgChevronLeftIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 9c0dfa45..9fe912ad 100644
--- a/packages/icons/12/chevron-right-icon.tsx
+++ b/packages/icons/12/chevron-right-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgChevronRightIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgChevronRightIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 e7038e26..0f3554ca 100644
--- a/packages/icons/12/chevron-top-icon.tsx
+++ b/packages/icons/12/chevron-top-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgChevronTopIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgChevronTopIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 f5249d12..781ce478 100644
--- a/packages/icons/12/close-icon.tsx
+++ b/packages/icons/12/close-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCloseIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCloseIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 f5c2e3ea..d41f3211 100644
--- a/packages/icons/12/color-icon.tsx
+++ b/packages/icons/12/color-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgColorIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgColorIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 38c6307b..d9a8781a 100644
--- a/packages/icons/12/communities-icon.tsx
+++ b/packages/icons/12/communities-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCommunitiesIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCommunitiesIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 46e971b5..e0ce5086 100644
--- a/packages/icons/12/contact-icon.tsx
+++ b/packages/icons/12/contact-icon.tsx
@@ -1,26 +1,30 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgContactIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgContactIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
-      <Circle cx={6} cy={6} r={5} fill={color} />
+      <Circle cx={6} cy={6} r={5} fill="#4360DF" />
       <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={color} strokeWidth={1.5} />
+      <Circle cx={6} cy={6} r={4.25} stroke="#4360DF" 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 b0181551..84157c41 100644
--- a/packages/icons/12/copy-icon.tsx
+++ b/packages/icons/12/copy-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCopyIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCopyIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 217ce9c3..b89079a5 100644
--- a/packages/icons/12/delivered-icon.tsx
+++ b/packages/icons/12/delivered-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgDeliveredIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgDeliveredIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/12/dropdown-icon.tsx b/packages/icons/12/dropdown-icon.tsx
index 10e04b8a..afe19375 100644
--- a/packages/icons/12/dropdown-icon.tsx
+++ b/packages/icons/12/dropdown-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgDropdownIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgDropdownIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 3338412c..692659a9 100644
--- a/packages/icons/12/edit-icon.tsx
+++ b/packages/icons/12/edit-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgEditIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgEditIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 1ad1885c..3d25cb57 100644
--- a/packages/icons/12/gas-icon.tsx
+++ b/packages/icons/12/gas-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgGasIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgGasIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 e2efcb2c..c36e781c 100644
--- a/packages/icons/12/hold-icon.tsx
+++ b/packages/icons/12/hold-icon.tsx
@@ -1,22 +1,26 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, ClipPath, Defs, G, Path, Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgHoldIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgHoldIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color} strokeWidth={1.1} />
+        <Path d="M3.333 6.4 5.111 8l3.556-4" stroke="#fff" 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 fdad2f19..0456317a 100644
--- a/packages/icons/12/info-1-icon.tsx
+++ b/packages/icons/12/info-1-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgInfo1Icon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgInfo1Icon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/12/info-icon.tsx b/packages/icons/12/info-icon.tsx
index e6517727..1054abf7 100644
--- a/packages/icons/12/info-icon.tsx
+++ b/packages/icons/12/info-icon.tsx
@@ -1,20 +1,24 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgInfoIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgInfoIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
-      <Circle cx={6} cy={6} r={5} fill={color} />
+      <Circle cx={6} cy={6} r={5} fill="#4360DF" />
       <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 aeba9e70..613e496a 100644
--- a/packages/icons/12/jump-to-icon.tsx
+++ b/packages/icons/12/jump-to-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgJumpToIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgJumpToIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 98c0eeaa..4df61623 100644
--- a/packages/icons/12/lightning-icon.tsx
+++ b/packages/icons/12/lightning-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgLightningIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgLightningIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={14}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 c731c98f..4c5ae986 100644
--- a/packages/icons/12/list-icon.tsx
+++ b/packages/icons/12/list-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgListIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgListIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 f956bf41..74ecaa50 100644
--- a/packages/icons/12/loading-icon.tsx
+++ b/packages/icons/12/loading-icon.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@tamagui/core'
 import {
   ClipPath,
   Defs,
@@ -7,20 +8,23 @@ import {
   Stop,
   Svg,
 } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgLoadingIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgLoadingIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 6fcbc784..1557d97c 100644
--- a/packages/icons/12/locked-icon.tsx
+++ b/packages/icons/12/locked-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgLockedIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgLockedIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 c39f904b..bff13139 100644
--- a/packages/icons/12/mention-icon.tsx
+++ b/packages/icons/12/mention-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgMentionIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgMentionIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 8bbd7fa1..5449691f 100644
--- a/packages/icons/12/more-icon.tsx
+++ b/packages/icons/12/more-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgMoreIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgMoreIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 710febe1..870b5708 100644
--- a/packages/icons/12/negative-icon.tsx
+++ b/packages/icons/12/negative-icon.tsx
@@ -1,20 +1,24 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgNegativeIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgNegativeIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
-      <G clipPath="url(#negative-icon_svg__a)" stroke={color}>
+      <G clipPath="url(#negative-icon_svg__a)" stroke="#E65F5C">
         <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 e7894dde..7972ccc3 100644
--- a/packages/icons/12/notification-icon.tsx
+++ b/packages/icons/12/notification-icon.tsx
@@ -1,20 +1,24 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgNotificationIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgNotificationIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
-      <Circle cx={6} cy={6} r={4} fill={color} />
+      <Circle cx={6} cy={6} r={4} fill="#4360DF" />
     </Svg>
   )
 }
diff --git a/packages/icons/12/pause-icon.tsx b/packages/icons/12/pause-icon.tsx
index 0ec5cf00..955c7cc3 100644
--- a/packages/icons/12/pause-icon.tsx
+++ b/packages/icons/12/pause-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPauseIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPauseIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 1d0aa503..9c23e39e 100644
--- a/packages/icons/12/pending-icon.tsx
+++ b/packages/icons/12/pending-icon.tsx
@@ -1,21 +1,25 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPendingIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPendingIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Circle cx={3} cy={6} r={1} fill="#000" fillOpacity={0.4} />
-      <Circle cx={6} cy={6} r={1} fill={color} fillOpacity={0.3} />
+      <Circle cx={6} cy={6} r={1} fill="#1B273D" 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 066701ef..7805e335 100644
--- a/packages/icons/12/pick-icon.tsx
+++ b/packages/icons/12/pick-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPickIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPickIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 f271ec52..4d7b3a72 100644
--- a/packages/icons/12/placeholder-icon.tsx
+++ b/packages/icons/12/placeholder-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPlaceholderIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPlaceholderIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/12/play-icon.tsx b/packages/icons/12/play-icon.tsx
index 0c0f012d..5c153b95 100644
--- a/packages/icons/12/play-icon.tsx
+++ b/packages/icons/12/play-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPlayIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPlayIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 3d113d5c..0c8a62e6 100644
--- a/packages/icons/12/positive-icon.tsx
+++ b/packages/icons/12/positive-icon.tsx
@@ -1,20 +1,24 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPositiveIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPositiveIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
-      <G clipPath="url(#positive-icon_svg__a)" stroke={color}>
+      <G clipPath="url(#positive-icon_svg__a)" stroke="#26A69A">
         <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 0ab47044..c1fef7fc 100644
--- a/packages/icons/12/progress-icon.tsx
+++ b/packages/icons/12/progress-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgProgressIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgProgressIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 e1fbbfce..0b87ca27 100644
--- a/packages/icons/12/pullup-icon.tsx
+++ b/packages/icons/12/pullup-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPullupIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPullupIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 4f88b6e7..9a84e934 100644
--- a/packages/icons/12/remove-icon.tsx
+++ b/packages/icons/12/remove-icon.tsx
@@ -1,21 +1,25 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, ClipPath, Defs, G, Path, Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgRemoveIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgRemoveIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <G clipPath="url(#remove-icon_svg__a)">
-        <Circle cx={6} cy={6} r={6} fill={color} />
+        <Circle cx={6} cy={6} r={6} fill="#647084" />
         <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 7b49a029..c566fa5d 100644
--- a/packages/icons/12/search-icon.tsx
+++ b/packages/icons/12/search-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSearchIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSearchIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/12/send-message-icon.tsx b/packages/icons/12/send-message-icon.tsx
index 49f798e5..418a035f 100644
--- a/packages/icons/12/send-message-icon.tsx
+++ b/packages/icons/12/send-message-icon.tsx
@@ -1,22 +1,26 @@
+import { useTheme } from '@tamagui/core'
 import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSendMessageIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSendMessageIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <G
         clipPath="url(#send-message-icon_svg__a)"
-        stroke={color}
+        stroke="#000"
         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 d7e21780..417587b1 100644
--- a/packages/icons/12/sent-icon.tsx
+++ b/packages/icons/12/sent-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSentIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSentIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 d81761e6..cc645098 100644
--- a/packages/icons/12/timeout-icon.tsx
+++ b/packages/icons/12/timeout-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgTimeoutIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgTimeoutIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 bdb9123d..914b610a 100644
--- a/packages/icons/12/total-members-icon.tsx
+++ b/packages/icons/12/total-members-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgTotalMembersIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgTotalMembersIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 07f160ee..06e48314 100644
--- a/packages/icons/12/trash-icon.tsx
+++ b/packages/icons/12/trash-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgTrashIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgTrashIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 25dc7d91..21395c5b 100644
--- a/packages/icons/12/unlocked-icon.tsx
+++ b/packages/icons/12/unlocked-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgUnlockedIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgUnlockedIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 ade15196..a208ee20 100644
--- a/packages/icons/12/untrustworthy-icon.tsx
+++ b/packages/icons/12/untrustworthy-icon.tsx
@@ -1,20 +1,24 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgUntrustworthyIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgUntrustworthyIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
-      <Circle cx={6} cy={6} r={5} fill={color} />
+      <Circle cx={6} cy={6} r={5} fill="#E65F5C" />
       <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 5787723d..2eaa4ee6 100644
--- a/packages/icons/12/verified-1-icon.tsx
+++ b/packages/icons/12/verified-1-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgVerified1Icon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgVerified1Icon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 17c2d369..abb7d399 100644
--- a/packages/icons/12/verified-icon.tsx
+++ b/packages/icons/12/verified-icon.tsx
@@ -1,20 +1,24 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgVerifiedIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgVerifiedIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
-      <Circle cx={6} cy={6} r={5} fill={color} />
+      <Circle cx={6} cy={6} r={5} fill="#26A69A" />
       <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 2f561575..529d4c03 100644
--- a/packages/icons/12/whistle-icon.tsx
+++ b/packages/icons/12/whistle-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgWhistleIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgWhistleIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={12}
       height={12}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 d41c4801..6c12aab1 100644
--- a/packages/icons/16/add-icon.tsx
+++ b/packages/icons/16/add-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAddIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAddIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 5886ad68..89621c5e 100644
--- a/packages/icons/16/add-user-icon.tsx
+++ b/packages/icons/16/add-user-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAddUserIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAddUserIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 1183e6bb..964d93f8 100644
--- a/packages/icons/16/alert-icon.tsx
+++ b/packages/icons/16/alert-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAlertIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAlertIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Circle
         cx={8}
diff --git a/packages/icons/16/arrow-down-icon.tsx b/packages/icons/16/arrow-down-icon.tsx
index 319b2cf2..12dac6b1 100644
--- a/packages/icons/16/arrow-down-icon.tsx
+++ b/packages/icons/16/arrow-down-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgArrowDownIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgArrowDownIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 ef0d41c8..faf38109 100644
--- a/packages/icons/16/arrow-right-icon.tsx
+++ b/packages/icons/16/arrow-right-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgArrowRightIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgArrowRightIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 be55f3f4..72583f88 100644
--- a/packages/icons/16/calendar-icon.tsx
+++ b/packages/icons/16/calendar-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCalendarIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCalendarIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 a59dbe63..b8405871 100644
--- a/packages/icons/16/check-circle-icon.tsx
+++ b/packages/icons/16/check-circle-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCheckCircleIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCheckCircleIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 cf7f9b2e..0e4a59b7 100644
--- a/packages/icons/16/chevron-down-icon.tsx
+++ b/packages/icons/16/chevron-down-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgChevronDownIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgChevronDownIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 c67e4455..d5708105 100644
--- a/packages/icons/16/chevron-left-icon.tsx
+++ b/packages/icons/16/chevron-left-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgChevronLeftIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgChevronLeftIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 2a427956..a59273c2 100644
--- a/packages/icons/16/chevron-right-icon.tsx
+++ b/packages/icons/16/chevron-right-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgChevronRightIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgChevronRightIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 bee3b0a4..6de9e185 100644
--- a/packages/icons/16/chevron-top-icon.tsx
+++ b/packages/icons/16/chevron-top-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgChevronTopIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgChevronTopIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 1dfa2331..78aaa00e 100644
--- a/packages/icons/16/close-icon.tsx
+++ b/packages/icons/16/close-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCloseIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCloseIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 f1cf86e1..c23d9c24 100644
--- a/packages/icons/16/connection-icon.tsx
+++ b/packages/icons/16/connection-icon.tsx
@@ -1,28 +1,32 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgConnectionIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgConnectionIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         d="M11 14H5l3-7 3 7Z"
-        stroke={color}
+        stroke="#000"
         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={color}
+        stroke="#000"
         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 d01ad197..45f0f317 100644
--- a/packages/icons/16/contact-book-icon.tsx
+++ b/packages/icons/16/contact-book-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgContactBookIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgContactBookIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 f01c6709..e6584893 100644
--- a/packages/icons/16/delete-icon.tsx
+++ b/packages/icons/16/delete-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgDeleteIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgDeleteIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 27efab5c..d35b71d9 100644
--- a/packages/icons/16/email-icon.tsx
+++ b/packages/icons/16/email-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgEmailIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgEmailIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 f1193bfc..9b4841ed 100644
--- a/packages/icons/16/forward-icon.tsx
+++ b/packages/icons/16/forward-icon.tsx
@@ -1,25 +1,29 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgForwardIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgForwardIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+        stroke="#000"
         strokeWidth={1.2}
       />
-      <Path d="M10 11.5 14 8l-4-3.5" stroke={color} strokeWidth={1.2} />
+      <Path d="M10 11.5 14 8l-4-3.5" stroke="#000" strokeWidth={1.2} />
     </Svg>
   )
 }
diff --git a/packages/icons/16/gif-icon.tsx b/packages/icons/16/gif-icon.tsx
index 57f2f5b7..5792f8a3 100644
--- a/packages/icons/16/gif-icon.tsx
+++ b/packages/icons/16/gif-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgGifIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgGifIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 65ebe67b..1d666c32 100644
--- a/packages/icons/16/group-icon.tsx
+++ b/packages/icons/16/group-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgGroupIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgGroupIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/16/history-icon.tsx b/packages/icons/16/history-icon.tsx
index 1cc360ae..cc42fbe4 100644
--- a/packages/icons/16/history-icon.tsx
+++ b/packages/icons/16/history-icon.tsx
@@ -1,26 +1,30 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgHistoryIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgHistoryIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+        fill="#000"
       />
-      <Path d="M7.5 5v3l2.5 2.5" stroke={color} strokeWidth={1.2} />
+      <Path d="M7.5 5v3l2.5 2.5" stroke="#000" strokeWidth={1.2} />
     </Svg>
   )
 }
diff --git a/packages/icons/16/info-icon.tsx b/packages/icons/16/info-icon.tsx
index b15e2f90..436fb517 100644
--- a/packages/icons/16/info-icon.tsx
+++ b/packages/icons/16/info-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgInfoIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgInfoIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 1d9638a6..bd5f6748 100644
--- a/packages/icons/16/lightning-icon.tsx
+++ b/packages/icons/16/lightning-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgLightningIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgLightningIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         d="M9 2v5h3l-5 7V9H4l5-7Z"
diff --git a/packages/icons/16/locked-icon.tsx b/packages/icons/16/locked-icon.tsx
index 758a0962..5e2eef88 100644
--- a/packages/icons/16/locked-icon.tsx
+++ b/packages/icons/16/locked-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgLockedIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgLockedIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/16/mention-icon.tsx b/packages/icons/16/mention-icon.tsx
index ebdae3e0..9da23f8e 100644
--- a/packages/icons/16/mention-icon.tsx
+++ b/packages/icons/16/mention-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgMentionIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgMentionIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/16/more-icon.tsx b/packages/icons/16/more-icon.tsx
index 4983f2ee..6d13effe 100644
--- a/packages/icons/16/more-icon.tsx
+++ b/packages/icons/16/more-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgMoreIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgMoreIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 e93d3617..6d946a06 100644
--- a/packages/icons/16/mute-icon.tsx
+++ b/packages/icons/16/mute-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgMuteIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgMuteIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/16/negative-icon.tsx b/packages/icons/16/negative-icon.tsx
index 77e34d2b..0758f746 100644
--- a/packages/icons/16/negative-icon.tsx
+++ b/packages/icons/16/negative-icon.tsx
@@ -1,21 +1,25 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgNegativeIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgNegativeIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
-      <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} />
+      <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} />
     </Svg>
   )
 }
diff --git a/packages/icons/16/notification-icon.tsx b/packages/icons/16/notification-icon.tsx
index fa1cabd5..31027b50 100644
--- a/packages/icons/16/notification-icon.tsx
+++ b/packages/icons/16/notification-icon.tsx
@@ -1,20 +1,24 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgNotificationIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgNotificationIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
-      <Circle cx={8} cy={8} r={4} fill={color} />
+      <Circle cx={8} cy={8} r={4} fill="#4360DF" />
     </Svg>
   )
 }
diff --git a/packages/icons/16/pin-icon.tsx b/packages/icons/16/pin-icon.tsx
index 957483e9..2d7f70bd 100644
--- a/packages/icons/16/pin-icon.tsx
+++ b/packages/icons/16/pin-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPinIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPinIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 7a1e85db..dfdf2f9e 100644
--- a/packages/icons/16/placeholder-icon.tsx
+++ b/packages/icons/16/placeholder-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPlaceholderIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPlaceholderIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/16/positive-icon.tsx b/packages/icons/16/positive-icon.tsx
index a6bdadd2..c4f384db 100644
--- a/packages/icons/16/positive-icon.tsx
+++ b/packages/icons/16/positive-icon.tsx
@@ -1,21 +1,25 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPositiveIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPositiveIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
-      <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} />
+      <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} />
     </Svg>
   )
 }
diff --git a/packages/icons/16/privacy-icon.tsx b/packages/icons/16/privacy-icon.tsx
index e18f0caf..049aae3c 100644
--- a/packages/icons/16/privacy-icon.tsx
+++ b/packages/icons/16/privacy-icon.tsx
@@ -1,24 +1,28 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPrivacyIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPrivacyIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+        fill="#000"
       />
     </Svg>
   )
diff --git a/packages/icons/16/progress-icon.tsx b/packages/icons/16/progress-icon.tsx
index 04a621f0..adc2fc34 100644
--- a/packages/icons/16/progress-icon.tsx
+++ b/packages/icons/16/progress-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgProgressIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgProgressIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Circle
         cx={8}
diff --git a/packages/icons/16/remove-user-icon.tsx b/packages/icons/16/remove-user-icon.tsx
index 950e4430..454b0d13 100644
--- a/packages/icons/16/remove-user-icon.tsx
+++ b/packages/icons/16/remove-user-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgRemoveUserIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgRemoveUserIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 38e4de00..be39dee3 100644
--- a/packages/icons/16/sad-icon.tsx
+++ b/packages/icons/16/sad-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSadIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSadIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 c2815a82..2a211049 100644
--- a/packages/icons/16/stickers-icon.tsx
+++ b/packages/icons/16/stickers-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgStickersIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgStickersIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 61e07214..fc53c8af 100644
--- a/packages/icons/16/unlocked-icon.tsx
+++ b/packages/icons/16/unlocked-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgUnlockedIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgUnlockedIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/16/unmute-icon.tsx b/packages/icons/16/unmute-icon.tsx
index bb811c59..610ec6ac 100644
--- a/packages/icons/16/unmute-icon.tsx
+++ b/packages/icons/16/unmute-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgUnmuteIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgUnmuteIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/16/world-icon.tsx b/packages/icons/16/world-icon.tsx
index 844ecfe1..d4523e76 100644
--- a/packages/icons/16/world-icon.tsx
+++ b/packages/icons/16/world-icon.tsx
@@ -1,24 +1,28 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgWorldIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgWorldIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
       height={16}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+        fill="#000"
       />
     </Svg>
   )
diff --git a/packages/icons/20/account-number-icon.tsx b/packages/icons/20/account-number-icon.tsx
index ebf76f5a..1806e18b 100644
--- a/packages/icons/20/account-number-icon.tsx
+++ b/packages/icons/20/account-number-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAccountNumberIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAccountNumberIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 3b6b8f93..6392c701 100644
--- a/packages/icons/20/active-member-icon.tsx
+++ b/packages/icons/20/active-member-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgActiveMemberIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgActiveMemberIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 c4d19307..6e84cadf 100644
--- a/packages/icons/20/activity-center-icon.tsx
+++ b/packages/icons/20/activity-center-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgActivityCenterIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgActivityCenterIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 c3d243ea..bfbc963e 100644
--- a/packages/icons/20/add-icon.tsx
+++ b/packages/icons/20/add-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAddIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAddIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/add-reaction-icon.tsx b/packages/icons/20/add-reaction-icon.tsx
index 254de58a..ab8fce43 100644
--- a/packages/icons/20/add-reaction-icon.tsx
+++ b/packages/icons/20/add-reaction-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAddReactionIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAddReactionIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 da315863..e5356713 100644
--- a/packages/icons/20/add-small-icon.tsx
+++ b/packages/icons/20/add-small-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAddSmallIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAddSmallIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/add-token-icon.tsx b/packages/icons/20/add-token-icon.tsx
index a78198d1..ce76bdd0 100644
--- a/packages/icons/20/add-token-icon.tsx
+++ b/packages/icons/20/add-token-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAddTokenIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAddTokenIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 25eeea65..1b3702c4 100644
--- a/packages/icons/20/add-user-icon.tsx
+++ b/packages/icons/20/add-user-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAddUserIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAddUserIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/alert-icon.tsx b/packages/icons/20/alert-icon.tsx
index 291edf81..dae27595 100644
--- a/packages/icons/20/alert-icon.tsx
+++ b/packages/icons/20/alert-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAlertIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAlertIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 7be725a5..c7c00e74 100644
--- a/packages/icons/20/alphabetically-icon.tsx
+++ b/packages/icons/20/alphabetically-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAlphabeticallyIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAlphabeticallyIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 b77c2e42..045999a5 100644
--- a/packages/icons/20/android-icon.tsx
+++ b/packages/icons/20/android-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAndroidIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAndroidIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 825d98a2..dbb9e1a0 100644
--- a/packages/icons/20/anonymous-icon.tsx
+++ b/packages/icons/20/anonymous-icon.tsx
@@ -1,24 +1,28 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAnonymousIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAnonymousIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+        fill="#0D1625"
       />
     </Svg>
   )
diff --git a/packages/icons/20/arrow-down-icon.tsx b/packages/icons/20/arrow-down-icon.tsx
index cd641bb6..0f03621e 100644
--- a/packages/icons/20/arrow-down-icon.tsx
+++ b/packages/icons/20/arrow-down-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgArrowDownIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgArrowDownIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/arrow-left-icon.tsx b/packages/icons/20/arrow-left-icon.tsx
index 4cca8066..2e8ee433 100644
--- a/packages/icons/20/arrow-left-icon.tsx
+++ b/packages/icons/20/arrow-left-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgArrowLeftIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgArrowLeftIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/arrow-right-icon.tsx b/packages/icons/20/arrow-right-icon.tsx
index 49f45311..23ac8baf 100644
--- a/packages/icons/20/arrow-right-icon.tsx
+++ b/packages/icons/20/arrow-right-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgArrowRightIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgArrowRightIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/arrow-up-icon.tsx b/packages/icons/20/arrow-up-icon.tsx
index 655c92c0..1834aa3a 100644
--- a/packages/icons/20/arrow-up-icon.tsx
+++ b/packages/icons/20/arrow-up-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgArrowUpIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgArrowUpIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/attach-icon.tsx b/packages/icons/20/attach-icon.tsx
index 2f0b9b0e..e242f935 100644
--- a/packages/icons/20/attach-icon.tsx
+++ b/packages/icons/20/attach-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAttachIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAttachIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/audio-icon.tsx b/packages/icons/20/audio-icon.tsx
index ddb6bcde..421c5006 100644
--- a/packages/icons/20/audio-icon.tsx
+++ b/packages/icons/20/audio-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAudioIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAudioIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/automatic-icon.tsx b/packages/icons/20/automatic-icon.tsx
index 3fcf5461..86a75d4e 100644
--- a/packages/icons/20/automatic-icon.tsx
+++ b/packages/icons/20/automatic-icon.tsx
@@ -1,24 +1,28 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAutomaticIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAutomaticIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+        fill="#A1ABBD"
       />
       <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 c09540a8..98bc75d5 100644
--- a/packages/icons/20/block-icon.tsx
+++ b/packages/icons/20/block-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgBlockIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgBlockIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/bold-icon.tsx b/packages/icons/20/bold-icon.tsx
index 2f6a43ac..4202562e 100644
--- a/packages/icons/20/bold-icon.tsx
+++ b/packages/icons/20/bold-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgBoldIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgBoldIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/bridge-icon.tsx b/packages/icons/20/bridge-icon.tsx
index 84d837ba..a28954e5 100644
--- a/packages/icons/20/bridge-icon.tsx
+++ b/packages/icons/20/bridge-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgBridgeIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgBridgeIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 cac8856a..7344a0a3 100644
--- a/packages/icons/20/browser-icon.tsx
+++ b/packages/icons/20/browser-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgBrowserIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgBrowserIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/bullet-icon.tsx b/packages/icons/20/bullet-icon.tsx
index 32d20439..1ebae43d 100644
--- a/packages/icons/20/bullet-icon.tsx
+++ b/packages/icons/20/bullet-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgBulletIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgBulletIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 be99f5c3..02d9c5ea 100644
--- a/packages/icons/20/bullet-list-icon.tsx
+++ b/packages/icons/20/bullet-list-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgBulletListIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgBulletListIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         d="M15 15H8.5M15 5H8.5"
diff --git a/packages/icons/20/buy-icon.tsx b/packages/icons/20/buy-icon.tsx
index 4ce14580..70503051 100644
--- a/packages/icons/20/buy-icon.tsx
+++ b/packages/icons/20/buy-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgBuyIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgBuyIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/camera-icon.tsx b/packages/icons/20/camera-icon.tsx
index 34509645..70a6046a 100644
--- a/packages/icons/20/camera-icon.tsx
+++ b/packages/icons/20/camera-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCameraIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCameraIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 2ae1edaa..7675aaee 100644
--- a/packages/icons/20/card-view-icon.tsx
+++ b/packages/icons/20/card-view-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCardViewIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCardViewIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/centre-align-icon.tsx b/packages/icons/20/centre-align-icon.tsx
index 7c1a3e4f..5a12ab70 100644
--- a/packages/icons/20/centre-align-icon.tsx
+++ b/packages/icons/20/centre-align-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCentreAlignIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCentreAlignIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 968ca24c..bdb13b8b 100644
--- a/packages/icons/20/chatkey-icon.tsx
+++ b/packages/icons/20/chatkey-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgChatkeyIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgChatkeyIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/check-icon.tsx b/packages/icons/20/check-icon.tsx
index 4c4c070c..26562dac 100644
--- a/packages/icons/20/check-icon.tsx
+++ b/packages/icons/20/check-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCheckIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCheckIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 7660c324..a64df88a 100644
--- a/packages/icons/20/chevron-down-icon.tsx
+++ b/packages/icons/20/chevron-down-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgChevronDownIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgChevronDownIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 4576ff4d..3e201a80 100644
--- a/packages/icons/20/chevron-left-icon.tsx
+++ b/packages/icons/20/chevron-left-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgChevronLeftIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgChevronLeftIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 44e78add..d217a887 100644
--- a/packages/icons/20/chevron-right-icon.tsx
+++ b/packages/icons/20/chevron-right-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgChevronRightIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgChevronRightIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 8d61a7b4..bccedaef 100644
--- a/packages/icons/20/chevron-up-icon.tsx
+++ b/packages/icons/20/chevron-up-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgChevronUpIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgChevronUpIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 93ac3b92..84a03fb0 100644
--- a/packages/icons/20/chevrons-left-icon.tsx
+++ b/packages/icons/20/chevrons-left-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgChevronsLeftIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgChevronsLeftIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 502fda06..292105f6 100644
--- a/packages/icons/20/chevrons-right-icon.tsx
+++ b/packages/icons/20/chevrons-right-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgChevronsRightIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgChevronsRightIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 a9613a82..f241c078 100644
--- a/packages/icons/20/clear-icon.tsx
+++ b/packages/icons/20/clear-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgClearIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgClearIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 b22be375..80fa26f4 100644
--- a/packages/icons/20/close-icon.tsx
+++ b/packages/icons/20/close-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCloseIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCloseIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/code-block-icon.tsx b/packages/icons/20/code-block-icon.tsx
index 3d63d4a5..dcac3981 100644
--- a/packages/icons/20/code-block-icon.tsx
+++ b/packages/icons/20/code-block-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCodeBlockIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCodeBlockIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/code-icon.tsx b/packages/icons/20/code-icon.tsx
index 05cc3b7d..158aa22d 100644
--- a/packages/icons/20/code-icon.tsx
+++ b/packages/icons/20/code-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCodeIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCodeIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/collapse-icon.tsx b/packages/icons/20/collapse-icon.tsx
index cf28cd3b..ec2a16a2 100644
--- a/packages/icons/20/collapse-icon.tsx
+++ b/packages/icons/20/collapse-icon.tsx
@@ -1,24 +1,28 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCollapseIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCollapseIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+        fill="#000"
       />
     </Svg>
   )
diff --git a/packages/icons/20/colour-pick-icon.tsx b/packages/icons/20/colour-pick-icon.tsx
index 98bf43cc..6bd3c915 100644
--- a/packages/icons/20/colour-pick-icon.tsx
+++ b/packages/icons/20/colour-pick-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgColourPickIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgColourPickIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/communities-icon.tsx b/packages/icons/20/communities-icon.tsx
index ca9da0a5..3b7ffb50 100644
--- a/packages/icons/20/communities-icon.tsx
+++ b/packages/icons/20/communities-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCommunitiesIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCommunitiesIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/connection-icon.tsx b/packages/icons/20/connection-icon.tsx
index 7693f078..75e51a82 100644
--- a/packages/icons/20/connection-icon.tsx
+++ b/packages/icons/20/connection-icon.tsx
@@ -1,28 +1,32 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgConnectionIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgConnectionIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         d="M13 17H7l3-8 3 8Z"
-        stroke={color}
+        stroke="#000"
         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={color}
+        stroke="#000"
         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 2eb14664..d945515c 100644
--- a/packages/icons/20/contact-book-icon.tsx
+++ b/packages/icons/20/contact-book-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgContactBookIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgContactBookIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/contact-icon.tsx b/packages/icons/20/contact-icon.tsx
index 6a3a7e46..b8bfbd31 100644
--- a/packages/icons/20/contact-icon.tsx
+++ b/packages/icons/20/contact-icon.tsx
@@ -1,25 +1,29 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgContactIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgContactIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Circle
         cx={10}
         cy={10}
         r={6.75}
-        fill={color}
-        stroke={color}
+        fill="#4360DF"
+        stroke="#4360DF"
         strokeWidth={1.5}
       />
       <Path
@@ -36,8 +40,8 @@ const SvgContactIcon = (props: SvgProps) => {
         strokeWidth={1.3}
         strokeLinejoin="round"
       />
-      <Circle cx={10} cy={10} r={6.75} stroke={color} strokeWidth={1.5} />
-      <Circle cx={10} cy={10} r={6.25} stroke={color} />
+      <Circle cx={10} cy={10} r={6.75} stroke="#4360DF" strokeWidth={1.5} />
+      <Circle cx={10} cy={10} r={6.25} stroke="#4360DF" />
     </Svg>
   )
 }
diff --git a/packages/icons/20/copy-icon.tsx b/packages/icons/20/copy-icon.tsx
index 4eaac366..827b706d 100644
--- a/packages/icons/20/copy-icon.tsx
+++ b/packages/icons/20/copy-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCopyIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCopyIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 bce5a5b1..d6108798 100644
--- a/packages/icons/20/correct-icon.tsx
+++ b/packages/icons/20/correct-icon.tsx
@@ -1,28 +1,32 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCorrectIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCorrectIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Circle
         cx={10}
         cy={10}
         r={6.75}
-        stroke={color}
+        stroke="#26A69A"
         strokeOpacity={0.4}
         strokeWidth={1.3}
       />
-      <Path d="M6.833 10.5 9 12.5l4.333-5" stroke={color} strokeWidth={1.3} />
+      <Path d="M6.833 10.5 9 12.5l4.333-5" stroke="#26A69A" strokeWidth={1.3} />
     </Svg>
   )
 }
diff --git a/packages/icons/20/crown-icon.tsx b/packages/icons/20/crown-icon.tsx
index 9ef791b8..30f388d5 100644
--- a/packages/icons/20/crown-icon.tsx
+++ b/packages/icons/20/crown-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCrownIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCrownIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 30e79366..c5f1fece 100644
--- a/packages/icons/20/customize-icon.tsx
+++ b/packages/icons/20/customize-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgCustomizeIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgCustomizeIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/dark-icon.tsx b/packages/icons/20/dark-icon.tsx
index d8766f4c..3bd3cab4 100644
--- a/packages/icons/20/dark-icon.tsx
+++ b/packages/icons/20/dark-icon.tsx
@@ -1,22 +1,26 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgDarkIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgDarkIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+        fill="#000"
       />
     </Svg>
   )
diff --git a/packages/icons/20/data-usage-icon.tsx b/packages/icons/20/data-usage-icon.tsx
index d89dbc68..945d16fe 100644
--- a/packages/icons/20/data-usage-icon.tsx
+++ b/packages/icons/20/data-usage-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgDataUsageIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgDataUsageIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/delete-icon.tsx b/packages/icons/20/delete-icon.tsx
index ff7a0a76..87441f8d 100644
--- a/packages/icons/20/delete-icon.tsx
+++ b/packages/icons/20/delete-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgDeleteIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgDeleteIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/desktop-icon.tsx b/packages/icons/20/desktop-icon.tsx
index 55494b31..9965560b 100644
--- a/packages/icons/20/desktop-icon.tsx
+++ b/packages/icons/20/desktop-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgDesktopIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgDesktopIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/download-icon.tsx b/packages/icons/20/download-icon.tsx
index 1810f355..925acbdc 100644
--- a/packages/icons/20/download-icon.tsx
+++ b/packages/icons/20/download-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgDownloadIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgDownloadIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/dropdown-icon.tsx b/packages/icons/20/dropdown-icon.tsx
index 653653dc..58faeec9 100644
--- a/packages/icons/20/dropdown-icon.tsx
+++ b/packages/icons/20/dropdown-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgDropdownIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgDropdownIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 01fc355d..9018318d 100644
--- a/packages/icons/20/duration-icon.tsx
+++ b/packages/icons/20/duration-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgDurationIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgDurationIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 6ff17528..01bb8835 100644
--- a/packages/icons/20/edit-icon.tsx
+++ b/packages/icons/20/edit-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgEditIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgEditIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/email-icon.tsx b/packages/icons/20/email-icon.tsx
index 9c0848b5..a881f912 100644
--- a/packages/icons/20/email-icon.tsx
+++ b/packages/icons/20/email-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgEmailIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgEmailIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 f800c1f8..8c0e1f33 100644
--- a/packages/icons/20/expand-icon.tsx
+++ b/packages/icons/20/expand-icon.tsx
@@ -1,24 +1,28 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgExpandIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgExpandIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+        fill="#000"
       />
     </Svg>
   )
diff --git a/packages/icons/20/external-icon.tsx b/packages/icons/20/external-icon.tsx
index 49f6934e..372ed39e 100644
--- a/packages/icons/20/external-icon.tsx
+++ b/packages/icons/20/external-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgExternalIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgExternalIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/face-id-icon.tsx b/packages/icons/20/face-id-icon.tsx
index 3bbab87d..6e5cd9b1 100644
--- a/packages/icons/20/face-id-icon.tsx
+++ b/packages/icons/20/face-id-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgFaceIdIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgFaceIdIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 fd7886b0..9448a149 100644
--- a/packages/icons/20/favourite-icon.tsx
+++ b/packages/icons/20/favourite-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgFavouriteIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgFavouriteIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 4750b2ff..d79f060e 100644
--- a/packages/icons/20/file-icon.tsx
+++ b/packages/icons/20/file-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgFileIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgFileIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 ef900a44..38d022c2 100644
--- a/packages/icons/20/flag-icon.tsx
+++ b/packages/icons/20/flag-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgFlagIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgFlagIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/flash-icon.tsx b/packages/icons/20/flash-icon.tsx
index 36c396ac..8169dc49 100644
--- a/packages/icons/20/flash-icon.tsx
+++ b/packages/icons/20/flash-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgFlashIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgFlashIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 3cd2f49d..17f4850e 100644
--- a/packages/icons/20/flash-off-icon.tsx
+++ b/packages/icons/20/flash-off-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgFlashOffIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgFlashOffIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 f8c4ae93..6f2fcb54 100644
--- a/packages/icons/20/flashlight-off-icon.tsx
+++ b/packages/icons/20/flashlight-off-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgFlashlightOffIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgFlashlightOffIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/flashlight-on-icon.tsx b/packages/icons/20/flashlight-on-icon.tsx
index 9d1feddf..a29e925e 100644
--- a/packages/icons/20/flashlight-on-icon.tsx
+++ b/packages/icons/20/flashlight-on-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgFlashlightOnIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgFlashlightOnIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 8dee2b1f..c3e45bfa 100644
--- a/packages/icons/20/flip-icon.tsx
+++ b/packages/icons/20/flip-icon.tsx
@@ -1,24 +1,28 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgFlipIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgFlipIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+        fill="#000"
       />
     </Svg>
   )
diff --git a/packages/icons/20/folder-icon.tsx b/packages/icons/20/folder-icon.tsx
index c73f8b2f..01ac2a9d 100644
--- a/packages/icons/20/folder-icon.tsx
+++ b/packages/icons/20/folder-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgFolderIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgFolderIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/format-icon.tsx b/packages/icons/20/format-icon.tsx
index db5adc46..ebdfd9d5 100644
--- a/packages/icons/20/format-icon.tsx
+++ b/packages/icons/20/format-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgFormatIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgFormatIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 f9411545..cec57315 100644
--- a/packages/icons/20/forward-icon.tsx
+++ b/packages/icons/20/forward-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgForwardIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgForwardIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/friend-icon.tsx b/packages/icons/20/friend-icon.tsx
index 3a8238be..546dd38b 100644
--- a/packages/icons/20/friend-icon.tsx
+++ b/packages/icons/20/friend-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgFriendIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgFriendIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 d1fa6aca..12bffb63 100644
--- a/packages/icons/20/gas-icon.tsx
+++ b/packages/icons/20/gas-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgGasIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgGasIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 dc358f7f..14e1dfbd 100644
--- a/packages/icons/20/gif-icon.tsx
+++ b/packages/icons/20/gif-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgGifIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgGifIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Rect
         x={3.5}
diff --git a/packages/icons/20/globe-icon.tsx b/packages/icons/20/globe-icon.tsx
index ecdfc0c6..7acb893a 100644
--- a/packages/icons/20/globe-icon.tsx
+++ b/packages/icons/20/globe-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgGlobeIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgGlobeIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/hashtag-1-icon.tsx b/packages/icons/20/hashtag-1-icon.tsx
index 7c16730a..b88dbd1b 100644
--- a/packages/icons/20/hashtag-1-icon.tsx
+++ b/packages/icons/20/hashtag-1-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgHashtag1Icon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgHashtag1Icon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/hashtag-icon.tsx b/packages/icons/20/hashtag-icon.tsx
index 3e786a80..4c4e3c52 100644
--- a/packages/icons/20/hashtag-icon.tsx
+++ b/packages/icons/20/hashtag-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgHashtagIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgHashtagIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/heart-icon.tsx b/packages/icons/20/heart-icon.tsx
index 37219767..cb119bec 100644
--- a/packages/icons/20/heart-icon.tsx
+++ b/packages/icons/20/heart-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgHeartIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgHeartIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         clipRule="evenodd"
diff --git a/packages/icons/20/help-icon.tsx b/packages/icons/20/help-icon.tsx
index 1bae3b78..5aaaf944 100644
--- a/packages/icons/20/help-icon.tsx
+++ b/packages/icons/20/help-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgHelpIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgHelpIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/hide-icon.tsx b/packages/icons/20/hide-icon.tsx
index ebaed30a..981a7ce9 100644
--- a/packages/icons/20/hide-icon.tsx
+++ b/packages/icons/20/hide-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgHideIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgHideIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 5b1cb596..5c9f47b9 100644
--- a/packages/icons/20/history-icon.tsx
+++ b/packages/icons/20/history-icon.tsx
@@ -1,23 +1,27 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgHistoryIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgHistoryIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
-        stroke={color}
+        fill="#000"
+        stroke="#000"
         strokeWidth={0.2}
       />
     </Svg>
diff --git a/packages/icons/20/hold-icon.tsx b/packages/icons/20/hold-icon.tsx
index d0eb0431..62fc875e 100644
--- a/packages/icons/20/hold-icon.tsx
+++ b/packages/icons/20/hold-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgHoldIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgHoldIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 668d3daa..287f8a68 100644
--- a/packages/icons/20/image-icon.tsx
+++ b/packages/icons/20/image-icon.tsx
@@ -1,19 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
-
-const SvgImageIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+import type { IconProps } from '../types'
 
+const SvgImageIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/inactive-icon.tsx b/packages/icons/20/inactive-icon.tsx
index e41137ba..c6eef0ec 100644
--- a/packages/icons/20/inactive-icon.tsx
+++ b/packages/icons/20/inactive-icon.tsx
@@ -1,20 +1,24 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgInactiveIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgInactiveIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
-      <Circle cx={10} cy={10} r={4} fill={color} />
+      <Circle cx={10} cy={10} r={4} fill="#A1ABBD" />
     </Svg>
   )
 }
diff --git a/packages/icons/20/info-badge-icon.tsx b/packages/icons/20/info-badge-icon.tsx
index 23b81081..feff6044 100644
--- a/packages/icons/20/info-badge-icon.tsx
+++ b/packages/icons/20/info-badge-icon.tsx
@@ -1,22 +1,26 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgInfoBadgeIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgInfoBadgeIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Circle cx={10} cy={10} r={6.75} fill={color} />
-      <Path d="M10 9.5V14" stroke={color} strokeWidth={1.3} />
-      <Circle cx={10} cy={7} r={1} transform="rotate(-180 10 7)" 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" />
     </Svg>
   )
 }
diff --git a/packages/icons/20/info-icon.tsx b/packages/icons/20/info-icon.tsx
index ca2d701b..d7fa19f4 100644
--- a/packages/icons/20/info-icon.tsx
+++ b/packages/icons/20/info-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgInfoIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgInfoIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 fef0fe89..5fcea1fa 100644
--- a/packages/icons/20/italic-icon.tsx
+++ b/packages/icons/20/italic-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgItalicIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgItalicIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/justify-icon.tsx b/packages/icons/20/justify-icon.tsx
index 0c62ee25..8f78b868 100644
--- a/packages/icons/20/justify-icon.tsx
+++ b/packages/icons/20/justify-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgJustifyIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgJustifyIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 4d04e41f..334e0c0a 100644
--- a/packages/icons/20/key-icon.tsx
+++ b/packages/icons/20/key-icon.tsx
@@ -1,29 +1,33 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgKeyIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgKeyIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+        fill="#000"
       />
       <Circle
         cx={7.293}
         cy={6.95}
         r={1}
         transform="rotate(45 7.293 6.95)"
-        fill={color}
+        fill="#000"
       />
     </Svg>
   )
diff --git a/packages/icons/20/keyboard-icon.tsx b/packages/icons/20/keyboard-icon.tsx
index cf65f666..e450328c 100644
--- a/packages/icons/20/keyboard-icon.tsx
+++ b/packages/icons/20/keyboard-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgKeyboardIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgKeyboardIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 489ffd56..06f74609 100644
--- a/packages/icons/20/keycard-icon.tsx
+++ b/packages/icons/20/keycard-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Mask, Path, Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgKeycardIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgKeycardIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Rect
         x={4}
diff --git a/packages/icons/20/keycard-logo-icon.tsx b/packages/icons/20/keycard-logo-icon.tsx
index 235beb04..17a01d23 100644
--- a/packages/icons/20/keycard-logo-icon.tsx
+++ b/packages/icons/20/keycard-logo-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgKeycardLogoIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgKeycardLogoIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/laptop-icon.tsx b/packages/icons/20/laptop-icon.tsx
index 98d41694..4f5b446f 100644
--- a/packages/icons/20/laptop-icon.tsx
+++ b/packages/icons/20/laptop-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgLaptopIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgLaptopIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/left-align-icon.tsx b/packages/icons/20/left-align-icon.tsx
index 38b7974b..529b4356 100644
--- a/packages/icons/20/left-align-icon.tsx
+++ b/packages/icons/20/left-align-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgLeftAlignIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgLeftAlignIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 e9fb9b13..cf133d76 100644
--- a/packages/icons/20/light-icon.tsx
+++ b/packages/icons/20/light-icon.tsx
@@ -1,25 +1,29 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgLightIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgLightIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+        stroke="#000"
         strokeWidth={1.3}
       />
-      <Circle cx={10} cy={10} r={3.5} stroke={color} strokeWidth={1.3} />
+      <Circle cx={10} cy={10} r={3.5} stroke="#000" strokeWidth={1.3} />
     </Svg>
   )
 }
diff --git a/packages/icons/20/link-icon.tsx b/packages/icons/20/link-icon.tsx
index ab2eb4ae..fa25c7e6 100644
--- a/packages/icons/20/link-icon.tsx
+++ b/packages/icons/20/link-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgLinkIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgLinkIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/list-view-icon.tsx b/packages/icons/20/list-view-icon.tsx
index e63c2ed1..850cf968 100644
--- a/packages/icons/20/list-view-icon.tsx
+++ b/packages/icons/20/list-view-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgListViewIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgListViewIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Rect
         x={3}
diff --git a/packages/icons/20/loading-icon.tsx b/packages/icons/20/loading-icon.tsx
index cd9424b0..a8019f8e 100644
--- a/packages/icons/20/loading-icon.tsx
+++ b/packages/icons/20/loading-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Defs, LinearGradient, Path, Stop, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgLoadingIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgLoadingIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 d8c3f82a..7217dac2 100644
--- a/packages/icons/20/locked-icon.tsx
+++ b/packages/icons/20/locked-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgLockedIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgLockedIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/log-out-icon.tsx b/packages/icons/20/log-out-icon.tsx
index 96704872..eaedb369 100644
--- a/packages/icons/20/log-out-icon.tsx
+++ b/packages/icons/20/log-out-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgLogOutIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgLogOutIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 6cd3455f..c786aec5 100644
--- a/packages/icons/20/members-icon.tsx
+++ b/packages/icons/20/members-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgMembersIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgMembersIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/mention-icon.tsx b/packages/icons/20/mention-icon.tsx
index 6b74bca2..814c52a0 100644
--- a/packages/icons/20/mention-icon.tsx
+++ b/packages/icons/20/mention-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgMentionIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgMentionIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/menu-icon.tsx b/packages/icons/20/menu-icon.tsx
index 248180c7..47fdcbd7 100644
--- a/packages/icons/20/menu-icon.tsx
+++ b/packages/icons/20/menu-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgMenuIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgMenuIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         d="M15 15H5M15 10H5M15 5H5"
diff --git a/packages/icons/20/messages-icon.tsx b/packages/icons/20/messages-icon.tsx
index 8d239233..d62141f2 100644
--- a/packages/icons/20/messages-icon.tsx
+++ b/packages/icons/20/messages-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgMessagesIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgMessagesIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 647eb7ed..e6b17996 100644
--- a/packages/icons/20/mobile-icon.tsx
+++ b/packages/icons/20/mobile-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgMobileIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgMobileIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Rect
         x={4}
diff --git a/packages/icons/20/multi-profile-icon.tsx b/packages/icons/20/multi-profile-icon.tsx
index b680f665..6867b7d5 100644
--- a/packages/icons/20/multi-profile-icon.tsx
+++ b/packages/icons/20/multi-profile-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgMultiProfileIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgMultiProfileIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/muted-icon.tsx b/packages/icons/20/muted-icon.tsx
index b2246e0e..93ed2cf7 100644
--- a/packages/icons/20/muted-icon.tsx
+++ b/packages/icons/20/muted-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgMutedIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgMutedIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/mutual-contact-icon.tsx b/packages/icons/20/mutual-contact-icon.tsx
index 8f9a6d3a..3be09622 100644
--- a/packages/icons/20/mutual-contact-icon.tsx
+++ b/packages/icons/20/mutual-contact-icon.tsx
@@ -1,21 +1,25 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgMutualContactIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgMutualContactIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={24}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
-      <Circle cx={15} cy={10} r={7} fill={color} />
-      <Circle cx={9} cy={10} r={7} fill={color} fillOpacity={0.3} />
+      <Circle cx={15} cy={10} r={7} fill="#4360DF" />
+      <Circle cx={9} cy={10} r={7} fill="#4360DF" 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 0588b876..80223fbc 100644
--- a/packages/icons/20/new-message-icon.tsx
+++ b/packages/icons/20/new-message-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgNewMessageIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgNewMessageIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/nft-icon.tsx b/packages/icons/20/nft-icon.tsx
index 9b85b251..8b59fd86 100644
--- a/packages/icons/20/nft-icon.tsx
+++ b/packages/icons/20/nft-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgNftIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgNftIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 5c465b10..157665a3 100644
--- a/packages/icons/20/node-icon.tsx
+++ b/packages/icons/20/node-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgNodeIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgNodeIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/notification-icon.tsx b/packages/icons/20/notification-icon.tsx
index fec43505..0d05672d 100644
--- a/packages/icons/20/notification-icon.tsx
+++ b/packages/icons/20/notification-icon.tsx
@@ -1,20 +1,24 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgNotificationIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgNotificationIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
-      <Circle cx={10} cy={10} r={4} fill={color} />
+      <Circle cx={10} cy={10} r={4} fill="#4360DF" />
     </Svg>
   )
 }
diff --git a/packages/icons/20/notifications-icon.tsx b/packages/icons/20/notifications-icon.tsx
index 33616d34..365446cb 100644
--- a/packages/icons/20/notifications-icon.tsx
+++ b/packages/icons/20/notifications-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgNotificationsIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgNotificationsIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/numbered-list-icon.tsx b/packages/icons/20/numbered-list-icon.tsx
index 83f49113..92f2f979 100644
--- a/packages/icons/20/numbered-list-icon.tsx
+++ b/packages/icons/20/numbered-list-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgNumberedListIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgNumberedListIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         d="M15 15H8.5M15 5H8.5"
diff --git a/packages/icons/20/online-icon.tsx b/packages/icons/20/online-icon.tsx
index 1a192bf6..56519527 100644
--- a/packages/icons/20/online-icon.tsx
+++ b/packages/icons/20/online-icon.tsx
@@ -1,20 +1,24 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgOnlineIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgOnlineIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
-      <Circle cx={10} cy={10} r={4} fill={color} />
+      <Circle cx={10} cy={10} r={4} fill="#26A69A" />
     </Svg>
   )
 }
diff --git a/packages/icons/20/online-left-icon.tsx b/packages/icons/20/online-left-icon.tsx
index 4dc40c6e..f383c105 100644
--- a/packages/icons/20/online-left-icon.tsx
+++ b/packages/icons/20/online-left-icon.tsx
@@ -1,20 +1,24 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgOnlineLeftIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgOnlineLeftIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={14}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
-      <Circle cx={4} cy={10} r={4} fill={color} />
+      <Circle cx={4} cy={10} r={4} fill="#26A69A" />
     </Svg>
   )
 }
diff --git a/packages/icons/20/options-icon.tsx b/packages/icons/20/options-icon.tsx
index 8794e2da..0bda4752 100644
--- a/packages/icons/20/options-icon.tsx
+++ b/packages/icons/20/options-icon.tsx
@@ -1,22 +1,26 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgOptionsIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgOptionsIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
-      <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} />
+      <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" />
     </Svg>
   )
 }
diff --git a/packages/icons/20/password-icon.tsx b/packages/icons/20/password-icon.tsx
index dcd1b0f6..bd3279f9 100644
--- a/packages/icons/20/password-icon.tsx
+++ b/packages/icons/20/password-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPasswordIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPasswordIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Rect
         x={3.5}
diff --git a/packages/icons/20/pause-icon.tsx b/packages/icons/20/pause-icon.tsx
index 48ae9914..bfd6b118 100644
--- a/packages/icons/20/pause-icon.tsx
+++ b/packages/icons/20/pause-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPauseIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPauseIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 e66bd702..8945afcc 100644
--- a/packages/icons/20/pending-icon.tsx
+++ b/packages/icons/20/pending-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPendingIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPendingIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 4520e87b..040399bd 100644
--- a/packages/icons/20/pending-user-icon.tsx
+++ b/packages/icons/20/pending-user-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPendingUserIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPendingUserIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/pin-1-icon.tsx b/packages/icons/20/pin-1-icon.tsx
index c2446c9b..65634da7 100644
--- a/packages/icons/20/pin-1-icon.tsx
+++ b/packages/icons/20/pin-1-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPin1Icon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPin1Icon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 9b92800f..16010e38 100644
--- a/packages/icons/20/pin-icon.tsx
+++ b/packages/icons/20/pin-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPinIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPinIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/placeholder-icon.tsx b/packages/icons/20/placeholder-icon.tsx
index fa4fd3c1..62818763 100644
--- a/packages/icons/20/placeholder-icon.tsx
+++ b/packages/icons/20/placeholder-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPlaceholderIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPlaceholderIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/play-icon.tsx b/packages/icons/20/play-icon.tsx
index 45c75c48..8cb5fb28 100644
--- a/packages/icons/20/play-icon.tsx
+++ b/packages/icons/20/play-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPlayIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPlayIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 3f725bad..9b4fcc20 100644
--- a/packages/icons/20/privacy-icon.tsx
+++ b/packages/icons/20/privacy-icon.tsx
@@ -1,24 +1,28 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPrivacyIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPrivacyIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+        fill="#000"
       />
     </Svg>
   )
diff --git a/packages/icons/20/profile-icon.tsx b/packages/icons/20/profile-icon.tsx
index a6593898..68950ddd 100644
--- a/packages/icons/20/profile-icon.tsx
+++ b/packages/icons/20/profile-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgProfileIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgProfileIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 d82cc5d9..34edcddd 100644
--- a/packages/icons/20/pullup-icon.tsx
+++ b/packages/icons/20/pullup-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgPullupIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgPullupIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Circle
         cx={10}
diff --git a/packages/icons/20/qr-code-icon.tsx b/packages/icons/20/qr-code-icon.tsx
index 6ba627e6..494c206e 100644
--- a/packages/icons/20/qr-code-icon.tsx
+++ b/packages/icons/20/qr-code-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgQrCodeIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgQrCodeIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Rect
         x={3.5}
diff --git a/packages/icons/20/quarter-icon.tsx b/packages/icons/20/quarter-icon.tsx
index ac69c745..2468b9ed 100644
--- a/packages/icons/20/quarter-icon.tsx
+++ b/packages/icons/20/quarter-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgQuarterIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgQuarterIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 0483d5c1..b10e851f 100644
--- a/packages/icons/20/reaction-icon.tsx
+++ b/packages/icons/20/reaction-icon.tsx
@@ -1,19 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
-
-const SvgReactionIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+import type { IconProps } from '../types'
 
+const SvgReactionIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 cfcbff7c..60e002a3 100644
--- a/packages/icons/20/receive-icon.tsx
+++ b/packages/icons/20/receive-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgReceiveIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgReceiveIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/receive-message-icon.tsx b/packages/icons/20/receive-message-icon.tsx
index 9ffc96c0..97838637 100644
--- a/packages/icons/20/receive-message-icon.tsx
+++ b/packages/icons/20/receive-message-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgReceiveMessageIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgReceiveMessageIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/recent-icon.tsx b/packages/icons/20/recent-icon.tsx
index 5e53eef5..a4e8f832 100644
--- a/packages/icons/20/recent-icon.tsx
+++ b/packages/icons/20/recent-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgRecentIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgRecentIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 90127975..d832a926 100644
--- a/packages/icons/20/refresh-icon.tsx
+++ b/packages/icons/20/refresh-icon.tsx
@@ -1,24 +1,28 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgRefreshIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgRefreshIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+        fill="#000"
       />
     </Svg>
   )
diff --git a/packages/icons/20/remove-user-icon.tsx b/packages/icons/20/remove-user-icon.tsx
index 04e0606e..de52446e 100644
--- a/packages/icons/20/remove-user-icon.tsx
+++ b/packages/icons/20/remove-user-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgRemoveUserIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgRemoveUserIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/reply-icon.tsx b/packages/icons/20/reply-icon.tsx
index c5d9d485..c3758465 100644
--- a/packages/icons/20/reply-icon.tsx
+++ b/packages/icons/20/reply-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgReplyIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgReplyIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/reveal-icon.tsx b/packages/icons/20/reveal-icon.tsx
index b87e8f0d..37b9d814 100644
--- a/packages/icons/20/reveal-icon.tsx
+++ b/packages/icons/20/reveal-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgRevealIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgRevealIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 05927556..70982a63 100644
--- a/packages/icons/20/revere-icon.tsx
+++ b/packages/icons/20/revere-icon.tsx
@@ -1,24 +1,28 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgRevereIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgRevereIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+        fill="#000"
       />
     </Svg>
   )
diff --git a/packages/icons/20/right-align-icon.tsx b/packages/icons/20/right-align-icon.tsx
index 599445e0..282b5271 100644
--- a/packages/icons/20/right-align-icon.tsx
+++ b/packages/icons/20/right-align-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgRightAlignIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgRightAlignIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 76ba2145..7d95d7c3 100644
--- a/packages/icons/20/rotate-icon.tsx
+++ b/packages/icons/20/rotate-icon.tsx
@@ -1,24 +1,28 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgRotateIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgRotateIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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={color}
+        fill="#000"
       />
     </Svg>
   )
diff --git a/packages/icons/20/sad-icon.tsx b/packages/icons/20/sad-icon.tsx
index 40ba56c8..9a2881a1 100644
--- a/packages/icons/20/sad-icon.tsx
+++ b/packages/icons/20/sad-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSadIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSadIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 70aabb19..2c96b32e 100644
--- a/packages/icons/20/save-icon.tsx
+++ b/packages/icons/20/save-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSaveIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSaveIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/scan-icon.tsx b/packages/icons/20/scan-icon.tsx
index 47710776..bbb6e484 100644
--- a/packages/icons/20/scan-icon.tsx
+++ b/packages/icons/20/scan-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgScanIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgScanIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 4b29bfdd..fa18bdff 100644
--- a/packages/icons/20/search-icon.tsx
+++ b/packages/icons/20/search-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSearchIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSearchIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/seed-icon.tsx b/packages/icons/20/seed-icon.tsx
index 65bae63c..52b7a65b 100644
--- a/packages/icons/20/seed-icon.tsx
+++ b/packages/icons/20/seed-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSeedIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSeedIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 dfd7c136..506620f6 100644
--- a/packages/icons/20/send-icon.tsx
+++ b/packages/icons/20/send-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSendIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSendIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/send-message-icon.tsx b/packages/icons/20/send-message-icon.tsx
index 06488e34..4b14cc6b 100644
--- a/packages/icons/20/send-message-icon.tsx
+++ b/packages/icons/20/send-message-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSendMessageIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSendMessageIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/settings-icon.tsx b/packages/icons/20/settings-icon.tsx
index 9ebaa5c9..7c597efa 100644
--- a/packages/icons/20/settings-icon.tsx
+++ b/packages/icons/20/settings-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSettingsIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSettingsIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 3d382435..3d2b36eb 100644
--- a/packages/icons/20/share-icon.tsx
+++ b/packages/icons/20/share-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgShareIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgShareIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/signature-icon.tsx b/packages/icons/20/signature-icon.tsx
index 10d6f780..471d0ab3 100644
--- a/packages/icons/20/signature-icon.tsx
+++ b/packages/icons/20/signature-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSignatureIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSignatureIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 08ca187e..b085b316 100644
--- a/packages/icons/20/sort-icon.tsx
+++ b/packages/icons/20/sort-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSortIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSortIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/speed-icon.tsx b/packages/icons/20/speed-icon.tsx
index 3f8a4d3e..cd54c801 100644
--- a/packages/icons/20/speed-icon.tsx
+++ b/packages/icons/20/speed-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSpeedIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSpeedIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 bb4a9a66..01de869a 100644
--- a/packages/icons/20/status-icon.tsx
+++ b/packages/icons/20/status-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgStatusIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgStatusIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 74c0c0c6..917ce3bf 100644
--- a/packages/icons/20/stickers-icon.tsx
+++ b/packages/icons/20/stickers-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgStickersIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgStickersIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/stop-icon.tsx b/packages/icons/20/stop-icon.tsx
index bcfad991..f044d2d1 100644
--- a/packages/icons/20/stop-icon.tsx
+++ b/packages/icons/20/stop-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgStopIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgStopIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 e22cf3c6..6ee87f12 100644
--- a/packages/icons/20/strikethrough-icon.tsx
+++ b/packages/icons/20/strikethrough-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgStrikethroughIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgStrikethroughIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/subscript-icon.tsx b/packages/icons/20/subscript-icon.tsx
index 785aaae3..0c6dca0f 100644
--- a/packages/icons/20/subscript-icon.tsx
+++ b/packages/icons/20/subscript-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSubscriptIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSubscriptIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 f4757364..92316a9c 100644
--- a/packages/icons/20/superscript-icon.tsx
+++ b/packages/icons/20/superscript-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSuperscriptIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSuperscriptIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 73a4aa11..b22d9632 100644
--- a/packages/icons/20/swap-icon.tsx
+++ b/packages/icons/20/swap-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSwapIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSwapIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/syncing-icon.tsx b/packages/icons/20/syncing-icon.tsx
index 2db49d8e..6a622d11 100644
--- a/packages/icons/20/syncing-icon.tsx
+++ b/packages/icons/20/syncing-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSyncingIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSyncingIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/toggle-icon.tsx b/packages/icons/20/toggle-icon.tsx
index 064a2539..259011b2 100644
--- a/packages/icons/20/toggle-icon.tsx
+++ b/packages/icons/20/toggle-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Rect, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgToggleIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgToggleIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Rect
         x={2}
diff --git a/packages/icons/20/token-icon.tsx b/packages/icons/20/token-icon.tsx
index 0d5cf4c1..2f42fff9 100644
--- a/packages/icons/20/token-icon.tsx
+++ b/packages/icons/20/token-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgTokenIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgTokenIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/unblock-icon.tsx b/packages/icons/20/unblock-icon.tsx
index 18b0e383..7b52c7ce 100644
--- a/packages/icons/20/unblock-icon.tsx
+++ b/packages/icons/20/unblock-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgUnblockIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgUnblockIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 45ed4246..51a78900 100644
--- a/packages/icons/20/underline-icon.tsx
+++ b/packages/icons/20/underline-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgUnderlineIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgUnderlineIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 03d97919..b6c625fb 100644
--- a/packages/icons/20/unlocked-icon.tsx
+++ b/packages/icons/20/unlocked-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgUnlockedIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgUnlockedIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/unread-icon.tsx b/packages/icons/20/unread-icon.tsx
index d9a7912a..bf929673 100644
--- a/packages/icons/20/unread-icon.tsx
+++ b/packages/icons/20/unread-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgUnreadIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgUnreadIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         d="M12 15H8M14 10H6M16 5H4"
diff --git a/packages/icons/20/untrustworthy-icon.tsx b/packages/icons/20/untrustworthy-icon.tsx
index 66e88d44..549a7316 100644
--- a/packages/icons/20/untrustworthy-icon.tsx
+++ b/packages/icons/20/untrustworthy-icon.tsx
@@ -1,25 +1,29 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgUntrustworthyIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgUntrustworthyIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Circle
         cx={10}
         cy={10}
         r={6.75}
-        fill={color}
-        stroke={color}
+        fill="#E65F5C"
+        stroke="#E65F5C"
         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 78bcf321..dc559681 100644
--- a/packages/icons/20/up-to-date-icon.tsx
+++ b/packages/icons/20/up-to-date-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgUpToDateIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgUpToDateIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 be76d01b..279f1e0d 100644
--- a/packages/icons/20/verified-icon.tsx
+++ b/packages/icons/20/verified-icon.tsx
@@ -1,25 +1,29 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgVerifiedIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgVerifiedIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Circle
         cx={10.25}
         cy={10.25}
         r={6.75}
-        fill={color}
-        stroke={color}
+        fill="#26A69A"
+        stroke="#26A69A"
         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 bdb75db1..47fd46ea 100644
--- a/packages/icons/20/video-icon.tsx
+++ b/packages/icons/20/video-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgVideoIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgVideoIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/wallet-icon.tsx b/packages/icons/20/wallet-icon.tsx
index b797960e..cf267bc7 100644
--- a/packages/icons/20/wallet-icon.tsx
+++ b/packages/icons/20/wallet-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgWalletIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgWalletIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Path
         fillRule="evenodd"
diff --git a/packages/icons/20/warning-icon.tsx b/packages/icons/20/warning-icon.tsx
index bcb86aad..142032a6 100644
--- a/packages/icons/20/warning-icon.tsx
+++ b/packages/icons/20/warning-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgWarningIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgWarningIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <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 52511ea6..25e7a716 100644
--- a/packages/icons/20/world-icon.tsx
+++ b/packages/icons/20/world-icon.tsx
@@ -1,18 +1,22 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Path, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgWorldIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgWorldIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={20}
       height={20}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
+      {...props}
     >
       <Circle cx={10} cy={10} r={7} stroke={color} strokeWidth={1.3} />
       <Path
diff --git a/packages/icons/package.json b/packages/icons/package.json
index c622e7e1..1cb6cbc6 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -9,26 +9,38 @@
     "dist",
     "src"
   ],
-  "#browser": {
+  "browser": {
     "react-native-svg": "@tamagui/react-native-svg"
   },
-  "#exports": {
+  "exports": {
     "./package.json": "./package.json",
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.umd.js"
+    "./12": {
+      "types": "./dist/types/12/index.d.ts",
+      "import": "./dist/12.js"
     },
-    "./src/12/*.svg": "./src/12/*.svg",
-    "./src/16/*.svg": "./src/16/*.svg",
-    "./src/20/*.svg": "./src/20/*.svg",
-    "./src/reactions/*.svg": "./src/reactions/*.svg"
+    "./16": {
+      "types": "./dist/types/16/index.d.ts",
+      "import": "./dist/16.js"
+    },
+    "./20": {
+      "types": "./dist/types/20/index.d.ts",
+      "import": "./dist/20.js"
+    },
+    "./reactions": {
+      "types": "./dist/types/reactions/index.d.ts",
+      "import": "./dist/reactions.js"
+    },
+    "./12/*.svg": "./src/12/*.svg",
+    "./16/*.svg": "./src/16/*.svg",
+    "./20/*.svg": "./src/20/*.svg",
+    "./reactions/*.svg": "./src/reactions/*.svg"
   },
   "scripts": {
     "dev": "vite build --watch --mode development",
     "generate": "rimraf 12 16 20 reactions && svgr src && yarn fix",
+    "prebuild": "yarn generate",
     "build": "vite build",
-    "#postbuild": "yarn typegen",
+    "postbuild": "yarn typegen",
     "#test": "vitest",
     "typecheck": "tsc",
     "typegen": "tsc --noEmit false --emitDeclarationOnly || true",
diff --git a/packages/icons/react-native-svg.d.ts b/packages/icons/react-native-svg.d.ts
deleted file mode 100644
index f8bed460..00000000
--- a/packages/icons/react-native-svg.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import 'react-native-svg'
-
-declare module 'react-native-svg' {
-  export interface SvgProps {
-    xmlns?: string
-    xmlnsXlink?: string
-  }
-}
diff --git a/packages/icons/reactions/angry-icon.tsx b/packages/icons/reactions/angry-icon.tsx
index 0b934ab9..6e0c204b 100644
--- a/packages/icons/reactions/angry-icon.tsx
+++ b/packages/icons/reactions/angry-icon.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@tamagui/core'
 import {
   Circle,
   Defs,
@@ -7,13 +8,16 @@ import {
   Stop,
   Svg,
 } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgAngryIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgAngryIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
diff --git a/packages/icons/reactions/laugh-icon.tsx b/packages/icons/reactions/laugh-icon.tsx
index 1b775b34..23039e34 100644
--- a/packages/icons/reactions/laugh-icon.tsx
+++ b/packages/icons/reactions/laugh-icon.tsx
@@ -1,11 +1,15 @@
+import { useTheme } from '@tamagui/core'
 import { Circle, Defs, Path, RadialGradient, Stop, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgLaughIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgLaughIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
diff --git a/packages/icons/reactions/love-icon.tsx b/packages/icons/reactions/love-icon.tsx
index 7c97b205..6dd887a5 100644
--- a/packages/icons/reactions/love-icon.tsx
+++ b/packages/icons/reactions/love-icon.tsx
@@ -1,11 +1,15 @@
+import { useTheme } from '@tamagui/core'
 import { Defs, Path, RadialGradient, Stop, Svg } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgLoveIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgLoveIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
diff --git a/packages/icons/reactions/sad-icon.tsx b/packages/icons/reactions/sad-icon.tsx
index b1d9d100..2ed4f1ca 100644
--- a/packages/icons/reactions/sad-icon.tsx
+++ b/packages/icons/reactions/sad-icon.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@tamagui/core'
 import {
   Circle,
   Defs,
@@ -7,13 +8,16 @@ import {
   Stop,
   Svg,
 } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgSadIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgSadIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
diff --git a/packages/icons/reactions/thumbs-down-icon.tsx b/packages/icons/reactions/thumbs-down-icon.tsx
index bdfcbe40..68e8c604 100644
--- a/packages/icons/reactions/thumbs-down-icon.tsx
+++ b/packages/icons/reactions/thumbs-down-icon.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@tamagui/core'
 import {
   Defs,
   LinearGradient,
@@ -6,13 +7,16 @@ import {
   Stop,
   Svg,
 } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgThumbsDownIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgThumbsDownIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
diff --git a/packages/icons/reactions/thumbs-up-icon.tsx b/packages/icons/reactions/thumbs-up-icon.tsx
index 227cb91f..c6603923 100644
--- a/packages/icons/reactions/thumbs-up-icon.tsx
+++ b/packages/icons/reactions/thumbs-up-icon.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@tamagui/core'
 import {
   Defs,
   LinearGradient,
@@ -6,13 +7,16 @@ import {
   Stop,
   Svg,
 } from 'react-native-svg'
-import { useCurrentColor } from 'tamagui'
 
-import type { SvgProps } from 'react-native-svg'
+import type { IconProps } from '../types'
 
-const SvgThumbsUpIcon = (props: SvgProps) => {
-  const { color: colorToken = 'currentColor', ...rest } = props
-  const color = useCurrentColor(colorToken)
+const SvgThumbsUpIcon = (props: IconProps) => {
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme()
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     <Svg
       width={16}
diff --git a/packages/icons/scripts/build.js b/packages/icons/scripts/build.js
index 301e8db9..9ccf8e7e 100644
--- a/packages/icons/scripts/build.js
+++ b/packages/icons/scripts/build.js
@@ -1,135 +1,135 @@
-const fs = require('fs').promises
-const camelcase = require('camelcase')
-const { promisify } = require('util')
-const rimraf = promisify(require('rimraf'))
-const svgr = require('@svgr/core').default
-const babel = require('@babel/core')
-const { compile: compileVue } = require('@vue/compiler-dom')
-const { dirname } = require('path')
+// const fs = require('fs').promises
+// const camelcase = require('camelcase')
+// const { promisify } = require('util')
+// const rimraf = promisify(require('rimraf'))
+// const svgr = require('@svgr/core').default
+// const babel = require('@babel/core')
+// const { compile: compileVue } = require('@vue/compiler-dom')
+// const { dirname } = require('path')
 
-let transform = {
-  react: async (svg, componentName, format) => {
-    let component = await svgr(
-      svg,
-      { ref: true, titleProp: true },
-      { componentName }
-    )
-    let { code } = await babel.transformAsync(component, {
-      plugins: [
-        [require('@babel/plugin-transform-react-jsx'), { useBuiltIns: true }],
-      ],
-    })
+// let transform = {
+//   react: async (svg, componentName, format) => {
+//     let component = await svgr(
+//       svg,
+//       { ref: true, titleProp: true },
+//       { componentName }
+//     )
+//     let { code } = await babel.transformAsync(component, {
+//       plugins: [
+//         [require('@babel/plugin-transform-react-jsx'), { useBuiltIns: true }],
+//       ],
+//     })
 
-    if (format === 'esm') {
-      return code
-    }
+//     if (format === 'esm') {
+//       return code
+//     }
 
-    return code
-      .replace(
-        'import * as React from "react"',
-        'const React = require("react")'
-      )
-      .replace('export default', 'module.exports =')
-  },
-}
+//     return code
+//       .replace(
+//         'import * as React from "react"',
+//         'const React = require("react")'
+//       )
+//       .replace('export default', 'module.exports =')
+//   },
+// }
 
-async function getIcons(style) {
-  let files = await fs.readdir(`./optimized/${style}`)
-  return Promise.all(
-    files.map(async file => ({
-      svg: await fs.readFile(`./optimized/${style}/${file}`, 'utf8'),
-      componentName: `${camelcase(file.replace(/\.svg$/, ''), {
-        pascalCase: true,
-      })}Icon`,
-    }))
-  )
-}
+// async function getIcons(style) {
+//   let files = await fs.readdir(`./optimized/${style}`)
+//   return Promise.all(
+//     files.map(async file => ({
+//       svg: await fs.readFile(`./optimized/${style}/${file}`, 'utf8'),
+//       componentName: `${camelcase(file.replace(/\.svg$/, ''), {
+//         pascalCase: true,
+//       })}Icon`,
+//     }))
+//   )
+// }
 
-function exportAll(icons, format, includeExtension = true) {
-  return icons
-    .map(({ componentName }) => {
-      let extension = includeExtension ? '.js' : ''
-      if (format === 'esm') {
-        return `export { default as ${componentName} } from './${componentName}${extension}'`
-      }
-      return `module.exports.${componentName} = require("./${componentName}${extension}")`
-    })
-    .join('\n')
-}
+// function exportAll(icons, format, includeExtension = true) {
+//   return icons
+//     .map(({ componentName }) => {
+//       let extension = includeExtension ? '.js' : ''
+//       if (format === 'esm') {
+//         return `export { default as ${componentName} } from './${componentName}${extension}'`
+//       }
+//       return `module.exports.${componentName} = require("./${componentName}${extension}")`
+//     })
+//     .join('\n')
+// }
 
-async function ensureWrite(file, text) {
-  await fs.mkdir(dirname(file), { recursive: true })
-  await fs.writeFile(file, text, 'utf8')
-}
+// async function ensureWrite(file, text) {
+//   await fs.mkdir(dirname(file), { recursive: true })
+//   await fs.writeFile(file, text, 'utf8')
+// }
 
-async function ensureWriteJson(file, json) {
-  await ensureWrite(file, JSON.stringify(json, null, 2))
-}
+// async function ensureWriteJson(file, json) {
+//   await ensureWrite(file, JSON.stringify(json, null, 2))
+// }
 
-async function buildIcons(package, style, format) {
-  let outDir = `./${package}/${style}`
-  if (format === 'esm') {
-    outDir += '/esm'
-  }
+// async function buildIcons(package, style, format) {
+//   let outDir = `./${package}/${style}`
+//   if (format === 'esm') {
+//     outDir += '/esm'
+//   }
 
-  let icons = await getIcons(style)
+//   let icons = await getIcons(style)
 
-  await Promise.all(
-    icons.flatMap(async ({ componentName, svg }) => {
-      let content = await transform[package](svg, componentName, format)
-      let types =
-        package === 'react'
-          ? `import * as React from 'react';\ndeclare function ${componentName}(props: React.ComponentProps<'svg'> & { title?: string, titleId?: string }): JSX.Element;\nexport default ${componentName};\n`
-          : `import type { FunctionalComponent, HTMLAttributes, VNodeProps } from 'vue';\ndeclare const ${componentName}: FunctionalComponent<HTMLAttributes & VNodeProps>;\nexport default ${componentName};\n`
+//   await Promise.all(
+//     icons.flatMap(async ({ componentName, svg }) => {
+//       let content = await transform[package](svg, componentName, format)
+//       let types =
+//         package === 'react'
+//           ? `import * as React from 'react';\ndeclare function ${componentName}(props: React.ComponentProps<'svg'> & { title?: string, titleId?: string }): JSX.Element;\nexport default ${componentName};\n`
+//           : `import type { FunctionalComponent, HTMLAttributes, VNodeProps } from 'vue';\ndeclare const ${componentName}: FunctionalComponent<HTMLAttributes & VNodeProps>;\nexport default ${componentName};\n`
 
-      return [
-        ensureWrite(`${outDir}/${componentName}.js`, content),
-        ...(types
-          ? [ensureWrite(`${outDir}/${componentName}.d.ts`, types)]
-          : []),
-      ]
-    })
-  )
+//       return [
+//         ensureWrite(`${outDir}/${componentName}.js`, content),
+//         ...(types
+//           ? [ensureWrite(`${outDir}/${componentName}.d.ts`, types)]
+//           : []),
+//       ]
+//     })
+//   )
 
-  await ensureWrite(`${outDir}/index.js`, exportAll(icons, format))
+//   await ensureWrite(`${outDir}/index.js`, exportAll(icons, format))
 
-  await ensureWrite(`${outDir}/index.d.ts`, exportAll(icons, 'esm', false))
-}
+//   await ensureWrite(`${outDir}/index.d.ts`, exportAll(icons, 'esm', false))
+// }
 
-async function main(package) {
-  const cjsPackageJson = { module: './esm/index.js', sideEffects: false }
-  const esmPackageJson = { type: 'module', sideEffects: false }
+// async function main(package) {
+//   const cjsPackageJson = { module: './esm/index.js', sideEffects: false }
+//   const esmPackageJson = { type: 'module', sideEffects: false }
 
-  console.log(`Building ${package} package...`)
+//   console.log(`Building ${package} package...`)
 
-  await Promise.all([
-    rimraf(`./${package}/20/solid/*`),
-    rimraf(`./${package}/24/outline/*`),
-    rimraf(`./${package}/24/solid/*`),
-  ])
+//   await Promise.all([
+//     rimraf(`./${package}/20/solid/*`),
+//     rimraf(`./${package}/24/outline/*`),
+//     rimraf(`./${package}/24/solid/*`),
+//   ])
 
-  await Promise.all([
-    buildIcons(package, '20/solid', 'cjs'),
-    buildIcons(package, '20/solid', 'esm'),
-    buildIcons(package, '24/outline', 'cjs'),
-    buildIcons(package, '24/outline', 'esm'),
-    buildIcons(package, '24/solid', 'cjs'),
-    buildIcons(package, '24/solid', 'esm'),
-    ensureWriteJson(`./${package}/20/solid/esm/package.json`, esmPackageJson),
-    ensureWriteJson(`./${package}/20/solid/package.json`, cjsPackageJson),
-    ensureWriteJson(`./${package}/24/outline/esm/package.json`, esmPackageJson),
-    ensureWriteJson(`./${package}/24/outline/package.json`, cjsPackageJson),
-    ensureWriteJson(`./${package}/24/solid/esm/package.json`, esmPackageJson),
-    ensureWriteJson(`./${package}/24/solid/package.json`, cjsPackageJson),
-  ])
+//   await Promise.all([
+//     buildIcons(package, '20/solid', 'cjs'),
+//     buildIcons(package, '20/solid', 'esm'),
+//     buildIcons(package, '24/outline', 'cjs'),
+//     buildIcons(package, '24/outline', 'esm'),
+//     buildIcons(package, '24/solid', 'cjs'),
+//     buildIcons(package, '24/solid', 'esm'),
+//     ensureWriteJson(`./${package}/20/solid/esm/package.json`, esmPackageJson),
+//     ensureWriteJson(`./${package}/20/solid/package.json`, cjsPackageJson),
+//     ensureWriteJson(`./${package}/24/outline/esm/package.json`, esmPackageJson),
+//     ensureWriteJson(`./${package}/24/outline/package.json`, cjsPackageJson),
+//     ensureWriteJson(`./${package}/24/solid/esm/package.json`, esmPackageJson),
+//     ensureWriteJson(`./${package}/24/solid/package.json`, cjsPackageJson),
+//   ])
 
-  return console.log(`Finished building ${package} package.`)
-}
+//   return console.log(`Finished building ${package} package.`)
+// }
 
-let [package] = process.argv.slice(2)
+// let [package] = process.argv.slice(2)
 
-if (!package) {
-  throw new Error('Please specify a package')
-}
+// if (!package) {
+//   throw new Error('Please specify a package')
+// }
 
-main(package)
+// main(package)
diff --git a/packages/icons/src/arrow-icon.tsx b/packages/icons/src/arrow-icon.tsx
deleted file mode 100644
index dc432b9c..00000000
--- a/packages/icons/src/arrow-icon.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { memo } from 'react'
-
-import { themed } from '@status-im/icons/src/themed'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from './types'
-
-function Icon(props: IconProps) {
-  const { color, size = 20, ...otherProps } = props
-
-  return (
-    <Svg
-      width={size}
-      height={size}
-      viewBox={`0 0 ${size} ${size}`}
-      fill="none"
-      {...otherProps}
-    >
-      <Path
-        d="m5.569 9.35 3.89-3.89-.919-.92-5 5-.46.46.46.46 5 5 .92-.92-3.891-3.89h10.43v-1.3H5.57Z"
-        fill={`${color}`}
-      />
-    </Svg>
-  )
-}
-
-export const ArrowIcon = memo<IconProps>(themed(Icon))
diff --git a/packages/icons/svgr.config.js b/packages/icons/svgr.config.js
index c3819c55..f768293a 100644
--- a/packages/icons/svgr.config.js
+++ b/packages/icons/svgr.config.js
@@ -1,31 +1,44 @@
 function transformImports(arr) {
   arr.forEach(object => {
     if (object.source && object.source.value === 'react-native-svg') {
-      object.specifiers.forEach(specifier => {
+      object.specifiers.forEach((specifier, index) => {
         if (specifier.type === 'ImportDefaultSpecifier') {
           specifier.type = 'ImportSpecifier'
           specifier.imported = specifier.local
         }
+
+        if (specifier.imported.name === 'IconProps') {
+          object.specifiers.splice(index, 1)
+        }
       })
     }
   })
-  return arr
+}
+
+function replaceSvgPropsWithIconProps(node) {
+  node[0].typeAnnotation.typeAnnotation.typeName.name = 'IconProps'
 }
 
 const template = (variables, { tpl }) => {
+  replaceSvgPropsWithIconProps(variables.props)
   transformImports(variables.imports)
 
   return tpl`
-${variables.imports};
-import { useCurrentColor } from 'tamagui'
+  ${variables.imports};
+  import { useTheme } from '@tamagui/core';
+  import { IconProps } from '../types';
 
 ${variables.interfaces};
 
 const ${variables.componentName} = (${variables.props}) => {
-  const { color: colorToken = "currentColor", ...rest } = props;
+  const { color: token = '$neutral-100' } = props
+  const theme = useTheme();
 
-const color = useCurrentColor(colorToken);
 
+  /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const color = theme[token]?.val ?? token
   return (
     ${variables.jsx}
   )
diff --git a/packages/icons/types.ts b/packages/icons/types.ts
index b7cc9c19..e7ad91bf 100644
--- a/packages/icons/types.ts
+++ b/packages/icons/types.ts
@@ -1,18 +1,23 @@
-import type {
-  SizeTokens,
-  StyleObject,
-  ThemeParsed,
-  Tokens,
-} from '@tamagui/core'
+// import 'react-native-svg'
+
+import type { ColorTokens } from '@tamagui/core'
 import type { SvgProps } from 'react-native-svg'
 
-type GetTokenString<A> = A extends string ? `$${A}` : `$${string}`
-export type ColorTokens =
-  | GetTokenString<keyof Tokens['color']>
-  | GetTokenString<keyof ThemeParsed>
+declare module 'react-native-svg' {
+  export interface SvgProps {
+    xmlns?: string
+    xmlnsXlink?: string
+    xlinkHref?: string
+  }
+}
+
+// type GetTokenString<A> = A extends string ? `$${A}` : `$${string}`
+// export type ColorTokens =
+//   | GetTokenString<keyof Tokens['color']>
+//   | GetTokenString<keyof ThemeParsed>
 
 export type IconProps = SvgProps & {
-  size?: number | SizeTokens
+  // size?: number | SizeTokens
   color?: ColorTokens
-  style?: StyleObject
+  // style?: StyleObject
 }
diff --git a/packages/icons/vite.config.ts b/packages/icons/vite.config.ts
index 8480e869..50982863 100644
--- a/packages/icons/vite.config.ts
+++ b/packages/icons/vite.config.ts
@@ -6,25 +6,24 @@ import { defineConfig } from 'vite'
 import { peerDependencies } from './package.json'
 
 const external = [
+  '@tamagui/core',
   'tamagui',
   // ...Object.keys(dependencies || {}),
   ...Object.keys(peerDependencies || {}),
 ].map(name => new RegExp(`^${name}(/.*)?`))
 
+let index = 0
+const TYPES = ['12', '16', '20', 'reactions'] as const
+
 export default defineConfig(({ mode }) => {
   return {
     build: {
       target: 'es2020',
       lib: {
-        entry: [
-          './src/12/index.ts',
-          './src/16/index.ts',
-          './src/20/index.ts',
-          './src/reactions/index.ts',
-        ],
-        fileName(format, entryName) {
-          // const [name] = entryName.split('/')
-          return `icons-${entryName}.${format}.js`
+        entry: TYPES.map(type => `./${type}/index.ts`),
+        fileName() {
+          // return `${TYPES[index++]}.${format}.js`
+          return `${TYPES[index++]}.js`
         },
         formats: ['es'],
       },