Automate sync of colors and icons with Figma (#378)

* remove old icons * add script for syncing icons * regenerate icons * update @status-im/icons exports * allow scroll in storybook * migrate to new icons import * add iconography story * update root package.json * fix typo * add @status-im/colors * generate colors * add colors story * fix ci
2023-04-14 23:27:05 +02:00 · 2023-04-14 23:27:05 +02:00 · 6558e437f5
parent 9cbf21599b
commit 6558e437f5
1100 changed files with 11720 additions and 14634 deletions
--- a/apps/mobile/App.tsx
+++ b/apps/mobile/App.tsx
@ -8,7 +8,7 @@ import { useNavigation, useRoute } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { Heading, IconButton, Paragraph } from '@status-im/components'
 import { Avatar } from '@status-im/components/src/avatar'
-import { ArrowLeftIcon, MembersIcon } from '@status-im/icons/20'
+import { ArrowLeftIcon, MembersIcon } from '@status-im/icons'
 import { Stack as View, TamaguiProvider } from '@tamagui/core'
 import { useFonts } from 'expo-font'
 import { Platform } from 'react-native'
@ -37,7 +37,7 @@ const CustomHeaderLeft = (props: HeaderBackButtonProps) => {
  return (
    <>
      <IconButton
-        icon={<ArrowLeftIcon />}
+        icon={<ArrowLeftIcon size={20} />}
        onPress={() => {
          props.canGoBack && navigation.goBack()
        }}
@ -163,7 +163,7 @@ export default function App() {
                headerRight() {
                  return (
                    <IconButton
-                      icon={<MembersIcon />}
+                      icon={<MembersIcon size={20} />}
                      onPress={() => {
                        // noop
                      }}
--- a/package.json
+++ b/package.json
@ -4,8 +4,9 @@
  "workspaces": {
    "packages": [
      "packages/status-js",
-      "packages/components",
+      "packages/colors",
      "packages/icons",
+      "packages/components",
      "apps/*"
    ]
  },
@ -31,6 +32,7 @@
  "devDependencies": {
    "@changesets/cli": "^2.23.0",
    "@tsconfig/strictest": "^2.0.0",
+    "@types/prettier": "^2.7.2",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "eslint": "^8.37.0",
--- a/packages/colors/package.json
+++ b/packages/colors/package.json
@ -0,0 +1,43 @@
+{
+  "name": "@status-im/colors",
+  "version": "0.0.1",
+  "private": true,
+  "files": [
+    "types",
+    "dist",
+    "src"
+  ],
+  "main": "dist/colors.js",
+  "module": "dist/colors.mjs",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types:": "./dist/types/index.d.ts",
+      "import": "./dist/colors.mjs",
+      "require": "./dist/colors.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "sync": "rimraf src && vite-node scripts/sync.ts",
+    "dev": "vite build --watch --mode development",
+    "build:types": "tsc --noEmit false --emitDeclarationOnly",
+    "build": "vite build",
+    "postbuild": "yarn build:types",
+    "#test": "vitest",
+    "typecheck": "tsc",
+    "lint": "eslint src",
+    "lint:fix": "yarn lint --fix",
+    "format": "prettier --write src",
+    "clean": "rimraf dist node_modules .turbo"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@clack/prompts": "^0.6.3",
+    "colorjs.io": "^0.4.3",
+    "figma-api": "^1.11.0",
+    "fs-extra": "^11.1.1",
+    "vite": "^4.1.4",
+    "vite-node": "^0.29.7"
+  }
+}
--- a/packages/colors/scripts/sync.ts
+++ b/packages/colors/scripts/sync.ts
@ -0,0 +1,142 @@
+import { intro, isCancel, outro, spinner, text } from '@clack/prompts'
+import * as Figma from 'figma-api'
+import fs from 'fs-extra'
+
+import type { GetFileNodesResult } from 'figma-api/lib/api-types'
+
+const FILE_KEY = 'v98g9ZiaSHYUdKWrbFg9eM'
+
+intro('🟥🟧🟨🟩🟦🟪🟫⬛⬜')
+
+const personalAccessToken = await text({
+  message: 'Your personal Figma access token:',
+  validate(value) {
+    if (value.length === 0) return `required`
+  },
+})
+
+if (isCancel(personalAccessToken)) {
+  outro('Bye!')
+  process.exit(0)
+}
+
+function sortObjectByKey<T extends Record<string, any>>(obj: T): T {
+  const sortedObj: Record<string, any> = {}
+  Object.keys(obj)
+    .sort()
+    .forEach(key => {
+      sortedObj[key] = obj[key]
+    })
+  return sortedObj as T
+}
+
+const figma = new Figma.Api({
+  personalAccessToken,
+})
+
+/**
+ * Get file styles from Figma
+ */
+const s = spinner()
+s.start('Fetching styles from Figma')
+
+const styles = await figma.getFileStyles(FILE_KEY)
+
+if (styles.error) {
+  console.log('error:', styles.error)
+  outro('Error!')
+  process.exit(1)
+}
+
+s.stop('Done!')
+
+/**
+ * Get colors tokens from Figma
+ */
+const s2 = spinner()
+s2.start('Fetching tokens from Figma')
+
+const nodeIds = styles
+  .meta!.styles.filter(style => style.style_type === 'FILL')
+  .map(style => style.node_id)
+
+const { nodes } = (await figma.getFileNodes(
+  FILE_KEY,
+  nodeIds
+)) as GetFileNodesResult<'FRAME'>
+s2.stop('Done!')
+
+/**
+ * Generate files
+ */
+const s3 = spinner()
+s3.start('Generating colors')
+
+const colors: Record<string, Record<string, string>> = {}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+for (const [_nodeId, value] of Object.entries(nodes)) {
+  const { document } = value!
+
+  const { r, g, b } = document.fills[0].color!
+  const a = document.fills[0].opacity ?? 1
+
+  const red = Math.round(r * 255)
+  const green = Math.round(g * 255)
+  const blue = Math.round(b * 255)
+  const alpha = Math.round(a * 100)
+
+  const name = toKebabCase(document.name).replace('-/-', '/')
+  const [namespace, ...rest] = name.split('/')
+  const tokenName = normalizeName(namespace, rest.join('-'))
+
+  colors[namespace] ??= {}
+  colors[namespace][tokenName] = `rgba(${red} ${green} ${blue} / ${alpha}%)`
+}
+
+/**
+ * Write tokens to src folder
+ */
+
+fs.ensureDirSync('./src')
+
+for (const [namespace, value] of Object.entries(colors)) {
+  const fileName = `./src/${namespace}.ts`
+
+  const tokens = JSON.stringify(sortObjectByKey(value), null, 2)
+
+  fs.writeFileSync(fileName, `export const ${namespace} = ${tokens}`, {
+    encoding: 'utf-8',
+  })
+}
+
+// re-export from index
+fs.writeFileSync(
+  './src/index.ts',
+  Object.keys(colors)
+    .map(key => `export { ${key} } from './${key}'`)
+    .join('\n'),
+  { encoding: 'utf-8' }
+)
+
+s3.stop('Done!')
+
+function normalizeName(_tokenName: string, value: string): string {
+  let normalizedValue = value
+
+  normalizedValue = value.replace('solid-', '')
+  normalizedValue = normalizedValue.replace('%', '')
+  normalizedValue = normalizedValue.replace('-transparent-opa', '/')
+  normalizedValue = normalizedValue.replace('-transparent-', '/')
+  normalizedValue = normalizedValue.replace('transparent-', '/')
+  normalizedValue = normalizedValue.replace('-opa-', '/')
+
+  return normalizedValue
+}
+
+function toKebabCase(str: string): string {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1-$2') // convert camel case to kebab case
+    .replace(/[\s_]+/g, '-') // replace spaces and underscores with hyphens
+    .toLowerCase()
+}
--- a/packages/colors/src/blur.ts
+++ b/packages/colors/src/blur.ts
@ -0,0 +1,8 @@
+export const blur = {
+  'neutral-100/70': 'rgba(9 16 28 / 70%)',
+  'neutral-5/70': 'rgba(245 246 248 / 70%)',
+  'neutral-80/80': 'rgba(25 36 56 / 80%)',
+  'neutral-90/70': 'rgba(19 29 47 / 70%)',
+  'neutral-95/70': 'rgba(13 22 37 / 70%)',
+  'white/70': 'rgba(255 255 255 / 70%)',
+}
--- a/packages/colors/src/customisation.ts
+++ b/packages/colors/src/customisation.ts
@ -0,0 +1,93 @@
+export const customisation = {
+  'army-50': 'rgba(33 98 102 / 100%)',
+  'army-60': 'rgba(26 78 82 / 100%)',
+  'army/10': 'rgba(33 98 102 / 10%)',
+  'army/20': 'rgba(33 98 102 / 20%)',
+  'army/30': 'rgba(33 98 102 / 30%)',
+  'army/40': 'rgba(33 98 102 / 40%)',
+  'army/5': 'rgba(33 98 102 / 5%)',
+  'blue-50': 'rgba(42 74 245 / 100%)',
+  'blue-60': 'rgba(34 59 196 / 100%)',
+  'blue/10': 'rgba(42 74 245 / 10%)',
+  'blue/20': 'rgba(42 74 245 / 20%)',
+  'blue/30': 'rgba(42 74 245 / 30%)',
+  'blue/40': 'rgba(42 74 245 / 40%)',
+  'blue/5': 'rgba(42 74 245 / 5%)',
+  'camel-50': 'rgba(199 143 103 / 100%)',
+  'camel-60': 'rgba(159 114 82 / 100%)',
+  'camel/10': 'rgba(199 143 103 / 10%)',
+  'camel/20': 'rgba(199 143 103 / 20%)',
+  'camel/30': 'rgba(199 143 103 / 30%)',
+  'camel/40': 'rgba(199 143 103 / 40%)',
+  'camel/5': 'rgba(199 143 103 / 5%)',
+  'cooper-50': 'rgba(203 98 86 / 100%)',
+  'cooper-60': 'rgba(162 78 69 / 100%)',
+  'cooper/10': 'rgba(203 98 86 / 10%)',
+  'cooper/20': 'rgba(203 98 86 / 20%)',
+  'cooper/30': 'rgba(203 98 86 / 30%)',
+  'cooper/40': 'rgba(203 98 86 / 40%)',
+  'cooper/5': 'rgba(203 98 86 / 5%)',
+  'magenta-50': 'rgba(236 38 108 / 100%)',
+  'magenta-60': 'rgba(189 30 86 / 100%)',
+  'magenta/10': 'rgba(236 38 108 / 10%)',
+  'magenta/20': 'rgba(236 38 108 / 20%)',
+  'magenta/30': 'rgba(236 38 108 / 30%)',
+  'magenta/40': 'rgba(236 38 108 / 40%)',
+  'magenta/5': 'rgba(236 38 108 / 5%)',
+  'orange-50': 'rgba(255 125 70 / 100%)',
+  'orange-60': 'rgba(204 100 56 / 100%)',
+  'orange/10': 'rgba(255 125 70 / 10%)',
+  'orange/20': 'rgba(255 125 70 / 20%)',
+  'orange/30': 'rgba(255 125 70 / 30%)',
+  'orange/40': 'rgba(255 125 70 / 40%)',
+  'orange/5': 'rgba(255 125 70 / 5%)',
+  'pink-50': 'rgba(246 111 143 / 100%)',
+  'pink-60': 'rgba(197 89 114 / 100%)',
+  'pink/10': 'rgba(246 111 143 / 10%)',
+  'pink/20': 'rgba(246 111 143 / 20%)',
+  'pink/30': 'rgba(246 111 143 / 30%)',
+  'pink/40': 'rgba(246 111 143 / 40%)',
+  'pink/5': 'rgba(246 111 143 / 5%)',
+  'purple-50': 'rgba(113 64 253 / 100%)',
+  'purple-60': 'rgba(90 51 202 / 100%)',
+  'purple/10': 'rgba(113 64 253 / 10%)',
+  'purple/20': 'rgba(113 64 253 / 20%)',
+  'purple/30': 'rgba(113 64 253 / 30%)',
+  'purple/40': 'rgba(113 64 253 / 40%)',
+  'purple/5': 'rgba(113 64 253 / 5%)',
+  'sky-50': 'rgba(25 146 215 / 100%)',
+  'sky-60': 'rgba(20 117 172 / 100%)',
+  'sky/10': 'rgba(25 146 215 / 10%)',
+  'sky/20': 'rgba(25 146 215 / 20%)',
+  'sky/30': 'rgba(25 146 215 / 30%)',
+  'sky/40': 'rgba(25 146 215 / 40%)',
+  'sky/5': 'rgba(25 146 215 / 5%)',
+  'turquoise-50': 'rgba(42 121 155 / 100%)',
+  'turquoise-60': 'rgba(34 97 124 / 100%)',
+  'turquoise/10': 'rgba(42 121 155 / 10%)',
+  'turquoise/20': 'rgba(42 121 155 / 20%)',
+  'turquoise/30': 'rgba(42 121 155 / 30%)',
+  'turquoise/40': 'rgba(42 121 155 / 40%)',
+  'turquoise/5': 'rgba(42 121 155 / 5%)',
+  'yang-50': 'rgba(255 255 255 / 100%)',
+  'yang-60': 'rgba(235 235 235 / 100%)',
+  'yang/10': 'rgba(255 255 255 / 10%)',
+  'yang/20': 'rgba(255 255 255 / 20%)',
+  'yang/30': 'rgba(255 255 255 / 30%)',
+  'yang/40': 'rgba(255 255 255 / 40%)',
+  'yang/5': 'rgba(255 255 255 / 5%)',
+  'yellow-50': 'rgba(246 176 60 / 100%)',
+  'yellow-60': 'rgba(197 141 48 / 100%)',
+  'yellow/10': 'rgba(246 176 60 / 10%)',
+  'yellow/20': 'rgba(246 176 60 / 20%)',
+  'yellow/30': 'rgba(246 176 60 / 30%)',
+  'yellow/40': 'rgba(246 176 60 / 40%)',
+  'yellow/5': 'rgba(246 176 60 / 5%)',
+  'yin-50': 'rgba(9 16 28 / 100%)',
+  'yin-60': 'rgba(29 35 46 / 100%)',
+  'yin/10': 'rgba(9 16 28 / 10%)',
+  'yin/20': 'rgba(9 16 28 / 20%)',
+  'yin/30': 'rgba(9 16 28 / 30%)',
+  'yin/40': 'rgba(9 16 28 / 40%)',
+  'yin/5': 'rgba(9 16 28 / 5%)',
+}
--- a/packages/colors/src/danger.ts
+++ b/packages/colors/src/danger.ts
@ -0,0 +1,9 @@
+export const danger = {
+  '50': 'rgba(233 84 96 / 100%)',
+  '60': 'rgba(186 67 77 / 100%)',
+  '/10': 'rgba(233 84 96 / 10%)',
+  '/20': 'rgba(233 84 96 / 20%)',
+  '/30': 'rgba(233 84 96 / 30%)',
+  '/40': 'rgba(233 84 96 / 40%)',
+  '/5': 'rgba(233 84 96 / 5%)',
+}
--- a/packages/colors/src/index.ts
+++ b/packages/colors/src/index.ts
@ -0,0 +1,9 @@
+export { blur } from './blur'
+export { customisation } from './customisation'
+export { danger } from './danger'
+export { networks } from './networks'
+export { neutral } from './neutral'
+export { security } from './security'
+export { social } from './social'
+export { success } from './success'
+export { white } from './white'
--- a/packages/colors/src/networks.ts
+++ b/packages/colors/src/networks.ts
@ -0,0 +1,10 @@
+export const networks = {
+  arbitrum: 'rgba(107 213 240 / 100%)',
+  ethereum: 'rgba(117 142 235 / 100%)',
+  hermez: 'rgba(235 132 98 / 100%)',
+  optimism: 'rgba(231 110 110 / 100%)',
+  polygon: 'rgba(173 113 243 / 100%)',
+  unknow: 'rgba(238 242 245 / 100%)',
+  'x-dai': 'rgba(63 192 189 / 100%)',
+  'zk-sync': 'rgba(159 160 254 / 100%)',
+}
--- a/packages/colors/src/neutral.ts
+++ b/packages/colors/src/neutral.ts
@ -0,0 +1,24 @@
+export const neutral = {
+  '5': 'rgba(245 246 248 / 100%)',
+  '10': 'rgba(240 242 245 / 100%)',
+  '20': 'rgba(231 234 238 / 100%)',
+  '30': 'rgba(220 224 229 / 100%)',
+  '40': 'rgba(161 171 189 / 100%)',
+  '50': 'rgba(100 112 132 / 100%)',
+  '60': 'rgba(48 61 85 / 100%)',
+  '70': 'rgba(32 44 66 / 100%)',
+  '80': 'rgba(27 39 61 / 100%)',
+  '90': 'rgba(19 29 47 / 100%)',
+  '95': 'rgba(13 22 37 / 100%)',
+  '100': 'rgba(9 16 28 / 100%)',
+  '80/10': 'rgba(27 39 61 / 10%)',
+  '80/20': 'rgba(27 39 61 / 20%)',
+  '80/30': 'rgba(27 39 61 / 30%)',
+  '80/40': 'rgba(27 39 61 / 40%)',
+  '80/5': 'rgba(27 39 61 / 5%)',
+  '80/50': 'rgba(27 39 61 / 50%)',
+  '80/60': 'rgba(27 39 61 / 60%)',
+  '80/70': 'rgba(27 39 61 / 70%)',
+  '80/90': 'rgba(27 39 61 / 90%)',
+  '80/95': 'rgba(27 39 61 / 95%)',
+}
--- a/packages/colors/src/security.ts
+++ b/packages/colors/src/security.ts
@ -0,0 +1,34 @@
+export const security = {
+  'identicon-01': 'rgba(0 0 0 / 100%)',
+  'identicon-02': 'rgba(0 255 0 / 100%)',
+  'identicon-03': 'rgba(255 255 0 / 100%)',
+  'identicon-04': 'rgba(255 0 0 / 100%)',
+  'identicon-05': 'rgba(255 0 255 / 100%)',
+  'identicon-06': 'rgba(0 0 255 / 100%)',
+  'identicon-07': 'rgba(0 255 255 / 100%)',
+  'identicon-08': 'rgba(114 111 111 / 100%)',
+  'identicon-09': 'rgba(0 152 0 / 100%)',
+  'identicon-10': 'rgba(168 172 0 / 100%)',
+  'identicon-11': 'rgba(154 0 0 / 100%)',
+  'identicon-12': 'rgba(144 0 144 / 100%)',
+  'identicon-13': 'rgba(0 0 134 / 100%)',
+  'identicon-14': 'rgba(0 134 148 / 100%)',
+  'identicon-15': 'rgba(196 196 196 / 100%)',
+  'identicon-16': 'rgba(184 255 187 / 100%)',
+  'identicon-17': 'rgba(255 255 176 / 100%)',
+  'identicon-18': 'rgba(255 157 157 / 100%)',
+  'identicon-19': 'rgba(255 176 255 / 100%)',
+  'identicon-20': 'rgba(155 129 255 / 100%)',
+  'identicon-21': 'rgba(194 255 255 / 100%)',
+  'identicon-22': 'rgba(231 231 231 / 100%)',
+  'identicon-23': 'rgba(255 196 19 / 100%)',
+  'identicon-24': 'rgba(255 87 51 / 100%)',
+  'identicon-25': 'rgba(255 0 153 / 100%)',
+  'identicon-26': 'rgba(158 0 255 / 100%)',
+  'identicon-27': 'rgba(63 174 249 / 100%)',
+  'identicon-28': 'rgba(0 240 182 / 100%)',
+  'identicon-29': 'rgba(255 255 255 / 100%)',
+  'identicon-30': 'rgba(159 89 71 / 100%)',
+  'identicon-31': 'rgba(200 0 120 / 100%)',
+  'identicon-32': 'rgba(154 102 0 / 100%)',
+}
--- a/packages/colors/src/social.ts
+++ b/packages/colors/src/social.ts
@ -0,0 +1,19 @@
+export const social = {
+  facebook: 'rgba(24 119 242 / 100%)',
+  flickr: 'rgba(63 81 181 / 100%)',
+  github: 'rgba(0 0 0 / 100%)',
+  instagram: 'rgba(216 64 142 / 100%)',
+  lens: 'rgba(0 80 30 / 100%)',
+  linkedin: 'rgba(11 134 202 / 100%)',
+  mirror: 'rgba(62 126 247 / 100%)',
+  opensea: 'rgba(32 129 226 / 100%)',
+  pinterest: 'rgba(203 32 39 / 100%)',
+  rarible: 'rgba(254 218 3 / 100%)',
+  snapchat: 'rgba(255 252 0 / 100%)',
+  spotify: 'rgba(0 218 90 / 100%)',
+  'super-rare': 'rgba(0 0 0 / 100%)',
+  tumblr: 'rgba(55 71 79 / 100%)',
+  twitch: 'rgba(103 58 183 / 100%)',
+  twitter: 'rgba(3 169 244 / 100%)',
+  youtube: 'rgba(255 48 0 / 100%)',
+}
--- a/packages/colors/src/success.ts
+++ b/packages/colors/src/success.ts
@ -0,0 +1,9 @@
+export const success = {
+  '50': 'rgba(35 173 160 / 100%)',
+  '60': 'rgba(28 138 128 / 100%)',
+  '/10': 'rgba(35 173 160 / 10%)',
+  '/20': 'rgba(35 173 160 / 20%)',
+  '/30': 'rgba(35 173 160 / 30%)',
+  '/40': 'rgba(35 173 160 / 40%)',
+  '/5': 'rgba(35 173 160 / 10%)',
+}
--- a/packages/colors/src/white.ts
+++ b/packages/colors/src/white.ts
@ -0,0 +1,12 @@
+export const white = {
+  '5': 'rgba(255 255 255 / 5%)',
+  '10': 'rgba(255 255 255 / 10%)',
+  '20': 'rgba(255 255 255 / 20%)',
+  '30': 'rgba(255 255 255 / 30%)',
+  '40': 'rgba(255 255 255 / 40%)',
+  '50': 'rgba(255 255 255 / 50%)',
+  '60': 'rgba(255 255 255 / 60%)',
+  '80': 'rgba(255 255 255 / 80%)',
+  '90': 'rgba(255 255 255 / 90%)',
+  '100': 'rgba(255 255 255 / 100%)',
+}
--- a/packages/colors/tsconfig.json
+++ b/packages/colors/tsconfig.json
@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["./src"],
+
+  "compilerOptions": {
+    "module": "ES2022",
+    "outDir": "./dist",
+    "declarationDir": "./dist/types",
+    "resolveJsonModule": true
+  }
+}
--- a/packages/colors/vite.config.ts
+++ b/packages/colors/vite.config.ts
@ -0,0 +1,17 @@
+/// <reference types="vitest" />
+
+import { defineConfig } from 'vite'
+
+export default defineConfig(({ mode }) => {
+  return {
+    build: {
+      target: 'es2020',
+      lib: {
+        entry: 'src/index.ts',
+        formats: ['es', 'cjs'],
+      },
+      sourcemap: true,
+      emptyOutDir: mode === 'production',
+    },
+  }
+})
--- a/packages/components/.storybook/reset.css
+++ b/packages/components/.storybook/reset.css
@ -36,10 +36,7 @@
 */
 html,
 body {
-  height: 100vh;
-  width: 100vw;
-  overflow: hidden;
-  overscroll-behavior-y: none; /* not working on Safari */
+  min-height: 100%;
 }
 /*
  Typographic tweaks!
--- a/packages/components/package.json
+++ b/packages/components/package.json
@ -38,6 +38,7 @@
    "@radix-ui/react-toast": "^1.1.3",
    "@radix-ui/react-tooltip": "^1.0.5",
    "@status-im/icons": "*",
+    "@status-im/colors": "*",
    "@tamagui/animations-css": "1.11.1",
    "@tamagui/animations-react-native": "1.11.1",
    "@tamagui/core": "1.11.1",
--- a/packages/components/src/anchor-actions/index.tsx
+++ b/packages/components/src/anchor-actions/index.tsx
@ -6,7 +6,7 @@ import { DynamicButton } from '../dynamic-button'

 const AnchorActions = () => {
  return (
-    <Stack flexDirection="row" space={8}>
+    <Stack flexDirection="row" gap={8}>
      <DynamicButton type="mention" count={1} />
      <DynamicButton type="notification" count={0} />
    </Stack>
--- a/packages/components/src/author/author.tsx
+++ b/packages/components/src/author/author.tsx
@ -1,8 +1,4 @@
-import {
-  ContactIcon,
-  UntrustworthyIcon,
-  VerifiedIcon,
-} from '@status-im/icons/12'
+import { ContactIcon, UntrustworthyIcon, VerifiedIcon } from '@status-im/icons'
 import { XStack } from 'tamagui'

 import { Text } from '../text'
@ -22,7 +18,7 @@ const Author = (props: Props) => {
  const { name, size = 13, nickname, status, address, time } = props

  return (
-    <XStack space={8} alignItems="center">
+    <XStack gap={8} alignItems="center">
      <XStack gap={4} alignItems="center">
        <Text size={size} weight="semibold">
          {name}
@ -33,9 +29,11 @@ const Author = (props: Props) => {
            · {nickname}
          </Text>
        )}
-        {status === 'contact' && <ContactIcon />}
-        {status === 'verified' && <VerifiedIcon />}
-        {status === 'untrustworthy' && <UntrustworthyIcon />}
+        {status === 'contact' && <ContactIcon size={12} />}
+        {status === 'verified' && (
+          <VerifiedIcon size={12} color="$success-50" />
+        )}
+        {status === 'untrustworthy' && <UntrustworthyIcon size={12} />}
      </XStack>

      {(address || time) && (
--- a/packages/components/src/avatar/channel-avatar.tsx
+++ b/packages/components/src/avatar/channel-avatar.tsx
@ -1,4 +1,4 @@
-import { LockedIcon, UnlockedIcon } from '@status-im/icons/12'
+import { LockedIcon, UnlockedIcon } from '@status-im/icons'
 import { type ColorTokens, Stack, styled, Text } from '@tamagui/core'

 type Props = {
@ -23,7 +23,11 @@ const ChannelAvatar = (props: Props) => {
    <Base size={size} backgroundColor={background}>
      {lock !== 'none' && (
        <LockBase variant={size}>
-          {lock === 'locked' ? <LockedIcon /> : <UnlockedIcon />}
+          {lock === 'locked' ? (
+            <LockedIcon size={12} />
+          ) : (
+            <UnlockedIcon size={12} />
+          )}
        </LockBase>
      )}

--- a/packages/components/src/banner/banner.stories.tsx
+++ b/packages/components/src/banner/banner.stories.tsx
@ -1,4 +1,4 @@
-import { AlertIcon, PinIcon, RecentIcon } from '@status-im/icons/20'
+import { AlertIcon, PinIcon, RecentIcon } from '@status-im/icons'
 import { Stack } from '@tamagui/core'

 import { Banner } from './banner'
@ -18,7 +18,7 @@ type Story = StoryObj<typeof Banner>

 export const Full: Story = {
  args: {
-    icon: <PinIcon />,
+    icon: <PinIcon size={20} />,
    children: 'Banner message',
    count: 5,
  },
@ -33,7 +33,7 @@ export const NoIcon: Story = {

 export const NoCount: Story = {
  args: {
-    icon: <PinIcon />,
+    icon: <PinIcon size={20} />,
    children: 'Banner message',
  },
 }
@ -41,7 +41,7 @@ export const NoCount: Story = {
 export const NetworkStateConnecting: Story = {
  args: {
    backgroundColor: '$neutral-80-opa-5',
-    icon: <RecentIcon />,
+    icon: <RecentIcon size={20} />,
    children: 'Connecting...',
  },
 }
@ -49,7 +49,7 @@ export const NetworkStateConnecting: Story = {
 export const NetworkStateError: Story = {
  args: {
    backgroundColor: '$danger-50-opa-20',
-    icon: <AlertIcon />,
+    icon: <AlertIcon size={20} />,
    children: 'Network is down',
  },
 }
@ -58,17 +58,23 @@ export const AllVariants: Story = {
  args: {},
  render: () => (
    <Stack space>
-      <Banner icon={<PinIcon />} count={5}>
+      <Banner icon={<PinIcon size={20} />} count={5}>
        Banner message
      </Banner>
      <Banner count={5}>Banner message</Banner>
-      <Banner backgroundColor="$neutral-80-opa-5" icon={<RecentIcon />}>
+      <Banner
+        backgroundColor="$neutral-80-opa-5"
+        icon={<RecentIcon size={20} />}
+      >
        Connecting...
      </Banner>
-      <Banner backgroundColor="$danger-50-opa-20" icon={<AlertIcon />}>
+      <Banner
+        backgroundColor="$danger-50-opa-20"
+        icon={<AlertIcon size={20} />}
+      >
        Network is down
      </Banner>
-      <Banner icon={<PinIcon />}>Banner message</Banner>
+      <Banner icon={<PinIcon size={20} />}>Banner message</Banner>
    </Stack>
  ),
 }
--- a/packages/components/src/channel/channel.tsx
+++ b/packages/components/src/channel/channel.tsx
@ -1,6 +1,6 @@
 import { useState } from 'react'

-import { MutedIcon, NotificationIcon, OptionsIcon } from '@status-im/icons/20'
+import { MutedIcon, NotificationIcon, OptionsIcon } from '@status-im/icons'
 import { Stack, styled } from 'tamagui'

 import { ChannelAvatar } from '../avatar'
@ -47,20 +47,20 @@ const Channel = (props: Props) => {
      return (
        <DropdownMenu onOpenChange={setMenuOpen}>
          <Stack tag="button" width={20} height={20}>
-            <OptionsIcon color="$neutral-50" />
+            <OptionsIcon size={20} color="$neutral-50" />
          </Stack>

          {/* TODO: Find all options */}
          <DropdownMenu.Content align="start">
            <DropdownMenu.Item
-              icon={<MutedIcon />}
+              icon={<MutedIcon size={20} />}
              label="Mute channel"
              onSelect={() => {
                console.log('Mute channel')
              }}
            />
            <DropdownMenu.Item
-              icon={<MutedIcon />}
+              icon={<MutedIcon size={20} />}
              label="Mark as read"
              onSelect={() => {
                console.log('Mark as read')
@ -79,9 +79,9 @@ const Channel = (props: Props) => {
        return <Counter value={mentionCount} />
      }
      case 'notification':
-        return <NotificationIcon color="$neutral-40" />
+        return <NotificationIcon size={20} color="$neutral-40" />
      case 'muted':
-        return <MutedIcon color="$neutral-40" />
+        return <MutedIcon size={20} color="$neutral-40" />
    }
  }

--- a/packages/components/src/colors/colors.stories.mdx
+++ b/packages/components/src/colors/colors.stories.mdx
@ -0,0 +1,14 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks'
+import * as colors from '@status-im/colors'
+
+<Meta title="Colors/Overview" />
+
+<ColorPalette>
+  {Object.keys(colors).map(key => (
+    <ColorItem
+      title={key}
+      colors={colors[key]}
+      style={{ whiteSpace: 'nowrap' }}
+    />
+  ))}
+</ColorPalette>
--- a/packages/components/src/community/sidebar-community/sidebar-community.tsx
+++ b/packages/components/src/community/sidebar-community/sidebar-community.tsx
@ -1,8 +1,7 @@
 import { useState } from 'react'

 import * as Accordion from '@radix-ui/react-accordion'
-import { GroupIcon } from '@status-im/icons/16'
-import { CommunitiesIcon } from '@status-im/icons/20'
+import { CommunitiesIcon, MembersIcon } from '@status-im/icons'
 import { Stack } from '@tamagui/core'

 import { Avatar } from '../../avatar'
@ -76,12 +75,19 @@ const SidebarCommunity = (props: Props) => {
            </Text>
            <Text size={15}>{description}</Text>
          </Stack>
-          <Stack flexDirection="row" alignItems="center" mb={12} space={8}>
-            <GroupIcon color="$neutral-100" />
+          <Stack
+            flexDirection="row"
+            alignItems="center"
+            marginBottom={12}
+            gap={4}
+          >
+            <MembersIcon size={16} color="$neutral-50" />
            <Text size={15}>{membersCount}</Text>
          </Stack>

-          <Button icon={<CommunitiesIcon />}>Request to join community</Button>
+          <Button icon={<CommunitiesIcon size={20} />}>
+            Request to join community
+          </Button>
        </Stack>

        <Accordion.Root type="multiple" value={value} onValueChange={setValue}>
--- a/packages/components/src/community/topbar/topbar.tsx
+++ b/packages/components/src/community/topbar/topbar.tsx
@ -1,15 +1,15 @@
 import {
  ArrowLeftIcon,
  CommunitiesIcon,
-  DeleteIcon,
  DownloadIcon,
  LockedIcon,
  MembersIcon,
  MutedIcon,
  OptionsIcon,
  ShareIcon,
+  TrashIcon,
  UpToDateIcon,
-} from '@status-im/icons/20'
+} from '@status-im/icons'
 import { Stack, Text as RNText } from '@tamagui/core'
 import { BlurView } from 'expo-blur'

@ -64,7 +64,7 @@ const Topbar = (props: Props) => {
        <Stack flexDirection="row" alignItems="center" flexWrap="wrap">
          <Stack marginRight={12} $gtSm={{ display: 'none' }}>
            <IconButton
-              icon={<ArrowLeftIcon />}
+              icon={<ArrowLeftIcon size={20} />}
              onPress={() => goBack?.()}
              blur={blur}
            />
@ -76,7 +76,7 @@ const Topbar = (props: Props) => {
            {title}
          </Text>
          <Stack marginLeft={4}>
-            <LockedIcon color="$neutral-80-opa-40" />
+            <LockedIcon size={20} color="$neutral-80-opa-40" />
          </Stack>
          <Stack
            backgroundColor="$neutral-80-opa-10"
@ -101,7 +101,7 @@ const Topbar = (props: Props) => {
        >
          <Stack $sm={{ display: 'none' }}>
            <IconButton
-              icon={<MembersIcon />}
+              icon={<MembersIcon size={20} />}
              selected={showMembers}
              onPress={onMembersPress}
              blur={blur}
@ -109,31 +109,31 @@ const Topbar = (props: Props) => {
          </Stack>

          <DropdownMenu>
-            <IconButton icon={<OptionsIcon />} />
+            <IconButton icon={<OptionsIcon size={20} />} />

            <DropdownMenu.Content align="end" sideOffset={4}>
              <DropdownMenu.Item
-                icon={<CommunitiesIcon />}
+                icon={<CommunitiesIcon size={20} />}
                label="View channel details"
                onSelect={() => console.log('click')}
              />
              <DropdownMenu.Item
-                icon={<MutedIcon />}
+                icon={<MutedIcon size={20} />}
                label="Mute channel"
                onSelect={() => console.log('click')}
              />
              <DropdownMenu.Item
-                icon={<UpToDateIcon />}
+                icon={<UpToDateIcon size={20} />}
                label="Mark as read"
                onSelect={() => console.log('click')}
              />
              <DropdownMenu.Item
-                icon={<DownloadIcon />}
+                icon={<DownloadIcon size={20} />}
                label="Fetch messages"
                onSelect={() => console.log('click')}
              />
              <DropdownMenu.Item
-                icon={<ShareIcon />}
+                icon={<ShareIcon size={20} />}
                label="Share link to the channel"
                onSelect={() => console.log('click')}
              />
@ -141,7 +141,7 @@ const Topbar = (props: Props) => {
              <DropdownMenu.Separator />

              <DropdownMenu.Item
-                icon={<DeleteIcon />}
+                icon={<TrashIcon size={20} />}
                label="Clear history"
                onSelect={() => console.log('click')}
                danger
--- a/packages/components/src/composer/composer.tsx
+++ b/packages/components/src/composer/composer.tsx
@ -2,13 +2,13 @@ import { useState } from 'react'

 import { useImageUpload } from '@status-im/components/hooks'
 import {
-  ArrowUpIcon,
+  ArrowTopIcon,
  AudioIcon,
  ClearIcon,
  FormatIcon,
  ImageIcon,
  ReactionIcon,
-} from '@status-im/icons/20'
+} from '@status-im/icons'
 import { BlurView } from 'expo-blur'
 import { AnimatePresence, Stack, XStack } from 'tamagui'

@ -148,7 +148,7 @@ const Composer = (props: Props) => {
                      zIndex={1}
                    />
                    <Stack position="absolute" zIndex={2} width={20}>
-                      <ClearIcon color="$neutral-50" />
+                      <ClearIcon size={20} color="$neutral-50" />
                    </Stack>
                  </Stack>
                </Stack>
@ -162,23 +162,23 @@ const Composer = (props: Props) => {
          paddingTop={12}
          backgroundColor="transparent"
        >
-          <Stack space={12} flexDirection="row" backgroundColor="transparent">
+          <Stack gap={12} flexDirection="row" backgroundColor="transparent">
            <label htmlFor="image-uploader-input">
              <IconButton
                variant="outline"
-                icon={<ImageIcon />}
+                icon={<ImageIcon size={20} />}
                disabled={isImageUploadDisabled}
                blur={iconButtonBlurred}
              />
            </label>
            <IconButton
              variant="outline"
-              icon={<ReactionIcon />}
+              icon={<ReactionIcon size={20} />}
              blur={iconButtonBlurred}
            />
            <IconButton
              variant="outline"
-              icon={<FormatIcon />}
+              icon={<FormatIcon size={20} />}
              disabled
              blur={iconButtonBlurred}
            />
@ -187,13 +187,13 @@ const Composer = (props: Props) => {
            <Button
              variant="primary"
              shape="circle"
-              icon={<ArrowUpIcon />}
+              icon={<ArrowTopIcon size={20} />}
              size={32}
            />
          ) : (
            <Button
              variant="outline"
-              icon={<AudioIcon />}
+              icon={<AudioIcon size={20} />}
              size={32}
              // blurred={iconButtonBlurred}
            />
--- a/packages/components/src/context-tag/context-tag.stories.tsx
+++ b/packages/components/src/context-tag/context-tag.stories.tsx
@ -1,4 +1,4 @@
-import { PendingIcon } from '@status-im/icons/12'
+import { PendingIcon } from '@status-im/icons'
 import { Stack } from '@tamagui/core'

 import { ContextTag } from './context-tag'
@ -47,7 +47,7 @@ export const AllVariants: Story = {
        <ContextTag type="collectible" label="Collectible #123" />
        <ContextTag type="address" label="0x045...1ah" />
        <ContextTag
-          icon={<PendingIcon />}
+          icon={<PendingIcon size={12} />}
          type="icon"
          label="Context"
          outline
--- a/packages/components/src/context-tag/context-tag.tsx
+++ b/packages/components/src/context-tag/context-tag.tsx
@ -1,6 +1,6 @@
 import { cloneElement, Fragment } from 'react'

-import { ChevronRightIcon } from '@status-im/icons/16'
+import { ChevronRightIcon } from '@status-im/icons'
 import { styled } from '@tamagui/core'
 import { View } from 'react-native'

@ -73,7 +73,7 @@ const ContextTag = (props: Props) => {
          if (i !== 0) {
            return (
              <Fragment key={item}>
-                <ChevronRightIcon color="$neutral-50" />
+                <ChevronRightIcon size={16} color="$neutral-50" />
                <Label size={size}>{item}</Label>
              </Fragment>
            )
--- a/packages/components/src/dividers/divider-label/divider-label.tsx
+++ b/packages/components/src/dividers/divider-label/divider-label.tsx
@ -1,4 +1,4 @@
-import { ChevronRightIcon } from '@status-im/icons/20'
+import { ChevronRightIcon } from '@status-im/icons'
 import { Stack } from '@tamagui/core'

 import { Counter } from '../../counter'
@ -45,7 +45,7 @@ const DividerLabel = (props: Props) => {
                },
              ]}
            >
-              <ChevronRightIcon color="$neutral-50" />
+              <ChevronRightIcon size={20} color="$neutral-50" />
            </Stack>
          )}
          <Text size={13} color="$neutral-50" weight="medium">
--- a/packages/components/src/dropdown-menu/dropdown-menu.stories.tsx
+++ b/packages/components/src/dropdown-menu/dropdown-menu.stories.tsx
@ -1,12 +1,12 @@
 import {
  CopyIcon,
-  DeleteIcon,
  EditIcon,
  ForwardIcon,
  LinkIcon,
  PinIcon,
  ReplyIcon,
-} from '@status-im/icons/20'
+  TrashIcon,
+} from '@status-im/icons'
 import { action } from '@storybook/addon-actions'

 import { Button } from '../button'
@ -38,32 +38,32 @@ export const Default: Story = {

        <DropdownMenu.Content sideOffset={10}>
          <DropdownMenu.Item
-            icon={<EditIcon />}
+            icon={<EditIcon size={20} />}
            label="Edit message"
            onSelect={action('edit')}
          />
          <DropdownMenu.Item
-            icon={<ReplyIcon />}
+            icon={<ReplyIcon size={20} />}
            label="Reply"
            onSelect={action('reply')}
          />
          <DropdownMenu.Item
-            icon={<CopyIcon />}
+            icon={<CopyIcon size={20} />}
            label="Copy text"
            onSelect={action('copy')}
          />
          <DropdownMenu.Item
-            icon={<PinIcon />}
+            icon={<PinIcon size={20} />}
            label="Pin to the channel"
            onSelect={action('pin')}
          />
          <DropdownMenu.Item
-            icon={<ForwardIcon />}
+            icon={<ForwardIcon size={20} />}
            label="Forward"
            onSelect={action('forward')}
          />
          <DropdownMenu.Item
-            icon={<LinkIcon />}
+            icon={<LinkIcon size={20} />}
            label="Share link to message"
            onSelect={action('share')}
          />
@ -71,7 +71,7 @@ export const Default: Story = {
          <DropdownMenu.Separator />

          <DropdownMenu.Item
-            icon={<DeleteIcon />}
+            icon={<TrashIcon size={20} />}
            label="Delete message"
            danger
            onSelect={action('delete')}
--- a/packages/components/src/dynamic-button/dynamic-button.stories.tsx
+++ b/packages/components/src/dynamic-button/dynamic-button.stories.tsx
@ -15,7 +15,7 @@ type Story = StoryObj<typeof DynamicButton>

 export const Default: Story = {
  render: () => (
-    <XStack space={4}>
+    <XStack gap={4}>
      <DynamicButton type="mention" count={7} />
      <DynamicButton type="notification" count={8} />
      <DynamicButton type="notification" count={0} />
--- a/packages/components/src/dynamic-button/dynamic-button.tsx
+++ b/packages/components/src/dynamic-button/dynamic-button.tsx
@ -1,6 +1,6 @@
 import { forwardRef } from 'react'

-import { ArrowDownIcon, MentionIcon } from '@status-im/icons/12'
+import { ArrowDownIcon, MentionIcon } from '@status-im/icons'
 import { Stack, styled } from '@tamagui/core'

 import { Shadow } from '../shadow'
@ -31,13 +31,13 @@ const DynamicButton = (props: Props, ref: Ref<HTMLButtonElement>) => {
        type={type}
        iconOnly={showCount === false}
      >
-        {type === 'mention' && <MentionIcon color={color} />}
+        {type === 'mention' && <MentionIcon size={12} color={color} />}
        {showCount && (
          <Text size={13} weight="medium" color={color} wrap={false}>
            {count}
          </Text>
        )}
-        {type === 'notification' && <ArrowDownIcon color={color} />}
+        {type === 'notification' && <ArrowDownIcon size={12} color={color} />}
      </Button>
    </Shadow>
  )
--- a/packages/components/src/gap-messages/gap-messages.tsx
+++ b/packages/components/src/gap-messages/gap-messages.tsx
@ -1,4 +1,4 @@
-import { InfoIcon } from '@status-im/icons/16'
+import { InfoIcon } from '@status-im/icons'
 import { Stack, styled } from '@tamagui/core'

 import { Text } from '../text'
@ -54,7 +54,7 @@ const GapMessages = (props: Props) => {
        <Stack position="absolute" right={26} top={20}>
          <Tooltip side="bottom" sideOffset={4} content={<>{tooltipMessage}</>}>
            <Stack width={20}>
-              <InfoIcon color="$neutral-50" />
+              <InfoIcon size={16} color="$neutral-50" />
            </Stack>
          </Tooltip>
        </Stack>
--- a/packages/components/src/icon-button/icon-button.stories.tsx
+++ b/packages/components/src/icon-button/icon-button.stories.tsx
@ -1,4 +1,4 @@
-import { OptionsIcon } from '@status-im/icons/20'
+import { OptionsIcon } from '@status-im/icons'
 import { Stack } from 'tamagui'

 import { IconButton } from './icon-button'
@ -22,7 +22,7 @@ type Story = StoryObj<typeof IconButton>
 // More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
 export const Default: Story = {
  args: {
-    icon: <OptionsIcon />,
+    icon: <OptionsIcon size={20} />,
  },
  render: args => {
    return (
--- a/packages/components/src/icons/icons.stories.tsx
+++ b/packages/components/src/icons/icons.stories.tsx
@ -1,104 +1,98 @@
-/* eslint-disable eslint-comments/disable-enable-pair */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import * as icons12 from '@status-im/icons/12'
-import * as icons16 from '@status-im/icons/16'
-import * as icons20 from '@status-im/icons/20'
-import * as reactions from '@status-im/icons/reactions'
+import { createElement } from 'react'
+
+import * as Icon from '@status-im/icons'

 import { Text } from '../text'

-import type { IconProps } from '@status-im/icons/types'
+import type { IconProps } from '@status-im/icons'
 import type { Meta, StoryObj } from '@storybook/react'
-import type React from 'react'
+import type { ColorTokens } from 'tamagui'

-// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta: Meta = {
-  title: 'icons',
-  // component: Button,
-  argTypes: {},
+  title: 'Iconography/Overview',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/qLLuMLfpGxK9OfpIavwsmK/Iconset?node-id=3239-987&t=ZG8wYDswtYEV1Per-11',
+    },
+  },
 }

-type Story = StoryObj
+type Story = StoryObj<{
+  search: string
+  size: IconProps['size']
+  color: ColorTokens
+}>

 function unpascal(str: string) {
  return str.replace(/([A-Z])/g, ' $1').trim()
 }

-// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
-export const All: Story = {
-  args: {},
-  render: () => {
-    return (
-      <>
-        <div style={{ display: 'grid', gap: 12 }}>
-          {Object.keys(icons12).map(name => {
-            // @ts-ignore
-            // eslint-disable-next-line import/namespace
-            const Icon = icons12[name] as React.FunctionComponent<IconProps>
+export const Overview: Story = {
+  args: {
+    search: '',
+    size: 20,
+    // color: '$primary-50',
+  },

+  argTypes: {
+    search: {
+      control: 'text',
+    },
+    size: {
+      control: 'select',
+      options: [16, 20, 12],
+    },
+    color: {
+      control: 'select',
+      options: [],
+    },
+  },
+
+  render: args => {
+    return (
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+          gap: 20,
+        }}
+      >
+        {Object.entries(Icon)
+          .filter(icon => {
+            if (!args.search) return true
+            return icon[0].toLowerCase().includes(args.search.toLowerCase())
+          })
+          .map(([name, component]) => {
            return (
              <div
                key={name}
-                style={{ display: 'flex', flexDirection: 'column' }}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 10,
+                }}
              >
-                <Icon color="$background" />
-                <Text size={15}>{unpascal(name)}</Text>
+                <div
+                  style={{
+                    padding: 8,
+                    border: '1px solid #eee',
+                    borderRadius: 6,
+                  }}
+                >
+                  {createElement(component, {
+                    size: args.size,
+                    color: args.color,
+                  })}
+                </div>
+                <Text size={11} wrap={false}>
+                  {unpascal(name).replace(' Icon', '')}
+                </Text>
              </div>
            )
          })}
      </div>
-        <div style={{ display: 'grid', gap: 12 }}>
-          {Object.keys(icons16).map(name => {
-            // @ts-ignore
-            // eslint-disable-next-line import/namespace
-            const Icon = icons16[name] as React.FunctionComponent<IconProps>
-
-            return (
-              <div
-                key={name}
-                style={{ display: 'flex', flexDirection: 'column' }}
-              >
-                <Icon color="$background" />
-                <Text size={15}>{unpascal(name)}</Text>
-              </div>
-            )
-          })}
-        </div>
-        <div style={{ display: 'grid', gap: 12 }}>
-          {Object.keys(icons20).map(name => {
-            // @ts-ignore
-            // eslint-disable-next-line import/namespace
-            const Icon = icons20[name] as React.FunctionComponent<IconProps>
-
-            return (
-              <div
-                key={name}
-                style={{ display: 'flex', flexDirection: 'column' }}
-              >
-                <Icon color="$background" />
-                <Text size={15}>{unpascal(name)}</Text>
-              </div>
-            )
-          })}
-        </div>
-        <div style={{ display: 'grid', gap: 12 }}>
-          {Object.keys(reactions).map(name => {
-            // @ts-ignore
-            // eslint-disable-next-line import/namespace
-            const Icon = reactions[name] as React.FunctionComponent<IconProps>
-
-            return (
-              <div
-                key={name}
-                style={{ display: 'flex', flexDirection: 'column' }}
-              >
-                <Icon color="$background" />
-                <Text size={15}>{unpascal(name)}</Text>
-              </div>
-            )
-          })}
-        </div>
-      </>
    )
  },
 }
--- a/packages/components/src/information-box/information-box.stories.tsx
+++ b/packages/components/src/information-box/information-box.stories.tsx
@ -1,4 +1,4 @@
-import { InfoIcon } from '@status-im/icons/16'
+import { InfoIcon } from '@status-im/icons'

 import { InformationBox } from './information-box'

@ -43,7 +43,7 @@ export const Error: Story = {
 export const DefaultWithIcon: Story = {
  args: {
    message: 'This is a simple message with an info icon.',
-    icon: <InfoIcon />,
+    icon: <InfoIcon size={16} />,
  },
 }

@ -121,7 +121,7 @@ export const ErrorWithDismiss: Story = {
 export const DefaultWithIconAndDismiss: Story = {
  args: {
    message: 'This is a simple message with an info icon.',
-    icon: <InfoIcon />,
+    icon: <InfoIcon size={16} />,
    onClosePress: () => alert('dismissed'),
  },
 }
--- a/packages/components/src/information-box/information-box.tsx
+++ b/packages/components/src/information-box/information-box.tsx
@ -1,6 +1,6 @@
 import { cloneElement } from 'react'

-import { CloseIcon } from '@status-im/icons/12'
+import { CloseIcon } from '@status-im/icons'
 import { Stack, styled } from '@tamagui/core'

 import { Button } from '../button'
@ -90,7 +90,7 @@ const InformationBox = (props: Props) => {
            cursor="pointer"
            alignSelf="flex-start"
          >
-            <CloseIcon />
+            <CloseIcon size={12} />
          </Stack>
        ) : null}
      </Stack>
--- a/packages/components/src/messages/components/actions.tsx
+++ b/packages/components/src/messages/components/actions.tsx
@ -3,14 +3,14 @@ import { useEffect } from 'react'
 import {
  AddReactionIcon,
  CopyIcon,
-  DeleteIcon,
  EditIcon,
  ForwardIcon,
  LinkIcon,
  OptionsIcon,
  PinIcon,
  ReplyIcon,
-} from '@status-im/icons/20'
+  TrashIcon,
+} from '@status-im/icons'

 import { DropdownMenu } from '../../dropdown-menu'
 import { IconButton } from '../../icon-button'
@ -47,7 +47,7 @@ export const Actions = (props: Props) => {
      borderColor="$neutral-10"
      backgroundColor="$white-100"
      padding={2}
-      space={2}
+      gap={2}
      flexDirection="row"
      zIndex={10}
    >
@ -58,61 +58,69 @@ export const Actions = (props: Props) => {
        sideOffset={6}
        onOpenChange={onOpenChange}
      >
-        <IconButton variant="ghost" icon={<AddReactionIcon />} />
+        <IconButton variant="ghost" icon={<AddReactionIcon size={20} />} />
      </ReactionPopover>

      {/* REPLY */}
-      <IconButton variant="ghost" icon={<ReplyIcon />} onPress={onReplyPress} />
+      <IconButton
+        variant="ghost"
+        icon={<ReplyIcon size={20} />}
+        onPress={onReplyPress}
+      />

      {/* EDIT */}
-      <IconButton variant="ghost" icon={<EditIcon />} onPress={onEditPress} />
+      <IconButton
+        variant="ghost"
+        icon={<EditIcon size={20} />}
+        onPress={onEditPress}
+      />

      {/* DELETE */}
      {/* <IconButton
        variant="ghost"
-        icon={<DeleteIcon />}
+        icon={<TrashIcon size={20} />}
        onPress={onDeletePress}
      /> */}

      {/* OPTIONS MENU */}
      <DropdownMenu modal={false} onOpenChange={onOpenChange}>
-        <IconButton variant="ghost" icon={<OptionsIcon />} />
+        <IconButton variant="ghost" icon={<OptionsIcon size={20} />} />
        <DropdownMenu.Content align="end" sideOffset={10} zIndex={101}>
          <DropdownMenu.Item
-            icon={<EditIcon />}
+            icon={<EditIcon size={20} />}
            label="Edit message"
            onSelect={onEditPress}
          />
          <DropdownMenu.Item
-            icon={<ReplyIcon />}
+            icon={<ReplyIcon size={20} />}
            label="Reply"
            onSelect={onReplyPress}
          />
          <DropdownMenu.Item
-            icon={<CopyIcon />}
+            icon={<CopyIcon size={20} />}
            label="Copy text"
            onSelect={() => console.log('copy')}
          />
          {pinned ? (
            <DropdownMenu.Item
-              icon={<PinIcon />}
+              icon={<PinIcon size={20} />}
              label="Unpin message"
              onSelect={() => console.log('unpin')}
            />
          ) : (
            <DropdownMenu.Item
-              icon={<PinIcon />}
+              icon={<PinIcon size={20} />}
              label="Pin to the channel"
              onSelect={() => console.log('pin')}
            />
          )}
          <DropdownMenu.Item
-            icon={<ForwardIcon />}
+            icon={<ForwardIcon size={20} />}
            label="Forward"
            onSelect={() => console.log('forward')}
          />
          <DropdownMenu.Item
-            icon={<LinkIcon />}
+            icon={<LinkIcon size={20} />}
            label="Share link to message"
            onSelect={() => console.log('share')}
          />
@ -120,14 +128,14 @@ export const Actions = (props: Props) => {
          <DropdownMenu.Separator />

          <DropdownMenu.Item
-            icon={<DeleteIcon />}
+            icon={<TrashIcon size={20} />}
            label="Delete for me"
            danger
            onSelect={() => console.log('delete for me')}
          />

          <DropdownMenu.Item
-            icon={<DeleteIcon />}
+            icon={<TrashIcon size={20} />}
            label="Delete for everyone"
            danger
            onSelect={() => console.log('delete for everyone')}
--- a/packages/components/src/messages/components/reaction-popover.tsx
+++ b/packages/components/src/messages/components/reaction-popover.tsx
@ -5,7 +5,7 @@ import {
  SadIcon,
  ThumbsDownIcon,
  ThumbsUpIcon,
-} from '@status-im/icons/reactions'
+} from '@status-im/icons'
 import { XStack } from 'tamagui'

 import { IconButton } from '../../icon-button'
@ -21,12 +21,12 @@ type Props = Omit<PopoverProps, 'children'> & {
 }

 export const REACTIONS_ICONS = {
-  love: <LoveIcon />,
-  laugh: <LaughIcon />,
-  'thumbs-up': <ThumbsUpIcon />,
-  'thumbs-down': <ThumbsDownIcon />,
-  sad: <SadIcon />,
-  angry: <AngryIcon />,
+  love: <LoveIcon size={20} />,
+  laugh: <LaughIcon size={20} />,
+  'thumbs-up': <ThumbsUpIcon size={20} />,
+  'thumbs-down': <ThumbsDownIcon size={20} />,
+  sad: <SadIcon size={20} />,
+  angry: <AngryIcon size={20} />,
 } as const

 export const ReactionPopover = (props: Props) => {
@ -37,7 +37,7 @@ export const ReactionPopover = (props: Props) => {
      {children}

      <Popover.Content>
-        <XStack space={2} padding={2}>
+        <XStack gap={2} padding={2}>
          <IconButton
            icon={REACTIONS_ICONS['love']}
            variant="ghost"
--- a/packages/components/src/messages/components/reactions-dialog.tsx
+++ b/packages/components/src/messages/components/reactions-dialog.tsx
@ -67,7 +67,11 @@ export const ReactionsDialog = (props: Props) => {
            {Object.entries(reactions).map(([reaction, value]) => {
              const Icon = REACTIONS_ICONS[reaction as keyof ReactionsType]
              return (
-                <Tabs.Trigger key={reaction} value={reaction} icon={<Icon />}>
+                <Tabs.Trigger
+                  key={reaction}
+                  value={reaction}
+                  icon={<Icon size={20} />}
+                >
                  {value.size.toString()}
                </Tabs.Trigger>
              )
--- a/packages/components/src/messages/components/reactions.tsx
+++ b/packages/components/src/messages/components/reactions.tsx
@ -26,7 +26,7 @@ export const Reactions = (props: Props) => {
  }

  return (
-    <XStack space={6} flexWrap="wrap">
+    <XStack gap={6} flexWrap="wrap">
      {Object.keys(reactions).map(type => (
        <Reaction
          key={type}
--- a/packages/components/src/messages/index.tsx
+++ b/packages/components/src/messages/index.tsx
@ -68,7 +68,7 @@ export const Messages = (props: Props) => {
      />
      <SystemMessage
        type="deleted"
-        text="Messaged deleted for everyone"
+        text="Message deleted for everyone"
        timestamp="9:45"
      />
      <Message
@ -128,7 +128,7 @@ export const Messages = (props: Props) => {
      <SystemMessage
        state="landed"
        type="deleted"
-        text="Messaged deleted for you"
+        text="Message deleted for you"
        timestamp="10:12"
      />
      <Message
--- a/packages/components/src/messages/message.tsx
+++ b/packages/components/src/messages/message.tsx
@ -1,6 +1,6 @@
 import { useState } from 'react'

-import { PinIcon } from '@status-im/icons/16'
+import { PinIcon } from '@status-im/icons'
 import { Stack, styled, Unspaced, XStack, YStack } from 'tamagui'

 import { Author } from '../author'
@ -92,16 +92,16 @@ const Message = (props: MessageProps) => {
          alignItems="center"
          paddingLeft={40}
          paddingBottom={2}
-          space={2}
+          gap={2}
        >
-          <PinIcon color="$blue-50" />
+          <PinIcon size={16} color="$blue-50" />
          <Text size={11} weight="medium" color="$blue-50">
            Steve
          </Text>
        </Stack>
      )}

-      <XStack space={10}>
+      <XStack gap={10}>
        <Avatar
          size={32}
          src="https://images.unsplash.com/photo-1524638431109-93d95c968f03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=500&ixid=MnwxfDB8MXxyYW5kb218MHx8Z2lybHx8fHx8fDE2NzM4ODQ0NzU&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=500"
--- a/packages/components/src/pinned-message/pinned-message.tsx
+++ b/packages/components/src/pinned-message/pinned-message.tsx
@ -1,4 +1,4 @@
-import { CloseIcon, PinIcon } from '@status-im/icons/20'
+import { CloseIcon, PinIcon } from '@status-im/icons'
 import { Stack } from '@tamagui/core'
 import { Pressable } from 'react-native'

@ -21,7 +21,7 @@ const PinnedMessage = (props: Props) => {
  return (
    <Dialog>
      <Pressable>
-        <Banner count={messages.length} icon={<PinIcon />}>
+        <Banner count={messages.length} icon={<PinIcon size={20} />}>
          {messages[0].text}
        </Banner>
      </Pressable>
@ -29,7 +29,7 @@ const PinnedMessage = (props: Props) => {
      <Dialog.Content width={480} borderRadius="$16">
        <Stack padding={16} alignItems="flex-start">
          <Close asChild>
-            <Button variant="grey" size={32} icon={<CloseIcon />} />
+            <Button variant="grey" size={32} icon={<CloseIcon size={20} />} />
          </Close>
          <Stack paddingTop={24} gap={8} alignItems="flex-start">
            <Text size={27} weight="semibold">
--- a/packages/components/src/react-button/react-button.stories.tsx
+++ b/packages/components/src/react-button/react-button.stories.tsx
@ -10,7 +10,7 @@ const meta: Meta<typeof ReactButton> = {
  args: {},
  argTypes: {},
  render: args => (
-    <XStack space={4}>
+    <XStack gap={4}>
      <ReactButton {...args} type="laugh" />
      <ReactButton {...args} type="love" />
      <ReactButton {...args} type="sad" />
--- a/packages/components/src/react-button/react-button.tsx
+++ b/packages/components/src/react-button/react-button.tsx
@ -1,14 +1,14 @@
 import { forwardRef } from 'react'

-import { AddReactionIcon } from '@status-im/icons/20'
 import {
+  AddReactionIcon,
  AngryIcon,
  LaughIcon,
  LoveIcon,
  SadIcon,
  ThumbsDownIcon,
  ThumbsUpIcon,
-} from '@status-im/icons/reactions'
+} from '@status-im/icons'
 import { styled } from '@tamagui/core'
 import { Stack } from '@tamagui/web'

@ -51,7 +51,7 @@ const ReactButton = (props: Props, ref: Ref<HTMLButtonElement>) => {
      ref={ref}
      selected={selected}
    >
-      <Icon color="$neutral-100" />
+      <Icon size={20} color="$neutral-100" />
      {count && (
        <Text size={13} weight="medium" wrap={false}>
          {count}
--- a/packages/components/src/reply/reply.tsx
+++ b/packages/components/src/reply/reply.tsx
@ -1,5 +1,4 @@
-import { CloseIcon } from '@status-im/icons/12'
-import { SadIcon } from '@status-im/icons/16'
+import { CloseIcon, SadIcon } from '@status-im/icons'
 import { Path, Svg } from 'react-native-svg'
 import { Stack, Unspaced, XStack } from 'tamagui'

@ -20,7 +19,7 @@ const Reply = (props: Props) => {

  const content =
    type !== 'deleted' ? (
-      <XStack position="relative" space={4} alignItems="center" height={24}>
+      <XStack position="relative" gap={4} alignItems="center" height={24}>
        <Unspaced>
          <Stack position="absolute" left={-24} top={10}>
            <Connector />
@ -40,14 +39,14 @@ const Reply = (props: Props) => {
        </Text>
      </XStack>
    ) : (
-      <XStack position="relative" space={4} alignItems="center" height={24}>
+      <XStack position="relative" gap={4} alignItems="center" height={24}>
        <Unspaced>
          <Stack position="absolute" left={-24} top={10}>
            <Connector />
          </Stack>
        </Unspaced>

-        <SadIcon color="$neutral-50" />
+        <SadIcon size={16} color="$neutral-50" />

        <Text size={13} weight="medium" color="$neutral-50">
          Message deleted
@ -57,7 +56,7 @@ const Reply = (props: Props) => {

  return (
    <XStack
-      space={8}
+      gap={8}
      justifyContent="space-between"
      alignItems="center"
      paddingLeft={24}
@ -66,7 +65,7 @@ const Reply = (props: Props) => {

      {onClose && (
        <Button
-          icon={<CloseIcon />}
+          icon={<CloseIcon size={12} />}
          variant="outline"
          size={24}
          onPress={onClose}
@ -82,6 +81,7 @@ const Connector = () => (
    height="16"
    viewBox="0 0 16 16"
    fill="none"
+    // @ts-expect-error update react-native-svg types
    xmlns="http://www.w3.org/2000/svg"
  >
    <Path
--- a/packages/components/src/skeleton/topbar-skeleton.tsx
+++ b/packages/components/src/skeleton/topbar-skeleton.tsx
@ -35,7 +35,7 @@ const TopbarSkeleton = () => {
            />
          </Stack>
          <Stack
-            space={12}
+            gap={12}
            flexDirection="row"
            alignItems="center"
            justifyContent="flex-end"
--- a/packages/components/src/system-message/components/added-users-message-content.tsx
+++ b/packages/components/src/system-message/components/added-users-message-content.tsx
@ -1,4 +1,4 @@
-import { AddUserIcon } from '@status-im/icons/20'
+import { AddUserIcon } from '@status-im/icons'
 import { Stack } from 'tamagui'

 import { Avatar, IconAvatar } from '../../avatar'
@ -22,10 +22,10 @@ const AddedUsersMessageContent = (props: Props) => {
        backgroundColor={state === 'landed' ? '$transparent' : '$blue-50-opa-5'}
        color="$blue-50"
      >
-        <AddUserIcon />
+        <AddUserIcon size={20} />
      </IconAvatar>
-      <Stack flexDirection="row" space={2} flexBasis="max-content" flexGrow={1}>
-        <Stack flexDirection="row" space={4} alignItems="center" flexGrow={1}>
+      <Stack flexDirection="row" gap={2} flexBasis="max-content" flexGrow={1}>
+        <Stack flexDirection="row" gap={4} alignItems="center" flexGrow={1}>
          <Avatar size={16} src={user.src} />
          <Text size={13} weight="semibold">
            {user.name}
--- a/packages/components/src/system-message/components/deleted-message-content.tsx
+++ b/packages/components/src/system-message/components/deleted-message-content.tsx
@ -1,5 +1,4 @@
-import { TimeoutIcon } from '@status-im/icons/12'
-import { DeleteIcon } from '@status-im/icons/20'
+import { LoadingIcon, TrashIcon } from '@status-im/icons'
 import { Stack } from 'tamagui'

 import { IconAvatar } from '../../avatar'
@ -27,11 +26,11 @@ const DeletedMessageContent = (props: Props) => {
        backgroundColor={state === 'landed' ? '$transparent' : '$red-50-opa-5'}
        color="$neutral-100"
      >
-        <DeleteIcon />
+        <TrashIcon size={20} />
      </IconAvatar>
      <Stack
        flexDirection="row"
-        space={2}
+        gap={2}
        justifyContent="space-between"
        flexBasis="max-content"
        flexGrow={1}
@ -42,7 +41,7 @@ const DeletedMessageContent = (props: Props) => {
          justifyContent="space-between"
          flexGrow={1}
        >
-          <Stack flexDirection="row" space={8} alignItems="baseline">
+          <Stack flexDirection="row" gap={8} alignItems="baseline">
            <Text size={13}>{text}</Text>
            <Text size={11} color="$neutral-50">
              {timestamp}
@ -53,7 +52,7 @@ const DeletedMessageContent = (props: Props) => {
              onPress={action.onPress}
              variant="darkGrey"
              size={24}
-              icon={<TimeoutIcon />}
+              icon={<LoadingIcon size={12} />}
            >
              {action.label}
            </Button>
--- a/packages/components/src/system-message/components/pinned-message-content.tsx
+++ b/packages/components/src/system-message/components/pinned-message-content.tsx
@ -1,4 +1,4 @@
-import { PinIcon } from '@status-im/icons/20'
+import { PinIcon } from '@status-im/icons'
 import { Stack } from 'tamagui'

 import { Avatar, IconAvatar } from '../../avatar'
@ -31,15 +31,15 @@ const PinnedMessageContent = (props: Props) => {
        backgroundColor={state === 'landed' ? '$transparent' : '$blue-50-opa-5'}
        color="$neutral-100"
      >
-        <PinIcon />
+        <PinIcon size={20} />
      </IconAvatar>
      <Stack
        flexDirection="column"
-        space={2}
+        gap={2}
        flexBasis="max-content"
        flexGrow={1}
      >
-        <Stack flexDirection="row" space={4} alignItems="baseline">
+        <Stack flexDirection="row" gap={4} alignItems="baseline">
          <Text size={13} weight="semibold">
            {user.name}
          </Text>
@ -50,12 +50,12 @@ const PinnedMessageContent = (props: Props) => {
        </Stack>
        <Stack
          flexDirection="row"
-          space={4}
+          gap={4}
          justifyContent="space-between"
          flexGrow={1}
          flexBasis="max-content"
        >
-          <Stack flexDirection="row" space={4}>
+          <Stack flexDirection="row" gap={4}>
            <Avatar size={16} src={author.src} />
            <Text size={11} weight="semibold">
              {author.name}
--- a/packages/components/src/system-message/system-message.tsx
+++ b/packages/components/src/system-message/system-message.tsx
@ -48,7 +48,7 @@ const SystemMessage = (props: Props) => {
  const { state = 'default', timestamp, type } = props

  const renderMessage = () => {
-    switch (type) {
+    switch (props.type) {
      case 'pinned':
        return (
          <PinnedMessageContent
@ -82,7 +82,7 @@ const SystemMessage = (props: Props) => {
  return (
    <Base
      flexDirection="row"
-      space={8}
+      gap={8}
      padding={8}
      alignItems="center"
      state={
--- a/packages/components/src/tabs/tabs.stories.tsx
+++ b/packages/components/src/tabs/tabs.stories.tsx
@ -1,4 +1,4 @@
-import { PlaceholderIcon } from '@status-im/icons/20'
+import { PlaceholderIcon } from '@status-im/icons'

 import { Text } from '../text'
 import { Tabs } from './tabs'
@ -39,7 +39,7 @@ export const Default: Story = {
    },
  },
  render(args) {
-    const icon = args.icon ? <PlaceholderIcon /> : undefined
+    const icon = args.icon ? <PlaceholderIcon size={20} /> : undefined
    const count = args.count ? 8 : undefined

    return (
--- a/packages/components/src/toast/toast.stories.tsx
+++ b/packages/components/src/toast/toast.stories.tsx
@ -1,4 +1,4 @@
-import { PlaceholderIcon } from '@status-im/icons/20'
+import { PlaceholderIcon } from '@status-im/icons'
 import { Stack } from '@tamagui/core'

 import { Button } from '../button'
@ -51,7 +51,10 @@ export const AllVariants: Story = {
        message="You can only add 6 photos to your message"
      />
      <Toast type="positive" message="Great success! This means good stuff!" />
-      <Toast icon={<PlaceholderIcon />} message="Something happened" />
+      <Toast
+        icon={<PlaceholderIcon size={20} />}
+        message="Something happened"
+      />
      <Toast
        type="negative"
        action="Retry"
--- a/packages/components/src/toast/toast.tsx
+++ b/packages/components/src/toast/toast.tsx
@ -1,7 +1,7 @@
 import { cloneElement, forwardRef } from 'react'

 import { Action, Description } from '@radix-ui/react-toast'
-import { CorrectIcon, IncorrectIcon } from '@status-im/icons/20'
+import { CorrectIcon, IncorrectIcon } from '@status-im/icons'
 import { Stack, styled } from '@tamagui/core'

 import { Button } from '../button'
@ -30,10 +30,10 @@ const Toast = (props: Props) => {
    }

    if (props.type === 'positive') {
-      return <CorrectIcon />
+      return <CorrectIcon size={20} />
    }

-    return <IncorrectIcon />
+    return <IncorrectIcon size={20} />
  }

  return (
--- a/packages/icons/12/add-icon.tsx
+++ b/packages/icons/12/add-icon.tsx
@ -1,30 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5.45 6.55V10h1.1V6.55H10v-1.1H6.55V2h-1.1v3.45H2v1.1h3.45Z"
-        fill={color}
-      />
-    </Svg>
-  )
-}
-export default SvgAddIcon
--- a/packages/icons/12/add-reaction-icon.tsx
+++ b/packages/icons/12/add-reaction-icon.tsx
@ -1,36 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Circle, ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...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} />
-        <Path d="M4.068 7a2 2 0 0 0 3.864 0" stroke={color} strokeWidth={1.1} />
-        <Circle cx={4.75} cy={4.75} r={0.75} fill={color} />
-        <Circle cx={7.25} cy={4.75} r={0.75} fill={color} />
-        <Path d="M8 2.5h4M10 .5v4" stroke={color} strokeWidth={1.1} />
-      </G>
-      <Defs>
-        <ClipPath id="add-reaction-icon_svg__a">
-          <Path fill="#fff" d="M0 0h12v12H0z" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-export default SvgAddReactionIcon
--- a/packages/icons/12/alert-icon.tsx
+++ b/packages/icons/12/alert-icon.tsx
@ -1,26 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Circle, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...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} />
-    </Svg>
-  )
-}
-export default SvgAlertIcon
--- a/packages/icons/12/arrow-down-icon.tsx
+++ b/packages/icons/12/arrow-down-icon.tsx
@ -1,30 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6.55 8.672V2h-1.1v6.672l-2.561-2.56-.778.777 3.5 3.5.389.389.389-.39 3.5-3.5-.778-.777L6.55 8.672Z"
-        fill={color}
-      />
-    </Svg>
-  )
-}
-export default SvgArrowDownIcon
--- a/packages/icons/12/arrow-right-icon.tsx
+++ b/packages/icons/12/arrow-right-icon.tsx
@ -1,30 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10.389 6.389 10.778 6l-.39-.389-3.5-3.5-.777.778L8.672 5.45H2v1.1h6.672l-2.56 2.561.777.778 3.5-3.5Z"
-        fill={color}
-      />
-    </Svg>
-  )
-}
-export default SvgArrowRightIcon
--- a/packages/icons/12/arrow-up-icon.tsx
+++ b/packages/icons/12/arrow-up-icon.tsx
@ -1,30 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5.611 1.611 6 1.222l.389.39 3.5 3.5-.778.777L6.55 3.328V10h-1.1V3.328l-2.561 2.56-.778-.777 3.5-3.5Z"
-        fill={color}
-      />
-    </Svg>
-  )
-}
-export default SvgArrowUpIcon
--- a/packages/icons/12/block-icon.tsx
+++ b/packages/icons/12/block-icon.tsx
@ -1,37 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...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="#E65F5C"
-        />
-      </G>
-      <Defs>
-        <ClipPath id="block-icon_svg__a">
-          <Path fill="#fff" d="M0 0h12v12H0z" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-export default SvgBlockIcon
--- a/packages/icons/12/camera-icon.tsx
+++ b/packages/icons/12/camera-icon.tsx
@ -1,33 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Circle, ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...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" />
-        <Circle cx={6} cy={6.5} r={2} />
-      </G>
-      <Defs>
-        <ClipPath id="camera-icon_svg__a">
-          <Path fill="#fff" d="M0 0h12v12H0z" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-export default SvgCameraIcon
--- a/packages/icons/12/cards-icon.tsx
+++ b/packages/icons/12/cards-icon.tsx
@ -1,33 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...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" />
-        <Path d="M1 7.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C2.52 4 3.08 4 4.2 4h3.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C11 5.52 11 6.08 11 7.2v.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.8v-.6Z" />
-      </G>
-      <Defs>
-        <ClipPath id="cards-icon_svg__a">
-          <Path fill="#fff" d="M0 0h12v12H0z" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-export default SvgCardsIcon
--- a/packages/icons/12/check-icon.tsx
+++ b/packages/icons/12/check-icon.tsx
@ -1,26 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Circle, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...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} />
-    </Svg>
-  )
-}
-export default SvgCheckIcon
--- a/packages/icons/12/check-large-icon.tsx
+++ b/packages/icons/12/check-large-icon.tsx
@ -1,25 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Path d="m1.5 6 3 3 6-7" stroke={color} strokeWidth={1.3} />
-    </Svg>
-  )
-}
-export default SvgCheckLargeIcon
--- a/packages/icons/12/chevron-bottom-icon.tsx
+++ b/packages/icons/12/chevron-bottom-icon.tsx
@ -1,25 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Path d="m3 4.5 3 3 3-3" stroke={color} strokeWidth={1.1} />
-    </Svg>
-  )
-}
-export default SvgChevronBottomIcon
--- a/packages/icons/12/chevron-left-icon.tsx
+++ b/packages/icons/12/chevron-left-icon.tsx
@ -1,25 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Path d="m7.5 3-3 3 3 3" stroke={color} strokeWidth={1.1} />
-    </Svg>
-  )
-}
-export default SvgChevronLeftIcon
--- a/packages/icons/12/chevron-right-icon.tsx
+++ b/packages/icons/12/chevron-right-icon.tsx
@ -1,25 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Path d="m4.5 9 3-3-3-3" stroke={color} strokeWidth={1.1} />
-    </Svg>
-  )
-}
-export default SvgChevronRightIcon
--- a/packages/icons/12/chevron-top-icon.tsx
+++ b/packages/icons/12/chevron-top-icon.tsx
@ -1,25 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Path d="m9 7.5-3-3-3 3" stroke={color} strokeWidth={1.1} />
-    </Svg>
-  )
-}
-export default SvgChevronTopIcon
--- a/packages/icons/12/close-icon.tsx
+++ b/packages/icons/12/close-icon.tsx
@ -1,29 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Path
-        d="M2.5 9.5 6 6 2.5 2.5M9.5 9.5 6 6l3.5-3.5"
-        stroke={color}
-        strokeWidth={1.1}
-      />
-    </Svg>
-  )
-}
-export default SvgCloseIcon
--- a/packages/icons/12/color-icon.tsx
+++ b/packages/icons/12/color-icon.tsx
@ -1,31 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...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"
-        stroke={color}
-        strokeWidth={1.1}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </Svg>
-  )
-}
-export default SvgColorIcon
--- a/packages/icons/12/communities-icon.tsx
+++ b/packages/icons/12/communities-icon.tsx
@ -1,37 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <G clipPath="url(#communities-icon_svg__a)">
-        <Path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M1.55 10.09a8.54 8.54 0 0 1 8.54-8.54c.2 0 .36.16.36.36v1.792a6.686 6.686 0 0 0-6.748 6.748H1.909a.36.36 0 0 1-.36-.36Zm3.314.36h2.011c.389 0 .461-.006.506-.02a.45.45 0 0 0 .3-.3c.013-.044.019-.116.019-.505V9.56c0-.283 0-.537.067-.76A1.55 1.55 0 0 1 8.8 7.767c.223-.068.477-.067.76-.067h.065c.389 0 .461-.006.506-.02a.45.45 0 0 0 .3-.3c.013-.044.019-.116.019-.505V4.864a.064.064 0 0 0-.064-.064A5.586 5.586 0 0 0 4.8 10.386c0 .036.028.064.064.064Zm6.686-4.2v.69c0 .283 0 .537-.067.76a1.55 1.55 0 0 1-1.033 1.033c-.223.068-.477.067-.76.067h-.065c-.389 0-.461.006-.506.02a.45.45 0 0 0-.3.3c-.013.044-.02.116-.02.505l.001.065c0 .283 0 .537-.067.76A1.55 1.55 0 0 1 7.7 11.483c-.223.068-.477.067-.76.067H1.91A1.46 1.46 0 0 1 .45 10.09 9.64 9.64 0 0 1 10.09.45c.807 0 1.46.653 1.46 1.46v4.34Z"
-          fill={color}
-        />
-      </G>
-      <Defs>
-        <ClipPath id="communities-icon_svg__a">
-          <Path fill="#fff" d="M0 0h12v12H0z" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-export default SvgCommunitiesIcon
--- a/packages/icons/12/contact-icon.tsx
+++ b/packages/icons/12/contact-icon.tsx
@ -1,32 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Circle, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <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="#4360DF" strokeWidth={1.5} />
-      <Circle cx={6} cy={4.5} r={1.5} stroke="#fff" strokeLinejoin="round" />
-    </Svg>
-  )
-}
-export default SvgContactIcon
--- a/packages/icons/12/copy-icon.tsx
+++ b/packages/icons/12/copy-icon.tsx
@ -1,40 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <G clipPath="url(#copy-icon_svg__a)" strokeWidth={1.1}>
-        <Path
-          d="M8 3a2 2 0 0 0-2-2H4.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C1 2.52 1 3.08 1 4.2V6a2 2 0 0 0 2 2"
-          stroke="#1B273D"
-          strokeOpacity={0.3}
-        />
-        <Path
-          d="M4 7.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C5.52 4 6.08 4 7.2 4h.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C11 5.52 11 6.08 11 7.2v.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C9.48 11 8.92 11 7.8 11h-.6c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C4 9.48 4 8.92 4 7.8v-.6Z"
-          stroke={color}
-        />
-      </G>
-      <Defs>
-        <ClipPath id="copy-icon_svg__a">
-          <Path fill="#fff" d="M0 0h12v12H0z" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-export default SvgCopyIcon
--- a/packages/icons/12/delivered-icon.tsx
+++ b/packages/icons/12/delivered-icon.tsx
@ -1,30 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="m5.653 7.145 2.85-3.483-1.006-.824-4.045 4.945L1.46 5.79l-.92.92 2.5 2.5.508.507.455-.555.826-1.01 1.243 1.087.506.443.425-.52 4.5-5.5-1.006-.824-4.075 4.98-.769-.673Z"
-        fill={color}
-      />
-    </Svg>
-  )
-}
-export default SvgDeliveredIcon
--- a/packages/icons/12/dropdown-icon.tsx
+++ b/packages/icons/12/dropdown-icon.tsx
@ -1,33 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Circle, ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <G clipPath="url(#dropdown-icon_svg__a)">
-        <Circle cx={6} cy={6} r={6} fill="#E7EAEE" />
-        <Path d="m3 4.75 3 3 3-3" stroke={color} strokeWidth={1.1} />
-      </G>
-      <Defs>
-        <ClipPath id="dropdown-icon_svg__a">
-          <Path fill="#fff" d="M0 0h12v12H0z" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-export default SvgDropdownIcon
--- a/packages/icons/12/edit-icon.tsx
+++ b/packages/icons/12/edit-icon.tsx
@ -1,30 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...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"
-        stroke={color}
-        strokeWidth={1.1}
-        strokeLinejoin="round"
-      />
-    </Svg>
-  )
-}
-export default SvgEditIcon
--- a/packages/icons/12/gas-icon.tsx
+++ b/packages/icons/12/gas-icon.tsx
@ -1,39 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <G clipPath="url(#gas-icon_svg__a)" strokeWidth={1.1}>
-        <Path
-          d="M7.5 10.5v-6c0-.932 0-1.398-.152-1.765a2 2 0 0 0-1.083-1.083C5.898 1.5 5.432 1.5 4.5 1.5c-.932 0-1.398 0-1.765.152a2 2 0 0 0-1.083 1.083C1.5 3.102 1.5 3.568 1.5 4.5v6h6Z"
-          stroke={color}
-          strokeLinejoin="round"
-        />
-        <Path d="M7.5 7.5H9a1 1 0 0 0 1-1v-1M10 2.5v2" stroke="#000" />
-        <Path stroke={color} strokeLinejoin="round" d="M9.5 4.5h1v1h-1z" />
-        <Path d="M1.5 4.5h6" stroke="#000" />
-      </G>
-      <Defs>
-        <ClipPath id="gas-icon_svg__a">
-          <Path fill="#fff" d="M0 0h12v12H0z" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-export default SvgGasIcon
--- a/packages/icons/12/hold-icon.tsx
+++ b/packages/icons/12/hold-icon.tsx
@ -1,33 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Circle, ClipPath, Defs, G, Path, Rect, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...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="#fff" strokeWidth={1.1} />
-      </G>
-      <Defs>
-        <ClipPath id="hold-icon_svg__a">
-          <Rect width={12} height={12} rx={6} fill="#fff" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-export default SvgHoldIcon
--- a/packages/icons/12/index.ts
+++ b/packages/icons/12/index.ts
@ -1,56 +0,0 @@
-export { default as AddIcon } from './add-icon'
-export { default as AddReactionIcon } from './add-reaction-icon'
-export { default as AlertIcon } from './alert-icon'
-export { default as ArrowDownIcon } from './arrow-down-icon'
-export { default as ArrowRightIcon } from './arrow-right-icon'
-export { default as ArrowUpIcon } from './arrow-up-icon'
-export { default as BlockIcon } from './block-icon'
-export { default as CameraIcon } from './camera-icon'
-export { default as CardsIcon } from './cards-icon'
-export { default as CheckIcon } from './check-icon'
-export { default as CheckLargeIcon } from './check-large-icon'
-export { default as ChevronBottomIcon } from './chevron-bottom-icon'
-export { default as ChevronLeftIcon } from './chevron-left-icon'
-export { default as ChevronRightIcon } from './chevron-right-icon'
-export { default as ChevronTopIcon } from './chevron-top-icon'
-export { default as CloseIcon } from './close-icon'
-export { default as ColorIcon } from './color-icon'
-export { default as CommunitiesIcon } from './communities-icon'
-export { default as ContactIcon } from './contact-icon'
-export { default as CopyIcon } from './copy-icon'
-export { default as DeliveredIcon } from './delivered-icon'
-export { default as DropdownIcon } from './dropdown-icon'
-export { default as EditIcon } from './edit-icon'
-export { default as GasIcon } from './gas-icon'
-export { default as HoldIcon } from './hold-icon'
-export { default as Info1Icon } from './info-1-icon'
-export { default as InfoIcon } from './info-icon'
-export { default as JumpToIcon } from './jump-to-icon'
-export { default as LightningIcon } from './lightning-icon'
-export { default as ListIcon } from './list-icon'
-export { default as LoadingIcon } from './loading-icon'
-export { default as LockedIcon } from './locked-icon'
-export { default as MentionIcon } from './mention-icon'
-export { default as MoreIcon } from './more-icon'
-export { default as NegativeIcon } from './negative-icon'
-export { default as NotificationIcon } from './notification-icon'
-export { default as PauseIcon } from './pause-icon'
-export { default as PendingIcon } from './pending-icon'
-export { default as PickIcon } from './pick-icon'
-export { default as PlaceholderIcon } from './placeholder-icon'
-export { default as PlayIcon } from './play-icon'
-export { default as PositiveIcon } from './positive-icon'
-export { default as ProgressIcon } from './progress-icon'
-export { default as PullupIcon } from './pullup-icon'
-export { default as RemoveIcon } from './remove-icon'
-export { default as SearchIcon } from './search-icon'
-export { default as SendMessageIcon } from './send-message-icon'
-export { default as SentIcon } from './sent-icon'
-export { default as TimeoutIcon } from './timeout-icon'
-export { default as TotalMembersIcon } from './total-members-icon'
-export { default as TrashIcon } from './trash-icon'
-export { default as UnlockedIcon } from './unlocked-icon'
-export { default as UntrustworthyIcon } from './untrustworthy-icon'
-export { default as Verified1Icon } from './verified-1-icon'
-export { default as VerifiedIcon } from './verified-icon'
-export { default as WhistleIcon } from './whistle-icon'
--- a/packages/icons/12/info-1-icon.tsx
+++ b/packages/icons/12/info-1-icon.tsx
@ -1,30 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 1A5 5 0 1 0 6 1a5 5 0 0 0 0 10Zm-.5-2.5v-3h1v3h-1Zm0-5v1h1v-1h-1Z"
-        fill={color}
-      />
-    </Svg>
-  )
-}
-export default SvgInfo1Icon
--- a/packages/icons/12/info-icon.tsx
+++ b/packages/icons/12/info-icon.tsx
@ -1,26 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Circle, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Circle cx={6} cy={6} r={5} fill="#4360DF" />
-      <Path d="M6 5v4M6 3v1" stroke="#fff" strokeWidth={1.1} />
-    </Svg>
-  )
-}
-export default SvgInfoIcon
--- a/packages/icons/12/jump-to-icon.tsx
+++ b/packages/icons/12/jump-to-icon.tsx
@ -1,30 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Path d="M4.575 2.525h4.95v4.95" stroke={color} strokeWidth={1.1} />
-      <Path
-        d="M9.5 3A7.578 7.578 0 0 0 5 9.924V10"
-        stroke={color}
-        strokeWidth={1.1}
-      />
-    </Svg>
-  )
-}
-export default SvgJumpToIcon
--- a/packages/icons/12/lightning-icon.tsx
+++ b/packages/icons/12/lightning-icon.tsx
@ -1,30 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Path
-        d="M7 1.5V6h2.5L5 12.5v-5H2.5l4.5-6Z"
-        stroke={color}
-        strokeWidth={1.1}
-        strokeLinejoin="round"
-      />
-    </Svg>
-  )
-}
-export default SvgLightningIcon
--- a/packages/icons/12/list-icon.tsx
+++ b/packages/icons/12/list-icon.tsx
@ -1,32 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...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" />
-      </G>
-      <Defs>
-        <ClipPath id="list-icon_svg__a">
-          <Path fill="#fff" d="M0 0h12v12H0z" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-export default SvgListIcon
--- a/packages/icons/12/loading-icon.tsx
+++ b/packages/icons/12/loading-icon.tsx
@ -1,59 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import {
-  ClipPath,
-  Defs,
-  G,
-  LinearGradient,
-  Path,
-  Stop,
-  Svg,
-} from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <G clipPath="url(#loading-icon_svg__a)">
-        <Path
-          d="M6 .95a.55.55 0 1 1 0 1.1V.95ZM2.05 6A3.95 3.95 0 0 0 6 9.95v1.1A5.05 5.05 0 0 1 .95 6h1.1ZM6 2.05A3.95 3.95 0 0 0 2.05 6H.95A5.05 5.05 0 0 1 6 .95v1.1Z"
-          fill={color}
-        />
-        <Path
-          d="M6 1.5a4.5 4.5 0 0 1 0 9"
-          stroke="url(#loading-icon_svg__b)"
-          strokeWidth={1.1}
-        />
-      </G>
-      <Defs>
-        <LinearGradient
-          id="loading-icon_svg__b"
-          x1={5.625}
-          y1={10.5}
-          x2={2.625}
-          y2={5.25}
-          gradientUnits="userSpaceOnUse"
-        >
-          <Stop stopColor={color} />
-          <Stop offset={1} stopColor={color} stopOpacity={0} />
-        </LinearGradient>
-        <ClipPath id="loading-icon_svg__a">
-          <Path fill="#fff" d="M0 0h12v12H0z" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-export default SvgLoadingIcon
--- a/packages/icons/12/locked-icon.tsx
+++ b/packages/icons/12/locked-icon.tsx
@ -1,29 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...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"
-        stroke={color}
-        strokeWidth={1.1}
-      />
-    </Svg>
-  )
-}
-export default SvgLockedIcon
--- a/packages/icons/12/mention-icon.tsx
+++ b/packages/icons/12/mention-icon.tsx
@ -1,34 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Circle, ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...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" />
-        <Circle cx={6} cy={6} r={2} />
-        <Path d="M8 3.5v3.456C8 7.809 8.691 8.5 9.544 8.5c.709 0 1.326-.485 1.391-1.19C11 6.609 11 6 11 6" />
-      </G>
-      <Defs>
-        <ClipPath id="mention-icon_svg__a">
-          <Path fill="#fff" d="M0 0h12v12H0z" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-export default SvgMentionIcon
--- a/packages/icons/12/more-icon.tsx
+++ b/packages/icons/12/more-icon.tsx
@ -1,27 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Circle, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Circle cx={2.5} cy={6} r={1} fill={color} />
-      <Circle cx={6} cy={6} r={1} fill={color} />
-      <Circle cx={9.5} cy={6} r={1} fill={color} />
-    </Svg>
-  )
-}
-export default SvgMoreIcon
--- a/packages/icons/12/negative-icon.tsx
+++ b/packages/icons/12/negative-icon.tsx
@ -1,33 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Circle, ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <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>
-      <Defs>
-        <ClipPath id="negative-icon_svg__a">
-          <Path fill="#fff" d="M0 0h12v12H0z" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-export default SvgNegativeIcon
--- a/packages/icons/12/notification-icon.tsx
+++ b/packages/icons/12/notification-icon.tsx
@ -1,25 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Circle, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Circle cx={6} cy={6} r={4} fill="#4360DF" />
-    </Svg>
-  )
-}
-export default SvgNotificationIcon
--- a/packages/icons/12/pause-icon.tsx
+++ b/packages/icons/12/pause-icon.tsx
@ -1,25 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Rect, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Rect x={2} y={2} width={8} height={8} rx={2} fill={color} />
-    </Svg>
-  )
-}
-export default SvgPauseIcon
--- a/packages/icons/12/pending-icon.tsx
+++ b/packages/icons/12/pending-icon.tsx
@ -1,27 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Circle, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Circle cx={3} cy={6} r={1} fill="#000" fillOpacity={0.4} />
-      <Circle cx={6} cy={6} r={1} fill="#1B273D" fillOpacity={0.3} />
-      <Circle cx={9} cy={6} r={1} fill="#000" fillOpacity={0.2} />
-    </Svg>
-  )
-}
-export default SvgPendingIcon
--- a/packages/icons/12/pick-icon.tsx
+++ b/packages/icons/12/pick-icon.tsx
@ -1,37 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <G clipPath="url(#pick-icon_svg__a)">
-        <Path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="m9.642 1.793-.015-.015c-.186-.185-.348-.347-.492-.47A1.577 1.577 0 0 0 8.6.99a1.55 1.55 0 0 0-.958 0c-.21.069-.38.187-.534.318-.145.123-.307.285-.492.47l-.015.015-.32.32a1.55 1.55 0 0 0-1.113-.062c-.211.068-.381.187-.535.317-.145.123-.307.285-.492.47l-.015.015-.283.283a.55.55 0 0 0 0 .778l.318.318L2.544 5.85l-.03.03a2.404 2.404 0 0 0-.371.431 1.55 1.55 0 0 0-.186.448c-.043.18-.043.366-.043.568v2.209c0 .303.247.55.55.55h2.209c.202 0 .387 0 .567-.043.159-.038.31-.1.449-.186.158-.097.288-.228.43-.37l.031-.031 1.618-1.618.318.319a.55.55 0 0 0 .778 0l.283-.283.014-.015c.186-.185.348-.347.47-.492.131-.154.25-.324.318-.534a1.55 1.55 0 0 0-.062-1.114l.32-.32.015-.015a8.93 8.93 0 0 0 .47-.492c.13-.154.25-.324.318-.534a1.55 1.55 0 0 0 0-.958 1.575 1.575 0 0 0-.318-.535c-.123-.144-.285-.306-.47-.492l-.015-.015-.565-.565Zm-.46 3.076.247-.248c.205-.204.334-.335.425-.441a.53.53 0 0 0 .11-.162.45.45 0 0 0 0-.278.53.53 0 0 0-.11-.163 8.468 8.468 0 0 0-.425-.44l-.565-.566a8.463 8.463 0 0 0-.441-.425.53.53 0 0 0-.163-.11.45.45 0 0 0-.278 0 .53.53 0 0 0-.162.11c-.107.09-.237.22-.441.425l-.248.247.021.02.015.015 1.98 1.98.014.015.021.02ZM6.99 7.06 4.94 5.01 3.321 6.627c-.191.192-.221.227-.241.26a.45.45 0 0 0-.054.13c-.009.036-.013.082-.013.353v1.616H4.63c.27 0 .317-.004.354-.013a.45.45 0 0 0 .13-.054c.032-.02.067-.05.259-.241L6.99 7.061ZM5.785 3.097a.53.53 0 0 1 .163.11c.106.09.236.22.44.424l1.98 1.98c.205.205.335.335.425.441a.53.53 0 0 1 .11.163.45.45 0 0 1 0 .278.53.53 0 0 1-.11.162c-.073.087-.173.19-.318.335L5.01 3.525c.146-.145.248-.245.335-.318a.53.53 0 0 1 .162-.11.45.45 0 0 1 .278 0Z"
-          fill={color}
-        />
-      </G>
-      <Defs>
-        <ClipPath id="pick-icon_svg__a">
-          <Path fill="#fff" d="M0 0h12v12H0z" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-export default SvgPickIcon
--- a/packages/icons/12/placeholder-icon.tsx
+++ b/packages/icons/12/placeholder-icon.tsx
@ -1,30 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6 2c-.924 0-1.776.314-2.453.84L6 5.293 8.453 2.84A3.983 3.983 0 0 0 6 2Zm3.16 1.547L6.707 6 9.16 8.453C9.686 7.776 10 6.924 10 6c0-.924-.314-1.776-.84-2.453ZM5.293 6 2.84 3.547A3.983 3.983 0 0 0 2 6c0 .924.314 1.775.84 2.453L5.293 6ZM3.547 9.16 6 6.707 8.453 9.16A3.983 3.983 0 0 1 6 10a3.983 3.983 0 0 1-2.453-.84ZM1 6a5 5 0 1 1 10 0A5 5 0 0 1 1 6Z"
-        fill={color}
-      />
-    </Svg>
-  )
-}
-export default SvgPlaceholderIcon
--- a/packages/icons/12/play-icon.tsx
+++ b/packages/icons/12/play-icon.tsx
@ -1,28 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...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"
-        fill={color}
-      />
-    </Svg>
-  )
-}
-export default SvgPlayIcon
--- a/packages/icons/12/positive-icon.tsx
+++ b/packages/icons/12/positive-icon.tsx
@ -1,33 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { Circle, ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...props}
-    >
-      <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>
-      <Defs>
-        <ClipPath id="positive-icon_svg__a">
-          <Path fill="#fff" d="M0 0h12v12H0z" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-export default SvgPositiveIcon
--- a/packages/icons/12/progress-icon.tsx
+++ b/packages/icons/12/progress-icon.tsx
@ -1,33 +0,0 @@
-import { useTheme } from '@tamagui/core'
-import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from '../types'
-
-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"
-      {...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" />
-        <Path d="M6 1a5 5 0 0 1 4.755 3.455" stroke={color} />
-      </G>
-      <Defs>
-        <ClipPath id="progress-icon_svg__a">
-          <Path fill="#fff" d="M0 0h12v12H0z" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-export default SvgProgressIcon
--- a/Show More
+++ b/Show More