add support for multiple icon sets through subpath exports (#579)

* improve sync

* make multi-entry

* generate

* clean up

* u

* fix attrs replace

* Create sixty-chairs-sip.md

.changeset/sixty-chairs-sip.md

@@ -0,0 +1,7 @@
+---
+"@status-im/icons": major
+---
+
+Generated each icon group separately for better correctness
+Added separate export paths for the following icon sets: ./12, ./16, ./20, ./social, and ./reactions.
+Removed Tamagui runtime

packages/icons/.eslintrc

@@ -1,4 +1,5 @@
 {
   "root": true,
-  "extends": ["@status-im/eslint-config"]
+  "extends": ["@status-im/eslint-config"],
+  "ignorePatterns": ["dist", "index.js", "index.es.js"]
 }

packages/icons/index.es.js

@@ -0,0 +1,15 @@
+// @see https://github.com/tailwindlabs/heroicons/blob/master/react/index.esm.js
+export default new Proxy(
+  {},
+  {
+    get: (_, property) => {
+      if (property === '__esModule') {
+        return {}
+      }
+
+      throw new Error(
+        `Importing from \`@status-im/icons\` directly is not supported. Please import from either \`@status-im/icons/12\`, \`@status-im/icons/16\`, \`@status-im/icons/20\`, \`@status-im/icons/reactions\` or \`@status-im/icons/social\` instead.`
+      )
+    },
+  }
+)

packages/icons/index.js

@@ -0,0 +1,15 @@
+// @see https://github.com/tailwindlabs/heroicons/blob/master/react/index.esm.js
+module.exports = new Proxy(
+  {},
+  {
+    get: (_, property) => {
+      if (property === '__esModule') {
+        return {}
+      }
+
+      throw new Error(
+        `Importing from \`@status-im/icons\` directly is not supported. Please import from either \`@status-im/icons/12\`, \`@status-im/icons/16\`, \`@status-im/icons/20\`, \`@status-im/icons/reactions\`, or \`@status-im/icons/social\` instead.`
+      )
+    },
+  }
+)

packages/icons/index.ts

@@ -1,2 +0,0 @@
-export type { IconProps } from './lib/create-icon'
-export * from './src'

packages/icons/lib/create-icon.tsx

@@ -1,48 +0,0 @@
-import { createElement, forwardRef } from 'react'
-
-import { useTheme } from '@tamagui/core'
-
-import type { ColorTokens } from '@tamagui/core'
-import type { ComponentType, SVGProps } from 'react'
-
-// import 'react-native-svg'
-// declare module 'react-native-svg' {
-//   export interface SvgProps {
-//     xmlns?: string
-//     xmlnsXlink?: string
-//     xlinkHref?: string
-//   }
-// }
-
-function isColorTokens(
-  value: `#${string}` | ColorTokens
-): value is ColorTokens {
-  return typeof value === 'string' && value.startsWith('$')
-}
-
-export interface IconProps extends SVGProps<SVGSVGElement> {
-  size: 12 | 16 | 20
-  color?: ColorTokens | `#${string}`
-}
-
-export function createIcon<P extends SVGProps<SVGSVGElement>>(
-  Component: ComponentType<P>
-): ComponentType<IconProps> {
-  const Icon = forwardRef<SVGElement, IconProps>((props, ref) => {
-    const { size, color = '$neutral-100', ...rest } = props
-    const theme = useTheme()
-    const token = isColorTokens(color) ? theme[color]?.val : color
-
-    return createElement(Component, {
-      ref,
-      ...(rest as P),
-      color: token,
-      width: size,
-      height: size,
-    })
-  })
-
-  Icon.displayName = Component.name + 'Icon'
-
-  return Icon as ComponentType<IconProps>
-}

packages/icons/package.json

@@ -5,27 +5,60 @@
     "dist",
     "svg"
   ],
-  "main": "dist/icons.js",
-  "module": "dist/icons.mjs",
-  "types": "dist/types/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "types": "./dist/types/index.d.ts",
+      "import": "./index.es.js",
-      "import": "./dist/icons.mjs",
+      "require": "./index.js"
-      "require": "./dist/icons.js"
     },
-    "./*.svg": {
+    "./12": {
-      "import": "./svg/*.svg"
+      "types": "./dist/12/index.d.ts",
+      "import": "./dist/12/index.es.js",
+      "require": "./dist/12/index.cjs.js"
+    },
+    "./16": {
+      "types": "./dist/16/index.d.ts",
+      "import": "./dist/16/index.es.js",
+      "require": "./dist/16/index.cjs.js"
+    },
+    "./20": {
+      "types": "./dist/20/index.d.ts",
+      "import": "./dist/20/index.es.js",
+      "require": "./dist/20/index.cjs.js"
+    },
+    "./social": {
+      "types": "./dist/social/index.d.ts",
+      "import": "./dist/social/index.es.js",
+      "require": "./dist/social/index.cjs.js"
+    },
+    "./reactions": {
+      "types": "./dist/reactions/index.d.ts",
+      "import": "./dist/reactions/index.es.js",
+      "require": "./dist/reactions/index.cjs.js"
+    },
+    "./12/*.svg": {
+      "import": "./svg/12/*.svg"
+    },
+    "./16/*.svg": {
+      "import": "./svg/16/*.svg"
+    },
+    "./20/*.svg": {
+      "import": "./svg/20/*.svg"
+    },
+    "./social/*.svg": {
+      "import": "./svg/social/*.svg"
+    },
+    "./reactions/*.svg": {
+      "import": "./svg/reactions/*.svg"
     }
   },
   "scripts": {
-    "sync": "vite-node scripts/sync.ts && yarn generate",
+    "sync": "vite-node scripts/sync.ts && prettier --parser=html --write 'svg/**/*.svg'",
-    "generate": "rimraf src && svgr svg --out-dir src",
+    "generate": "rimraf src && svgr svg --out-dir src && yarn lint:fix && yarn format",
     "dev": "vite build --watch --mode development",
     "build": "vite build",
     "postbuild": "yarn build:types",
-    "build:types": "tsc --noEmit false --emitDeclarationOnly",
+    "build:types": "tsc src/**/index.ts --emitDeclarationOnly --declaration --jsx react-jsx --skipLibCheck --declarationDir ./dist",
     "#test": "vitest",
     "typecheck": "tsc",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
@@ -34,27 +67,22 @@
     "clean": "rimraf dist node_modules .turbo",
     "prepack": "yarn build"
   },
-  "dependencies": {
-    "@tamagui/core": "1.74.21",
-    "@tamagui/web": "1.74.21",
-    "tamagui": "1.74.21"
-  },
   "peerDependencies": {
     "react": "^16.x || ^17.x || ^18.x",
-    "react-dom": "*",
+    "react-dom": "*"
-    "react-native-svg": ">=12"
   },
   "devDependencies": {
-    "@clack/prompts": "^0.6.3",
+    "@clack/prompts": "^0.7.0",
-    "@svgr/cli": "^6.5.1",
-    "@svgr/core": "^7.0.0",
-    "@svgr/plugin-prettier": "^7.0.0",
-    "@svgr/plugin-svgo": "^7.0.0",
-    "@types/fs-extra": "^11.0.1",
     "@status-im/eslint-config": "*",
+    "@svgr/cli": "^8.1.0",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-prettier": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "@types/fs-extra": "^11.0.1",
     "figma-api": "^1.11.0",
     "fs-extra": "^11.1.1",
     "svgo": "^3.0.2",
+    "p-map": "^7.0.2",
     "vite": "^4.1.4",
     "vite-node": "^0.29.7"
   },

packages/icons/scripts/sync.ts

@@ -1,10 +1,10 @@
-import { isCancel, outro, spinner, text } from '@clack/prompts'
+import { isCancel, log, outro, spinner, text } from '@clack/prompts'
 import { transform } from '@svgr/core'
 import * as Figma from 'figma-api'
 import fs from 'fs-extra'
 import fetch from 'node-fetch'
+import pMap from 'p-map'
 import path from 'path'
-import prettier from 'prettier'
 
 const SVG_DIR = path.resolve(__dirname, '../svg')
 
