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

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
                       }}

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",

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"
+  }
+}

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()
+}

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%)',
+}

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%)',
+}

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%)',
+}

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'

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%)',
+}

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%)',
+}

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%)',
+}

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%)',
+}

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%)',
+}

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%)',
+}

packages/colors/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["./src"],
+
+  "compilerOptions": {
+    "module": "ES2022",
+    "outDir": "./dist",
+    "declarationDir": "./dist/types",
+    "resolveJsonModule": true
+  }
+}

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',
+    },
+  }
+})

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!

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",

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>

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) && (

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>
       )}
 

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>
   ),
 }

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" />
     }
   }
 

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>

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}>

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

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}
             />

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

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>
             )

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">

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')}

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} />

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>
   )

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>

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 (

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: () => {
+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', gap: 12 }}>
-          {Object.keys(icons12).map(name => {
-            // @ts-ignore
-            // eslint-disable-next-line import/namespace
-            const Icon = icons12[name] as React.FunctionComponent<IconProps>
-
+      <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>
-      </>
+      </div>
     )
   },
 }

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'),
   },
 }

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>

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')}

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"

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>
               )

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}

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

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"

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">

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" />

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}

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

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"

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}

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>

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}

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={

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 (

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"

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 (

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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