@@ -35,14 +35,26 @@ const FILE_KEY = 'qLLuMLfpGxK9OfpIavwsmK'
 const NODE_IDS = {
   // currently generates only set of size 20
   // https://github.com/status-im/status-web/issues/466
-  '3239:987': 'icons',
+  '3239:987': {
-  '3227:1083': 'social',
+    name: 'icons-20',
-  // '942:77': 'reactions',
+    folder: '20',
-  '942:218': 'love',
+  },
-  '942:217': 'thumbs-up',
+  '3239:1440': {
-  '942:216': 'thumbs-down',
+    name: 'icons-16',
-  '942:215': 'laugh',
+    folder: '16',
-  '942:213': 'angry',
+  },
+  '3239:3712': {
+    name: 'icons-12',
+    folder: '12',
+  },
+  '3227:1083': {
+    name: 'social',
+    folder: 'social',
+  },
+  '942:77': {
+    name: 'reactions',
+    folder: 'reactions',
+  },
 }
 
 const figma = new Figma.Api({
@@ -50,13 +62,15 @@ const figma = new Figma.Api({
 })
 
 const s1 = spinner()
-s1.start('Fetching nodes from Figma')
+s1.start('Fetching Figma file nodes')
 const { nodes } = await figma.getFileNodes(FILE_KEY, Object.keys(NODE_IDS))
+// console.log('🚀 ~ nodes:', nodes)
+
 s1.stop('Done!')
 
-for (const [nodeId, name] of Object.entries(NODE_IDS)) {
+for (const [nodeId, { name, folder }] of Object.entries(NODE_IDS)) {
   const s2 = spinner()
-  s2.start('Fetching nodes from Figma')
+  s2.start(`Fetching SVG images for ${name}`)
 
   const { components } = nodes[nodeId]!
   const nodeIds = Object.keys(components)
@@ -75,13 +89,18 @@ for (const [nodeId, name] of Object.entries(NODE_IDS)) {
 
   s2.stop('Done!')
 
-  const s3 = spinner()
+  log.info(`Generating SVGs for ${name}`)
-  s3.start(`Generating SVGs for ${name}`)
 
-  for (const [nodeId, image] of Object.entries(images)) {
+  await pMap(
+    Object.entries(images),
+    async ([nodeId, image]) => {
       const icon = components[nodeId]!
-
+      const svgRaw = await fetch(image!)
-    const svgRaw = await fetch(image!).then(res => res.text())
+        .then(res => res.text())
+        .catch(() => {
+          log.error(`Failed to fetch SVG for ${icon.name}`)
+          return
+        })
 
       // note: probably a wrapper layer for https://www.figma.com/file/qLLuMLfpGxK9OfpIavwsmK/Iconset?type=design&node-id=4408-955&mode=dev, thus skipping
       // icon:: {
@@ -102,16 +121,36 @@ for (const [nodeId, name] of Object.entries(NODE_IDS)) {
       //   documentationLinks: []
       // }
       if (!svgRaw) {
-      continue
+        log.error(`Failed to fetch SVG for ${icon.name}`)
+        return
       }
 
       const svg = await transform(svgRaw, {
         plugins: ['@svgr/plugin-svgo'],
-      replaceAttrValues: {
-        // '#000': 'currentColor',
-      },
         svgoConfig: {
           plugins: [
+            {
+              name: 'replace-attributes',
+              fn: () => {
+                return {
+                  element: {
+                    enter: node => {
+                      if (node.attributes.fill === '#09101C') {
+                        node.attributes.fill = 'currentColor'
+                      } else if (node.attributes.stroke === '#09101C') {
+                        node.attributes.stroke = 'currentColor'
+                      } else if (node.attributes.fill === '#2A4AF5') {
+                        node.attributes.fill =
+                          'var(--customisation-50, #2A4AF5)'
+                      } else if (node.attributes.stroke === '#2A4AF5') {
+                        node.attributes.stroke =
+                          'var(--customisation-50, #2A4AF5)'
+                      }
+                    },
+                  },
+                }
+              },
+            },
             {
               name: 'preset-default',
               params: {
@@ -125,23 +164,24 @@ for (const [nodeId, name] of Object.entries(NODE_IDS)) {
                 },
               },
             },
+            'prefixIds',
           ],
         },
       })
 
       const nameParts = icon.name.replace(' / ', '/').split('/')
-    const iconName = nameParts[nameParts.length - 1]
+      const iconName = nameParts.at(-1)!
       const fileName = `${toKebabCase(iconName)}-icon.svg`
-    const filePath = path.resolve(SVG_DIR, fileName)
+      const filePath = path.resolve(SVG_DIR, folder, fileName)
 
-    const prettierOptions = prettier.resolveConfig.sync(process.cwd())
+      await fs.ensureDir(path.dirname(filePath))
-    const formattedSvg = prettier.format(svg, {
-      ...prettierOptions,
-      parser: 'html',
-    })
 
-    await fs.writeFile(filePath, formattedSvg, { encoding: 'utf8' })
+      await fs.writeFile(filePath, svg, { encoding: 'utf8' })
-  }
+
-
+      // log.success(filePath)
-  s3.stop(`${Object.keys(images).length} SVGs generated`)
+    },
+    { concurrency: 5 }
+  )
+
+  log.success(`${Object.keys(images).length} SVGs generated`)
 }

packages/icons/src/12/active-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgActiveIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_4041_988)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M6 .45c-1.996 0-3.464.236-4.389 1.161C.686 2.536.451 4.004.451 6c0 1.996.235 3.464 1.16 4.389.925.925 2.393 1.161 4.39 1.161 1.995 0 3.463-.236 4.388-1.161.925-.925 1.161-2.393 1.161-4.389 0-1.996-.236-3.464-1.16-4.389C9.463.686 7.995.45 6 .45ZM1.55 6c0-2.004.264-3.036.839-3.611C2.964 1.814 3.996 1.55 6 1.55c2.004 0 3.036.264 3.611.839.575.575.84 1.607.84 3.611 0 2.004-.265 3.036-.84 3.611-.575.575-1.607.839-3.61.839-2.005 0-3.037-.264-3.612-.839C1.814 9.036 1.55 8.004 1.55 6Zm6.356.187c0-.75-2.25-2.25-3-2.25s-.75 4.125 0 4.125 3-1.125 3-1.875Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_4041_988">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgActiveIcon

packages/icons/src/12/active-members-icon.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react'
+
+const SvgActiveMembersIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={13}
+    fill="none"
+    viewBox="0 0 12 13"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      stroke="currentColor"
+      strokeWidth={1.1}
+      d="m8 1.5-1.5 3H10l-5.5 6L5 7H2l2.5-5.5H8Z"
+    />
+  </svg>
+)
+export default SvgActiveMembersIcon

packages/icons/src/12/add-circle-icon.tsx

@@ -0,0 +1,30 @@
+import type { SVGProps } from 'react'
+
+const SvgAddCircleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_691_20)">
+      <circle cx={6} cy={6} r={6} fill="#647084" />
+      <path
+        fill="#fff"
+        fillRule="evenodd"
+        d="M5.45 6.55V9h1.1V6.55H9v-1.1H6.55V3h-1.1v2.45H3v1.1h2.45Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_691_20">
+        <rect width={12} height={12} fill="#fff" rx={6} />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgAddCircleIcon

packages/icons/src/12/add-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgAddIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M5.45 6.55V10h1.1V6.55H10v-1.1H6.55V2h-1.1v3.45H2v1.1h3.45Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgAddIcon

packages/icons/src/12/add-reaction-icon.tsx

@@ -0,0 +1,28 @@
+import type { SVGProps } from 'react'
+
+const SvgAddReactionIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M5.81.955C3.551 1.081 1.95 3.42 1.95 6c0 2.652 1.693 5.05 4.05 5.05 2.219 0 3.849-2.124 4.033-4.585A4.039 4.039 0 0 1 8.93 6.46C8.755 8.53 7.407 9.95 6 9.95 4.49 9.95 3.05 8.318 3.05 6c0-2.07 1.148-3.593 2.468-3.895.04-.404.14-.79.29-1.15ZM4.008 7.746 4.5 7.5l.492-.246v-.001a1.73 1.73 0 0 0 .273.359c.19.189.433.338.735.338.303 0 .546-.149.736-.34a1.73 1.73 0 0 0 .273-.358v.001L7.5 7.5l.492.246v.002l-.002.002-.002.005-.008.015a1.795 1.795 0 0 1-.116.191 2.829 2.829 0 0 1-.35.428c-.31.31-.816.66-1.514.66-.697 0-1.204-.35-1.514-.66a2.829 2.829 0 0 1-.465-.62l-.008-.014-.003-.005v-.002l-.001-.001Zm3-.494v-.001.001ZM4.99 7.25v.001Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M8.95 3.05V5h1.1V3.05H12v-1.1h-1.95V0h-1.1v1.95H7v1.1h1.95Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgAddReactionIcon

packages/icons/src/12/add-user-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgAddUserIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M5.05 2.5a.95.95 0 1 1 1.9 0 .95.95 0 0 1-1.9 0ZM6 .45a2.05 2.05 0 1 0 0 4.1 2.05 2.05 0 0 0 0-4.1Zm1.907 5.38c-.435.189-.83.453-1.169.776A4.395 4.395 0 0 0 6 6.55c-.881 0-1.565.192-2.052.75-.458.525-.823 1.465-.888 3.15h2.554c.095.393.249.763.45 1.1H1.95V11c0-2.132.403-3.546 1.17-4.424C3.906 5.675 4.972 5.45 6 5.45c.647 0 1.309.09 1.907.38ZM8.95 12v-1.95H7v-1.1h1.95V7h1.1v1.95H12v1.1h-1.95V12h-1.1Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgAddUserIcon

packages/icons/src/12/advanced-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgAdvancedIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M5.548 2.8a2.944 2.944 0 0 1-.021.322 1.04 1.04 0 0 1-.285.62 1.04 1.04 0 0 1-.62.285c-.173.023-.383.023-.593.023H3.97c-.21 0-.42 0-.593-.023a1.04 1.04 0 0 1-.62-.285 1.04 1.04 0 0 1-.285-.62 2.944 2.944 0 0 1-.021-.322H1V1.7h1.452c.002-.115.008-.224.021-.322a1.04 1.04 0 0 1 .285-.62 1.04 1.04 0 0 1 .62-.285C3.551.45 3.761.45 3.971.45h.058c.21 0 .42 0 .593.023.197.027.428.092.62.284.193.193.258.424.285.621.013.098.019.207.021.322H11v1.1H5.548ZM4 1.55c.221 0 .35 0 .44.01.01.09.01.219.01.44v.5c0 .221 0 .35-.01.44-.09.01-.219.01-.44.01s-.35-.001-.44-.01c-.01-.09-.01-.219-.01-.44V2c0-.221 0-.35.01-.44.09-.01.219-.01.44-.01Zm-3 5v-1.1h5.452c.002-.115.008-.224.021-.322a1.04 1.04 0 0 1 .285-.62 1.04 1.04 0 0 1 .62-.285c.173-.023.383-.023.593-.023h.058c.21 0 .42 0 .593.023.197.027.428.092.62.284.193.193.258.424.285.621.013.098.019.207.021.322H11v1.1H9.548a2.944 2.944 0 0 1-.021.322 1.04 1.04 0 0 1-.285.62 1.04 1.04 0 0 1-.62.285c-.173.023-.383.023-.593.023H7.97c-.21 0-.42 0-.593-.023a1.04 1.04 0 0 1-.62-.285 1.04 1.04 0 0 1-.285-.62 2.944 2.944 0 0 1-.021-.322H1ZM8 5.3c.221 0 .35 0 .44.01.01.09.01.219.01.44v.5c0 .221 0 .35-.01.44-.09.009-.219.01-.44.01s-.35-.001-.44-.01c-.01-.09-.01-.219-.01-.44v-.5c0-.221 0-.35.01-.44.09-.01.219-.01.44-.01Zm-5.548 5H1V9.2h1.452c.002-.115.008-.224.021-.322a1.04 1.04 0 0 1 .285-.62 1.04 1.04 0 0 1 .62-.285c.173-.023.383-.023.593-.023h.058c.21 0 .42 0 .593.023.197.027.428.092.62.284.193.193.258.424.285.621.013.098.019.207.021.322H11v1.1H5.548a2.946 2.946 0 0 1-.021.322 1.04 1.04 0 0 1-.285.62 1.04 1.04 0 0 1-.62.285c-.173.023-.383.023-.593.023H3.97c-.21 0-.42 0-.593-.023a1.04 1.04 0 0 1-.62-.285 1.04 1.04 0 0 1-.285-.62 2.946 2.946 0 0 1-.021-.322ZM4 9.05c.221 0 .35 0 .44.01.01.09.01.219.01.44v.5c0 .221 0 .35-.01.44-.09.009-.219.01-.44.01s-.35-.001-.44-.01c-.01-.09-.01-.219-.01-.44v-.5c0-.221 0-.35.01-.44.09-.01.219-.01.44-.01Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgAdvancedIcon

packages/icons/src/12/alert-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgAlertIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_2283_851)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M1.55 6a4.45 4.45 0 1 1 8.9 0 4.45 4.45 0 0 1-8.9 0ZM6 .45a5.55 5.55 0 1 0 0 11.1A5.55 5.55 0 0 0 6 .45ZM5.45 7l-.2-4h1.5l-.2 4h-1.1Zm1.17 1.625a.625.625 0 1 0-1.25 0 .625.625 0 0 0 1.25 0Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_2283_851">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgAlertIcon

packages/icons/src/12/arrow-down-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgArrowDownIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="m6.55 9.288 3.088-2.702.724.828-4 3.5L6 11.23l-.362-.317-4-3.5.724-.828L5.45 9.288V1.5h1.1v7.788Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgArrowDownIcon

packages/icons/src/12/arrow-left-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgArrowLeftIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="m4.586 1.638-3.5 4L.769 6l.317.362 3.5 4 .828-.724L2.712 6.55H10.5v-1.1H2.712l2.702-3.088-.828-.724Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgArrowLeftIcon

packages/icons/src/12/arrow-left-right-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgArrowLeftrightIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="m1.077 5.648 2.5-3 .845.704L2.674 5.45h6.652L7.577 3.352l.846-.704 2.5 3 .293.352-.293.352-2.5 3-.846-.704L9.326 6.55H2.674l1.748 2.098-.845.704-2.5-3L.784 6l.293-.352Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgArrowLeftrightIcon

packages/icons/src/12/arrow-right-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgArrowRightIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M9.288 6.55H1.5v-1.1h7.788L6.586 2.362l.828-.724 3.5 4L11.23 6l-.317.362-3.5 4-.828-.724L9.288 6.55Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgArrowRightIcon

packages/icons/src/12/arrow-top-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgArrowTopIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M6.362 1.086 6 .77l-.362.317-4 3.5.724.828L5.45 2.712V10.5h1.1V2.712l3.088 2.702.724-.828-4-3.5Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgArrowTopIcon

packages/icons/src/12/block-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgBlockIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_2265_853)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M1.55 6a4.45 4.45 0 0 1 7.184-3.512L2.488 8.734A4.43 4.43 0 0 1 1.55 6Zm1.716 3.511a4.45 4.45 0 0 0 6.245-6.245L3.266 9.511ZM6 .45a5.55 5.55 0 1 0 0 11.1A5.55 5.55 0 0 0 6 .45Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_2265_853">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgBlockIcon

packages/icons/src/12/bold-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgBoldIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M4 .95A1.55 1.55 0 0 0 2.45 2.5v7c0 .856.694 1.55 1.55 1.55h2.5c1.587 0 2.616-.397 3.251-.993a2.48 2.48 0 0 0 .799-1.807c0-.49-.163-1.212-.799-1.808a3.292 3.292 0 0 0-1.214-.7c.118-.102.225-.211.322-.326A3.034 3.034 0 0 0 9.55 3.5c0-.525-.16-1.192-.744-1.72C8.232 1.259 7.326.95 6 .95H4Zm-.45 5.6H6.5c1.413 0 2.134.353 2.499.695.364.341.45.744.45 1.005 0 .26-.086.663-.45 1.005-.365.342-1.086.695-2.5.695H4a.45.45 0 0 1-.45-.45V6.55Zm2.481-1.1c1.096-.007 1.673-.369 1.985-.741.334-.397.434-.885.434-1.209 0-.308-.09-.641-.381-.905-.3-.27-.896-.545-2.069-.545H4a.45.45 0 0 0-.45.45v2.95H6.031Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgBoldIcon

packages/icons/src/12/bullet-list-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgBulletListIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M3 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M4 1.45h7v1.1H4v-1.1Zm0 4h7v1.1H4v-1.1Zm7 4H4v1.1h7v-1.1Z"
+      clipRule="evenodd"
+      opacity={0.4}
+    />
+  </svg>
+)
+export default SvgBulletListIcon

packages/icons/src/12/calendar-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgCalendarIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M4.55 2.004V1h-1.1v1.162c-.743.16-1.345.422-1.812.83C.693 3.82.45 5.106.45 6.75c0 1.644.243 2.931 1.188 3.758C2.556 11.31 4 11.55 6 11.55s3.444-.239 4.362-1.042c.945-.827 1.188-2.114 1.188-3.758 0-1.644-.243-2.931-1.188-3.758-.466-.408-1.07-.67-1.812-.83V1h-1.1v1.004A17.133 17.133 0 0 0 6 1.95c-.52 0-1.004.016-1.45.054ZM1.726 4.948c.132-.516.343-.871.636-1.128.582-.509 1.639-.77 3.638-.77 2 0 3.056.261 3.638.77.294.257.504.612.636 1.128C9.492 4.682 8.188 4.45 6 4.45s-3.49.232-4.274.498ZM1.56 6.224c-.006.166-.01.34-.01.526 0 1.606.257 2.444.813 2.93.581.509 1.638.77 3.637.77 2 0 3.056-.261 3.638-.77.555-.486.812-1.324.812-2.93 0-.185-.003-.36-.01-.526a2.183 2.183 0 0 0-.44-.207c-.604-.22-1.783-.467-4-.467s-3.396.247-4 .467c-.22.08-.357.154-.44.207Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgCalendarIcon

packages/icons/src/12/camera-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgCameraIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_409_48)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M4.75.45a1.3 1.3 0 0 0-1.3 1.3.2.2 0 0 1-.2.2C1.707 1.95.437 3.207.47 4.766.502 6.233.578 7.39.744 8.295c.165.903.43 1.613.887 2.135.467.536 1.078.811 1.8.955.706.141 1.564.165 2.57.165 1.004 0 1.863-.024 2.569-.165.722-.144 1.333-.42 1.8-.955.456-.522.721-1.232.887-2.135.166-.905.241-2.062.273-3.529.034-1.559-1.237-2.816-2.78-2.816a.2.2 0 0 1-.2-.2 1.3 1.3 0 0 0-1.3-1.3h-2.5Zm-.2 1.3c0-.11.09-.2.2-.2h2.5c.11 0 .2.09.2.2a1.3 1.3 0 0 0 1.3 1.3c.942 0 1.7.766 1.68 1.692-.031 1.455-.106 2.54-.255 3.354-.15.816-.365 1.303-.634 1.611-.258.295-.616.486-1.187.6-.585.117-1.342.143-2.354.143-1.011 0-1.768-.026-2.354-.143-.57-.114-.929-.305-1.186-.6-.27-.308-.485-.795-.634-1.61-.15-.815-.224-1.9-.256-3.355-.02-.926.738-1.692 1.68-1.692a1.3 1.3 0 0 0 1.3-1.3Zm0 4.75a1.45 1.45 0 1 1 2.9 0 1.45 1.45 0 0 1-2.9 0ZM6 3.95a2.55 2.55 0 1 0 0 5.1 2.55 2.55 0 0 0 0-5.1Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_409_48">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgCameraIcon

packages/icons/src/12/cards-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgCardsIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_637_26)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M6 .45c-1.996 0-3.464.236-4.389 1.161-.925.925-1.16 2.393-1.16 4.39 0 1.995.235 3.463 1.16 4.388.925.925 2.393 1.161 4.39 1.161 1.995 0 3.463-.236 4.388-1.16.925-.926 1.161-2.394 1.161-4.39 0-1.996-.236-3.464-1.16-4.389C9.463.686 7.995.451 6 .451Zm4.345 3.734c-.126-.874-.366-1.428-.734-1.795-.575-.575-1.607-.839-3.61-.839-2.005 0-3.037.264-3.612.84-.367.366-.608.92-.733 1.794a3.52 3.52 0 0 1 .098-.05C2.62 3.7 3.972 3.45 6 3.45c2.028 0 3.381.25 4.246.683l.099.051ZM1.55 6c0 2.004.264 3.036.84 3.611.574.575 1.606.84 3.61.84 2.004 0 3.036-.265 3.611-.84.575-.575.84-1.607.84-3.61a.748.748 0 0 0-.127-.43c-.092-.138-.26-.3-.57-.454C9.12 4.8 7.972 4.55 6 4.55s-3.119.25-3.754.567c-.31.155-.478.316-.57.454A.748.748 0 0 0 1.55 6Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_637_26">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgCardsIcon

packages/icons/src/12/check-circle-icon.tsx

@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react'
+
+const SvgCheckCircleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_2946_860)">
+      <circle cx={6} cy={6} r={5.5} fill="#23ADA0" />
+      <path stroke="#fff" strokeWidth={1.1} d="m3.75 6.25 1.5 1.5 3-3.5" />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_2946_860">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgCheckCircleIcon

packages/icons/src/12/check-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgCheckIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_417_74)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M1.55 6a4.45 4.45 0 1 1 8.9 0 4.45 4.45 0 0 1-8.9 0ZM6 .45a5.55 5.55 0 1 0 0 11.1A5.55 5.55 0 0 0 6 .45Zm-.332 7.658 3-3.5-.836-.716-2.613 3.05-1.08-1.081-.778.778 1.5 1.5.42.42.387-.451Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_417_74">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgCheckIcon

packages/icons/src/12/check-large-icon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react'
+
+const SvgCheckLargeIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path stroke="currentColor" strokeWidth={1.1} d="m1.5 7 3 2.5 6-7" />
+  </svg>
+)
+export default SvgCheckLargeIcon

packages/icons/src/12/chevron-down-icon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react'
+
+const SvgChevronDownIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path stroke="currentColor" strokeWidth={1.1} d="m3 4.5 3 3 3-3" />
+  </svg>
+)
+export default SvgChevronDownIcon

packages/icons/src/12/chevron-left-icon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react'
+
+const SvgChevronLeftIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path stroke="currentColor" strokeWidth={1.1} d="m7.5 3-3 3 3 3" />
+  </svg>
+)
+export default SvgChevronLeftIcon

packages/icons/src/12/chevron-right-icon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react'
+
+const SvgChevronRightIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path stroke="currentColor" strokeWidth={1.1} d="m4.5 3 3 3-3 3" />
+  </svg>
+)
+export default SvgChevronRightIcon

packages/icons/src/12/chevron-top-icon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react'
+
+const SvgChevronTopIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path stroke="currentColor" strokeWidth={1.1} d="m3 7.5 3-3 3 3" />
+  </svg>
+)
+export default SvgChevronTopIcon

packages/icons/src/12/close-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgCloseIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="m6 6.778 3.111 3.11.778-.777L6.778 6l3.11-3.111-.777-.778L6 5.222l-3.111-3.11-.778.777L5.222 6l-3.11 3.111.777.778L6 6.778Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgCloseIcon

packages/icons/src/12/colour-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgColourIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M3.857.556C4.427.482 5.133.45 6 .45c.867 0 1.573.032 2.143.106.566.075 1.035.196 1.407.4.39.212.657.508.815.888.087.208.135.43.16.66.104.024.204.058.3.106.277.138.456.36.56.623.097.24.132.516.149.789.016.274.016.6.016.964V5c0 .5-.027.975-.19 1.368-.186.444-.519.73-.984.899-.429.156-.986.22-1.67.251-.533.025-1.18.03-1.956.032v2.7a.75.75 0 1 1-1.5 0V7.2A.75.75 0 0 1 6 6.45c1.13 0 1.99 0 2.655-.03.674-.032 1.086-.093 1.345-.187.222-.08.295-.17.344-.288.07-.17.106-.445.106-.945 0-.38 0-.674-.014-.912a4.208 4.208 0 0 0-.008-.105 1.763 1.763 0 0 1-.878 1.062c-.372.203-.841.325-1.407.399-.57.075-1.276.106-2.143.106-.867 0-1.573-.031-2.143-.106-.566-.074-1.035-.196-1.406-.399a1.763 1.763 0 0 1-.816-.888C1.486 3.799 1.45 3.4 1.45 3s.036-.798.185-1.156c.158-.38.426-.676.816-.889.371-.203.84-.324 1.406-.399Zm-1.206 1.71c-.066.158-.1.384-.1.734s.034.577.1.734a.667.667 0 0 0 .327.346c.2.11.517.207 1.022.273.502.066 1.153.097 2 .097.848 0 1.499-.03 2-.097.506-.066.822-.163 1.022-.273.182-.1.27-.21.327-.346.066-.157.101-.384.101-.734s-.035-.576-.1-.734a.667.667 0 0 0-.328-.346c-.2-.11-.516-.207-1.022-.273-.501-.066-1.152-.097-2-.097-.847 0-1.498.031-2 .097-.505.066-.822.164-1.022.273-.181.1-.27.21-.327.346Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgColourIcon

packages/icons/src/12/colour-preview-icon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react'
+
+const SvgColourPreviewIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <circle cx={6} cy={6} r={4} fill="var(--customisation-50, #2A4AF5)" />
+  </svg>
+)
+export default SvgColourPreviewIcon

packages/icons/src/12/communities-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgCommunitiesIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_659_35)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M10.056 1.597c.19-.019.394.138.394.403v1.47a7.55 7.55 0 0 0-6.98 6.98H2c-.265 0-.422-.205-.403-.393.446-4.447 4.013-8.014 8.46-8.46ZM4.574 10.45H6c.225 0 .496-.202.592-.576a4.549 4.549 0 0 1 3.282-3.282c.374-.096.576-.367.576-.592V4.574a6.45 6.45 0 0 0-5.876 5.876ZM11.55 2c0-.84-.693-1.589-1.603-1.497C4.979 1 1 4.979.503 9.947.41 10.857 1.16 11.55 2 11.55h4c.88 0 1.48-.707 1.657-1.404a3.451 3.451 0 0 1 2.49-2.489C10.842 7.48 11.55 6.88 11.55 6V2Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_659_35">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgCommunitiesIcon

packages/icons/src/12/connect-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgConnectIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_7414_48)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M10.278 1.722a3.05 3.05 0 0 0-4.313 0L4.727 2.959l.778.778L6.743 2.5A1.95 1.95 0 0 1 9.5 5.257L8.263 6.495l.778.778 1.237-1.238a3.05 3.05 0 0 0 0-4.313ZM2.96 4.727 1.722 5.964a3.05 3.05 0 0 0 4.314 4.314L7.273 9.04l-.778-.777L5.258 9.5A1.95 1.95 0 1 1 2.5 6.742l1.238-1.237-.778-.778Zm4.066-.53L4.374 6.848l.778.778 2.651-2.651-.777-.778Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_7414_48">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgConnectIcon

packages/icons/src/12/connected-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgConnectedIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M1.628 2.35c.623-.8 1.654-.9 2.872-.9v1.1c-1.282 0-1.75.15-2.003.475-.138.177-.258.464-.337.96-.079.495-.11 1.147-.11 2.015 0 .868.031 1.52.11 2.015.08.496.199.783.337.96.252.325.721.475 2.003.475v1.1c-1.218 0-2.25-.1-2.872-.9-.3-.385-.461-.88-.554-1.462C.981 7.605.95 6.882.95 6c0-.882.031-1.605.124-2.188.093-.582.254-1.077.554-1.462Zm4.046 3.1H10.5v1.1H5.674l1.749 2.098-.846.704-2.5-3L3.784 6l.293-.352 2.5-3 .846.704L5.674 5.45Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgConnectedIcon

packages/icons/src/12/contact-icon.tsx

@@ -0,0 +1,33 @@
+import type { SVGProps } from 'react'
+
+const SvgContactIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_183_90)">
+      <path
+        fill="var(--customisation-50, #2A4AF5)"
+        d="M11.5 6a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Z"
+      />
+      <path
+        fill="#fff"
+        fillRule="evenodd"
+        d="M2.795 9.015c.1-.16.208-.305.325-.44.786-.9 1.852-1.125 2.88-1.125 1.028 0 2.094.225 2.88 1.126.117.134.225.28.325.439-.255.27-.543.509-.86.708a2.453 2.453 0 0 0-.293-.424C7.565 8.742 6.882 8.55 6 8.55c-.881 0-1.565.192-2.051.75a2.453 2.453 0 0 0-.295.423 4.421 4.421 0 0 1-.859-.708ZM6 3.55a.95.95 0 1 0 0 1.9.95.95 0 0 0 0-1.9Zm-2.05.95a2.05 2.05 0 1 1 4.1 0 2.05 2.05 0 0 1-4.1 0Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_183_90">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgContactIcon

packages/icons/src/12/copy-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgCopyIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_539_26)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M1.043 1.57C1.623.699 2.633.45 4 .45c1.36 0 2.367.247 2.95 1.107-.43.052-.849.146-1.238.305C5.398 1.667 4.888 1.55 4 1.55c-1.3 0-1.79.25-2.042.63-.144.216-.252.53-.32 1.006C1.572 3.662 1.55 4.254 1.55 5s.021 1.338.089 1.814c.067.476.175.79.319 1.006.22.33.621.564 1.583.618.016.23.038.451.068.663.02.146.046.295.078.444-1.209-.038-2.11-.312-2.644-1.115C.77 8.02.628 7.522.549 6.968.471 6.412.45 5.754.45 5s.02-1.412.1-1.968c.078-.555.22-1.053.493-1.462ZM8 2.45c-1.367 0-2.377.25-2.958 1.12-.273.41-.414.908-.493 1.462C4.471 5.588 4.45 6.246 4.45 7c0 .755.02 1.412.1 1.968.078.555.22 1.053.492 1.462.581.871 1.591 1.12 2.958 1.12 1.367 0 2.377-.249 2.958-1.12.273-.41.414-.907.493-1.462.079-.556.099-1.213.099-1.968 0-.754-.02-1.412-.1-1.968-.078-.554-.22-1.053-.492-1.462C10.377 2.7 9.367 2.45 8 2.45ZM5.55 7c0-.745.021-1.338.088-1.813.068-.477.176-.791.32-1.007.252-.379.742-.63 2.042-.63 1.3 0 1.79.251 2.042.63.144.216.252.53.32 1.007.067.475.088 1.068.088 1.813 0 .746-.021 1.338-.088 1.814-.068.476-.176.79-.32 1.006-.252.38-.742.63-2.042.63-1.3 0-1.79-.25-2.042-.63-.144-.216-.252-.53-.32-1.006C5.571 8.338 5.55 7.746 5.55 7Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_539_26">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgCopyIcon

packages/icons/src/12/crown-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgCrownIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_2550_885)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M6.39.611 6 .222l-.389.39-2.243 2.243-2.164-.866-.754-.301V6c0 1.996.236 3.464 1.161 4.389.925.925 2.393 1.161 4.39 1.161 1.995 0 3.463-.236 4.388-1.161.925-.925 1.161-2.393 1.161-4.389V1.688l-.754.301-2.163.866L6.389.61ZM3.89 3.89 6 1.778l2.111 2.11.257.257.336-.134 1.746-.699V6a13.1 13.1 0 0 1-.102 1.795 3.475 3.475 0 0 0-.254-.224C9.349 6.975 8.094 6.45 6 6.45c-2.093 0-3.349.525-4.093 1.12-.094.075-.178.15-.254.224-.07-.49-.103-1.08-.103-1.794V3.312l1.746.699.337.134.256-.256ZM2.036 9.127a1.964 1.964 0 0 1 .557-.698c.505-.404 1.5-.879 3.406-.879 1.907 0 2.901.475 3.407.88.255.204.4.4.477.535a1.11 1.11 0 0 1 .08.162c-.101.19-.219.35-.353.484-.575.575-1.607.839-3.61.839-2.005 0-3.037-.264-3.612-.839a1.997 1.997 0 0 1-.352-.484Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_2550_885">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgCrownIcon

packages/icons/src/12/customize-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgCustomizeIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_3221_4343)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M2.146 2.146c.101-.1.316-.196.854-.196v-.9c-.538 0-.753-.095-.854-.196C2.046.753 1.95.538 1.95 0h-.9c0 .538-.095.753-.196.854-.101.1-.316.196-.854.196v.9c.538 0 .753.095.854.196.1.101.196.316.196.854h.9c0-.538.095-.753.196-.854Zm2.368 2.368A7.377 7.377 0 0 1 2.399 6c.782.36 1.504.875 2.115 1.486A7.377 7.377 0 0 1 6 9.601a7.377 7.377 0 0 1 1.486-2.115A7.377 7.377 0 0 1 9.601 6a7.377 7.377 0 0 1-2.115-1.486A7.377 7.377 0 0 1 6 2.399a7.377 7.377 0 0 1-1.486 2.115ZM12 6.55v-1.1c-1.321 0-2.688-.666-3.736-1.714S6.55 1.321 6.55 0h-1.1c0 1.321-.666 2.688-1.714 3.736S1.321 5.45 0 5.45v1.1c1.321 0 2.688.666 3.736 1.714S5.45 10.679 5.45 12h1.1c0-1.321.666-2.688 1.714-3.736S10.679 6.55 12 6.55Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_3221_4343">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgCustomizeIcon

packages/icons/src/12/decline-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgDeclineIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_3515_1207)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M6 10.9a4.9 4.9 0 1 0 0-9.8 4.9 4.9 0 0 0 0 9.8ZM6 12A6 6 0 1 0 6 0a6 6 0 0 0 0 12Zm-.778-6-1.61-1.611.777-.778L6 5.222l1.611-1.61.778.777L6.778 6l1.61 1.611-.777.778L6 6.778l-1.611 1.61-.778-.777L5.222 6Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_3515_1207">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgDeclineIcon

packages/icons/src/12/delete-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgDeleteIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M4.657 2.45h2.686a1.698 1.698 0 0 0-.085-.204 1.206 1.206 0 0 0-.407-.476c-.181-.12-.447-.22-.851-.22-.404 0-.67.1-.851.22a1.206 1.206 0 0 0-.407.476 1.697 1.697 0 0 0-.085.204Zm3.826 0a2.952 2.952 0 0 0-.241-.696 2.305 2.305 0 0 0-.78-.9C7.08.602 6.595.45 6 .45S4.92.6 4.539.855a2.305 2.305 0 0 0-.78.899 2.952 2.952 0 0 0-.242.696H1v1.1h.95c0 1.728.032 3.077.127 4.125.096 1.048.259 1.851.556 2.446.315.63.774 1.01 1.38 1.213.564.188 1.241.216 1.987.216s1.423-.028 1.986-.216c.607-.202 1.066-.582 1.38-1.213.298-.595.461-1.398.557-2.446.095-1.048.126-2.397.127-4.125H11v-1.1H8.483Zm.467 1.1h-5.9c0 1.723.032 3.03.123 4.025.092 1.014.241 1.649.444 2.054.185.37.414.552.744.662.374.124.885.159 1.639.159s1.265-.035 1.639-.16c.33-.11.56-.292.744-.661.203-.405.352-1.04.444-2.054.09-.995.122-2.302.123-4.025ZM4.45 5v3.5h1.1V5h-1.1Zm2 3.5V5h1.1v3.5h-1.1Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgDeleteIcon

packages/icons/src/12/delivered-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgDeliveredIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="m5.504 7.454 3.419-4.102-.845-.704L3.43 8.225.852 6.078l-.704.845 3 2.5.422.352.353-.423L4.8 8.3l1.348 1.124.422.352.353-.423 5-6-.845-.704L6.43 8.225l-.926-.77Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgDeliveredIcon

packages/icons/src/12/desktop-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgDesktopIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_3493_1042)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M3.18.564C3.907.471 4.835.45 6 .45c1.165 0 2.093.02 2.82.114.722.093 1.324.267 1.777.635.47.382.7.907.818 1.527.115.605.135 1.363.135 2.274 0 .912-.02 1.67-.135 2.275-.118.62-.348 1.145-.818 1.527-.453.368-1.055.542-1.777.635-.37.047-.791.076-1.27.092v1.421h.95v1.1h-5v-1.1h.95V9.53a13.88 13.88 0 0 1-1.27-.093c-.722-.093-1.324-.267-1.777-.635-.47-.382-.7-.907-.818-1.527C.469 6.67.45 5.912.45 5c0-.911.02-1.67.135-2.274.118-.62.348-1.145.818-1.527C1.856.83 2.458.657 3.18.564ZM5.55 10.95h.9v-1.4h-.183a86.638 86.638 0 0 1-.534 0H5.55v1.4Zm3.13-2.604c-.599.077-1.381.1-2.418.104h-.524c-1.037-.003-1.82-.027-2.418-.104-.653-.085-1.009-.223-1.223-.397-.197-.16-.341-.405-.432-.88C1.572 6.581 1.55 5.922 1.55 5c0-.921.022-1.58.115-2.069.09-.474.235-.719.432-.879.214-.174.57-.313 1.223-.397.648-.083 1.511-.105 2.68-.105 1.169 0 2.032.022 2.68.105.653.084 1.009.223 1.223.397.197.16.341.405.432.88.093.488.115 1.147.115 2.068 0 .922-.022 1.58-.115 2.07-.09.474-.235.719-.432.879-.214.174-.57.312-1.223.397Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_3493_1042">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgDesktopIcon

packages/icons/src/12/diamond-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgDiamondIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_3881_971)">
+      <circle cx={6} cy={6} r={6} fill="var(--customisation-50, #2A4AF5)" />
+      <path
+        stroke="#fff"
+        strokeWidth={1.1}
+        d="M3.5 6 6 8.5 8.5 6l-1-2h-3l-1 2Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_3881_971">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgDiamondIcon

packages/icons/src/12/disconnected-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgDisconnectedIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_7414_59)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M10.278 1.722a3.05 3.05 0 0 0-4.313 0L4.727 2.959l.778.778L6.743 2.5A1.95 1.95 0 0 1 9.5 5.257L8.263 6.495l.778.778 1.237-1.238a3.05 3.05 0 0 0 0-4.313ZM2.96 4.727 1.722 5.964a3.05 3.05 0 1 0 4.314 4.314L7.273 9.04l-.778-.777L5.258 9.5A1.95 1.95 0 0 1 2.5 6.742l1.238-1.237-.778-.778ZM2.5 1.722l-.778.778L9.5 10.278l.778-.778L2.5 1.722Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_7414_59">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgDisconnectedIcon

packages/icons/src/12/done-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgDoneIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_3456_975)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M10.9 6a4.9 4.9 0 1 1-9.8 0 4.9 4.9 0 0 1 9.8 0ZM12 6A6 6 0 1 1 0 6a6 6 0 0 1 12 0ZM5.668 8.108l3-3.5-.836-.716-2.613 3.05-1.08-1.08-.778.777 1.5 1.5.42.42.387-.451Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_3456_975">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgDoneIcon

packages/icons/src/12/download-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgDownloadIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="m6.55 7.288 3.088-2.702.724.828-4 3.5L6 9.23l-.363-.317-4-3.5.725-.828L5.45 7.288V1.5h1.1v5.788ZM9.5 11.05h-7v-1.1h7v1.1Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgDownloadIcon

packages/icons/src/12/dropdown-icon.tsx

@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react'
+
+const SvgDropdownIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_101_109)">
+      <circle cx={6} cy={6} r={6} fill="#E7EAEE" />
+      <path stroke="currentColor" strokeWidth={1.1} d="M3.5 5 6 7.5 8.5 5" />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_101_109">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgDropdownIcon

packages/icons/src/12/edit-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgEditIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_448_48)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="m6.722 1.918.046-.043c.16-.075.623-.215 1.473.275.85.491.961.963.976 1.139a3.287 3.287 0 0 1-.034.128.69.69 0 0 1-.034.061l-.352.61-2.511-1.45.352-.61a.699.699 0 0 1 .036-.06c.001-.002.01-.014.048-.05Zm-.986 1.673L3.51 7.445c-.392.679-.301 1.28-.105 1.74a2.672 2.672 0 0 0 .4.65l.106.015c.17.022.4.036.655.005.496-.06 1.063-.282 1.455-.96L8.247 5.04 5.736 3.59Zm-2.602 7.138.382-.395-.382.396.099.095.132.038.151-.529a57.41 57.41 0 0 0-.15.53h.004l.009.003.025.007.083.019a3.773 3.773 0 0 0 1.21.054c.746-.09 1.67-.45 2.278-1.503l3.127-5.416c.066-.115.118-.21.168-.415.017-.068.031-.128.04-.18a.775.775 0 0 0 .008-.16c-.022-.55-.322-1.38-1.527-2.075C7.586.502 6.718.658 6.231.914A.772.772 0 0 0 6.096 1c-.04.033-.085.075-.136.124a1.358 1.358 0 0 0-.275.354L2.559 6.894C1.95 7.949 2.1 8.929 2.394 9.618a3.77 3.77 0 0 0 .71 1.084l.019.019.006.006.002.002.001.001Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_448_48">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgEditIcon

packages/icons/src/12/external-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgExternalIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M9 2.45H5v1.1h2.672L2.611 8.611l.778.778 5.06-5.061V7h1.1V2.45H9Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgExternalIcon

packages/icons/src/12/face-id-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgFaceIdIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_6766_28)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M4.75.49C3.38.589 2.331.892 1.612 1.611.892 2.331.589 3.38.49 4.75h1.104c.096-1.21.354-1.92.795-2.36.441-.442 1.15-.7 2.361-.796V.49Zm2.5 1.104V.49c1.37.099 2.42.401 3.14 1.121.72.72 1.022 1.769 1.12 3.139h-1.103c-.097-1.21-.354-1.92-.795-2.361-.441-.44-1.151-.699-2.362-.795Zm0 8.813c1.21-.097 1.92-.355 2.362-.796.44-.44.698-1.15.795-2.361h1.104c-.1 1.37-.402 2.42-1.122 3.14-.72.719-1.768 1.022-3.139 1.12v-1.103ZM1.594 7.25c.096 1.21.354 1.92.795 2.361.441.441 1.15.7 2.361.796v1.103c-1.37-.098-2.419-.401-3.138-1.12C.892 9.67.589 8.62.49 7.25h1.104ZM3.45 4c0-.5.05-1 .55-1s.55.5.55 1S4.5 5 4 5s-.55-.5-.55-1ZM8 3c-.5 0-.55.5-.55 1S7.5 5 8 5s.55-.5.55-1S8.5 3 8 3ZM5.45 6.5v-2h1.1v1.772l.339.34-.778.777-.5-.5-.161-.161V6.5ZM4 8l-.492.247.001.001.002.003.003.007.01.018.03.052a2.47 2.47 0 0 0 .54.601c.403.323 1.022.621 1.906.621.884 0 1.503-.298 1.906-.62a2.47 2.47 0 0 0 .54-.602l.03-.052.01-.018.003-.007.002-.003v-.001L8 8l-.492-.247.001-.001.001-.002.001-.002.001-.002-.007.012a1.37 1.37 0 0 1-.287.313c-.221.177-.602.379-1.218.379s-.997-.202-1.219-.38a1.37 1.37 0 0 1-.286-.312l-.007-.012v.002l.002.002v.002h.001v.001L4 8Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_6766_28">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgFaceIdIcon

packages/icons/src/12/fees-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgFeesIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_4906_1106)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M9.39 2.177c.14.098.263.22.36.361.092.132.162.308.217.627.057.328.09.754.138 1.373.055.712.066.944.013 1.153-.025.1-.061.199-.108.292-.096.193-.255.362-.76.867L7.206 8.894c-.505.504-.854.853-1.15 1.094-.29.236-.48.329-.653.363a1.448 1.448 0 0 1-.566 0c-.173-.034-.364-.127-.653-.363-.296-.241-.645-.59-1.15-1.094-.505-.505-.853-.855-1.095-1.15-.235-.29-.328-.48-.362-.654a1.45 1.45 0 0 1 0-.565c.034-.173.127-.364.362-.653.242-.296.59-.646 1.095-1.15l2.044-2.044c.505-.505.674-.664.866-.76a1.45 1.45 0 0 1 .293-.109c.209-.052.44-.041 1.153.014.619.047 1.044.08 1.373.137.319.055.495.125.626.217Zm1.263-.267a2.551 2.551 0 0 0-.635-.636C9.703 1.054 9.35.946 8.95.876 8.565.81 8.087.773 7.501.728L7.474.726 7.39.719C6.796.673 6.373.641 5.97.742a2.55 2.55 0 0 0-.515.19c-.374.187-.673.487-1.095.909l-.06.06-2.043 2.043-.02.02c-.48.48-.868.868-1.15 1.213-.29.356-.504.711-.588 1.133a2.55 2.55 0 0 0 0 .995c.084.422.298.777.589 1.133.28.345.67.734 1.149 1.213l.02.02.021.021c.479.479.868.868 1.212 1.149.357.29.712.505 1.134.589.328.065.666.065.994 0 .422-.084.777-.299 1.134-.59.344-.28.733-.669 1.212-1.148l.02-.02 2.045-2.044.059-.06c.421-.42.722-.72.908-1.094a2.55 2.55 0 0 0 .19-.515c.102-.405.07-.828.023-1.422l-.006-.084-.002-.026c-.045-.586-.082-1.064-.149-1.45-.07-.4-.178-.752-.398-1.067Zm-3.73 2.458a.45.45 0 1 1 .637.637.45.45 0 0 1-.636-.637Zm1.415-.777a1.55 1.55 0 1 0-2.192 2.192A1.55 1.55 0 0 0 8.338 3.59Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_4906_1106">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgFeesIcon

packages/icons/src/12/flag-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgFlagIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_3463_955)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M.95.5v11h1.1V8.05h3.4v1.5h5.601v-6.6h-4.5v-1.5H2.05V.5H.95Zm1.1 2.05v4.4h4.5v1.5h3.401v-4.4h-4.5v-1.5H2.05Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_3463_955">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgFlagIcon

packages/icons/src/12/flashlight-icon.tsx

@@ -0,0 +1,28 @@
+import type { SVGProps } from 'react'
+
+const SvgFlashlightIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_7397_27)">
+      <path
+        stroke="currentColor"
+        strokeWidth={1.1}
+        d="M6.95 4.5v.55h3.284L5.05 10.605V6.95H1.766L6.95 1.395V4.5Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_7397_27">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgFlashlightIcon

packages/icons/src/12/folder-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgFolderIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_7037_21)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M6 .45c-1.996 0-3.464.236-4.389 1.161-.925.925-1.16 2.393-1.16 4.39 0 1.995.235 3.463 1.16 4.388.925.925 2.393 1.161 4.39 1.161 1.995 0 3.463-.236 4.388-1.16.925-.926 1.161-2.394 1.161-4.39 0-1.996-.236-3.464-1.16-4.389C9.463.686 7.995.451 6 .451ZM1.72 3.811c.137-.663.357-1.11.67-1.422.574-.575 1.606-.839 3.61-.839 2.004 0 3.036.264 3.611.839.312.312.533.759.67 1.423a5.388 5.388 0 0 0-.87-.228 8.687 8.687 0 0 0-1.376-.134h-.034L8 4v-.55h-.34l-.149.298-.006.01a1.37 1.37 0 0 1-.287.313c-.221.177-.602.379-1.218.379s-.997-.202-1.219-.38a1.37 1.37 0 0 1-.286-.312l-.006-.01-.15-.298H4V4v-.55h-.035a5.976 5.976 0 0 0-.399.017c-.256.016-.606.05-.977.117a5.39 5.39 0 0 0-.869.227Zm-.15 1.332c-.014.264-.02.549-.02.857 0 2.004.264 3.036.84 3.611.574.575 1.606.84 3.61.84 2.004 0 3.036-.265 3.611-.84.575-.575.84-1.607.84-3.61 0-.309-.007-.594-.02-.858a1.159 1.159 0 0 0-.341-.222 3.758 3.758 0 0 0-.876-.255 7.591 7.591 0 0 0-.933-.106c-.09.11-.214.24-.375.37-.403.322-1.022.62-1.906.62-.884 0-1.503-.298-1.906-.62a2.501 2.501 0 0 1-.375-.37 8.195 8.195 0 0 0-.933.106c-.32.058-.63.142-.876.255a1.16 1.16 0 0 0-.34.222Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_7037_21">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgFolderIcon

packages/icons/src/12/friend-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgFriendIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M5.05 2.5a.95.95 0 1 1 1.9 0 .95.95 0 0 1-1.9 0ZM6 .45a2.05 2.05 0 1 0 0 4.1 2.05 2.05 0 0 0 0-4.1Zm2.94 10H3.06c.065-1.685.43-2.625.888-3.15.487-.558 1.17-.75 2.052-.75.881 0 1.565.192 2.051.75.459.525.824 1.465.889 3.15ZM6 5.45c-1.028 0-2.094.225-2.88 1.126-.767.878-1.17 2.292-1.17 4.424v.55h8.1V11c0-2.132-.403-3.546-1.17-4.424C8.094 5.675 7.028 5.45 6 5.45Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgFriendIcon

packages/icons/src/12/gas-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgGasIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_1907_880)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M4.5.45c-.752 0-1.406.03-1.946.165-.561.14-1.03.401-1.374.874C.852 1.94.68 2.53.58 3.245.481 3.965.45 4.871.45 6s.031 2.036.13 2.755c.099.715.272 1.304.6 1.756.344.473.813.734 1.374.874.54.135 1.194.165 1.946.165.753 0 1.406-.03 1.946-.165.561-.14 1.03-.402 1.374-.874.328-.451.501-1.041.6-1.756.05-.357.082-.759.102-1.211.525-.015.984-.059 1.369-.173.55-.163.963-.473 1.226-1 .24-.48.338-1.108.385-1.868V4.5H12v-2h-.45v-1h-1.1v1H10v2h.4c-.047.7-.136 1.118-.267 1.379-.111.223-.26.35-.555.437-.246.073-.575.111-1.03.126.002-.143.002-.29.002-.442 0-1.129-.03-2.036-.13-2.755-.099-.715-.272-1.305-.6-1.756-.344-.473-.813-.734-1.374-.874C5.906.48 5.253.45 4.5.45ZM1.594 4.192c.019-.296.043-.56.076-.797.089-.644.228-1.023.4-1.26.156-.214.375-.359.751-.453.398-.1.932-.132 1.68-.132.747 0 1.28.033 1.678.132.377.094.595.239.751.454.172.236.311.615.4 1.26.033.236.058.5.076.796-.567-.13-1.469-.242-2.906-.242s-2.34.112-2.906.242Zm-.04 1.15c-.002.208-.004.427-.004.658 0 1.121.032 1.964.12 2.604.089.645.228 1.024.4 1.26.156.215.375.36.751.454.398.1.932.132 1.68.132.747 0 1.28-.033 1.678-.132.377-.094.595-.24.751-.454.172-.236.311-.615.4-1.26.089-.64.12-1.483.12-2.604 0-.231-.001-.45-.004-.658a3.003 3.003 0 0 0-.204-.058C6.8 5.174 5.974 5.05 4.5 5.05c-1.473 0-2.3.123-2.741.234-.082.02-.15.04-.205.058Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_1907_880">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgGasIcon

packages/icons/src/12/gavel-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgGavelIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_3221_4414)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M3.824.634c.264.025.493.14.67.243.176.101.39.241.544.457.139.193.203.41.208.643.715-.138 1.462.178 2.279.65.816.471 1.464.96 1.702 1.649.203-.112.423-.165.66-.142.263.025.492.14.669.243.176.101.39.241.545.457.171.24.23.517.2.815-.026.275-.128.576-.276.908-.15.337-.367.743-.652 1.236-.284.493-.528.883-.744 1.182-.213.295-.423.533-.649.694a1.164 1.164 0 0 1-.806.233c-.263-.025-.492-.14-.668-.243-.176-.102-.39-.241-.545-.457a1.122 1.122 0 0 1-.208-.643c-.277.054-.559.039-.848-.027L5.092 9.94c-.23.397-.431.716-.619.962-.184.24-.38.446-.606.579a1.11 1.11 0 0 1-.774.143 1.931 1.931 0 0 1-.618-.25 1.933 1.933 0 0 1-.526-.411 1.11 1.11 0 0 1-.263-.742c.002-.262.081-.534.198-.814.119-.285.294-.62.523-1.017l.813-1.408a2.043 2.043 0 0 1-.447-.721 1.122 1.122 0 0 1-.661.141c-.264-.025-.492-.14-.668-.243-.177-.101-.391-.241-.545-.457a1.164 1.164 0 0 1-.201-.815c.027-.275.128-.576.277-.908.15-.337.367-.743.651-1.236.285-.492.528-.882.744-1.181.213-.294.423-.533.648-.694.243-.174.512-.262.806-.234Zm.65 7.275-.389-.225L3.36 8.94c-.22.382-.368.67-.46.89-.095.226-.114.345-.114.399 0 .022 0 .023.003.025a.935.935 0 0 0 .236.167.938.938 0 0 0 .26.12h.002c.003.002.004.002.024-.01.046-.027.14-.102.288-.297.145-.19.32-.462.54-.844l.726-1.256-.39-.225Zm.55-.952c.87.502 1.292.585 1.566.512.273-.074.597-.357 1.099-1.226.502-.87.585-1.291.512-1.565-.074-.273-.357-.597-1.226-1.099-.87-.502-1.292-.585-1.565-.512-.273.073-.597.357-1.099 1.226-.502.87-.585 1.291-.512 1.565.073.273.356.597 1.226 1.099Zm3.617-.164c-.278.481-.472.849-.6 1.135-.13.292-.176.466-.186.566a.22.22 0 0 0 0 .067l.001.002c.01.015.051.058.2.144.148.085.206.099.225.1h.001a.22.22 0 0 0 .059-.033c.082-.058.209-.184.397-.444.184-.254.405-.606.683-1.087.277-.481.472-.849.6-1.135.13-.293.176-.466.186-.566a.22.22 0 0 0 0-.067l-.001-.002c-.011-.015-.052-.058-.2-.144-.148-.085-.206-.098-.224-.1H9.78a.223.223 0 0 0-.06.034c-.082.058-.209.185-.397.444-.184.254-.405.606-.682 1.086Zm-5.283-3.05c.278-.481.472-.849.6-1.135.131-.293.177-.466.187-.566a.22.22 0 0 0 0-.067l-.002-.002c-.01-.015-.05-.058-.2-.144-.147-.085-.205-.098-.223-.1h-.002a.223.223 0 0 0-.06.034c-.082.058-.21.185-.397.444-.184.254-.405.606-.682 1.086a13.04 13.04 0 0 0-.6 1.135c-.13.292-.177.466-.186.566a.22.22 0 0 0 0 .067v.002c.012.015.052.058.2.144.15.085.207.099.225.1h.002a.22.22 0 0 0 .059-.033c.081-.058.209-.184.396-.444.184-.254.406-.606.683-1.087Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_3221_4414">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgGavelIcon

packages/icons/src/12/git-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgGitIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_3460_940)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M2.5 3.9a1.4 1.4 0 1 0 0-2.8 1.4 1.4 0 0 0 0 2.8Zm0 1.1c.491 0 .95-.142 1.336-.386l.973.973a4 4 0 1 0 .778-.778l-.973-.973A2.5 2.5 0 1 0 2.5 5Zm8.4 3a2.9 2.9 0 1 1-5.8 0 2.9 2.9 0 0 1 5.8 0Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_3460_940">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgGitIcon

packages/icons/src/12/hide-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgHideIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_3667_979)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="m8.816 9.594 1.795 1.795.778-.778-10-10-.778.778L2.323 3.1a9.492 9.492 0 0 0-.524.526 11.595 11.595 0 0 0-1.505 2.06l-.02.039-.007.01-.001.004-.001.001L.75 6l-.485-.258L.127 6l.138.258L.75 6a77.57 77.57 0 0 0-.485.258v.002l.002.003.006.011.021.039.08.137A11.594 11.594 0 0 0 1.8 8.372c.953 1.035 2.403 2.178 4.2 2.178 1.073 0 2.023-.407 2.816-.956Zm-.793-.793-.973-.973C6.766 8.1 6.4 8.3 6 8.3c-.51 0-.965-.326-1.266-.712a2.647 2.647 0 0 1-.386-2.462L3.1 3.879a8.368 8.368 0 0 0-.493.494A10.496 10.496 0 0 0 1.386 6a10.494 10.494 0 0 0 1.222 1.627C3.498 8.593 4.673 9.45 6 9.45c.728 0 1.41-.257 2.023-.649Zm-2.72-2.72c.016.337.14.627.299.83.186.24.356.289.398.289.033 0 .14-.029.272-.15l-.97-.97Zm5.108.24c-.218.33-.528.759-.916 1.194l.779.779a11.655 11.655 0 0 0 1.432-1.981l.021-.039.006-.01.002-.004v-.001l-.485-.26.486.259.137-.258-.137-.258L11.25 6l.486-.258-.001-.002-.002-.003-.006-.011-.021-.039a10.535 10.535 0 0 0-.378-.616c-.26-.392-.64-.917-1.127-1.444-.953-1.034-2.403-2.177-4.2-2.177-.753 0-1.444.2-2.063.508l.833.833a3.37 3.37 0 0 1 1.23-.241c1.327 0 2.502.857 3.392 1.823A10.488 10.488 0 0 1 10.615 6c-.054.09-.123.198-.204.322Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_3667_979">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgHideIcon

packages/icons/src/12/hold-icon.tsx

@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react'
+
+const SvgHoldIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_652_17)">
+      <circle cx={6} cy={6} r={6} fill="#23ADA0" />
+      <path stroke="#fff" strokeWidth={1.1} d="m3.75 6.25 1.5 1.5 3-3.5" />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_652_17">
+        <rect width={12} height={12} fill="#fff" rx={6} />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgHoldIcon

packages/icons/src/12/image-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgImageIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_6506_33)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M1.611 1.611C2.536.686 4.004.45 6.001.45c1.995 0 3.463.236 4.388 1.161.925.925 1.161 2.393 1.161 4.389 0 1.996-.236 3.464-1.16 4.389-.926.925-2.394 1.161-4.39 1.161-1.996 0-3.464-.236-4.389-1.161C.906 9.683.601 8.662.496 7.33a.106.106 0 0 1-.018-.006l.002-.003.001-.004.004-.011.008-.02C.463 6.884.45 6.456.45 6c0-1.996.236-3.464 1.161-4.389Zm.778 8c-.407-.407-.658-1.043-.77-2.092.067-.09.173-.207.336-.33.387-.29 1.14-.64 2.545-.64 1.208 0 2.19.914 2.917 2.006a10.021 10.021 0 0 1 .899 1.697c-.577.134-1.329.198-2.316.198-2.004 0-3.036-.264-3.61-.839Zm7.222 0a1.898 1.898 0 0 1-.276.228 11.505 11.505 0 0 0-1.002-1.894C7.56 6.787 6.292 5.45 4.5 5.45c-1.39 0-2.326.304-2.95.686V6c0-2.004.264-3.036.839-3.611C2.964 1.814 3.996 1.55 6 1.55c2.004 0 3.036.264 3.611.839.575.575.84 1.607.84 3.611 0 2.004-.265 3.036-.84 3.611ZM8 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_6506_33">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgImageIcon

packages/icons/src/12/inactive-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgInactiveIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_4041_989)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M6 .45c-1.996 0-3.464.236-4.389 1.161C.686 2.536.451 4.004.451 6c0 1.996.235 3.464 1.16 4.389.925.925 2.393 1.161 4.39 1.161 1.995 0 3.463-.236 4.388-1.161.925-.925 1.161-2.393 1.161-4.389 0-1.996-.236-3.464-1.16-4.389C9.463.686 7.995.45 6 .45ZM1.55 6c0-2.004.264-3.036.839-3.611C2.964 1.814 3.996 1.55 6 1.55c2.004 0 3.036.264 3.611.839.575.575.84 1.607.84 3.611 0 2.004-.265 3.036-.84 3.611-.575.575-1.607.839-3.61.839-2.005 0-3.037-.264-3.612-.839C1.814 9.036 1.55 8.004 1.55 6Zm3.7 0c0-1.52 0-2.013-.231-2.173-.111-.077-.276-.077-.519-.077-.244 0-.408 0-.519.077-.231.16-.231.653-.231 2.173s0 2.013.23 2.173c.112.077.276.077.52.077.243 0 .408 0 .519-.077.23-.16.23-.654.23-2.173Zm3 0c0-1.52 0-2.013-.231-2.173-.111-.077-.276-.077-.519-.077-.75 0-.75 0-.75 2.25s0 2.25.75 2.25c.243 0 .408 0 .519-.077.23-.16.23-.654.23-2.173Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_4041_989">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgInactiveIcon

packages/icons/src/12/index.ts

@@ -0,0 +1,140 @@
+export { default as ActiveIcon } from './active-icon'
+export { default as ActiveMembersIcon } from './active-members-icon'
+export { default as AddCircleIcon } from './add-circle-icon'
+export { default as AddIcon } from './add-icon'
+export { default as AddReactionIcon } from './add-reaction-icon'
+export { default as AddUserIcon } from './add-user-icon'
+export { default as AdvancedIcon } from './advanced-icon'
+export { default as AlertIcon } from './alert-icon'
+export { default as ArrowDownIcon } from './arrow-down-icon'
+export { default as ArrowLeftIcon } from './arrow-left-icon'
+export { default as ArrowLeftRightIcon } from './arrow-left-right-icon'
+export { default as ArrowRightIcon } from './arrow-right-icon'
+export { default as ArrowTopIcon } from './arrow-top-icon'
+export { default as BlockIcon } from './block-icon'
+export { default as BoldIcon } from './bold-icon'
+export { default as BulletListIcon } from './bullet-list-icon'
+export { default as CalendarIcon } from './calendar-icon'
+export { default as CameraIcon } from './camera-icon'
+export { default as CardsIcon } from './cards-icon'
+export { default as CheckCircleIcon } from './check-circle-icon'
+export { default as CheckIcon } from './check-icon'
+export { default as CheckLargeIcon } from './check-large-icon'
+export { default as ChevronDownIcon } from './chevron-down-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 ColourIcon } from './colour-icon'
+export { default as ColourPreviewIcon } from './colour-preview-icon'
+export { default as CommunitiesIcon } from './communities-icon'
+export { default as ConnectIcon } from './connect-icon'
+export { default as ConnectedIcon } from './connected-icon'
+export { default as ContactIcon } from './contact-icon'
+export { default as CopyIcon } from './copy-icon'
+export { default as CrownIcon } from './crown-icon'
+export { default as CustomizeIcon } from './customize-icon'
+export { default as DeclineIcon } from './decline-icon'
+export { default as DeleteIcon } from './delete-icon'
+export { default as DeliveredIcon } from './delivered-icon'
+export { default as DesktopIcon } from './desktop-icon'
+export { default as DiamondIcon } from './diamond-icon'
+export { default as DisconnectedIcon } from './disconnected-icon'
+export { default as DoneIcon } from './done-icon'
+export { default as DownloadIcon } from './download-icon'
+export { default as DropdownIcon } from './dropdown-icon'
+export { default as EditIcon } from './edit-icon'
+export { default as ExternalIcon } from './external-icon'
+export { default as FaceIdIcon } from './face-id-icon'
+export { default as FeesIcon } from './fees-icon'
+export { default as FlagIcon } from './flag-icon'
+export { default as FlashlightIcon } from './flashlight-icon'
+export { default as FolderIcon } from './folder-icon'
+export { default as FriendIcon } from './friend-icon'
+export { default as GasIcon } from './gas-icon'
+export { default as GavelIcon } from './gavel-icon'
+export { default as GitIcon } from './git-icon'
+export { default as HideIcon } from './hide-icon'
+export { default as HoldIcon } from './hold-icon'
+export { default as ImageIcon } from './image-icon'
+export { default as InactiveIcon } from './inactive-icon'
+export { default as InfoGreyIcon } from './info-grey-icon'
+export { default as InfoIcon } from './info-icon'
+export { default as IssueIcon } from './issue-icon'
+export { default as ItalicIcon } from './italic-icon'
+export { default as JumpToIcon } from './jump-to-icon'
+export { default as KeyCommandIcon } from './key-command-icon'
+export { default as KeyControlIcon } from './key-control-icon'
+export { default as KeyEnterIcon } from './key-enter-icon'
+export { default as KeyIcon } from './key-icon'
+export { default as KeyOptionIcon } from './key-option-icon'
+export { default as KeyShiftIcon } from './key-shift-icon'
+export { default as KeySpaceIcon } from './key-space-icon'
+export { default as KeyTabIcon } from './key-tab-icon'
+export { default as KeycardIcon } from './keycard-icon'
+export { default as LessIcon } from './less-icon'
+export { default as LinkIcon } from './link-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 MembersIcon } from './members-icon'
+export { default as MentionIcon } from './mention-icon'
+export { default as MilestonesIcon } from './milestones-icon'
+export { default as MobileIcon } from './mobile-icon'
+export { default as MutualContactIcon } from './mutual-contact-icon'
+export { default as NegativeIcon } from './negative-icon'
+export { default as NegativeStateIcon } from './negative-state-icon'
+export { default as NeutralIcon } from './neutral-icon'
+export { default as NotificationBadgeIcon } from './notification-badge-icon'
+export { default as NumberedListIcon } from './numbered-list-icon'
+export { default as OffIcon } from './off-icon'
+export { default as OnIcon } from './on-icon'
+export { default as OpenStateIcon } from './open-state-icon'
+export { default as OptionsIcon } from './options-icon'
+export { default as PasswordIcon } from './password-icon'
+export { default as PauseIcon } from './pause-icon'
+export { default as PendingIcon } from './pending-icon'
+export { default as PendingStateIcon } from './pending-state-icon'
+export { default as PickIcon } from './pick-icon'
+export { default as PinIcon } from './pin-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 PositiveStateIcon } from './positive-state-icon'
+export { default as Progress25Icon } from './progress-25-icon'
+export { default as Progress50Icon } from './progress-50-icon'
+export { default as Progress75Icon } from './progress-75-icon'
+export { default as Progress100Icon } from './progress-100-icon'
+export { default as ProgressIcon } from './progress-icon'
+export { default as PullupIcon } from './pullup-icon'
+export { default as RedoIcon } from './redo-icon'
+export { default as RefreshIcon } from './refresh-icon'
+export { default as RemoveIcon } from './remove-icon'
+export { default as RemoveUserIcon } from './remove-user-icon'
+export { default as RevealIcon } from './reveal-icon'
+export { default as RevokeAllIcon } from './revoke-all-icon'
+export { default as ScanIcon } from './scan-icon'
+export { default as SearchIcon } from './search-icon'
+export { default as SeedPhraseIcon } from './seed-phrase-icon'
+export { default as SentIcon } from './sent-icon'
+export { default as ShareIcon } from './share-icon'
+export { default as StarIcon } from './star-icon'
+export { default as StopIcon } from './stop-icon'
+export { default as StrikethroughIcon } from './strikethrough-icon'
+export { default as TimeIcon } from './time-icon'
+export { default as TimeOffIcon } from './time-off-icon'
+export { default as TimeoutIcon } from './timeout-icon'
+export { default as TokenMasterIcon } from './token-master-icon'
+export { default as TouchIdIcon } from './touch-id-icon'
+export { default as UnderlineIcon } from './underline-icon'
+export { default as UndoIcon } from './undo-icon'
+export { default as UnlockedIcon } from './unlocked-icon'
+export { default as UnpinIcon } from './unpin-icon'
+export { default as UntrustworthyIcon } from './untrustworthy-icon'
+export { default as VerifiedIcon } from './verified-icon'
+export { default as VolumeIcon } from './volume-icon'
+export { default as VolumeMaxIcon } from './volume-max-icon'
+export { default as VolumeMinIcon } from './volume-min-icon'
+export { default as WalletIcon } from './wallet-icon'
+export { default as WarningIcon } from './warning-icon'
+export { default as WebIcon } from './web-icon'

packages/icons/src/12/info-grey-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgInfoGreyIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_1592_839)">
+      <path
+        fill="#647084"
+        fillRule="evenodd"
+        d="M6 11.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Zm.55-6.25.2 4h-1.5l.2-4h1.1ZM5.38 3.625a.625.625 0 1 0 1.25 0 .625.625 0 0 0-1.25 0Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_1592_839">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgInfoGreyIcon

packages/icons/src/12/info-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgInfoIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_1336_287)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M1.55 6a4.45 4.45 0 1 1 8.9 0 4.45 4.45 0 0 1-8.9 0ZM6 .45a5.55 5.55 0 1 0 0 11.1A5.55 5.55 0 0 0 6 .45Zm.55 4.8.2 4h-1.5l.2-4h1.1ZM5.38 3.625a.625.625 0 1 0 1.25 0 .625.625 0 0 0-1.25 0Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_1336_287">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgInfoIcon

packages/icons/src/12/issue-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgIssueIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_6880_21)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M2.5 3.9a1.4 1.4 0 1 0 0-2.8 1.4 1.4 0 0 0 0 2.8Zm0 1.1c.491 0 .95-.142 1.336-.386l.973.973a4 4 0 1 0 .778-.778l-.973-.973A2.5 2.5 0 1 0 2.5 5Zm8.4 3a2.9 2.9 0 1 1-5.8 0 2.9 2.9 0 0 1 5.8 0Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_6880_21">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgIssueIcon

packages/icons/src/12/italic-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgItalicIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M5.886 2.05H3.5V.95h6v1.1H6.992l-.878 7.9H8.5v1.1h-6v-1.1h2.508l.878-7.9Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgItalicIcon

packages/icons/src/12/jump-to-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgJumpToIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_1835_857)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="m10.049 2.539.039-.549-.549-.039-3.5-.25L5.96 2.8l1.955.14c-1.559 1.194-2.53 2.356-3.122 3.517C4.08 7.86 3.95 9.21 3.95 10.499h1.1c0-1.211.122-2.361.724-3.544.532-1.045 1.46-2.157 3.096-3.357L8.701 5.96 9.8 6.04l.25-3.5Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_1835_857">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgJumpToIcon

packages/icons/src/12/key-command-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgKeyCommandIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M8.75 2.55a.7.7 0 0 0-.7.7v.7h.7a.7.7 0 0 0 0-1.4Zm-1.8.7a1.8 1.8 0 1 1 1.8 1.8h-.7v1.9h.7a1.8 1.8 0 1 1-1.8 1.8v-.7h-1.9v.7a1.8 1.8 0 1 1-1.8-1.8h.7v-1.9h-.7a1.8 1.8 0 1 1 1.8-1.8v.7h1.9v-.7Zm-1.9 1.8v1.9h1.9v-1.9h-1.9Zm-1.1-1.1v-.7a.7.7 0 1 0-.7.7h.7Zm0 4.1h-.7a.7.7 0 1 0 .7.7v-.7Zm4.1 0v.7a.7.7 0 1 0 .7-.7h-.7Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgKeyCommandIcon

packages/icons/src/12/key-control-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgKeyControlIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="m6 1.77 4.362 3.816-.724.828L6 3.231 2.362 6.414l-.724-.828L6 1.77Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgKeyControlIcon

packages/icons/src/12/key-enter-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgKeyEnterIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M7.9 3.05c.29 0 .473 0 .612.012a.53.53 0 0 1 .192.037.45.45 0 0 1 .197.197.53.53 0 0 1 .037.192c.012.14.012.323.012.612v1.8c0 .289 0 .473-.012.612a.53.53 0 0 1-.037.192.45.45 0 0 1-.197.197.53.53 0 0 1-.192.037c-.14.012-.323.012-.612.012H3.828l1.56-1.561-.777-.778-2.5 2.5-.389.389.39.389 2.5 2.5.777-.778L3.828 8.05H7.92c.263 0 .492 0 .682-.016.2-.016.404-.052.602-.153a1.55 1.55 0 0 0 .677-.677c.1-.198.137-.402.153-.602.016-.19.016-.419.016-.681V4.08c0-.263 0-.492-.016-.682a1.576 1.576 0 0 0-.153-.602 1.55 1.55 0 0 0-.677-.677 1.577 1.577 0 0 0-.602-.154c-.19-.015-.419-.015-.681-.015H7v1.1h.9Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgKeyEnterIcon

packages/icons/src/12/key-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgKeyIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_7752_19)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M9.248.653a4.123 4.123 0 0 0-5.264 6.168L2.338 9.677l-.11.19.051.212.312 1.306.135.564.556-.165 1.288-.381.21-.063.11-.19.65-1.125.056-.097.014-.11.058-.47.376-.286.088-.067.055-.095.35-.604A4.123 4.123 0 0 0 9.249.653Zm-2.651.606a3.023 3.023 0 1 1-.193 5.885l-.407-.109-.211.364-.495.853-.473.36-.185.14-.028.23-.073.59-.484.838-.522.155-.126-.528 1.736-3.012.21-.365-.297-.298a3.023 3.023 0 0 1 1.548-5.103ZM7.1 3.424a.475.475 0 1 1 .822.475.475.475 0 0 1-.822-.475Zm1.148-1.04a1.475 1.475 0 1 0-1.474 2.554 1.475 1.475 0 0 0 1.474-2.554Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_7752_19">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgKeyIcon

packages/icons/src/12/key-option-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgKeyOptionIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M1.5 2.55h2.619l2.866 7.643.134.357H10.5v-1.1H7.881L5.015 1.807l-.134-.357H1.5v1.1Zm5.5 0h3.5v-1.1H7v1.1Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgKeyOptionIcon

packages/icons/src/12/key-shift-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgKeyShiftIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="m6 1.065 5.08 6.985H8.55c-.002.369-.01.684-.032.944-.033.37-.105.746-.338 1.037-.253.317-.609.428-.947.475-.32.044-.727.044-1.194.044h-.076c-.467 0-.875 0-1.194-.044-.338-.047-.694-.158-.947-.475-.233-.291-.305-.668-.338-1.037-.023-.26-.03-.575-.032-.944H.92L6 1.065ZM3.08 6.95h1.47v.55c0 .636 0 1.075.03 1.397.029.334.082.426.1.447.002.003.008.011.034.023a.78.78 0 0 0 .205.05c.235.032.564.033 1.081.033s.846-.001 1.08-.034a.78.78 0 0 0 .206-.05c.026-.01.032-.018.034-.022.017-.021.071-.113.1-.447.03-.322.03-.761.03-1.397v-.55h1.47L6 2.935 3.08 6.95Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgKeyShiftIcon

packages/icons/src/12/key-space-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgKeySpaceIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M2.55 9.45V7.5h-1.1v3.05h9.1V7.5h-1.1v1.95h-6.9Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgKeySpaceIcon

packages/icons/src/12/key-tab-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgKeyTabIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="m8.923 5.648-2.5-3-.846.704L7.326 5.45H1.5v1.1h5.826L5.577 8.648l.846.704 2.5-3L9.216 6l-.293-.352ZM9.95 3h1.1v6h-1.1V3Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgKeyTabIcon

packages/icons/src/12/keycard-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgKeycardIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M6 2.55c1.076 0 1.892.042 2.517.148.625.107 1.008.27 1.258.477.483.398.675 1.127.675 2.825 0 1.698-.191 2.427-.675 2.825-.25.206-.633.37-1.258.477-.625.106-1.441.148-2.517.148-1.076 0-1.892-.042-2.517-.148-.625-.107-1.008-.27-1.259-.477C1.741 8.427 1.55 7.698 1.55 6c0-1.698.191-2.427.674-2.825.25-.207.634-.37 1.259-.477C4.108 2.592 4.924 2.55 6 2.55ZM11.55 6c0-1.635-.142-2.906-1.076-3.675-.458-.377-1.054-.588-1.772-.711C7.982 1.491 7.09 1.45 6 1.45s-1.983.041-2.702.164c-.719.123-1.315.334-1.773.711C.592 3.094.45 4.365.45 6c0 1.635.142 2.906 1.075 3.675.458.377 1.054.588 1.773.71.719.123 1.61.165 2.702.165 1.09 0 1.983-.042 2.702-.164.718-.123 1.314-.334 1.772-.711.934-.77 1.076-2.04 1.076-3.675Zm-4.996-.727C6.5 5.38 6.5 5.52 6.5 5.8v.4c0 .28 0 .42.054.527a.5.5 0 0 0 .219.218C6.88 7 7.02 7 7.3 7h.9c.28 0 .42 0 .527-.055a.5.5 0 0 0 .218-.218C9 6.62 9 6.48 9 6.2v-.4c0-.28 0-.42-.055-.527a.5.5 0 0 0-.218-.219C8.62 5 8.48 5 8.2 5h-.9c-.28 0-.42 0-.527.054a.5.5 0 0 0-.219.219Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgKeycardIcon

packages/icons/src/12/less-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgLessIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M9.5 6.55h-7v-1.1h7v1.1Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgLessIcon

packages/icons/src/12/link-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgLinkIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_3596_957)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M9.146 2.853a1.95 1.95 0 0 0-2.757 0l-1.06 1.06-.779-.777 1.06-1.06a3.05 3.05 0 1 1 4.314 4.313l-1.06 1.06-.778-.777 1.06-1.061a1.95 1.95 0 0 0 0-2.758Zm-4.95 4.172 2.83-2.828.777.778-2.828 2.828-.778-.778ZM2.854 6.39l1.06-1.06-.777-.779-1.06 1.06a3.05 3.05 0 1 0 4.313 4.314l1.06-1.06-.777-.778-1.061 1.06A1.95 1.95 0 1 1 2.853 6.39Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_3596_957">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgLinkIcon

packages/icons/src/12/list-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgListIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_637_14)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M6 .45c-1.008 0-1.814.031-2.454.105-.634.073-1.146.192-1.542.39-.418.21-.704.505-.87.895C.98 2.203.95 2.607.95 3c0 .393.03.797.184 1.16.166.39.452.686.87.894.396.199.908.318 1.542.39.64.075 1.446.106 2.454.106 1.008 0 1.813-.031 2.453-.105.635-.073 1.146-.192 1.543-.39.417-.21.704-.505.87-.895.154-.363.184-.767.184-1.16 0-.393-.03-.797-.184-1.16-.166-.39-.453-.686-.87-.894-.397-.199-.908-.318-1.543-.39C7.813.48 7.008.45 6 .45ZM2.05 3c0-.357.032-.578.097-.73.053-.126.141-.237.349-.34.228-.115.592-.215 1.176-.282C4.251 1.58 5.008 1.55 6 1.55c.992 0 1.749.031 2.327.098.585.067.948.167 1.177.281.207.104.296.215.349.34.065.153.097.374.097.731s-.032.578-.097.73c-.053.126-.142.237-.35.34-.228.115-.591.215-1.176.282-.578.067-1.335.098-2.327.098s-1.75-.031-2.328-.098c-.584-.067-.948-.167-1.176-.281-.208-.104-.296-.215-.35-.34-.064-.153-.096-.374-.096-.731ZM6 6.45c-1.008 0-1.814.031-2.454.105-.634.073-1.146.192-1.542.39-.418.21-.704.505-.87.895C.98 8.203.95 8.607.95 9c0 .393.03.797.184 1.16.166.39.452.686.87.894.396.199.908.318 1.542.39.64.075 1.446.106 2.454.106 1.008 0 1.813-.031 2.453-.105.635-.073 1.146-.192 1.543-.39.417-.21.704-.505.87-.895.154-.363.184-.767.184-1.16 0-.393-.03-.797-.184-1.16-.166-.39-.453-.686-.87-.894-.397-.199-.908-.318-1.543-.39C7.813 6.48 7.008 6.45 6 6.45ZM2.05 9c0-.357.032-.578.097-.73.053-.126.141-.237.349-.34.228-.115.592-.215 1.176-.282C4.251 7.58 5.008 7.55 6 7.55c.992 0 1.749.031 2.327.098.585.067.948.167 1.177.281.207.104.296.215.349.34.065.153.097.374.097.731s-.032.578-.097.73c-.053.126-.142.237-.35.34-.228.115-.591.215-1.176.282-.578.067-1.335.098-2.327.098s-1.75-.031-2.328-.098c-.584-.067-.948-.167-1.176-.282-.208-.103-.296-.214-.35-.34-.064-.152-.096-.373-.096-.73Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_637_14">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgListIcon

packages/icons/src/12/loading-icon.tsx

@@ -0,0 +1,51 @@
+import type { SVGProps } from 'react'
+
+const SvgLoadingIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_1436_281)">
+      <path stroke="currentColor" strokeWidth={1.1} d="M11 6a5 5 0 1 1-5-5" />
+      <mask
+        id="prefix__mask0_1436_281"
+        width={6}
+        height={6}
+        x={6}
+        y={0}
+        maskUnits="userSpaceOnUse"
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill="url(#prefix__paint0_linear_1436_281)" d="M6 0h6v6H6V0Z" />
+      </mask>
+      <g mask="url(#prefix__mask0_1436_281)">
+        <path stroke="currentColor" strokeWidth={1.1} d="M6 1a5 5 0 0 1 5 5" />
+      </g>
+    </g>
+    <defs>
+      <linearGradient
+        id="prefix__paint0_linear_1436_281"
+        x1={5.6}
+        x2={9.117}
+        y1={1.6}
+        y2={3.928}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#09101C" stopOpacity={0} />
+        <stop offset={1} stopColor="#09101C" />
+      </linearGradient>
+      <clipPath id="prefix__clip0_1436_281">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgLoadingIcon

packages/icons/src/12/locked-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgLockedIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M4.236 2.111c.515-.514 1.18-.66 1.764-.66.585 0 1.25.146 1.764.66.474.474.741 1.18.781 2.136.277.105.523.25.733.449.354.337.542.776.645 1.276.1.491.127 1.085.127 1.778 0 .693-.027 1.287-.127 1.778-.103.5-.29.939-.645 1.277-.352.334-.808.514-1.336.614-.525.1-1.17.131-1.942.131-.773 0-1.417-.03-1.942-.13-.528-.101-.984-.28-1.336-.615-.355-.338-.542-.777-.645-1.277-.1-.491-.127-1.085-.127-1.778 0-.693.027-1.287.127-1.778.103-.5.29-.939.645-1.276.21-.2.456-.344.733-.45.04-.955.308-1.661.781-2.135Zm2.75.778c.189.189.373.522.439 1.118C7.01 3.965 6.535 3.95 6 3.95c-.536 0-1.01.015-1.425.057.066-.596.25-.93.44-1.118.235-.235.57-.339.985-.339.415 0 .75.104.986.34ZM3.155 6.193c-.077.375-.105.875-.105 1.557 0 .682.028 1.182.105 1.558.075.367.188.57.326.7.14.134.368.252.783.33.419.08.978.112 1.736.112s1.317-.031 1.736-.111c.415-.08.642-.197.783-.33.138-.132.25-.334.326-.701.077-.376.105-.876.105-1.558s-.028-1.182-.105-1.557c-.075-.368-.188-.57-.326-.7-.14-.135-.368-.252-.783-.331-.419-.08-.978-.112-1.736-.112s-1.317.032-1.736.112c-.415.079-.642.196-.783.33-.138.131-.25.333-.326.7ZM7 6.95H5v1.1h2v-1.1Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgLockedIcon

packages/icons/src/12/members-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgMembersIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_367_59)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M4 5.95c.364 0 .737.03 1.098.119-.19.147-.371.317-.543.514-.133.152-.255.284-.366.405l-.06.064A5.172 5.172 0 0 0 4 7.05c-.755 0-1.319.155-1.712.576-.356.381-.657 1.069-.724 2.324h2.899c.068-1.425.412-2.423 1.022-3.075C6.182 6.129 7.118 5.95 8 5.95c.882 0 1.818.179 2.515.925.686.733 1.035 1.903 1.035 3.625v.55H6.714v-1.1h3.722c-.068-1.255-.368-1.943-.724-2.324-.394-.42-.957-.576-1.712-.576s-1.319.155-1.712.576c-.405.433-.738 1.263-.738 2.874v.55H.45v-.55c0-1.722.349-2.892 1.035-3.625C2.182 6.129 3.118 5.95 4 5.95ZM5.2 3c0-.489.125-.948.345-1.348a2.05 2.05 0 1 0 0 2.695C5.325 3.947 5.2 3.488 5.2 3ZM3.05 3a.95.95 0 1 1 1.9 0 .95.95 0 0 1-1.9 0ZM8 2.05a.95.95 0 1 0 0 1.9.95.95 0 0 0 0-1.9ZM5.95 3a2.05 2.05 0 1 1 4.1 0 2.05 2.05 0 0 1-4.1 0Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_367_59">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgMembersIcon

packages/icons/src/12/mention-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgMentionIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_1945_871)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M3.876.872A5.55 5.55 0 0 1 11.55 6v.5a2.05 2.05 0 0 1-3.684 1.238 2.55 2.55 0 1 1-.416-3.836V3.5h1.1v3a.95.95 0 0 0 1.9 0V6a4.45 4.45 0 1 0-2.225 3.854l.55.952A5.55 5.55 0 1 1 3.876.872ZM7.45 6a1.45 1.45 0 1 0-2.9 0 1.45 1.45 0 0 0 2.9 0Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_1945_871">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgMentionIcon

packages/icons/src/12/milestones-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgMilestonesIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_6871_55)">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M6.54 2.064A5.464 5.464 0 0 0 6 2.05c-.258 0-.5.004-.727.013.205.234.43.499.656.78.384.48.779 1.021 1.08 1.548.29.507.541 1.082.541 1.609 0 .527-.252 1.102-.541 1.609a12.528 12.528 0 0 1-1.08 1.547 21.99 21.99 0 0 1-.656.781c.227.009.469.013.727.013.276 0 .387 0 .54-.014.704-.065 1.641-.508 2.139-1.01.11-.113.145-.155.23-.258l.003-.004c.391-.476.788-1.004 1.084-1.501.31-.521.454-.92.454-1.163s-.145-.642-.454-1.163a12.692 12.692 0 0 0-1.084-1.501l-.003-.004c-.085-.103-.12-.145-.23-.257-.498-.503-1.435-.946-2.14-1.01ZM3.902 9.81a23.189 23.189 0 0 0 1.169-1.34c.366-.458.721-.949.983-1.406.273-.478.396-.84.396-1.063 0-.223-.123-.585-.396-1.063A11.455 11.455 0 0 0 5.07 3.53a22.237 22.237 0 0 0-1.169-1.34c-.817.14-1.318.377-1.638.698-.53.53-.714 1.427-.714 3.111 0 1.684.184 2.582.714 3.111.32.32.82.559 1.638.698ZM6 .95h.015c.259 0 .418 0 .625.019.963.088 2.141.645 2.82 1.332.146.147.204.217.301.336.409.497.844 1.073 1.18 1.638.322.542.609 1.163.609 1.725s-.287 1.183-.609 1.725a13.763 13.763 0 0 1-1.18 1.638 4.04 4.04 0 0 1-.3.336c-.68.687-1.858 1.244-2.82 1.332-.208.019-.367.019-.626.019H6c-2.165 0-3.632-.279-4.514-1.161C.599 9.002.45 7.649.45 6c0-1.65.149-3.002 1.036-3.889C2.368 1.229 3.835.95 6 .95Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_6871_55">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgMilestonesIcon

packages/icons/src/12/mobile-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgMobileIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M2.55 6c0-1.122.032-1.962.127-2.598.095-.639.246-1.009.436-1.241.179-.218.441-.375.903-.475.476-.104 1.11-.136 1.984-.136.874 0 1.509.032 1.985.136.461.1.724.257.902.475.19.232.341.602.436 1.24.095.637.127 1.477.127 2.599s-.032 1.962-.127 2.598c-.095.639-.246 1.009-.436 1.241-.178.218-.441.375-.902.475-.476.104-1.111.136-1.985.136-.873 0-1.508-.032-1.984-.136-.462-.1-.724-.257-.903-.475-.19-.232-.34-.602-.436-1.24C2.582 7.961 2.55 7.121 2.55 6ZM6 .45c-.876 0-1.616.03-2.218.16-.617.135-1.136.385-1.52.854-.372.455-.565 1.054-.673 1.775C1.481 3.962 1.45 4.872 1.45 6c0 1.128.031 2.038.14 2.76.107.722.3 1.32.672 1.776.384.47.903.719 1.52.853.602.13 1.342.161 2.218.161.877 0 1.616-.03 2.218-.161.617-.134 1.136-.384 1.52-.853.373-.455.566-1.054.673-1.775.108-.723.14-1.633.14-2.761 0-1.128-.032-2.038-.14-2.761-.107-.721-.3-1.32-.673-1.775-.384-.47-.903-.719-1.52-.853C7.616.48 6.877.45 6 .45Zm-1.5 3.6h3v-1.1h-3v1.1Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgMobileIcon

packages/icons/src/12/mutual-contact-icon.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from 'react'
+
+const SvgMutualContactIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="var(--customisation-50, #2A4AF5)"
+      fillRule="evenodd"
+      d="M4.726 3.22a3.5 3.5 0 1 0 0 6.559A4.98 4.98 0 0 1 3.5 6.5a4.98 4.98 0 0 1 1.226-3.28Z"
+      clipRule="evenodd"
+      opacity={0.4}
+    />
+    <circle cx={8.5} cy={6.5} r={3.5} fill="var(--customisation-50, #2A4AF5)" />
+  </svg>
+)
+export default SvgMutualContactIcon

packages/icons/src/12/negative-icon.tsx

@@ -0,0 +1,37 @@
+import type { SVGProps } from 'react'
+
+const SvgNegativeIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_536_27)">
+      <circle
+        cx={6}
+        cy={6}
+        r={5}
+        stroke="#E95460"
+        strokeWidth={1.1}
+        opacity={0.4}
+      />
+      <path
+        fill="#E95460"
+        fillRule="evenodd"
+        d="m6.55 7.172 1.561-1.56.778.777-2.5 2.5L6 9.278l-.389-.39-2.5-2.5.778-.777L5.45 7.172V3h1.1v4.172Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_536_27">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgNegativeIcon

packages/icons/src/12/negative-state-icon.tsx

@@ -0,0 +1,37 @@
+import type { SVGProps } from 'react'
+
+const SvgNegativeStateIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_3271_988)">
+      <circle
+        cx={6}
+        cy={6}
+        r={5.45}
+        stroke="#E95460"
+        strokeWidth={1.1}
+        opacity={0.4}
+      />
+      <path
+        fill="#E95460"
+        fillRule="evenodd"
+        d="m5.25 3 .2 4h1.1l.2-4h-1.5Zm.745 5a.625.625 0 1 1 0 1.25.625.625 0 0 1 0-1.25Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_3271_988">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgNegativeStateIcon

packages/icons/src/12/neutral-icon.tsx

@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react'
+
+const SvgNeutralIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <g clipPath="url(#prefix__clip0_7275_22)">
+      <circle cx={6} cy={6} r={5.5} fill="#647084" />
+      <path stroke="#fff" strokeWidth={1.1} d="M3.5 6h5" />
+    </g>
+    <defs>
+      <clipPath id="prefix__clip0_7275_22">
+        <path fill="#fff" d="M0 0h12v12H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+export default SvgNeutralIcon

packages/icons/src/12/notification-badge-icon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react'
+
+const SvgNotificationBadgeIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <circle cx={6} cy={6} r={4} fill="var(--customisation-50, #2A4AF5)" />
+  </svg>
+)
+export default SvgNotificationBadgeIcon

packages/icons/src/12/numbered-list-icon.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+const SvgNumberedListIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M4 1.45h7v1.1H4v-1.1Zm0 4h7v1.1H4v-1.1Zm7 4H4v1.1h7v-1.1Z"
+      clipRule="evenodd"
+      opacity={0.4}
+    />
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M1.84 1.092c-.105.1-.293.152-.485.152h-.112v-.58h.076c.336-.012.528-.14.64-.444h.524V3H1.84V1.092ZM.941 6.528c.416-.252.76-.492 1.004-.72.272-.252.38-.46.38-.732 0-.264-.128-.408-.36-.408-.236 0-.376.152-.376.4 0 .068.012.144.028.228l-.656-.064a1.02 1.02 0 0 1-.024-.216c0-.52.408-.856 1.06-.856.64 0 1.016.316 1.016.868 0 .372-.164.688-.5.988-.184.16-.412.316-.692.472h1.216V7H.942v-.472Zm-.049 3.628c.008.556.428.904 1.096.904.66 0 1.084-.324 1.084-.836 0-.376-.22-.604-.628-.664.332-.076.556-.324.556-.636 0-.484-.364-.764-1.004-.764-.656 0-1.076.348-1.076.892l.636.084c0-.308.148-.488.408-.488.236 0 .372.128.372.352 0 .236-.144.368-.428.368h-.144v.44h.152c.324 0 .48.128.48.372s-.14.384-.404.384c-.272 0-.444-.176-.448-.468l-.652.06Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgNumberedListIcon

packages/icons/src/12/off-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+const SvgOffIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M5.45 1v4.5h1.1V1h-1.1Zm2.525 1.58a3.95 3.95 0 1 1-3.95 0l-.55-.954a5.05 5.05 0 1 0 5.05 0l-.55.953Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+export default SvgOffIcon

packages/icons/src/12/on-icon.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react'
+
+const SvgOnIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={12}
+    height={12}
+    fill="none"
+    viewBox="0 0 12 12"
+    aria-hidden={true}
+    focusable={false}
+    {...props}
+  >
+    <path
+      stroke="currentColor"
+      strokeWidth={1.1}
+      d="m8 1.5-1.5 3H10L4.5 10 5 7H2l2.5-5.5H8Z"
+    />
+  </svg>
+)
+export default SvgOnIcon