diff --git a/packages/components/src/accordion/accordion.tsx b/packages/components/src/accordion/accordion.tsx
index 25b8262a..fc3f42bc 100644
--- a/packages/components/src/accordion/accordion.tsx
+++ b/packages/components/src/accordion/accordion.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { ChevronRight } from '@status-im/icons/20'
+import { ChevronRightIcon } from '@status-im/icons/20'
 import { Stack } from '@tamagui/core'
 import { AnimatePresence } from 'tamagui'
 
@@ -58,7 +58,7 @@ const Accordion = ({
                   },
                 ]}
               >
-                <ChevronRight color="$neutral-50" />
+                <ChevronRightIcon color="$neutral-50" />
               </Stack>
               <Paragraph
                 marginLeft={4}
diff --git a/packages/components/src/accordion/accordionItem.tsx b/packages/components/src/accordion/accordionItem.tsx
index 0b81b9ee..484fe7e5 100644
--- a/packages/components/src/accordion/accordionItem.tsx
+++ b/packages/components/src/accordion/accordionItem.tsx
@@ -1,4 +1,4 @@
-import { Muted } from '@status-im/icons/20'
+import { MutedIcon } from '@status-im/icons/20'
 import { Stack } from '@tamagui/core'
 
 import { Label, Paragraph } from '../typography'
@@ -108,7 +108,7 @@ const AccordionItem = ({
               />
             </Stack>
           )}
-          {channelStatus === 'muted' && <Muted color="$neutral-40" />}
+          {channelStatus === 'muted' && <MutedIcon color="$neutral-40" />}
         </Stack>
       )}
     </Stack>
diff --git a/packages/components/src/author/author.tsx b/packages/components/src/author/author.tsx
index 92406a73..8ea8f65d 100644
--- a/packages/components/src/author/author.tsx
+++ b/packages/components/src/author/author.tsx
@@ -1,4 +1,8 @@
-import { Contact, Untrustworthy, Verified } from '@status-im/icons/12'
+import {
+  ContactIcon,
+  UntrustworthyIcon,
+  VerifiedIcon,
+} from '@status-im/icons/12'
 import { XStack } from 'tamagui'
 
 import { Paragraph } from '../typography'
@@ -21,9 +25,9 @@ const Author = (props: Props) => {
         <Paragraph weight="semibold" variant="smaller" color="$neutral-100">
           {name}
         </Paragraph>
-        {status === 'contact' && <Contact />}
-        {status === 'verified' && <Verified />}
-        {status === 'untrustworthy' && <Untrustworthy />}
+        {status === 'contact' && <ContactIcon />}
+        {status === 'verified' && <VerifiedIcon />}
+        {status === 'untrustworthy' && <UntrustworthyIcon />}
       </XStack>
 
       {address && (
diff --git a/packages/components/src/button/button.stories.tsx b/packages/components/src/button/button.stories.tsx
index a68a3ee3..3f7d115c 100644
--- a/packages/components/src/button/button.stories.tsx
+++ b/packages/components/src/button/button.stories.tsx
@@ -17,9 +17,50 @@ export const Primary: Story = {
   },
 }
 
-export const PrimaryLong: Story = {
+const icon = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10 15.7C11.3398 15.7 12.5717 15.2377 13.5448 14.464L9.88475 10.804L6.43975 14.4516C7.41525 15.2328 8.65306 15.7 10 15.7ZM5.52328 13.5287L8.96514 9.88437L5.53601 6.45524C4.76227 7.42833 4.3 8.66018 4.3 10C4.3 11.3325 4.7572 12.5581 5.52328 13.5287ZM9.85811 8.93887L6.45525 5.536C7.42834 4.76227 8.66018 4.3 10 4.3C11.2156 4.3 12.3423 4.68051 13.2675 5.32892L9.85811 8.93887ZM10.7777 9.85848L14.241 6.19151C15.1481 7.20095 15.7 8.53602 15.7 10C15.7 11.3398 15.2377 12.5717 14.464 13.5448L10.7777 9.85848ZM10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17Z"
+      fill="white"
+    />
+  </svg>
+)
+
+export const Primary32: Story = {
+  name: 'Primary/32px',
   args: {
-    children: 'Lorem ipsum dim sum',
+    size: 32,
+    children: 'Click me',
+  },
+}
+
+export const PrimaryIconBefore: Story = {
+  name: 'Primary icon before',
+  args: {
+    children: 'Click me',
+    icon,
+  },
+}
+
+export const PrimaryIconAfter: Story = {
+  name: 'Primary/Icon after',
+  args: {
+    children: 'Click me',
+    iconAfter: icon,
+  },
+}
+export const PrimaryIconOnly: Story = {
+  name: 'Primary/Icon only',
+  args: {
+    icon,
   },
 }
 
@@ -30,4 +71,18 @@ export const Success: Story = {
   },
 }
 
+export const Outline: Story = {
+  args: {
+    type: 'outline',
+    children: 'Click me',
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    type: 'ghost',
+    children: 'Click me',
+  },
+}
+
 export default meta
diff --git a/packages/components/src/composer/composer.tsx b/packages/components/src/composer/composer.tsx
index 8f2b99c7..39af16d6 100644
--- a/packages/components/src/composer/composer.tsx
+++ b/packages/components/src/composer/composer.tsx
@@ -1,4 +1,9 @@
-import { Audio, Format, Image, Reaction } from '@status-im/icons/20'
+import {
+  AudioIcon,
+  FormatIcon,
+  ImageIcon,
+  ReactionIcon,
+} from '@status-im/icons/20'
 import { Stack, XStack, YStack } from 'tamagui'
 
 import { IconButton } from '../icon-button'
@@ -34,11 +39,11 @@ const Composer = (props: BaseProps) => {
       </YStack>
       <XStack alignItems="center" justifyContent="space-between" pt={8}>
         <Stack space={12} flexDirection="row">
-          <IconButton noBackground icon={<Image />} />
-          <IconButton noBackground icon={<Reaction />} />
-          <IconButton noBackground icon={<Format />} />
+          <IconButton noBackground icon={<ImageIcon />} />
+          <IconButton noBackground icon={<ReactionIcon />} />
+          <IconButton noBackground icon={<FormatIcon />} />
         </Stack>
-        <IconButton noBackground icon={<Audio />} />
+        <IconButton noBackground icon={<AudioIcon />} />
       </XStack>
     </YStack>
   )
diff --git a/packages/components/src/icon-button/icon-button.stories.tsx b/packages/components/src/icon-button/icon-button.stories.tsx
index 6fa7028e..1244e78d 100644
--- a/packages/components/src/icon-button/icon-button.stories.tsx
+++ b/packages/components/src/icon-button/icon-button.stories.tsx
@@ -1,4 +1,4 @@
-import { Options } from '@status-im/icons/20'
+import { OptionsIcon } from '@status-im/icons/20'
 
 import { IconButton } from './icon-button'
 
@@ -15,7 +15,7 @@ type Story = StoryObj<typeof IconButton>
 // More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
 export const Default: Story = {
   args: {
-    icon: <Options />,
+    icon: <OptionsIcon />,
   },
 }
 
diff --git a/packages/components/src/icons/icons.stories.tsx b/packages/components/src/icons/icons.stories.tsx
index 3f8f5b24..c0050ce6 100644
--- a/packages/components/src/icons/icons.stories.tsx
+++ b/packages/components/src/icons/icons.stories.tsx
@@ -34,7 +34,7 @@ export const All: Story = {
           {Object.keys(icons12).map(name => {
             // @ts-ignore
             // eslint-disable-next-line import/namespace
-            const Icon = icons[name] as React.FunctionComponent<IconProps>
+            const Icon = icons12[name] as React.FunctionComponent<IconProps>
 
             return (
               <div
@@ -51,7 +51,7 @@ export const All: Story = {
           {Object.keys(icons16).map(name => {
             // @ts-ignore
             // eslint-disable-next-line import/namespace
-            const Icon = icons[name] as React.FunctionComponent<IconProps>
+            const Icon = icons16[name] as React.FunctionComponent<IconProps>
 
             return (
               <div
@@ -68,7 +68,7 @@ export const All: Story = {
           {Object.keys(icons20).map(name => {
             // @ts-ignore
             // eslint-disable-next-line import/namespace
-            const Icon = icons[name] as React.FunctionComponent<IconProps>
+            const Icon = icons20[name] as React.FunctionComponent<IconProps>
 
             return (
               <div
@@ -85,7 +85,7 @@ export const All: Story = {
           {Object.keys(reactions).map(name => {
             // @ts-ignore
             // eslint-disable-next-line import/namespace
-            const Icon = icons[name] as React.FunctionComponent<IconProps>
+            const Icon = reactions[name] as React.FunctionComponent<IconProps>
 
             return (
               <div
diff --git a/packages/components/src/messages/components/actions.tsx b/packages/components/src/messages/components/actions.tsx
index 30c73bd0..8cd7f093 100644
--- a/packages/components/src/messages/components/actions.tsx
+++ b/packages/components/src/messages/components/actions.tsx
@@ -1,4 +1,4 @@
-import { AddReaction, Options, Reply } from '@status-im/icons/20'
+import { AddReactionIcon, OptionsIcon, ReplyIcon } from '@status-im/icons/20'
 import { Stack } from 'tamagui'
 
 import { Button } from '../../button'
@@ -23,9 +23,9 @@ export const Actions = (_props: Props) => {
       shadowColor="rgba(9, 16, 28, 0.08)"
       zIndex={10}
     >
-      <Button type="ghost" icon={<AddReaction />} borderRadius={0} />
-      <Button type="ghost" icon={<Reply />} borderRadius={0} />
-      <Button type="ghost" icon={<Options />} borderRadius={0} />
+      <Button type="ghost" icon={<AddReactionIcon />} borderRadius={0} />
+      <Button type="ghost" icon={<ReplyIcon />} borderRadius={0} />
+      <Button type="ghost" icon={<OptionsIcon />} borderRadius={0} />
     </Stack>
   )
 }
diff --git a/packages/components/src/messages/components/reactions.tsx b/packages/components/src/messages/components/reactions.tsx
index a28ba3c3..66988263 100644
--- a/packages/components/src/messages/components/reactions.tsx
+++ b/packages/components/src/messages/components/reactions.tsx
@@ -1,13 +1,13 @@
 import { cloneElement } from 'react'
 
-import { AddReaction } from '@status-im/icons/20'
+import { AddReactionIcon } from '@status-im/icons/20'
 import {
-  Angry,
-  Laugh,
-  Love,
-  Sad,
-  ThumbsDown,
-  ThumbsUp,
+  AngryIcon,
+  LaughIcon,
+  LoveIcon,
+  SadIcon,
+  ThumbsDownIcon,
+  ThumbsUpIcon,
 } from '@status-im/icons/reactions'
 import { Stack, styled } from '@tamagui/core'
 import { XStack } from 'tamagui'
@@ -75,14 +75,13 @@ export const Reactions = (props: Props) => {
 
   return (
     <XStack space={8}>
-      <ReactionButton count={1} icon={<Love />} selected />
-      <ReactionButton count={10} icon={<ThumbsUp />} />
-      <ReactionButton count={99} icon={<ThumbsDown />} />
-      <ReactionButton count={100} icon={<Laugh />} />
-      <ReactionButton count={100} icon={<Sad />} />
-      {/* <ReactionButton count={100} icon={ang} /> */}
-      <ReactionButton count={100} icon={<Angry />} />
-      <ReactionButton icon={<AddReaction />} />
+      <ReactionButton count={1} icon={<LoveIcon />} selected />
+      <ReactionButton count={10} icon={<ThumbsUpIcon />} />
+      <ReactionButton count={99} icon={<ThumbsDownIcon />} />
+      <ReactionButton count={100} icon={<LaughIcon />} />
+      <ReactionButton count={100} icon={<SadIcon />} />
+      <ReactionButton count={100} icon={<AngryIcon />} />
+      <ReactionButton icon={<AddReactionIcon />} />
     </XStack>
   )
 }
diff --git a/packages/components/src/sidebar/sidebar.tsx b/packages/components/src/sidebar/sidebar.tsx
index 2a6cfa23..67adf7ef 100644
--- a/packages/components/src/sidebar/sidebar.tsx
+++ b/packages/components/src/sidebar/sidebar.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-import { Group } from '@status-im/icons/16'
+import { GroupIcon } from '@status-im/icons/16'
 import { Stack } from '@tamagui/core'
 
 import { Accordion } from '../accordion/accordion'
@@ -87,7 +87,7 @@ const Sidebar = (props: Props) => {
           <Heading marginBottom={16}>{name}</Heading>
           <Paragraph marginBottom={12}>{description}</Paragraph>
           <Stack flexDirection="row" alignItems="center" mb={12}>
-            <Group color="$neutral-100" />
+            <GroupIcon color="$neutral-100" />
             <Paragraph ml={8}>{membersCount}</Paragraph>
           </Stack>
 
diff --git a/packages/icons/12/add.tsx b/packages/icons/12/add-icon.tsx
similarity index 89%
rename from packages/icons/12/add.tsx
rename to packages/icons/12/add-icon.tsx
index 48149081..ac662aa7 100644
--- a/packages/icons/12/add.tsx
+++ b/packages/icons/12/add-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAdd = (props: SvgProps) => {
+const SvgAddIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgAdd = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAdd
+export default SvgAddIcon
diff --git a/packages/icons/12/add-reaction.tsx b/packages/icons/12/add-reaction-icon.tsx
similarity index 82%
rename from packages/icons/12/add-reaction.tsx
rename to packages/icons/12/add-reaction-icon.tsx
index 24afd345..2bbb6722 100644
--- a/packages/icons/12/add-reaction.tsx
+++ b/packages/icons/12/add-reaction-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAddReaction = (props: SvgProps) => {
+const SvgAddReactionIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,7 +14,7 @@ const SvgAddReaction = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#add-reaction_svg__a)">
+      <G clipPath="url(#add-reaction-icon_svg__a)">
         <Path d="M7.294 1.17A5 5 0 1 0 11 6" stroke={color} strokeWidth={1.1} />
         <Path d="M4.068 7a2 2 0 0 0 3.864 0" stroke={color} strokeWidth={1.1} />
         <Circle cx={4.75} cy={4.75} r={0.75} fill={color} />
@@ -22,11 +22,11 @@ const SvgAddReaction = (props: SvgProps) => {
         <Path d="M8 2.5h4M10 .5v4" stroke={color} strokeWidth={1.1} />
       </G>
       <Defs>
-        <ClipPath id="add-reaction_svg__a">
+        <ClipPath id="add-reaction-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgAddReaction
+export default SvgAddReactionIcon
diff --git a/packages/icons/12/alert.tsx b/packages/icons/12/alert-icon.tsx
similarity index 88%
rename from packages/icons/12/alert.tsx
rename to packages/icons/12/alert-icon.tsx
index bdcaeae4..dd716a24 100644
--- a/packages/icons/12/alert.tsx
+++ b/packages/icons/12/alert-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAlert = (props: SvgProps) => {
+const SvgAlertIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgAlert = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAlert
+export default SvgAlertIcon
diff --git a/packages/icons/12/arrow-down.tsx b/packages/icons/12/arrow-down-icon.tsx
similarity index 88%
rename from packages/icons/12/arrow-down.tsx
rename to packages/icons/12/arrow-down-icon.tsx
index e7c81277..feb20b51 100644
--- a/packages/icons/12/arrow-down.tsx
+++ b/packages/icons/12/arrow-down-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgArrowDown = (props: SvgProps) => {
+const SvgArrowDownIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgArrowDown = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgArrowDown
+export default SvgArrowDownIcon
diff --git a/packages/icons/12/arrow-right.tsx b/packages/icons/12/arrow-right-icon.tsx
similarity index 88%
rename from packages/icons/12/arrow-right.tsx
rename to packages/icons/12/arrow-right-icon.tsx
index ac13049b..967c5b80 100644
--- a/packages/icons/12/arrow-right.tsx
+++ b/packages/icons/12/arrow-right-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgArrowRight = (props: SvgProps) => {
+const SvgArrowRightIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgArrowRight = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgArrowRight
+export default SvgArrowRightIcon
diff --git a/packages/icons/12/arrow-up.tsx b/packages/icons/12/arrow-up-icon.tsx
similarity index 88%
rename from packages/icons/12/arrow-up.tsx
rename to packages/icons/12/arrow-up-icon.tsx
index b9cd7e75..ff76223d 100644
--- a/packages/icons/12/arrow-up.tsx
+++ b/packages/icons/12/arrow-up-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgArrowUp = (props: SvgProps) => {
+const SvgArrowUpIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgArrowUp = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgArrowUp
+export default SvgArrowUpIcon
diff --git a/packages/icons/12/block.tsx b/packages/icons/12/block-icon.tsx
similarity index 83%
rename from packages/icons/12/block.tsx
rename to packages/icons/12/block-icon.tsx
index 42b77e88..64843f57 100644
--- a/packages/icons/12/block.tsx
+++ b/packages/icons/12/block-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgBlock = (props: SvgProps) => {
+const SvgBlockIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,7 +14,7 @@ const SvgBlock = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#block_svg__a)">
+      <G clipPath="url(#block-icon_svg__a)">
         <Path
           fillRule="evenodd"
           clipRule="evenodd"
@@ -23,11 +23,11 @@ const SvgBlock = (props: SvgProps) => {
         />
       </G>
       <Defs>
-        <ClipPath id="block_svg__a">
+        <ClipPath id="block-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgBlock
+export default SvgBlockIcon
diff --git a/packages/icons/12/camera.tsx b/packages/icons/12/camera-icon.tsx
similarity index 82%
rename from packages/icons/12/camera.tsx
rename to packages/icons/12/camera-icon.tsx
index f2f42ea8..b11731b0 100644
--- a/packages/icons/12/camera.tsx
+++ b/packages/icons/12/camera-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCamera = (props: SvgProps) => {
+const SvgCameraIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,16 +14,16 @@ const SvgCamera = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#camera_svg__a)" stroke={color} strokeWidth={1.1}>
+      <G clipPath="url(#camera-icon_svg__a)" stroke={color} strokeWidth={1.1}>
         <Path d="M1 4.2c0-.94.76-1.7 1.7-1.7h.211c.514 0 .984-.29 1.214-.75.23-.46.7-.75 1.214-.75H6.66c.514 0 .984.29 1.214.75.23.46.7.75 1.214.75H9.3c.94 0 1.7.76 1.7 1.7v2.55c0 1.164 0 1.745-.16 2.214a3 3 0 0 1-1.876 1.877C8.495 11 7.914 11 6.75 11h-1.5c-1.164 0-1.745 0-2.214-.16a3 3 0 0 1-1.877-1.876C1 8.495 1 7.914 1 6.75V4.2Z" />
         <Circle cx={6} cy={6.5} r={2} />
       </G>
       <Defs>
-        <ClipPath id="camera_svg__a">
+        <ClipPath id="camera-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgCamera
+export default SvgCameraIcon
diff --git a/packages/icons/12/cards.tsx b/packages/icons/12/cards-icon.tsx
similarity index 85%
rename from packages/icons/12/cards.tsx
rename to packages/icons/12/cards-icon.tsx
index cb095d34..b546406b 100644
--- a/packages/icons/12/cards.tsx
+++ b/packages/icons/12/cards-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCards = (props: SvgProps) => {
+const SvgCardsIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,16 +14,16 @@ const SvgCards = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#cards_svg__a)" stroke={color} strokeWidth={1.1}>
+      <G clipPath="url(#cards-icon_svg__a)" stroke={color} strokeWidth={1.1}>
         <Path d="M1 4.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C2.52 1 3.08 1 4.2 1h3.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C11 2.52 11 3.08 11 4.2v3.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C9.48 11 8.92 11 7.8 11H4.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C1 9.48 1 8.92 1 7.8V4.2Z" />
         <Path d="M1 7.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C2.52 4 3.08 4 4.2 4h3.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C11 5.52 11 6.08 11 7.2v.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C9.48 11 8.92 11 7.8 11H4.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C1 9.48 1 8.92 1 7.8v-.6Z" />
       </G>
       <Defs>
-        <ClipPath id="cards_svg__a">
+        <ClipPath id="cards-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgCards
+export default SvgCardsIcon
diff --git a/packages/icons/12/check.tsx b/packages/icons/12/check-icon.tsx
similarity index 88%
rename from packages/icons/12/check.tsx
rename to packages/icons/12/check-icon.tsx
index 96a23e9b..fb676ac7 100644
--- a/packages/icons/12/check.tsx
+++ b/packages/icons/12/check-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCheck = (props: SvgProps) => {
+const SvgCheckIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgCheck = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgCheck
+export default SvgCheckIcon
diff --git a/packages/icons/12/check-large.tsx b/packages/icons/12/check-large-icon.tsx
similarity index 85%
rename from packages/icons/12/check-large.tsx
rename to packages/icons/12/check-large-icon.tsx
index 281d1498..3bd5994f 100644
--- a/packages/icons/12/check-large.tsx
+++ b/packages/icons/12/check-large-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCheckLarge = (props: SvgProps) => {
+const SvgCheckLargeIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgCheckLarge = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgCheckLarge
+export default SvgCheckLargeIcon
diff --git a/packages/icons/12/chevron-bottom.tsx b/packages/icons/12/chevron-bottom-icon.tsx
similarity index 84%
rename from packages/icons/12/chevron-bottom.tsx
rename to packages/icons/12/chevron-bottom-icon.tsx
index 3a79d201..eef99484 100644
--- a/packages/icons/12/chevron-bottom.tsx
+++ b/packages/icons/12/chevron-bottom-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgChevronBottom = (props: SvgProps) => {
+const SvgChevronBottomIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgChevronBottom = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgChevronBottom
+export default SvgChevronBottomIcon
diff --git a/packages/icons/12/chevron-left.tsx b/packages/icons/12/chevron-left-icon.tsx
similarity index 84%
rename from packages/icons/12/chevron-left.tsx
rename to packages/icons/12/chevron-left-icon.tsx
index da637b26..eebf4ffb 100644
--- a/packages/icons/12/chevron-left.tsx
+++ b/packages/icons/12/chevron-left-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgChevronLeft = (props: SvgProps) => {
+const SvgChevronLeftIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgChevronLeft = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgChevronLeft
+export default SvgChevronLeftIcon
diff --git a/packages/icons/12/chevron-right.tsx b/packages/icons/12/chevron-right-icon.tsx
similarity index 84%
rename from packages/icons/12/chevron-right.tsx
rename to packages/icons/12/chevron-right-icon.tsx
index aead58f5..01dc4ff4 100644
--- a/packages/icons/12/chevron-right.tsx
+++ b/packages/icons/12/chevron-right-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgChevronRight = (props: SvgProps) => {
+const SvgChevronRightIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgChevronRight = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgChevronRight
+export default SvgChevronRightIcon
diff --git a/packages/icons/12/chevron-top.tsx b/packages/icons/12/chevron-top-icon.tsx
similarity index 85%
rename from packages/icons/12/chevron-top.tsx
rename to packages/icons/12/chevron-top-icon.tsx
index 9ea3fcab..f88e9391 100644
--- a/packages/icons/12/chevron-top.tsx
+++ b/packages/icons/12/chevron-top-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgChevronTop = (props: SvgProps) => {
+const SvgChevronTopIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgChevronTop = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgChevronTop
+export default SvgChevronTopIcon
diff --git a/packages/icons/12/close.tsx b/packages/icons/12/close-icon.tsx
similarity index 87%
rename from packages/icons/12/close.tsx
rename to packages/icons/12/close-icon.tsx
index 025d194a..e740c5ca 100644
--- a/packages/icons/12/close.tsx
+++ b/packages/icons/12/close-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgClose = (props: SvgProps) => {
+const SvgCloseIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -22,4 +22,4 @@ const SvgClose = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgClose
+export default SvgCloseIcon
diff --git a/packages/icons/12/color.tsx b/packages/icons/12/color-icon.tsx
similarity index 89%
rename from packages/icons/12/color.tsx
rename to packages/icons/12/color-icon.tsx
index f013a158..5108bbc3 100644
--- a/packages/icons/12/color.tsx
+++ b/packages/icons/12/color-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgColor = (props: SvgProps) => {
+const SvgColorIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -24,4 +24,4 @@ const SvgColor = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgColor
+export default SvgColorIcon
diff --git a/packages/icons/12/communities.tsx b/packages/icons/12/communities-icon.tsx
similarity index 88%
rename from packages/icons/12/communities.tsx
rename to packages/icons/12/communities-icon.tsx
index eec458b0..fd69f9d7 100644
--- a/packages/icons/12/communities.tsx
+++ b/packages/icons/12/communities-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCommunities = (props: SvgProps) => {
+const SvgCommunitiesIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,7 +14,7 @@ const SvgCommunities = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#communities_svg__a)">
+      <G clipPath="url(#communities-icon_svg__a)">
         <Path
           fillRule="evenodd"
           clipRule="evenodd"
@@ -23,11 +23,11 @@ const SvgCommunities = (props: SvgProps) => {
         />
       </G>
       <Defs>
-        <ClipPath id="communities_svg__a">
+        <ClipPath id="communities-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgCommunities
+export default SvgCommunitiesIcon
diff --git a/packages/icons/12/contact.tsx b/packages/icons/12/contact-icon.tsx
similarity index 90%
rename from packages/icons/12/contact.tsx
rename to packages/icons/12/contact-icon.tsx
index 793271e2..b1e3627e 100644
--- a/packages/icons/12/contact.tsx
+++ b/packages/icons/12/contact-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgContact = (props: SvgProps) => {
+const SvgContactIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -25,4 +25,4 @@ const SvgContact = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgContact
+export default SvgContactIcon
diff --git a/packages/icons/12/copy.tsx b/packages/icons/12/copy-icon.tsx
similarity index 86%
rename from packages/icons/12/copy.tsx
rename to packages/icons/12/copy-icon.tsx
index 94ba5b0a..1422926f 100644
--- a/packages/icons/12/copy.tsx
+++ b/packages/icons/12/copy-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCopy = (props: SvgProps) => {
+const SvgCopyIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,7 +14,7 @@ const SvgCopy = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#copy_svg__a)" strokeWidth={1.1}>
+      <G clipPath="url(#copy-icon_svg__a)" strokeWidth={1.1}>
         <Path
           d="M8 3a2 2 0 0 0-2-2H4.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C1 2.52 1 3.08 1 4.2V6a2 2 0 0 0 2 2"
           stroke="#1B273D"
@@ -26,11 +26,11 @@ const SvgCopy = (props: SvgProps) => {
         />
       </G>
       <Defs>
-        <ClipPath id="copy_svg__a">
+        <ClipPath id="copy-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgCopy
+export default SvgCopyIcon
diff --git a/packages/icons/12/delivered.tsx b/packages/icons/12/delivered-icon.tsx
similarity index 89%
rename from packages/icons/12/delivered.tsx
rename to packages/icons/12/delivered-icon.tsx
index 4f4e670e..ee5a2294 100644
--- a/packages/icons/12/delivered.tsx
+++ b/packages/icons/12/delivered-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgDelivered = (props: SvgProps) => {
+const SvgDeliveredIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgDelivered = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgDelivered
+export default SvgDeliveredIcon
diff --git a/packages/icons/12/dropdown.tsx b/packages/icons/12/dropdown-icon.tsx
similarity index 79%
rename from packages/icons/12/dropdown.tsx
rename to packages/icons/12/dropdown-icon.tsx
index 4f3be25a..409d2c72 100644
--- a/packages/icons/12/dropdown.tsx
+++ b/packages/icons/12/dropdown-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgDropdown = (props: SvgProps) => {
+const SvgDropdownIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,16 +14,16 @@ const SvgDropdown = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#dropdown_svg__a)">
+      <G clipPath="url(#dropdown-icon_svg__a)">
         <Circle cx={6} cy={6} r={6} fill="#E7EAEE" />
         <Path d="m3 4.75 3 3 3-3" stroke={color} strokeWidth={1.1} />
       </G>
       <Defs>
-        <ClipPath id="dropdown_svg__a">
+        <ClipPath id="dropdown-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgDropdown
+export default SvgDropdownIcon
diff --git a/packages/icons/12/edit.tsx b/packages/icons/12/edit-icon.tsx
similarity index 92%
rename from packages/icons/12/edit.tsx
rename to packages/icons/12/edit-icon.tsx
index 3618a340..163cc314 100644
--- a/packages/icons/12/edit.tsx
+++ b/packages/icons/12/edit-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgEdit = (props: SvgProps) => {
+const SvgEditIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgEdit = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgEdit
+export default SvgEditIcon
diff --git a/packages/icons/12/gas.tsx b/packages/icons/12/gas-icon.tsx
similarity index 85%
rename from packages/icons/12/gas.tsx
rename to packages/icons/12/gas-icon.tsx
index 297aae49..dcb3e7e2 100644
--- a/packages/icons/12/gas.tsx
+++ b/packages/icons/12/gas-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgGas = (props: SvgProps) => {
+const SvgGasIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,7 +14,7 @@ const SvgGas = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#gas_svg__a)" strokeWidth={1.1}>
+      <G clipPath="url(#gas-icon_svg__a)" strokeWidth={1.1}>
         <Path
           d="M7.5 10.5v-6c0-.932 0-1.398-.152-1.765a2 2 0 0 0-1.083-1.083C5.898 1.5 5.432 1.5 4.5 1.5c-.932 0-1.398 0-1.765.152a2 2 0 0 0-1.083 1.083C1.5 3.102 1.5 3.568 1.5 4.5v6h6Z"
           stroke={color}
@@ -25,11 +25,11 @@ const SvgGas = (props: SvgProps) => {
         <Path d="M1.5 4.5h6" stroke="#000" />
       </G>
       <Defs>
-        <ClipPath id="gas_svg__a">
+        <ClipPath id="gas-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgGas
+export default SvgGasIcon
diff --git a/packages/icons/12/hold.tsx b/packages/icons/12/hold-icon.tsx
similarity index 81%
rename from packages/icons/12/hold.tsx
rename to packages/icons/12/hold-icon.tsx
index cee495e1..feff3515 100644
--- a/packages/icons/12/hold.tsx
+++ b/packages/icons/12/hold-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgHold = (props: SvgProps) => {
+const SvgHoldIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,16 +14,16 @@ const SvgHold = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#hold_svg__a)">
+      <G clipPath="url(#hold-icon_svg__a)">
         <Circle cx={6} cy={6} r={6} fill="#647084" />
         <Path d="M3.333 6.4 5.111 8l3.556-4" stroke="#fff" strokeWidth={1.1} />
       </G>
       <Defs>
-        <ClipPath id="hold_svg__a">
+        <ClipPath id="hold-icon_svg__a">
           <Rect width={12} height={12} rx={6} fill="#fff" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgHold
+export default SvgHoldIcon
diff --git a/packages/icons/12/index.ts b/packages/icons/12/index.ts
index cd7f74df..8d0a5911 100644
--- a/packages/icons/12/index.ts
+++ b/packages/icons/12/index.ts
@@ -1,56 +1,56 @@
-export { default as Add } from './add'
-export { default as AddReaction } from './add-reaction'
-export { default as Alert } from './alert'
-export { default as ArrowDown } from './arrow-down'
-export { default as ArrowRight } from './arrow-right'
-export { default as ArrowUp } from './arrow-up'
-export { default as Block } from './block'
-export { default as Camera } from './camera'
-export { default as Cards } from './cards'
-export { default as Check } from './check'
-export { default as CheckLarge } from './check-large'
-export { default as ChevronBottom } from './chevron-bottom'
-export { default as ChevronLeft } from './chevron-left'
-export { default as ChevronRight } from './chevron-right'
-export { default as ChevronTop } from './chevron-top'
-export { default as Close } from './close'
-export { default as Color } from './color'
-export { default as Communities } from './communities'
-export { default as Contact } from './contact'
-export { default as Copy } from './copy'
-export { default as Delivered } from './delivered'
-export { default as Dropdown } from './dropdown'
-export { default as Edit } from './edit'
-export { default as Gas } from './gas'
-export { default as Hold } from './hold'
-export { default as Info } from './info'
-export { default as Info1 } from './info-1'
-export { default as JumpTo } from './jump-to'
-export { default as Lightning } from './lightning'
-export { default as List } from './list'
-export { default as Loading } from './loading'
-export { default as Locked } from './locked'
-export { default as Mention } from './mention'
-export { default as More } from './more'
-export { default as Negative } from './negative'
-export { default as Notification } from './notification'
-export { default as Pause } from './pause'
-export { default as Pending } from './pending'
-export { default as Pick } from './pick'
-export { default as Placeholder } from './placeholder'
-export { default as Play } from './play'
-export { default as Positive } from './positive'
-export { default as Progress } from './progress'
-export { default as Pullup } from './pullup'
-export { default as Remove } from './remove'
-export { default as Search } from './search'
-export { default as SendMessage } from './send-message'
-export { default as Sent } from './sent'
-export { default as Timeout } from './timeout'
-export { default as TotalMembers } from './total-members'
-export { default as Trash } from './trash'
-export { default as Unlocked } from './unlocked'
-export { default as Untrustworthy } from './untrustworthy'
-export { default as Verified } from './verified'
-export { default as Verified1 } from './verified-1'
-export { default as Whistle } from './whistle'
+export { default as AddIcon } from './add-icon'
+export { default as AddReactionIcon } from './add-reaction-icon'
+export { default as AlertIcon } from './alert-icon'
+export { default as ArrowDownIcon } from './arrow-down-icon'
+export { default as ArrowRightIcon } from './arrow-right-icon'
+export { default as ArrowUpIcon } from './arrow-up-icon'
+export { default as BlockIcon } from './block-icon'
+export { default as CameraIcon } from './camera-icon'
+export { default as CardsIcon } from './cards-icon'
+export { default as CheckIcon } from './check-icon'
+export { default as CheckLargeIcon } from './check-large-icon'
+export { default as ChevronBottomIcon } from './chevron-bottom-icon'
+export { default as ChevronLeftIcon } from './chevron-left-icon'
+export { default as ChevronRightIcon } from './chevron-right-icon'
+export { default as ChevronTopIcon } from './chevron-top-icon'
+export { default as CloseIcon } from './close-icon'
+export { default as ColorIcon } from './color-icon'
+export { default as CommunitiesIcon } from './communities-icon'
+export { default as ContactIcon } from './contact-icon'
+export { default as CopyIcon } from './copy-icon'
+export { default as DeliveredIcon } from './delivered-icon'
+export { default as DropdownIcon } from './dropdown-icon'
+export { default as EditIcon } from './edit-icon'
+export { default as GasIcon } from './gas-icon'
+export { default as HoldIcon } from './hold-icon'
+export { default as Info1Icon } from './info-1-icon'
+export { default as InfoIcon } from './info-icon'
+export { default as JumpToIcon } from './jump-to-icon'
+export { default as LightningIcon } from './lightning-icon'
+export { default as ListIcon } from './list-icon'
+export { default as LoadingIcon } from './loading-icon'
+export { default as LockedIcon } from './locked-icon'
+export { default as MentionIcon } from './mention-icon'
+export { default as MoreIcon } from './more-icon'
+export { default as NegativeIcon } from './negative-icon'
+export { default as NotificationIcon } from './notification-icon'
+export { default as PauseIcon } from './pause-icon'
+export { default as PendingIcon } from './pending-icon'
+export { default as PickIcon } from './pick-icon'
+export { default as PlaceholderIcon } from './placeholder-icon'
+export { default as PlayIcon } from './play-icon'
+export { default as PositiveIcon } from './positive-icon'
+export { default as ProgressIcon } from './progress-icon'
+export { default as PullupIcon } from './pullup-icon'
+export { default as RemoveIcon } from './remove-icon'
+export { default as SearchIcon } from './search-icon'
+export { default as SendMessageIcon } from './send-message-icon'
+export { default as SentIcon } from './sent-icon'
+export { default as TimeoutIcon } from './timeout-icon'
+export { default as TotalMembersIcon } from './total-members-icon'
+export { default as TrashIcon } from './trash-icon'
+export { default as UnlockedIcon } from './unlocked-icon'
+export { default as UntrustworthyIcon } from './untrustworthy-icon'
+export { default as Verified1Icon } from './verified-1-icon'
+export { default as VerifiedIcon } from './verified-icon'
+export { default as WhistleIcon } from './whistle-icon'
diff --git a/packages/icons/12/info-1.tsx b/packages/icons/12/info-1-icon.tsx
similarity index 89%
rename from packages/icons/12/info-1.tsx
rename to packages/icons/12/info-1-icon.tsx
index 9aa7bbcf..5e45d41b 100644
--- a/packages/icons/12/info-1.tsx
+++ b/packages/icons/12/info-1-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgInfo1 = (props: SvgProps) => {
+const SvgInfo1Icon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgInfo1 = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgInfo1
+export default SvgInfo1Icon
diff --git a/packages/icons/12/info.tsx b/packages/icons/12/info-icon.tsx
similarity index 88%
rename from packages/icons/12/info.tsx
rename to packages/icons/12/info-icon.tsx
index 67d036a2..bb9edfb7 100644
--- a/packages/icons/12/info.tsx
+++ b/packages/icons/12/info-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgInfo = (props: SvgProps) => {
+const SvgInfoIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgInfo = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgInfo
+export default SvgInfoIcon
diff --git a/packages/icons/12/jump-to.tsx b/packages/icons/12/jump-to-icon.tsx
similarity index 88%
rename from packages/icons/12/jump-to.tsx
rename to packages/icons/12/jump-to-icon.tsx
index 3fdf1a1e..01c5d14e 100644
--- a/packages/icons/12/jump-to.tsx
+++ b/packages/icons/12/jump-to-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgJumpTo = (props: SvgProps) => {
+const SvgJumpToIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgJumpTo = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgJumpTo
+export default SvgJumpToIcon
diff --git a/packages/icons/12/lightning.tsx b/packages/icons/12/lightning-icon.tsx
similarity index 87%
rename from packages/icons/12/lightning.tsx
rename to packages/icons/12/lightning-icon.tsx
index f58e0bf9..1148bdde 100644
--- a/packages/icons/12/lightning.tsx
+++ b/packages/icons/12/lightning-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgLightning = (props: SvgProps) => {
+const SvgLightningIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgLightning = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgLightning
+export default SvgLightningIcon
diff --git a/packages/icons/12/list.tsx b/packages/icons/12/list-icon.tsx
similarity index 85%
rename from packages/icons/12/list.tsx
rename to packages/icons/12/list-icon.tsx
index ea304be1..cb981316 100644
--- a/packages/icons/12/list.tsx
+++ b/packages/icons/12/list-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgList = (props: SvgProps) => {
+const SvgListIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,15 +14,15 @@ const SvgList = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#list_svg__a)" stroke={color} strokeWidth={1.1}>
+      <G clipPath="url(#list-icon_svg__a)" stroke={color} strokeWidth={1.1}>
         <Path d="M1 2.5c0-.465 0-.697.051-.888a1.5 1.5 0 0 1 1.06-1.06C2.304.5 2.536.5 3 .5h6c.465 0 .697 0 .888.051a1.5 1.5 0 0 1 1.06 1.06c.052.192.052.424.052.889s0 .697-.051.888a1.5 1.5 0 0 1-1.06 1.06C9.696 4.5 9.464 4.5 9 4.5H3c-.465 0-.697 0-.888-.051a1.5 1.5 0 0 1-1.06-1.06C1 3.196 1 2.964 1 2.5ZM1 9.5c0-.465 0-.697.051-.888a1.5 1.5 0 0 1 1.06-1.06C2.304 7.5 2.536 7.5 3 7.5h6c.465 0 .697 0 .888.051a1.5 1.5 0 0 1 1.06 1.06c.052.192.052.424.052.889s0 .697-.051.888a1.5 1.5 0 0 1-1.06 1.06c-.192.052-.424.052-.889.052H3c-.465 0-.697 0-.888-.051a1.5 1.5 0 0 1-1.06-1.06C1 10.197 1 9.964 1 9.5Z" />
       </G>
       <Defs>
-        <ClipPath id="list_svg__a">
+        <ClipPath id="list-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgList
+export default SvgListIcon
diff --git a/packages/icons/12/loading.tsx b/packages/icons/12/loading-icon.tsx
similarity index 82%
rename from packages/icons/12/loading.tsx
rename to packages/icons/12/loading-icon.tsx
index 18235cb5..780a16a3 100644
--- a/packages/icons/12/loading.tsx
+++ b/packages/icons/12/loading-icon.tsx
@@ -11,7 +11,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgLoading = (props: SvgProps) => {
+const SvgLoadingIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -22,20 +22,20 @@ const SvgLoading = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#loading_svg__a)">
+      <G clipPath="url(#loading-icon_svg__a)">
         <Path
           d="M6 .95a.55.55 0 1 1 0 1.1V.95ZM2.05 6A3.95 3.95 0 0 0 6 9.95v1.1A5.05 5.05 0 0 1 .95 6h1.1ZM6 2.05A3.95 3.95 0 0 0 2.05 6H.95A5.05 5.05 0 0 1 6 .95v1.1Z"
           fill={color}
         />
         <Path
           d="M6 1.5a4.5 4.5 0 0 1 0 9"
-          stroke="url(#loading_svg__b)"
+          stroke="url(#loading-icon_svg__b)"
           strokeWidth={1.1}
         />
       </G>
       <Defs>
         <LinearGradient
-          id="loading_svg__b"
+          id="loading-icon_svg__b"
           x1={5.625}
           y1={10.5}
           x2={2.625}
@@ -45,11 +45,11 @@ const SvgLoading = (props: SvgProps) => {
           <Stop stopColor={color} />
           <Stop offset={1} stopColor={color} stopOpacity={0} />
         </LinearGradient>
-        <ClipPath id="loading_svg__a">
+        <ClipPath id="loading-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgLoading
+export default SvgLoadingIcon
diff --git a/packages/icons/12/locked.tsx b/packages/icons/12/locked-icon.tsx
similarity index 91%
rename from packages/icons/12/locked.tsx
rename to packages/icons/12/locked-icon.tsx
index 9cdbf68a..afbb62cf 100644
--- a/packages/icons/12/locked.tsx
+++ b/packages/icons/12/locked-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgLocked = (props: SvgProps) => {
+const SvgLockedIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -22,4 +22,4 @@ const SvgLocked = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgLocked
+export default SvgLockedIcon
diff --git a/packages/icons/12/mention.tsx b/packages/icons/12/mention-icon.tsx
similarity index 78%
rename from packages/icons/12/mention.tsx
rename to packages/icons/12/mention-icon.tsx
index f1ae464c..8c18666f 100644
--- a/packages/icons/12/mention.tsx
+++ b/packages/icons/12/mention-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgMention = (props: SvgProps) => {
+const SvgMentionIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,17 +14,17 @@ const SvgMention = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#mention_svg__a)" stroke={color} strokeWidth={1.1}>
+      <G clipPath="url(#mention-icon_svg__a)" stroke={color} strokeWidth={1.1}>
         <Path d="M11 6a5 5 0 1 0-2.5 4.33" />
         <Circle cx={6} cy={6} r={2} />
         <Path d="M8 3.5v3.456C8 7.809 8.691 8.5 9.544 8.5c.709 0 1.326-.485 1.391-1.19C11 6.609 11 6 11 6" />
       </G>
       <Defs>
-        <ClipPath id="mention_svg__a">
+        <ClipPath id="mention-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgMention
+export default SvgMentionIcon
diff --git a/packages/icons/12/more.tsx b/packages/icons/12/more-icon.tsx
similarity index 88%
rename from packages/icons/12/more.tsx
rename to packages/icons/12/more-icon.tsx
index 7ec20a6e..44fa8da5 100644
--- a/packages/icons/12/more.tsx
+++ b/packages/icons/12/more-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgMore = (props: SvgProps) => {
+const SvgMoreIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -20,4 +20,4 @@ const SvgMore = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgMore
+export default SvgMoreIcon
diff --git a/packages/icons/12/negative.tsx b/packages/icons/12/negative-icon.tsx
similarity index 77%
rename from packages/icons/12/negative.tsx
rename to packages/icons/12/negative-icon.tsx
index 526f9fc1..a87bc747 100644
--- a/packages/icons/12/negative.tsx
+++ b/packages/icons/12/negative-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgNegative = (props: SvgProps) => {
+const SvgNegativeIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,16 +14,16 @@ const SvgNegative = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#negative_svg__a)" stroke="#E65F5C">
+      <G clipPath="url(#negative-icon_svg__a)" stroke="#E65F5C">
         <Circle cx={6} cy={6} r={5.5} strokeOpacity={0.4} />
         <Path d="M6 8.5V3M3 5.5l3 3 3-3" strokeWidth={1.2} />
       </G>
       <Defs>
-        <ClipPath id="negative_svg__a">
+        <ClipPath id="negative-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgNegative
+export default SvgNegativeIcon
diff --git a/packages/icons/12/notification.tsx b/packages/icons/12/notification-icon.tsx
similarity index 84%
rename from packages/icons/12/notification.tsx
rename to packages/icons/12/notification-icon.tsx
index ada2a696..24099904 100644
--- a/packages/icons/12/notification.tsx
+++ b/packages/icons/12/notification-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgNotification = (props: SvgProps) => {
+const SvgNotificationIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgNotification = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgNotification
+export default SvgNotificationIcon
diff --git a/packages/icons/12/pause.tsx b/packages/icons/12/pause-icon.tsx
similarity index 86%
rename from packages/icons/12/pause.tsx
rename to packages/icons/12/pause-icon.tsx
index f276462c..a45b9be8 100644
--- a/packages/icons/12/pause.tsx
+++ b/packages/icons/12/pause-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPause = (props: SvgProps) => {
+const SvgPauseIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgPause = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPause
+export default SvgPauseIcon
diff --git a/packages/icons/12/pending.tsx b/packages/icons/12/pending-icon.tsx
similarity index 88%
rename from packages/icons/12/pending.tsx
rename to packages/icons/12/pending-icon.tsx
index 61ab4779..1254f28d 100644
--- a/packages/icons/12/pending.tsx
+++ b/packages/icons/12/pending-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPending = (props: SvgProps) => {
+const SvgPendingIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -20,4 +20,4 @@ const SvgPending = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPending
+export default SvgPendingIcon
diff --git a/packages/icons/12/pick.tsx b/packages/icons/12/pick-icon.tsx
similarity index 93%
rename from packages/icons/12/pick.tsx
rename to packages/icons/12/pick-icon.tsx
index de284767..4b0d0ef9 100644
--- a/packages/icons/12/pick.tsx
+++ b/packages/icons/12/pick-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPick = (props: SvgProps) => {
+const SvgPickIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,7 +14,7 @@ const SvgPick = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#pick_svg__a)">
+      <G clipPath="url(#pick-icon_svg__a)">
         <Path
           fillRule="evenodd"
           clipRule="evenodd"
@@ -23,11 +23,11 @@ const SvgPick = (props: SvgProps) => {
         />
       </G>
       <Defs>
-        <ClipPath id="pick_svg__a">
+        <ClipPath id="pick-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgPick
+export default SvgPickIcon
diff --git a/packages/icons/12/placeholder.tsx b/packages/icons/12/placeholder-icon.tsx
similarity index 91%
rename from packages/icons/12/placeholder.tsx
rename to packages/icons/12/placeholder-icon.tsx
index 207fca35..4302a8fd 100644
--- a/packages/icons/12/placeholder.tsx
+++ b/packages/icons/12/placeholder-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPlaceholder = (props: SvgProps) => {
+const SvgPlaceholderIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgPlaceholder = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPlaceholder
+export default SvgPlaceholderIcon
diff --git a/packages/icons/12/play.tsx b/packages/icons/12/play-icon.tsx
similarity index 91%
rename from packages/icons/12/play.tsx
rename to packages/icons/12/play-icon.tsx
index 04ea5b8e..b998c788 100644
--- a/packages/icons/12/play.tsx
+++ b/packages/icons/12/play-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPlay = (props: SvgProps) => {
+const SvgPlayIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -21,4 +21,4 @@ const SvgPlay = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPlay
+export default SvgPlayIcon
diff --git a/packages/icons/12/positive.tsx b/packages/icons/12/positive-icon.tsx
similarity index 77%
rename from packages/icons/12/positive.tsx
rename to packages/icons/12/positive-icon.tsx
index bd64c4c9..42501435 100644
--- a/packages/icons/12/positive.tsx
+++ b/packages/icons/12/positive-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPositive = (props: SvgProps) => {
+const SvgPositiveIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,16 +14,16 @@ const SvgPositive = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#positive_svg__a)" stroke="#26A69A">
+      <G clipPath="url(#positive-icon_svg__a)" stroke="#26A69A">
         <Circle cx={6} cy={6} r={5.5} strokeOpacity={0.4} />
         <Path d="M6 3.5V9M9 6.5l-3-3-3 3" strokeWidth={1.2} />
       </G>
       <Defs>
-        <ClipPath id="positive_svg__a">
+        <ClipPath id="positive-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgPositive
+export default SvgPositiveIcon
diff --git a/packages/icons/12/progress.tsx b/packages/icons/12/progress-icon.tsx
similarity index 77%
rename from packages/icons/12/progress.tsx
rename to packages/icons/12/progress-icon.tsx
index 7305d972..9a3a9a55 100644
--- a/packages/icons/12/progress.tsx
+++ b/packages/icons/12/progress-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgProgress = (props: SvgProps) => {
+const SvgProgressIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,16 +14,16 @@ const SvgProgress = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#progress_svg__a)" strokeWidth={1.1}>
+      <G clipPath="url(#progress-icon_svg__a)" strokeWidth={1.1}>
         <Path d="M6 1a5 5 0 1 1 0 10A5 5 0 0 1 6 1Z" stroke="#E7EAEE" />
         <Path d="M6 1a5 5 0 0 1 4.755 3.455" stroke={color} />
       </G>
       <Defs>
-        <ClipPath id="progress_svg__a">
+        <ClipPath id="progress-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgProgress
+export default SvgProgressIcon
diff --git a/packages/icons/12/pullup.tsx b/packages/icons/12/pullup-icon.tsx
similarity index 82%
rename from packages/icons/12/pullup.tsx
rename to packages/icons/12/pullup-icon.tsx
index 0c1f9109..c3fa5eff 100644
--- a/packages/icons/12/pullup.tsx
+++ b/packages/icons/12/pullup-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPullup = (props: SvgProps) => {
+const SvgPullupIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,7 +14,7 @@ const SvgPullup = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#pullup_svg__a)">
+      <G clipPath="url(#pullup-icon_svg__a)">
         <Circle
           cx={6}
           cy={6}
@@ -25,11 +25,11 @@ const SvgPullup = (props: SvgProps) => {
         <Path d="m9 7.25-3-3-3 3" stroke={color} strokeWidth={1.1} />
       </G>
       <Defs>
-        <ClipPath id="pullup_svg__a">
+        <ClipPath id="pullup-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgPullup
+export default SvgPullupIcon
diff --git a/packages/icons/12/remove.tsx b/packages/icons/12/remove-icon.tsx
similarity index 82%
rename from packages/icons/12/remove.tsx
rename to packages/icons/12/remove-icon.tsx
index 0a14b0a8..fab7232b 100644
--- a/packages/icons/12/remove.tsx
+++ b/packages/icons/12/remove-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgRemove = (props: SvgProps) => {
+const SvgRemoveIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,7 +14,7 @@ const SvgRemove = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#remove_svg__a)">
+      <G clipPath="url(#remove-icon_svg__a)">
         <Circle cx={6} cy={6} r={6} fill="#647084" />
         <Path
           d="M3.879 3.879 8.12 8.12M8.121 3.879 3.88 8.12"
@@ -24,11 +24,11 @@ const SvgRemove = (props: SvgProps) => {
         />
       </G>
       <Defs>
-        <ClipPath id="remove_svg__a">
+        <ClipPath id="remove-icon_svg__a">
           <Rect width={12} height={12} rx={6} fill="#fff" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgRemove
+export default SvgRemoveIcon
diff --git a/packages/icons/12/search.tsx b/packages/icons/12/search-icon.tsx
similarity index 90%
rename from packages/icons/12/search.tsx
rename to packages/icons/12/search-icon.tsx
index 9b94775d..345660ec 100644
--- a/packages/icons/12/search.tsx
+++ b/packages/icons/12/search-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSearch = (props: SvgProps) => {
+const SvgSearchIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgSearch = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSearch
+export default SvgSearchIcon
diff --git a/packages/icons/12/send-message.tsx b/packages/icons/12/send-message-icon.tsx
similarity index 74%
rename from packages/icons/12/send-message.tsx
rename to packages/icons/12/send-message-icon.tsx
index 749f0129..773dc49e 100644
--- a/packages/icons/12/send-message.tsx
+++ b/packages/icons/12/send-message-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSendMessage = (props: SvgProps) => {
+const SvgSendMessageIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,15 +14,19 @@ const SvgSendMessage = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#send-message_svg__a)" stroke="#000" strokeWidth={1.1}>
+      <G
+        clipPath="url(#send-message-icon_svg__a)"
+        stroke="#000"
+        strokeWidth={1.1}
+      >
         <Path d="m2.495 5.511 5.466-3.609a1 1 0 0 1 1.55.894l-.393 6.539c-.055.918-1.216 1.28-1.784.558L5.63 7.728l-2.727-.393c-.91-.13-1.175-1.317-.408-1.824ZM9.13 1.666l-3.5 6.062" />
       </G>
       <Defs>
-        <ClipPath id="send-message_svg__a">
+        <ClipPath id="send-message-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgSendMessage
+export default SvgSendMessageIcon
diff --git a/packages/icons/12/sent.tsx b/packages/icons/12/sent-icon.tsx
similarity index 87%
rename from packages/icons/12/sent.tsx
rename to packages/icons/12/sent-icon.tsx
index 6d0957ba..6f5d7816 100644
--- a/packages/icons/12/sent.tsx
+++ b/packages/icons/12/sent-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSent = (props: SvgProps) => {
+const SvgSentIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgSent = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSent
+export default SvgSentIcon
diff --git a/packages/icons/12/timeout.tsx b/packages/icons/12/timeout-icon.tsx
similarity index 79%
rename from packages/icons/12/timeout.tsx
rename to packages/icons/12/timeout-icon.tsx
index cd3c1f50..96ec81fe 100644
--- a/packages/icons/12/timeout.tsx
+++ b/packages/icons/12/timeout-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgTimeout = (props: SvgProps) => {
+const SvgTimeoutIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,7 +14,7 @@ const SvgTimeout = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#timeout_svg__a)">
+      <G clipPath="url(#timeout-icon_svg__a)">
         <Path
           d="M10.5 6A4.5 4.5 0 1 1 6 1.5"
           stroke={color}
@@ -22,11 +22,11 @@ const SvgTimeout = (props: SvgProps) => {
         />
       </G>
       <Defs>
-        <ClipPath id="timeout_svg__a">
+        <ClipPath id="timeout-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgTimeout
+export default SvgTimeoutIcon
diff --git a/packages/icons/12/total-members.tsx b/packages/icons/12/total-members-icon.tsx
similarity index 90%
rename from packages/icons/12/total-members.tsx
rename to packages/icons/12/total-members-icon.tsx
index 30140185..86e0fb22 100644
--- a/packages/icons/12/total-members.tsx
+++ b/packages/icons/12/total-members-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgTotalMembers = (props: SvgProps) => {
+const SvgTotalMembersIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -31,4 +31,4 @@ const SvgTotalMembers = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgTotalMembers
+export default SvgTotalMembersIcon
diff --git a/packages/icons/12/trash.tsx b/packages/icons/12/trash-icon.tsx
similarity index 80%
rename from packages/icons/12/trash.tsx
rename to packages/icons/12/trash-icon.tsx
index f724caf5..3609b53c 100644
--- a/packages/icons/12/trash.tsx
+++ b/packages/icons/12/trash-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgTrash = (props: SvgProps) => {
+const SvgTrashIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,16 +14,16 @@ const SvgTrash = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#trash_svg__a)" stroke={color} strokeWidth={1.1}>
+      <G clipPath="url(#trash-icon_svg__a)" stroke={color} strokeWidth={1.1}>
         <Path d="M2.5 3.5v4.3c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C4.02 11 4.58 11 5.7 11h.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C9.5 9.48 9.5 8.92 9.5 7.8V3.5M8 3a2 2 0 1 0-4 0M5 5.5V8M7 5.5V8" />
         <Path d="M1 4s2.5-1 5-1 5 1 5 1" />
       </G>
       <Defs>
-        <ClipPath id="trash_svg__a">
+        <ClipPath id="trash-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgTrash
+export default SvgTrashIcon
diff --git a/packages/icons/12/unlocked.tsx b/packages/icons/12/unlocked-icon.tsx
similarity index 91%
rename from packages/icons/12/unlocked.tsx
rename to packages/icons/12/unlocked-icon.tsx
index 8c646b19..e7c20f5c 100644
--- a/packages/icons/12/unlocked.tsx
+++ b/packages/icons/12/unlocked-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgUnlocked = (props: SvgProps) => {
+const SvgUnlockedIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -22,4 +22,4 @@ const SvgUnlocked = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgUnlocked
+export default SvgUnlockedIcon
diff --git a/packages/icons/12/untrustworthy.tsx b/packages/icons/12/untrustworthy-icon.tsx
similarity index 85%
rename from packages/icons/12/untrustworthy.tsx
rename to packages/icons/12/untrustworthy-icon.tsx
index ec26d301..46a6f78d 100644
--- a/packages/icons/12/untrustworthy.tsx
+++ b/packages/icons/12/untrustworthy-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgUntrustworthy = (props: SvgProps) => {
+const SvgUntrustworthyIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgUntrustworthy = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgUntrustworthy
+export default SvgUntrustworthyIcon
diff --git a/packages/icons/12/verified-1.tsx b/packages/icons/12/verified-1-icon.tsx
similarity index 88%
rename from packages/icons/12/verified-1.tsx
rename to packages/icons/12/verified-1-icon.tsx
index f5c7d370..903a9323 100644
--- a/packages/icons/12/verified-1.tsx
+++ b/packages/icons/12/verified-1-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgVerified1 = (props: SvgProps) => {
+const SvgVerified1Icon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,7 +14,7 @@ const SvgVerified1 = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#verified-1_svg__a)">
+      <G clipPath="url(#verified-1-icon_svg__a)">
         <Path
           fillRule="evenodd"
           clipRule="evenodd"
@@ -23,11 +23,11 @@ const SvgVerified1 = (props: SvgProps) => {
         />
       </G>
       <Defs>
-        <ClipPath id="verified-1_svg__a">
+        <ClipPath id="verified-1-icon_svg__a">
           <Path fill="#fff" d="M0 0h12v12H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgVerified1
+export default SvgVerified1Icon
diff --git a/packages/icons/12/verified.tsx b/packages/icons/12/verified-icon.tsx
similarity index 87%
rename from packages/icons/12/verified.tsx
rename to packages/icons/12/verified-icon.tsx
index 843e398c..4557b389 100644
--- a/packages/icons/12/verified.tsx
+++ b/packages/icons/12/verified-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgVerified = (props: SvgProps) => {
+const SvgVerifiedIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgVerified = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgVerified
+export default SvgVerifiedIcon
diff --git a/packages/icons/12/whistle.tsx b/packages/icons/12/whistle-icon.tsx
similarity index 90%
rename from packages/icons/12/whistle.tsx
rename to packages/icons/12/whistle-icon.tsx
index 244193c1..32e204a3 100644
--- a/packages/icons/12/whistle.tsx
+++ b/packages/icons/12/whistle-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgWhistle = (props: SvgProps) => {
+const SvgWhistleIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -28,4 +28,4 @@ const SvgWhistle = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgWhistle
+export default SvgWhistleIcon
diff --git a/packages/icons/16/add.tsx b/packages/icons/16/add-icon.tsx
similarity index 87%
rename from packages/icons/16/add.tsx
rename to packages/icons/16/add-icon.tsx
index 829ee928..4914483d 100644
--- a/packages/icons/16/add.tsx
+++ b/packages/icons/16/add-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAdd = (props: SvgProps) => {
+const SvgAddIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgAdd = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAdd
+export default SvgAddIcon
diff --git a/packages/icons/16/add-user.tsx b/packages/icons/16/add-user-icon.tsx
similarity index 91%
rename from packages/icons/16/add-user.tsx
rename to packages/icons/16/add-user-icon.tsx
index 19fbf115..21790ce9 100644
--- a/packages/icons/16/add-user.tsx
+++ b/packages/icons/16/add-user-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAddUser = (props: SvgProps) => {
+const SvgAddUserIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -32,4 +32,4 @@ const SvgAddUser = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAddUser
+export default SvgAddUserIcon
diff --git a/packages/icons/16/alert.tsx b/packages/icons/16/alert-icon.tsx
similarity index 90%
rename from packages/icons/16/alert.tsx
rename to packages/icons/16/alert-icon.tsx
index 0bb34a84..f8bf9cb9 100644
--- a/packages/icons/16/alert.tsx
+++ b/packages/icons/16/alert-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAlert = (props: SvgProps) => {
+const SvgAlertIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -27,4 +27,4 @@ const SvgAlert = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAlert
+export default SvgAlertIcon
diff --git a/packages/icons/16/arrow-down.tsx b/packages/icons/16/arrow-down-icon.tsx
similarity index 85%
rename from packages/icons/16/arrow-down.tsx
rename to packages/icons/16/arrow-down-icon.tsx
index 956500b9..2640cb20 100644
--- a/packages/icons/16/arrow-down.tsx
+++ b/packages/icons/16/arrow-down-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgArrowDown = (props: SvgProps) => {
+const SvgArrowDownIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgArrowDown = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgArrowDown
+export default SvgArrowDownIcon
diff --git a/packages/icons/16/arrow-right.tsx b/packages/icons/16/arrow-right-icon.tsx
similarity index 85%
rename from packages/icons/16/arrow-right.tsx
rename to packages/icons/16/arrow-right-icon.tsx
index 2fc688e1..ec7aa274 100644
--- a/packages/icons/16/arrow-right.tsx
+++ b/packages/icons/16/arrow-right-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgArrowRight = (props: SvgProps) => {
+const SvgArrowRightIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgArrowRight = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgArrowRight
+export default SvgArrowRightIcon
diff --git a/packages/icons/16/calendar.tsx b/packages/icons/16/calendar-icon.tsx
similarity index 93%
rename from packages/icons/16/calendar.tsx
rename to packages/icons/16/calendar-icon.tsx
index 47b31b34..ac65f465 100644
--- a/packages/icons/16/calendar.tsx
+++ b/packages/icons/16/calendar-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCalendar = (props: SvgProps) => {
+const SvgCalendarIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -30,4 +30,4 @@ const SvgCalendar = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgCalendar
+export default SvgCalendarIcon
diff --git a/packages/icons/16/check-circle.tsx b/packages/icons/16/check-circle-icon.tsx
similarity index 86%
rename from packages/icons/16/check-circle.tsx
rename to packages/icons/16/check-circle-icon.tsx
index 8e1dfddd..9bb3da0d 100644
--- a/packages/icons/16/check-circle.tsx
+++ b/packages/icons/16/check-circle-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCheckCircle = (props: SvgProps) => {
+const SvgCheckCircleIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgCheckCircle = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgCheckCircle
+export default SvgCheckCircleIcon
diff --git a/packages/icons/16/chevron-down.tsx b/packages/icons/16/chevron-down-icon.tsx
similarity index 84%
rename from packages/icons/16/chevron-down.tsx
rename to packages/icons/16/chevron-down-icon.tsx
index b7549381..755d7a67 100644
--- a/packages/icons/16/chevron-down.tsx
+++ b/packages/icons/16/chevron-down-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgChevronDown = (props: SvgProps) => {
+const SvgChevronDownIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgChevronDown = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgChevronDown
+export default SvgChevronDownIcon
diff --git a/packages/icons/16/chevron-left.tsx b/packages/icons/16/chevron-left-icon.tsx
similarity index 84%
rename from packages/icons/16/chevron-left.tsx
rename to packages/icons/16/chevron-left-icon.tsx
index 6917c410..570519cd 100644
--- a/packages/icons/16/chevron-left.tsx
+++ b/packages/icons/16/chevron-left-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgChevronLeft = (props: SvgProps) => {
+const SvgChevronLeftIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgChevronLeft = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgChevronLeft
+export default SvgChevronLeftIcon
diff --git a/packages/icons/16/chevron-right.tsx b/packages/icons/16/chevron-right-icon.tsx
similarity index 84%
rename from packages/icons/16/chevron-right.tsx
rename to packages/icons/16/chevron-right-icon.tsx
index e27c0d30..c66aad7c 100644
--- a/packages/icons/16/chevron-right.tsx
+++ b/packages/icons/16/chevron-right-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgChevronRight = (props: SvgProps) => {
+const SvgChevronRightIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgChevronRight = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgChevronRight
+export default SvgChevronRightIcon
diff --git a/packages/icons/16/chevron-top.tsx b/packages/icons/16/chevron-top-icon.tsx
similarity index 85%
rename from packages/icons/16/chevron-top.tsx
rename to packages/icons/16/chevron-top-icon.tsx
index 88bc3882..5d1c8053 100644
--- a/packages/icons/16/chevron-top.tsx
+++ b/packages/icons/16/chevron-top-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgChevronTop = (props: SvgProps) => {
+const SvgChevronTopIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgChevronTop = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgChevronTop
+export default SvgChevronTopIcon
diff --git a/packages/icons/16/close.tsx b/packages/icons/16/close-icon.tsx
similarity index 88%
rename from packages/icons/16/close.tsx
rename to packages/icons/16/close-icon.tsx
index 0e4c77b2..c10c8850 100644
--- a/packages/icons/16/close.tsx
+++ b/packages/icons/16/close-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgClose = (props: SvgProps) => {
+const SvgCloseIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -22,4 +22,4 @@ const SvgClose = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgClose
+export default SvgCloseIcon
diff --git a/packages/icons/16/connection.tsx b/packages/icons/16/connection-icon.tsx
similarity index 90%
rename from packages/icons/16/connection.tsx
rename to packages/icons/16/connection-icon.tsx
index 13bce2a3..e5812cd3 100644
--- a/packages/icons/16/connection.tsx
+++ b/packages/icons/16/connection-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgConnection = (props: SvgProps) => {
+const SvgConnectionIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -30,4 +30,4 @@ const SvgConnection = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgConnection
+export default SvgConnectionIcon
diff --git a/packages/icons/16/contact-book.tsx b/packages/icons/16/contact-book-icon.tsx
similarity index 96%
rename from packages/icons/16/contact-book.tsx
rename to packages/icons/16/contact-book-icon.tsx
index c98c21f7..9781ae97 100644
--- a/packages/icons/16/contact-book.tsx
+++ b/packages/icons/16/contact-book-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgContactBook = (props: SvgProps) => {
+const SvgContactBookIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -37,4 +37,4 @@ const SvgContactBook = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgContactBook
+export default SvgContactBookIcon
diff --git a/packages/icons/16/delete.tsx b/packages/icons/16/delete-icon.tsx
similarity index 92%
rename from packages/icons/16/delete.tsx
rename to packages/icons/16/delete-icon.tsx
index 31ee628e..aeb8251c 100644
--- a/packages/icons/16/delete.tsx
+++ b/packages/icons/16/delete-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgDelete = (props: SvgProps) => {
+const SvgDeleteIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -31,4 +31,4 @@ const SvgDelete = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgDelete
+export default SvgDeleteIcon
diff --git a/packages/icons/16/email.tsx b/packages/icons/16/email-icon.tsx
similarity index 92%
rename from packages/icons/16/email.tsx
rename to packages/icons/16/email-icon.tsx
index a0b33b4e..a8a2a05f 100644
--- a/packages/icons/16/email.tsx
+++ b/packages/icons/16/email-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgEmail = (props: SvgProps) => {
+const SvgEmailIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgEmail = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgEmail
+export default SvgEmailIcon
diff --git a/packages/icons/16/forward.tsx b/packages/icons/16/forward-icon.tsx
similarity index 89%
rename from packages/icons/16/forward.tsx
rename to packages/icons/16/forward-icon.tsx
index c4f15410..af722663 100644
--- a/packages/icons/16/forward.tsx
+++ b/packages/icons/16/forward-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgForward = (props: SvgProps) => {
+const SvgForwardIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgForward = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgForward
+export default SvgForwardIcon
diff --git a/packages/icons/16/gif.tsx b/packages/icons/16/gif-icon.tsx
similarity index 96%
rename from packages/icons/16/gif.tsx
rename to packages/icons/16/gif-icon.tsx
index 2506df82..a9bf1e6c 100644
--- a/packages/icons/16/gif.tsx
+++ b/packages/icons/16/gif-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgGif = (props: SvgProps) => {
+const SvgGifIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -28,4 +28,4 @@ const SvgGif = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgGif
+export default SvgGifIcon
diff --git a/packages/icons/16/group.tsx b/packages/icons/16/group-icon.tsx
similarity index 93%
rename from packages/icons/16/group.tsx
rename to packages/icons/16/group-icon.tsx
index 72457d36..17ee4cb8 100644
--- a/packages/icons/16/group.tsx
+++ b/packages/icons/16/group-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgGroup = (props: SvgProps) => {
+const SvgGroupIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -27,4 +27,4 @@ const SvgGroup = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgGroup
+export default SvgGroupIcon
diff --git a/packages/icons/16/history.tsx b/packages/icons/16/history-icon.tsx
similarity index 89%
rename from packages/icons/16/history.tsx
rename to packages/icons/16/history-icon.tsx
index 1815d02e..707b3f56 100644
--- a/packages/icons/16/history.tsx
+++ b/packages/icons/16/history-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgHistory = (props: SvgProps) => {
+const SvgHistoryIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -24,4 +24,4 @@ const SvgHistory = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgHistory
+export default SvgHistoryIcon
diff --git a/packages/icons/16/index.ts b/packages/icons/16/index.ts
index dee21c0a..cea6b074 100644
--- a/packages/icons/16/index.ts
+++ b/packages/icons/16/index.ts
@@ -1,39 +1,39 @@
-export { default as Add } from './add'
-export { default as AddUser } from './add-user'
-export { default as Alert } from './alert'
-export { default as ArrowDown } from './arrow-down'
-export { default as ArrowRight } from './arrow-right'
-export { default as Calendar } from './calendar'
-export { default as CheckCircle } from './check-circle'
-export { default as ChevronDown } from './chevron-down'
-export { default as ChevronLeft } from './chevron-left'
-export { default as ChevronRight } from './chevron-right'
-export { default as ChevronTop } from './chevron-top'
-export { default as Close } from './close'
-export { default as Connection } from './connection'
-export { default as ContactBook } from './contact-book'
-export { default as Delete } from './delete'
-export { default as Email } from './email'
-export { default as Forward } from './forward'
-export { default as Gif } from './gif'
-export { default as Group } from './group'
-export { default as History } from './history'
-export { default as Info } from './info'
-export { default as Lightning } from './lightning'
-export { default as Locked } from './locked'
-export { default as Mention } from './mention'
-export { default as More } from './more'
-export { default as Mute } from './mute'
-export { default as Negative } from './negative'
-export { default as Notification } from './notification'
-export { default as Pin } from './pin'
-export { default as Placeholder } from './placeholder'
-export { default as Positive } from './positive'
-export { default as Privacy } from './privacy'
-export { default as Progress } from './progress'
-export { default as RemoveUser } from './remove-user'
-export { default as Sad } from './sad'
-export { default as Stickers } from './stickers'
-export { default as Unlocked } from './unlocked'
-export { default as Unmute } from './unmute'
-export { default as World } from './world'
+export { default as AddIcon } from './add-icon'
+export { default as AddUserIcon } from './add-user-icon'
+export { default as AlertIcon } from './alert-icon'
+export { default as ArrowDownIcon } from './arrow-down-icon'
+export { default as ArrowRightIcon } from './arrow-right-icon'
+export { default as CalendarIcon } from './calendar-icon'
+export { default as CheckCircleIcon } from './check-circle-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 ConnectionIcon } from './connection-icon'
+export { default as ContactBookIcon } from './contact-book-icon'
+export { default as DeleteIcon } from './delete-icon'
+export { default as EmailIcon } from './email-icon'
+export { default as ForwardIcon } from './forward-icon'
+export { default as GifIcon } from './gif-icon'
+export { default as GroupIcon } from './group-icon'
+export { default as HistoryIcon } from './history-icon'
+export { default as InfoIcon } from './info-icon'
+export { default as LightningIcon } from './lightning-icon'
+export { default as LockedIcon } from './locked-icon'
+export { default as MentionIcon } from './mention-icon'
+export { default as MoreIcon } from './more-icon'
+export { default as MuteIcon } from './mute-icon'
+export { default as NegativeIcon } from './negative-icon'
+export { default as NotificationIcon } from './notification-icon'
+export { default as PinIcon } from './pin-icon'
+export { default as PlaceholderIcon } from './placeholder-icon'
+export { default as PositiveIcon } from './positive-icon'
+export { default as PrivacyIcon } from './privacy-icon'
+export { default as ProgressIcon } from './progress-icon'
+export { default as RemoveUserIcon } from './remove-user-icon'
+export { default as SadIcon } from './sad-icon'
+export { default as StickersIcon } from './stickers-icon'
+export { default as UnlockedIcon } from './unlocked-icon'
+export { default as UnmuteIcon } from './unmute-icon'
+export { default as WorldIcon } from './world-icon'
diff --git a/packages/icons/16/info.tsx b/packages/icons/16/info-icon.tsx
similarity index 88%
rename from packages/icons/16/info.tsx
rename to packages/icons/16/info-icon.tsx
index 9071f619..d2cad24b 100644
--- a/packages/icons/16/info.tsx
+++ b/packages/icons/16/info-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgInfo = (props: SvgProps) => {
+const SvgInfoIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgInfo = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgInfo
+export default SvgInfoIcon
diff --git a/packages/icons/16/lightning.tsx b/packages/icons/16/lightning-icon.tsx
similarity index 87%
rename from packages/icons/16/lightning.tsx
rename to packages/icons/16/lightning-icon.tsx
index f06ba67f..ca2b50db 100644
--- a/packages/icons/16/lightning.tsx
+++ b/packages/icons/16/lightning-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgLightning = (props: SvgProps) => {
+const SvgLightningIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgLightning = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgLightning
+export default SvgLightningIcon
diff --git a/packages/icons/16/locked.tsx b/packages/icons/16/locked-icon.tsx
similarity index 94%
rename from packages/icons/16/locked.tsx
rename to packages/icons/16/locked-icon.tsx
index 12ed71a2..108a4bbb 100644
--- a/packages/icons/16/locked.tsx
+++ b/packages/icons/16/locked-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgLocked = (props: SvgProps) => {
+const SvgLockedIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgLocked = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgLocked
+export default SvgLockedIcon
diff --git a/packages/icons/16/mention.tsx b/packages/icons/16/mention-icon.tsx
similarity index 92%
rename from packages/icons/16/mention.tsx
rename to packages/icons/16/mention-icon.tsx
index 8d9e317e..a2a54289 100644
--- a/packages/icons/16/mention.tsx
+++ b/packages/icons/16/mention-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgMention = (props: SvgProps) => {
+const SvgMentionIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgMention = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgMention
+export default SvgMentionIcon
diff --git a/packages/icons/16/more.tsx b/packages/icons/16/more-icon.tsx
similarity index 89%
rename from packages/icons/16/more.tsx
rename to packages/icons/16/more-icon.tsx
index 3eaeeb1a..f423f512 100644
--- a/packages/icons/16/more.tsx
+++ b/packages/icons/16/more-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgMore = (props: SvgProps) => {
+const SvgMoreIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -20,4 +20,4 @@ const SvgMore = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgMore
+export default SvgMoreIcon
diff --git a/packages/icons/16/mute.tsx b/packages/icons/16/mute-icon.tsx
similarity index 94%
rename from packages/icons/16/mute.tsx
rename to packages/icons/16/mute-icon.tsx
index c349bdd3..5e04dc90 100644
--- a/packages/icons/16/mute.tsx
+++ b/packages/icons/16/mute-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgMute = (props: SvgProps) => {
+const SvgMuteIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgMute = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgMute
+export default SvgMuteIcon
diff --git a/packages/icons/16/negative.tsx b/packages/icons/16/negative-icon.tsx
similarity index 87%
rename from packages/icons/16/negative.tsx
rename to packages/icons/16/negative-icon.tsx
index 96d744ea..17f59742 100644
--- a/packages/icons/16/negative.tsx
+++ b/packages/icons/16/negative-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgNegative = (props: SvgProps) => {
+const SvgNegativeIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgNegative = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgNegative
+export default SvgNegativeIcon
diff --git a/packages/icons/16/notification.tsx b/packages/icons/16/notification-icon.tsx
similarity index 84%
rename from packages/icons/16/notification.tsx
rename to packages/icons/16/notification-icon.tsx
index 2dee2080..9609cea9 100644
--- a/packages/icons/16/notification.tsx
+++ b/packages/icons/16/notification-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgNotification = (props: SvgProps) => {
+const SvgNotificationIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgNotification = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgNotification
+export default SvgNotificationIcon
diff --git a/packages/icons/16/pin.tsx b/packages/icons/16/pin-icon.tsx
similarity index 89%
rename from packages/icons/16/pin.tsx
rename to packages/icons/16/pin-icon.tsx
index 43ab2ebc..bcc565ed 100644
--- a/packages/icons/16/pin.tsx
+++ b/packages/icons/16/pin-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPin = (props: SvgProps) => {
+const SvgPinIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgPin = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPin
+export default SvgPinIcon
diff --git a/packages/icons/16/placeholder.tsx b/packages/icons/16/placeholder-icon.tsx
similarity index 91%
rename from packages/icons/16/placeholder.tsx
rename to packages/icons/16/placeholder-icon.tsx
index 5bf85f10..559a2cbb 100644
--- a/packages/icons/16/placeholder.tsx
+++ b/packages/icons/16/placeholder-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPlaceholder = (props: SvgProps) => {
+const SvgPlaceholderIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgPlaceholder = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPlaceholder
+export default SvgPlaceholderIcon
diff --git a/packages/icons/16/positive.tsx b/packages/icons/16/positive-icon.tsx
similarity index 87%
rename from packages/icons/16/positive.tsx
rename to packages/icons/16/positive-icon.tsx
index 2ffd01ac..ed285eca 100644
--- a/packages/icons/16/positive.tsx
+++ b/packages/icons/16/positive-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPositive = (props: SvgProps) => {
+const SvgPositiveIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgPositive = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPositive
+export default SvgPositiveIcon
diff --git a/packages/icons/16/privacy.tsx b/packages/icons/16/privacy-icon.tsx
similarity index 92%
rename from packages/icons/16/privacy.tsx
rename to packages/icons/16/privacy-icon.tsx
index d256aa33..44e91ab0 100644
--- a/packages/icons/16/privacy.tsx
+++ b/packages/icons/16/privacy-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPrivacy = (props: SvgProps) => {
+const SvgPrivacyIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgPrivacy = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPrivacy
+export default SvgPrivacyIcon
diff --git a/packages/icons/16/progress.tsx b/packages/icons/16/progress-icon.tsx
similarity index 89%
rename from packages/icons/16/progress.tsx
rename to packages/icons/16/progress-icon.tsx
index 57b4eb2c..4be33b87 100644
--- a/packages/icons/16/progress.tsx
+++ b/packages/icons/16/progress-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgProgress = (props: SvgProps) => {
+const SvgProgressIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -26,4 +26,4 @@ const SvgProgress = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgProgress
+export default SvgProgressIcon
diff --git a/packages/icons/16/remove-user.tsx b/packages/icons/16/remove-user-icon.tsx
similarity index 90%
rename from packages/icons/16/remove-user.tsx
rename to packages/icons/16/remove-user-icon.tsx
index fa1207eb..83000c21 100644
--- a/packages/icons/16/remove-user.tsx
+++ b/packages/icons/16/remove-user-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgRemoveUser = (props: SvgProps) => {
+const SvgRemoveUserIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -32,4 +32,4 @@ const SvgRemoveUser = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgRemoveUser
+export default SvgRemoveUserIcon
diff --git a/packages/icons/16/sad.tsx b/packages/icons/16/sad-icon.tsx
similarity index 91%
rename from packages/icons/16/sad.tsx
rename to packages/icons/16/sad-icon.tsx
index 0362ae44..b83beb66 100644
--- a/packages/icons/16/sad.tsx
+++ b/packages/icons/16/sad-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSad = (props: SvgProps) => {
+const SvgSadIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -25,4 +25,4 @@ const SvgSad = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSad
+export default SvgSadIcon
diff --git a/packages/icons/16/stickers.tsx b/packages/icons/16/stickers-icon.tsx
similarity index 92%
rename from packages/icons/16/stickers.tsx
rename to packages/icons/16/stickers-icon.tsx
index cfadd6bc..58e762fd 100644
--- a/packages/icons/16/stickers.tsx
+++ b/packages/icons/16/stickers-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgStickers = (props: SvgProps) => {
+const SvgStickersIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -27,4 +27,4 @@ const SvgStickers = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgStickers
+export default SvgStickersIcon
diff --git a/packages/icons/16/unlocked.tsx b/packages/icons/16/unlocked-icon.tsx
similarity index 94%
rename from packages/icons/16/unlocked.tsx
rename to packages/icons/16/unlocked-icon.tsx
index 662b5f5a..ccfda250 100644
--- a/packages/icons/16/unlocked.tsx
+++ b/packages/icons/16/unlocked-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgUnlocked = (props: SvgProps) => {
+const SvgUnlockedIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgUnlocked = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgUnlocked
+export default SvgUnlockedIcon
diff --git a/packages/icons/16/unmute.tsx b/packages/icons/16/unmute-icon.tsx
similarity index 94%
rename from packages/icons/16/unmute.tsx
rename to packages/icons/16/unmute-icon.tsx
index 00e1db34..7d626f84 100644
--- a/packages/icons/16/unmute.tsx
+++ b/packages/icons/16/unmute-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgUnmute = (props: SvgProps) => {
+const SvgUnmuteIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgUnmute = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgUnmute
+export default SvgUnmuteIcon
diff --git a/packages/icons/16/world.tsx b/packages/icons/16/world-icon.tsx
similarity index 96%
rename from packages/icons/16/world.tsx
rename to packages/icons/16/world-icon.tsx
index da05a333..ca32b625 100644
--- a/packages/icons/16/world.tsx
+++ b/packages/icons/16/world-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgWorld = (props: SvgProps) => {
+const SvgWorldIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgWorld = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgWorld
+export default SvgWorldIcon
diff --git a/packages/icons/20/account-number.tsx b/packages/icons/20/account-number-icon.tsx
similarity index 87%
rename from packages/icons/20/account-number.tsx
rename to packages/icons/20/account-number-icon.tsx
index 41480ff4..2948d8b4 100644
--- a/packages/icons/20/account-number.tsx
+++ b/packages/icons/20/account-number-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAccountNumber = (props: SvgProps) => {
+const SvgAccountNumberIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -22,4 +22,4 @@ const SvgAccountNumber = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAccountNumber
+export default SvgAccountNumberIcon
diff --git a/packages/icons/20/active-member.tsx b/packages/icons/20/active-member-icon.tsx
similarity index 86%
rename from packages/icons/20/active-member.tsx
rename to packages/icons/20/active-member-icon.tsx
index e3cb77ba..b5420c81 100644
--- a/packages/icons/20/active-member.tsx
+++ b/packages/icons/20/active-member-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgActiveMember = (props: SvgProps) => {
+const SvgActiveMemberIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgActiveMember = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgActiveMember
+export default SvgActiveMemberIcon
diff --git a/packages/icons/20/activity-center.tsx b/packages/icons/20/activity-center-icon.tsx
similarity index 88%
rename from packages/icons/20/activity-center.tsx
rename to packages/icons/20/activity-center-icon.tsx
index e0eda8fc..fc8c845c 100644
--- a/packages/icons/20/activity-center.tsx
+++ b/packages/icons/20/activity-center-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgActivityCenter = (props: SvgProps) => {
+const SvgActivityCenterIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgActivityCenter = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgActivityCenter
+export default SvgActivityCenterIcon
diff --git a/packages/icons/20/add.tsx b/packages/icons/20/add-icon.tsx
similarity index 89%
rename from packages/icons/20/add.tsx
rename to packages/icons/20/add-icon.tsx
index ab8779d7..c5481464 100644
--- a/packages/icons/20/add.tsx
+++ b/packages/icons/20/add-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAdd = (props: SvgProps) => {
+const SvgAddIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgAdd = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAdd
+export default SvgAddIcon
diff --git a/packages/icons/20/add-reaction.tsx b/packages/icons/20/add-reaction-icon.tsx
similarity index 90%
rename from packages/icons/20/add-reaction.tsx
rename to packages/icons/20/add-reaction-icon.tsx
index 39421a28..de6d2ab5 100644
--- a/packages/icons/20/add-reaction.tsx
+++ b/packages/icons/20/add-reaction-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAddReaction = (props: SvgProps) => {
+const SvgAddReactionIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -29,4 +29,4 @@ const SvgAddReaction = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAddReaction
+export default SvgAddReactionIcon
diff --git a/packages/icons/20/add-small.tsx b/packages/icons/20/add-small-icon.tsx
similarity index 90%
rename from packages/icons/20/add-small.tsx
rename to packages/icons/20/add-small-icon.tsx
index 2eb5c8dc..267c20fd 100644
--- a/packages/icons/20/add-small.tsx
+++ b/packages/icons/20/add-small-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAddSmall = (props: SvgProps) => {
+const SvgAddSmallIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -31,4 +31,4 @@ const SvgAddSmall = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAddSmall
+export default SvgAddSmallIcon
diff --git a/packages/icons/20/add-token.tsx b/packages/icons/20/add-token-icon.tsx
similarity index 89%
rename from packages/icons/20/add-token.tsx
rename to packages/icons/20/add-token-icon.tsx
index 8368446c..3aead3e3 100644
--- a/packages/icons/20/add-token.tsx
+++ b/packages/icons/20/add-token-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAddToken = (props: SvgProps) => {
+const SvgAddTokenIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -24,4 +24,4 @@ const SvgAddToken = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAddToken
+export default SvgAddTokenIcon
diff --git a/packages/icons/20/add-user.tsx b/packages/icons/20/add-user-icon.tsx
similarity index 91%
rename from packages/icons/20/add-user.tsx
rename to packages/icons/20/add-user-icon.tsx
index 069166e4..c1969a43 100644
--- a/packages/icons/20/add-user.tsx
+++ b/packages/icons/20/add-user-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAddUser = (props: SvgProps) => {
+const SvgAddUserIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgAddUser = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAddUser
+export default SvgAddUserIcon
diff --git a/packages/icons/20/alert.tsx b/packages/icons/20/alert-icon.tsx
similarity index 88%
rename from packages/icons/20/alert.tsx
rename to packages/icons/20/alert-icon.tsx
index ab4a78d6..a046ae09 100644
--- a/packages/icons/20/alert.tsx
+++ b/packages/icons/20/alert-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAlert = (props: SvgProps) => {
+const SvgAlertIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgAlert = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAlert
+export default SvgAlertIcon
diff --git a/packages/icons/20/alphabetically.tsx b/packages/icons/20/alphabetically-icon.tsx
similarity index 88%
rename from packages/icons/20/alphabetically.tsx
rename to packages/icons/20/alphabetically-icon.tsx
index c3306b1d..1b3b58fe 100644
--- a/packages/icons/20/alphabetically.tsx
+++ b/packages/icons/20/alphabetically-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAlphabetically = (props: SvgProps) => {
+const SvgAlphabeticallyIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -30,4 +30,4 @@ const SvgAlphabetically = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAlphabetically
+export default SvgAlphabeticallyIcon
diff --git a/packages/icons/20/android.tsx b/packages/icons/20/android-icon.tsx
similarity index 91%
rename from packages/icons/20/android.tsx
rename to packages/icons/20/android-icon.tsx
index 5fc36cd3..40faaf26 100644
--- a/packages/icons/20/android.tsx
+++ b/packages/icons/20/android-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAndroid = (props: SvgProps) => {
+const SvgAndroidIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -29,4 +29,4 @@ const SvgAndroid = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAndroid
+export default SvgAndroidIcon
diff --git a/packages/icons/20/anonymous.tsx b/packages/icons/20/anonymous-icon.tsx
similarity index 95%
rename from packages/icons/20/anonymous.tsx
rename to packages/icons/20/anonymous-icon.tsx
index dbc56594..8984576c 100644
--- a/packages/icons/20/anonymous.tsx
+++ b/packages/icons/20/anonymous-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAnonymous = (props: SvgProps) => {
+const SvgAnonymousIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgAnonymous = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAnonymous
+export default SvgAnonymousIcon
diff --git a/packages/icons/20/arrow-down.tsx b/packages/icons/20/arrow-down-icon.tsx
similarity index 88%
rename from packages/icons/20/arrow-down.tsx
rename to packages/icons/20/arrow-down-icon.tsx
index 79499f85..080659c2 100644
--- a/packages/icons/20/arrow-down.tsx
+++ b/packages/icons/20/arrow-down-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgArrowDown = (props: SvgProps) => {
+const SvgArrowDownIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgArrowDown = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgArrowDown
+export default SvgArrowDownIcon
diff --git a/packages/icons/20/arrow-left.tsx b/packages/icons/20/arrow-left-icon.tsx
similarity index 88%
rename from packages/icons/20/arrow-left.tsx
rename to packages/icons/20/arrow-left-icon.tsx
index 32d1d546..c18680ea 100644
--- a/packages/icons/20/arrow-left.tsx
+++ b/packages/icons/20/arrow-left-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgArrowLeft = (props: SvgProps) => {
+const SvgArrowLeftIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgArrowLeft = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgArrowLeft
+export default SvgArrowLeftIcon
diff --git a/packages/icons/20/arrow-right.tsx b/packages/icons/20/arrow-right-icon.tsx
similarity index 87%
rename from packages/icons/20/arrow-right.tsx
rename to packages/icons/20/arrow-right-icon.tsx
index c56361dc..3008d2fc 100644
--- a/packages/icons/20/arrow-right.tsx
+++ b/packages/icons/20/arrow-right-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgArrowRight = (props: SvgProps) => {
+const SvgArrowRightIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgArrowRight = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgArrowRight
+export default SvgArrowRightIcon
diff --git a/packages/icons/20/arrow-up.tsx b/packages/icons/20/arrow-up-icon.tsx
similarity index 88%
rename from packages/icons/20/arrow-up.tsx
rename to packages/icons/20/arrow-up-icon.tsx
index 8c73ae1b..4b99dbd9 100644
--- a/packages/icons/20/arrow-up.tsx
+++ b/packages/icons/20/arrow-up-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgArrowUp = (props: SvgProps) => {
+const SvgArrowUpIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgArrowUp = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgArrowUp
+export default SvgArrowUpIcon
diff --git a/packages/icons/20/attach.tsx b/packages/icons/20/attach-icon.tsx
similarity index 92%
rename from packages/icons/20/attach.tsx
rename to packages/icons/20/attach-icon.tsx
index 404abe56..86360952 100644
--- a/packages/icons/20/attach.tsx
+++ b/packages/icons/20/attach-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAttach = (props: SvgProps) => {
+const SvgAttachIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgAttach = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAttach
+export default SvgAttachIcon
diff --git a/packages/icons/20/audio.tsx b/packages/icons/20/audio-icon.tsx
similarity index 91%
rename from packages/icons/20/audio.tsx
rename to packages/icons/20/audio-icon.tsx
index e34a48d7..c0eb0024 100644
--- a/packages/icons/20/audio.tsx
+++ b/packages/icons/20/audio-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAudio = (props: SvgProps) => {
+const SvgAudioIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgAudio = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAudio
+export default SvgAudioIcon
diff --git a/packages/icons/20/automatic.tsx b/packages/icons/20/automatic-icon.tsx
similarity index 89%
rename from packages/icons/20/automatic.tsx
rename to packages/icons/20/automatic-icon.tsx
index 26be3f33..9d88002e 100644
--- a/packages/icons/20/automatic.tsx
+++ b/packages/icons/20/automatic-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAutomatic = (props: SvgProps) => {
+const SvgAutomaticIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -24,4 +24,4 @@ const SvgAutomatic = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAutomatic
+export default SvgAutomaticIcon
diff --git a/packages/icons/20/block.tsx b/packages/icons/20/block-icon.tsx
similarity index 90%
rename from packages/icons/20/block.tsx
rename to packages/icons/20/block-icon.tsx
index 2b1fb697..af2bb82e 100644
--- a/packages/icons/20/block.tsx
+++ b/packages/icons/20/block-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgBlock = (props: SvgProps) => {
+const SvgBlockIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgBlock = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgBlock
+export default SvgBlockIcon
diff --git a/packages/icons/20/bold.tsx b/packages/icons/20/bold-icon.tsx
similarity index 91%
rename from packages/icons/20/bold.tsx
rename to packages/icons/20/bold-icon.tsx
index ac296eec..3bc8d099 100644
--- a/packages/icons/20/bold.tsx
+++ b/packages/icons/20/bold-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgBold = (props: SvgProps) => {
+const SvgBoldIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgBold = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgBold
+export default SvgBoldIcon
diff --git a/packages/icons/20/bridge.tsx b/packages/icons/20/bridge-icon.tsx
similarity index 91%
rename from packages/icons/20/bridge.tsx
rename to packages/icons/20/bridge-icon.tsx
index 78a535cc..2dac0849 100644
--- a/packages/icons/20/bridge.tsx
+++ b/packages/icons/20/bridge-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgBridge = (props: SvgProps) => {
+const SvgBridgeIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -29,4 +29,4 @@ const SvgBridge = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgBridge
+export default SvgBridgeIcon
diff --git a/packages/icons/20/browser.tsx b/packages/icons/20/browser-icon.tsx
similarity index 91%
rename from packages/icons/20/browser.tsx
rename to packages/icons/20/browser-icon.tsx
index f43410b6..1f3c6b19 100644
--- a/packages/icons/20/browser.tsx
+++ b/packages/icons/20/browser-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgBrowser = (props: SvgProps) => {
+const SvgBrowserIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgBrowser = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgBrowser
+export default SvgBrowserIcon
diff --git a/packages/icons/20/bullet.tsx b/packages/icons/20/bullet-icon.tsx
similarity index 85%
rename from packages/icons/20/bullet.tsx
rename to packages/icons/20/bullet-icon.tsx
index 475f2145..dda2eded 100644
--- a/packages/icons/20/bullet.tsx
+++ b/packages/icons/20/bullet-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgBullet = (props: SvgProps) => {
+const SvgBulletIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgBullet = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgBullet
+export default SvgBulletIcon
diff --git a/packages/icons/20/bullet-list.tsx b/packages/icons/20/bullet-list-icon.tsx
similarity index 93%
rename from packages/icons/20/bullet-list.tsx
rename to packages/icons/20/bullet-list-icon.tsx
index e82a51f8..86cf4b2d 100644
--- a/packages/icons/20/bullet-list.tsx
+++ b/packages/icons/20/bullet-list-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgBulletList = (props: SvgProps) => {
+const SvgBulletListIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -52,4 +52,4 @@ const SvgBulletList = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgBulletList
+export default SvgBulletListIcon
diff --git a/packages/icons/20/buy.tsx b/packages/icons/20/buy-icon.tsx
similarity index 94%
rename from packages/icons/20/buy.tsx
rename to packages/icons/20/buy-icon.tsx
index 778b2681..3968c387 100644
--- a/packages/icons/20/buy.tsx
+++ b/packages/icons/20/buy-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgBuy = (props: SvgProps) => {
+const SvgBuyIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgBuy = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgBuy
+export default SvgBuyIcon
diff --git a/packages/icons/20/camera.tsx b/packages/icons/20/camera-icon.tsx
similarity index 92%
rename from packages/icons/20/camera.tsx
rename to packages/icons/20/camera-icon.tsx
index e4685e2e..b65afb33 100644
--- a/packages/icons/20/camera.tsx
+++ b/packages/icons/20/camera-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCamera = (props: SvgProps) => {
+const SvgCameraIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgCamera = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgCamera
+export default SvgCameraIcon
diff --git a/packages/icons/20/card-view.tsx b/packages/icons/20/card-view-icon.tsx
similarity index 96%
rename from packages/icons/20/card-view.tsx
rename to packages/icons/20/card-view-icon.tsx
index e29e421e..617530c4 100644
--- a/packages/icons/20/card-view.tsx
+++ b/packages/icons/20/card-view-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCardView = (props: SvgProps) => {
+const SvgCardViewIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgCardView = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgCardView
+export default SvgCardViewIcon
diff --git a/packages/icons/20/centre-align.tsx b/packages/icons/20/centre-align-icon.tsx
similarity index 87%
rename from packages/icons/20/centre-align.tsx
rename to packages/icons/20/centre-align-icon.tsx
index f49b470b..9c548c61 100644
--- a/packages/icons/20/centre-align.tsx
+++ b/packages/icons/20/centre-align-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCentreAlign = (props: SvgProps) => {
+const SvgCentreAlignIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -24,4 +24,4 @@ const SvgCentreAlign = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgCentreAlign
+export default SvgCentreAlignIcon
diff --git a/packages/icons/20/chatkey.tsx b/packages/icons/20/chatkey-icon.tsx
similarity index 92%
rename from packages/icons/20/chatkey.tsx
rename to packages/icons/20/chatkey-icon.tsx
index dc991e14..2aa7036c 100644
--- a/packages/icons/20/chatkey.tsx
+++ b/packages/icons/20/chatkey-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgChatkey = (props: SvgProps) => {
+const SvgChatkeyIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -25,4 +25,4 @@ const SvgChatkey = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgChatkey
+export default SvgChatkeyIcon
diff --git a/packages/icons/20/check.tsx b/packages/icons/20/check-icon.tsx
similarity index 86%
rename from packages/icons/20/check.tsx
rename to packages/icons/20/check-icon.tsx
index 8203302e..9933ee60 100644
--- a/packages/icons/20/check.tsx
+++ b/packages/icons/20/check-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCheck = (props: SvgProps) => {
+const SvgCheckIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgCheck = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgCheck
+export default SvgCheckIcon
diff --git a/packages/icons/20/chevron-down.tsx b/packages/icons/20/chevron-down-icon.tsx
similarity index 84%
rename from packages/icons/20/chevron-down.tsx
rename to packages/icons/20/chevron-down-icon.tsx
index 4e54ef68..2e7a2a95 100644
--- a/packages/icons/20/chevron-down.tsx
+++ b/packages/icons/20/chevron-down-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgChevronDown = (props: SvgProps) => {
+const SvgChevronDownIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgChevronDown = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgChevronDown
+export default SvgChevronDownIcon
diff --git a/packages/icons/20/chevron-left.tsx b/packages/icons/20/chevron-left-icon.tsx
similarity index 84%
rename from packages/icons/20/chevron-left.tsx
rename to packages/icons/20/chevron-left-icon.tsx
index 38b04d4c..c2731ff1 100644
--- a/packages/icons/20/chevron-left.tsx
+++ b/packages/icons/20/chevron-left-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgChevronLeft = (props: SvgProps) => {
+const SvgChevronLeftIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgChevronLeft = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgChevronLeft
+export default SvgChevronLeftIcon
diff --git a/packages/icons/20/chevron-right.tsx b/packages/icons/20/chevron-right-icon.tsx
similarity index 84%
rename from packages/icons/20/chevron-right.tsx
rename to packages/icons/20/chevron-right-icon.tsx
index cdb7ff77..e2a7800a 100644
--- a/packages/icons/20/chevron-right.tsx
+++ b/packages/icons/20/chevron-right-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgChevronRight = (props: SvgProps) => {
+const SvgChevronRightIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgChevronRight = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgChevronRight
+export default SvgChevronRightIcon
diff --git a/packages/icons/20/chevron-up.tsx b/packages/icons/20/chevron-up-icon.tsx
similarity index 85%
rename from packages/icons/20/chevron-up.tsx
rename to packages/icons/20/chevron-up-icon.tsx
index fda964fd..29be24cf 100644
--- a/packages/icons/20/chevron-up.tsx
+++ b/packages/icons/20/chevron-up-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgChevronUp = (props: SvgProps) => {
+const SvgChevronUpIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgChevronUp = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgChevronUp
+export default SvgChevronUpIcon
diff --git a/packages/icons/20/chevrons-left.tsx b/packages/icons/20/chevrons-left-icon.tsx
similarity index 84%
rename from packages/icons/20/chevrons-left.tsx
rename to packages/icons/20/chevrons-left-icon.tsx
index 58ef15d0..e597e6e2 100644
--- a/packages/icons/20/chevrons-left.tsx
+++ b/packages/icons/20/chevrons-left-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgChevronsLeft = (props: SvgProps) => {
+const SvgChevronsLeftIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgChevronsLeft = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgChevronsLeft
+export default SvgChevronsLeftIcon
diff --git a/packages/icons/20/chevrons-right.tsx b/packages/icons/20/chevrons-right-icon.tsx
similarity index 84%
rename from packages/icons/20/chevrons-right.tsx
rename to packages/icons/20/chevrons-right-icon.tsx
index 3b9609c8..e89f7f78 100644
--- a/packages/icons/20/chevrons-right.tsx
+++ b/packages/icons/20/chevrons-right-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgChevronsRight = (props: SvgProps) => {
+const SvgChevronsRightIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgChevronsRight = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgChevronsRight
+export default SvgChevronsRightIcon
diff --git a/packages/icons/20/clear.tsx b/packages/icons/20/clear-icon.tsx
similarity index 90%
rename from packages/icons/20/clear.tsx
rename to packages/icons/20/clear-icon.tsx
index 3723d927..ac088248 100644
--- a/packages/icons/20/clear.tsx
+++ b/packages/icons/20/clear-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgClear = (props: SvgProps) => {
+const SvgClearIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -24,4 +24,4 @@ const SvgClear = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgClear
+export default SvgClearIcon
diff --git a/packages/icons/20/close.tsx b/packages/icons/20/close-icon.tsx
similarity index 90%
rename from packages/icons/20/close.tsx
rename to packages/icons/20/close-icon.tsx
index 82bc392d..b1e4053d 100644
--- a/packages/icons/20/close.tsx
+++ b/packages/icons/20/close-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgClose = (props: SvgProps) => {
+const SvgCloseIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgClose = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgClose
+export default SvgCloseIcon
diff --git a/packages/icons/20/code-block.tsx b/packages/icons/20/code-block-icon.tsx
similarity index 94%
rename from packages/icons/20/code-block.tsx
rename to packages/icons/20/code-block-icon.tsx
index c296ec06..1e809b13 100644
--- a/packages/icons/20/code-block.tsx
+++ b/packages/icons/20/code-block-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCodeBlock = (props: SvgProps) => {
+const SvgCodeBlockIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgCodeBlock = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgCodeBlock
+export default SvgCodeBlockIcon
diff --git a/packages/icons/20/code.tsx b/packages/icons/20/code-icon.tsx
similarity index 90%
rename from packages/icons/20/code.tsx
rename to packages/icons/20/code-icon.tsx
index 74a163af..225e3321 100644
--- a/packages/icons/20/code.tsx
+++ b/packages/icons/20/code-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCode = (props: SvgProps) => {
+const SvgCodeIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgCode = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgCode
+export default SvgCodeIcon
diff --git a/packages/icons/20/collapse.tsx b/packages/icons/20/collapse-icon.tsx
similarity index 88%
rename from packages/icons/20/collapse.tsx
rename to packages/icons/20/collapse-icon.tsx
index 059a1e93..244e1dee 100644
--- a/packages/icons/20/collapse.tsx
+++ b/packages/icons/20/collapse-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCollapse = (props: SvgProps) => {
+const SvgCollapseIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgCollapse = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgCollapse
+export default SvgCollapseIcon
diff --git a/packages/icons/20/colour-pick.tsx b/packages/icons/20/colour-pick-icon.tsx
similarity index 95%
rename from packages/icons/20/colour-pick.tsx
rename to packages/icons/20/colour-pick-icon.tsx
index 03567a8e..4497f179 100644
--- a/packages/icons/20/colour-pick.tsx
+++ b/packages/icons/20/colour-pick-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgColourPick = (props: SvgProps) => {
+const SvgColourPickIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -29,4 +29,4 @@ const SvgColourPick = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgColourPick
+export default SvgColourPickIcon
diff --git a/packages/icons/20/communities.tsx b/packages/icons/20/communities-icon.tsx
similarity index 92%
rename from packages/icons/20/communities.tsx
rename to packages/icons/20/communities-icon.tsx
index 2ef28001..622498b6 100644
--- a/packages/icons/20/communities.tsx
+++ b/packages/icons/20/communities-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCommunities = (props: SvgProps) => {
+const SvgCommunitiesIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgCommunities = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgCommunities
+export default SvgCommunitiesIcon
diff --git a/packages/icons/20/connection.tsx b/packages/icons/20/connection-icon.tsx
similarity index 92%
rename from packages/icons/20/connection.tsx
rename to packages/icons/20/connection-icon.tsx
index 80642811..77dacc51 100644
--- a/packages/icons/20/connection.tsx
+++ b/packages/icons/20/connection-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgConnection = (props: SvgProps) => {
+const SvgConnectionIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -30,4 +30,4 @@ const SvgConnection = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgConnection
+export default SvgConnectionIcon
diff --git a/packages/icons/20/contact-book.tsx b/packages/icons/20/contact-book-icon.tsx
similarity index 96%
rename from packages/icons/20/contact-book.tsx
rename to packages/icons/20/contact-book-icon.tsx
index 05e54838..a78abeb9 100644
--- a/packages/icons/20/contact-book.tsx
+++ b/packages/icons/20/contact-book-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgContactBook = (props: SvgProps) => {
+const SvgContactBookIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgContactBook = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgContactBook
+export default SvgContactBookIcon
diff --git a/packages/icons/20/contact.tsx b/packages/icons/20/contact-icon.tsx
similarity index 93%
rename from packages/icons/20/contact.tsx
rename to packages/icons/20/contact-icon.tsx
index 78ffcdee..f43d8425 100644
--- a/packages/icons/20/contact.tsx
+++ b/packages/icons/20/contact-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgContact = (props: SvgProps) => {
+const SvgContactIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -41,4 +41,4 @@ const SvgContact = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgContact
+export default SvgContactIcon
diff --git a/packages/icons/20/copy.tsx b/packages/icons/20/copy-icon.tsx
similarity index 92%
rename from packages/icons/20/copy.tsx
rename to packages/icons/20/copy-icon.tsx
index 9456ac17..3c79f2c7 100644
--- a/packages/icons/20/copy.tsx
+++ b/packages/icons/20/copy-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCopy = (props: SvgProps) => {
+const SvgCopyIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -32,4 +32,4 @@ const SvgCopy = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgCopy
+export default SvgCopyIcon
diff --git a/packages/icons/20/correct.tsx b/packages/icons/20/correct-icon.tsx
similarity index 89%
rename from packages/icons/20/correct.tsx
rename to packages/icons/20/correct-icon.tsx
index 26671210..fd2e01a5 100644
--- a/packages/icons/20/correct.tsx
+++ b/packages/icons/20/correct-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCorrect = (props: SvgProps) => {
+const SvgCorrectIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -26,4 +26,4 @@ const SvgCorrect = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgCorrect
+export default SvgCorrectIcon
diff --git a/packages/icons/20/crown.tsx b/packages/icons/20/crown-icon.tsx
similarity index 94%
rename from packages/icons/20/crown.tsx
rename to packages/icons/20/crown-icon.tsx
index 5f4df9e9..69376a14 100644
--- a/packages/icons/20/crown.tsx
+++ b/packages/icons/20/crown-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCrown = (props: SvgProps) => {
+const SvgCrownIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -30,4 +30,4 @@ const SvgCrown = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgCrown
+export default SvgCrownIcon
diff --git a/packages/icons/20/customize.tsx b/packages/icons/20/customize-icon.tsx
similarity index 93%
rename from packages/icons/20/customize.tsx
rename to packages/icons/20/customize-icon.tsx
index 9f15a5fa..45f38a64 100644
--- a/packages/icons/20/customize.tsx
+++ b/packages/icons/20/customize-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgCustomize = (props: SvgProps) => {
+const SvgCustomizeIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -29,4 +29,4 @@ const SvgCustomize = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgCustomize
+export default SvgCustomizeIcon
diff --git a/packages/icons/20/dark.tsx b/packages/icons/20/dark-icon.tsx
similarity index 95%
rename from packages/icons/20/dark.tsx
rename to packages/icons/20/dark-icon.tsx
index 8ae3c162..fcb41a0c 100644
--- a/packages/icons/20/dark.tsx
+++ b/packages/icons/20/dark-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgDark = (props: SvgProps) => {
+const SvgDarkIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -21,4 +21,4 @@ const SvgDark = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgDark
+export default SvgDarkIcon
diff --git a/packages/icons/20/data-usage.tsx b/packages/icons/20/data-usage-icon.tsx
similarity index 95%
rename from packages/icons/20/data-usage.tsx
rename to packages/icons/20/data-usage-icon.tsx
index 08848a31..e82d3414 100644
--- a/packages/icons/20/data-usage.tsx
+++ b/packages/icons/20/data-usage-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgDataUsage = (props: SvgProps) => {
+const SvgDataUsageIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgDataUsage = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgDataUsage
+export default SvgDataUsageIcon
diff --git a/packages/icons/20/delete.tsx b/packages/icons/20/delete-icon.tsx
similarity index 95%
rename from packages/icons/20/delete.tsx
rename to packages/icons/20/delete-icon.tsx
index 3c571b03..c6c0ec42 100644
--- a/packages/icons/20/delete.tsx
+++ b/packages/icons/20/delete-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgDelete = (props: SvgProps) => {
+const SvgDeleteIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgDelete = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgDelete
+export default SvgDeleteIcon
diff --git a/packages/icons/20/desktop.tsx b/packages/icons/20/desktop-icon.tsx
similarity index 95%
rename from packages/icons/20/desktop.tsx
rename to packages/icons/20/desktop-icon.tsx
index 8b318d94..32824fd9 100644
--- a/packages/icons/20/desktop.tsx
+++ b/packages/icons/20/desktop-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgDesktop = (props: SvgProps) => {
+const SvgDesktopIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgDesktop = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgDesktop
+export default SvgDesktopIcon
diff --git a/packages/icons/20/save.tsx b/packages/icons/20/download-icon.tsx
similarity index 90%
rename from packages/icons/20/save.tsx
rename to packages/icons/20/download-icon.tsx
index 1162932c..0c21dd66 100644
--- a/packages/icons/20/save.tsx
+++ b/packages/icons/20/download-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSave = (props: SvgProps) => {
+const SvgDownloadIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -29,4 +29,4 @@ const SvgSave = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSave
+export default SvgDownloadIcon
diff --git a/packages/icons/20/dropdown.tsx b/packages/icons/20/dropdown-icon.tsx
similarity index 87%
rename from packages/icons/20/dropdown.tsx
rename to packages/icons/20/dropdown-icon.tsx
index dfb4e4ea..76c410ac 100644
--- a/packages/icons/20/dropdown.tsx
+++ b/packages/icons/20/dropdown-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgDropdown = (props: SvgProps) => {
+const SvgDropdownIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgDropdown = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgDropdown
+export default SvgDropdownIcon
diff --git a/packages/icons/20/duration.tsx b/packages/icons/20/duration-icon.tsx
similarity index 89%
rename from packages/icons/20/duration.tsx
rename to packages/icons/20/duration-icon.tsx
index de66bd80..3fe0af47 100644
--- a/packages/icons/20/duration.tsx
+++ b/packages/icons/20/duration-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgDuration = (props: SvgProps) => {
+const SvgDurationIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -24,4 +24,4 @@ const SvgDuration = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgDuration
+export default SvgDurationIcon
diff --git a/packages/icons/20/edit.tsx b/packages/icons/20/edit-icon.tsx
similarity index 95%
rename from packages/icons/20/edit.tsx
rename to packages/icons/20/edit-icon.tsx
index 45f75c7d..34724c46 100644
--- a/packages/icons/20/edit.tsx
+++ b/packages/icons/20/edit-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgEdit = (props: SvgProps) => {
+const SvgEditIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgEdit = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgEdit
+export default SvgEditIcon
diff --git a/packages/icons/20/email.tsx b/packages/icons/20/email-icon.tsx
similarity index 91%
rename from packages/icons/20/email.tsx
rename to packages/icons/20/email-icon.tsx
index ea10aa92..782b2ee7 100644
--- a/packages/icons/20/email.tsx
+++ b/packages/icons/20/email-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgEmail = (props: SvgProps) => {
+const SvgEmailIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgEmail = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgEmail
+export default SvgEmailIcon
diff --git a/packages/icons/20/expand.tsx b/packages/icons/20/expand-icon.tsx
similarity index 88%
rename from packages/icons/20/expand.tsx
rename to packages/icons/20/expand-icon.tsx
index ed575097..91be5bd6 100644
--- a/packages/icons/20/expand.tsx
+++ b/packages/icons/20/expand-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgExpand = (props: SvgProps) => {
+const SvgExpandIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgExpand = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgExpand
+export default SvgExpandIcon
diff --git a/packages/icons/20/external.tsx b/packages/icons/20/external-icon.tsx
similarity index 88%
rename from packages/icons/20/external.tsx
rename to packages/icons/20/external-icon.tsx
index 20f13f1f..399ff5b4 100644
--- a/packages/icons/20/external.tsx
+++ b/packages/icons/20/external-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgExternal = (props: SvgProps) => {
+const SvgExternalIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgExternal = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgExternal
+export default SvgExternalIcon
diff --git a/packages/icons/20/face-id.tsx b/packages/icons/20/face-id-icon.tsx
similarity index 92%
rename from packages/icons/20/face-id.tsx
rename to packages/icons/20/face-id-icon.tsx
index 154c47f6..e30c5406 100644
--- a/packages/icons/20/face-id.tsx
+++ b/packages/icons/20/face-id-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgFaceId = (props: SvgProps) => {
+const SvgFaceIdIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -22,4 +22,4 @@ const SvgFaceId = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgFaceId
+export default SvgFaceIdIcon
diff --git a/packages/icons/20/favourite.tsx b/packages/icons/20/favourite-icon.tsx
similarity index 88%
rename from packages/icons/20/favourite.tsx
rename to packages/icons/20/favourite-icon.tsx
index 4196f318..e5b9e396 100644
--- a/packages/icons/20/favourite.tsx
+++ b/packages/icons/20/favourite-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgFavourite = (props: SvgProps) => {
+const SvgFavouriteIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgFavourite = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgFavourite
+export default SvgFavouriteIcon
diff --git a/packages/icons/20/file.tsx b/packages/icons/20/file-icon.tsx
similarity index 94%
rename from packages/icons/20/file.tsx
rename to packages/icons/20/file-icon.tsx
index bf7b8e05..7fe2c8da 100644
--- a/packages/icons/20/file.tsx
+++ b/packages/icons/20/file-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgFile = (props: SvgProps) => {
+const SvgFileIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -34,4 +34,4 @@ const SvgFile = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgFile
+export default SvgFileIcon
diff --git a/packages/icons/20/flag.tsx b/packages/icons/20/flag-icon.tsx
similarity index 91%
rename from packages/icons/20/flag.tsx
rename to packages/icons/20/flag-icon.tsx
index 8cd1b716..3e755958 100644
--- a/packages/icons/20/flag.tsx
+++ b/packages/icons/20/flag-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgFlag = (props: SvgProps) => {
+const SvgFlagIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgFlag = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgFlag
+export default SvgFlagIcon
diff --git a/packages/icons/20/flash.tsx b/packages/icons/20/flash-icon.tsx
similarity index 88%
rename from packages/icons/20/flash.tsx
rename to packages/icons/20/flash-icon.tsx
index abd52614..200e8f4b 100644
--- a/packages/icons/20/flash.tsx
+++ b/packages/icons/20/flash-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgFlash = (props: SvgProps) => {
+const SvgFlashIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgFlash = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgFlash
+export default SvgFlashIcon
diff --git a/packages/icons/20/flash-off.tsx b/packages/icons/20/flash-off-icon.tsx
similarity index 89%
rename from packages/icons/20/flash-off.tsx
rename to packages/icons/20/flash-off-icon.tsx
index e7161188..9be06f6c 100644
--- a/packages/icons/20/flash-off.tsx
+++ b/packages/icons/20/flash-off-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgFlashOff = (props: SvgProps) => {
+const SvgFlashOffIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -24,4 +24,4 @@ const SvgFlashOff = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgFlashOff
+export default SvgFlashOffIcon
diff --git a/packages/icons/20/flashlight-off.tsx b/packages/icons/20/flashlight-off-icon.tsx
similarity index 94%
rename from packages/icons/20/flashlight-off.tsx
rename to packages/icons/20/flashlight-off-icon.tsx
index 9fcd66c8..52689cb5 100644
--- a/packages/icons/20/flashlight-off.tsx
+++ b/packages/icons/20/flashlight-off-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgFlashlightOff = (props: SvgProps) => {
+const SvgFlashlightOffIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgFlashlightOff = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgFlashlightOff
+export default SvgFlashlightOffIcon
diff --git a/packages/icons/20/flashlight-on.tsx b/packages/icons/20/flashlight-on-icon.tsx
similarity index 95%
rename from packages/icons/20/flashlight-on.tsx
rename to packages/icons/20/flashlight-on-icon.tsx
index 7f7b5a6d..c26d873d 100644
--- a/packages/icons/20/flashlight-on.tsx
+++ b/packages/icons/20/flashlight-on-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgFlashlightOn = (props: SvgProps) => {
+const SvgFlashlightOnIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -29,4 +29,4 @@ const SvgFlashlightOn = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgFlashlightOn
+export default SvgFlashlightOnIcon
diff --git a/packages/icons/20/flip.tsx b/packages/icons/20/flip-icon.tsx
similarity index 93%
rename from packages/icons/20/flip.tsx
rename to packages/icons/20/flip-icon.tsx
index dedef8c1..8928966e 100644
--- a/packages/icons/20/flip.tsx
+++ b/packages/icons/20/flip-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgFlip = (props: SvgProps) => {
+const SvgFlipIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgFlip = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgFlip
+export default SvgFlipIcon
diff --git a/packages/icons/20/folder.tsx b/packages/icons/20/folder-icon.tsx
similarity index 96%
rename from packages/icons/20/folder.tsx
rename to packages/icons/20/folder-icon.tsx
index d92d72f8..66a5cab2 100644
--- a/packages/icons/20/folder.tsx
+++ b/packages/icons/20/folder-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgFolder = (props: SvgProps) => {
+const SvgFolderIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgFolder = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgFolder
+export default SvgFolderIcon
diff --git a/packages/icons/20/format.tsx b/packages/icons/20/format-icon.tsx
similarity index 91%
rename from packages/icons/20/format.tsx
rename to packages/icons/20/format-icon.tsx
index dfa80b9c..91027947 100644
--- a/packages/icons/20/format.tsx
+++ b/packages/icons/20/format-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgFormat = (props: SvgProps) => {
+const SvgFormatIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -14,15 +14,15 @@ const SvgFormat = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <G clipPath="url(#format_svg__a)" fill={color}>
+      <G clipPath="url(#format-icon_svg__a)" fill={color}>
         <Path d="M4.343 14.047a.858.858 0 1 1-1.622-.558l2.575-7.314a1.493 1.493 0 0 1 2.817 0l2.579 7.314a.858.858 0 1 1-1.622.559L6.753 7.15a.051.051 0 0 0-.097 0l-2.313 6.896Zm-.136-2.434c0-.38.308-.688.688-.688h3.61a.688.688 0 0 1 0 1.376h-3.61a.688.688 0 0 1-.688-.688ZM13.82 14.823c-.449 0-.857-.085-1.223-.254a2.1 2.1 0 0 1-.872-.744c-.216-.326-.324-.72-.324-1.181 0-.407.08-.736.24-.988.16-.256.374-.456.642-.6.268-.145.563-.253.886-.324.327-.073.654-.132.984-.175.43-.056.78-.097 1.048-.125.27-.03.467-.081.59-.152.127-.07.19-.194.19-.37v-.036c0-.456-.125-.81-.374-1.062-.246-.252-.62-.379-1.122-.379-.52 0-.928.114-1.223.342-.13.1-.244.204-.34.311-.193.213-.49.344-.76.248-.303-.108-.457-.453-.275-.717.133-.192.285-.355.456-.488.311-.243.65-.413 1.016-.508.37-.099.732-.148 1.09-.148.227 0 .489.028.784.083.299.053.586.162.863.328.28.166.513.417.697.752.185.336.277.785.277 1.349v4.127c0 .3-.244.544-.544.544h-.065a.48.48 0 0 1-.48-.48v-.446a.034.034 0 0 0-.065-.015 1.96 1.96 0 0 1-.36.475 2.131 2.131 0 0 1-.688.448c-.286.123-.635.185-1.048.185Zm.167-.98c.43 0 .794-.084 1.09-.253a1.729 1.729 0 0 0 .904-1.5v-.653c0-.117-.193-.225-.305-.192a5.124 5.124 0 0 1-.535.115 24.109 24.109 0 0 1-1.044.139 4.165 4.165 0 0 0-.794.18 1.37 1.37 0 0 0-.59.364c-.148.16-.222.379-.222.656 0 .379.14.665.42.859.283.19.642.286 1.076.286Z" />
       </G>
       <Defs>
-        <ClipPath id="format_svg__a">
+        <ClipPath id="format-icon_svg__a">
           <Path fill="#fff" d="M0 0h20v20H0z" />
         </ClipPath>
       </Defs>
     </Svg>
   )
 }
-export default SvgFormat
+export default SvgFormatIcon
diff --git a/packages/icons/20/forward.tsx b/packages/icons/20/forward-icon.tsx
similarity index 92%
rename from packages/icons/20/forward.tsx
rename to packages/icons/20/forward-icon.tsx
index 3ead209d..3af6d47e 100644
--- a/packages/icons/20/forward.tsx
+++ b/packages/icons/20/forward-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgForward = (props: SvgProps) => {
+const SvgForwardIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgForward = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgForward
+export default SvgForwardIcon
diff --git a/packages/icons/20/friend.tsx b/packages/icons/20/friend-icon.tsx
similarity index 91%
rename from packages/icons/20/friend.tsx
rename to packages/icons/20/friend-icon.tsx
index e9d95f28..52a62a06 100644
--- a/packages/icons/20/friend.tsx
+++ b/packages/icons/20/friend-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgFriend = (props: SvgProps) => {
+const SvgFriendIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -31,4 +31,4 @@ const SvgFriend = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgFriend
+export default SvgFriendIcon
diff --git a/packages/icons/20/gas.tsx b/packages/icons/20/gas-icon.tsx
similarity index 95%
rename from packages/icons/20/gas.tsx
rename to packages/icons/20/gas-icon.tsx
index c22461a4..f3d97b96 100644
--- a/packages/icons/20/gas.tsx
+++ b/packages/icons/20/gas-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgGas = (props: SvgProps) => {
+const SvgGasIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -34,4 +34,4 @@ const SvgGas = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgGas
+export default SvgGasIcon
diff --git a/packages/icons/20/gif.tsx b/packages/icons/20/gif-icon.tsx
similarity index 96%
rename from packages/icons/20/gif.tsx
rename to packages/icons/20/gif-icon.tsx
index 5f50ef19..f5762ee0 100644
--- a/packages/icons/20/gif.tsx
+++ b/packages/icons/20/gif-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgGif = (props: SvgProps) => {
+const SvgGifIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -32,4 +32,4 @@ const SvgGif = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgGif
+export default SvgGifIcon
diff --git a/packages/icons/20/globe.tsx b/packages/icons/20/globe-icon.tsx
similarity index 94%
rename from packages/icons/20/globe.tsx
rename to packages/icons/20/globe-icon.tsx
index dda4e896..046f4f2f 100644
--- a/packages/icons/20/globe.tsx
+++ b/packages/icons/20/globe-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgGlobe = (props: SvgProps) => {
+const SvgGlobeIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgGlobe = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgGlobe
+export default SvgGlobeIcon
diff --git a/packages/icons/20/hashtag-1.tsx b/packages/icons/20/hashtag-1-icon.tsx
similarity index 89%
rename from packages/icons/20/hashtag-1.tsx
rename to packages/icons/20/hashtag-1-icon.tsx
index 99117973..dc4260a1 100644
--- a/packages/icons/20/hashtag-1.tsx
+++ b/packages/icons/20/hashtag-1-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgHashtag1 = (props: SvgProps) => {
+const SvgHashtag1Icon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgHashtag1 = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgHashtag1
+export default SvgHashtag1Icon
diff --git a/packages/icons/20/hashtag.tsx b/packages/icons/20/hashtag-icon.tsx
similarity index 91%
rename from packages/icons/20/hashtag.tsx
rename to packages/icons/20/hashtag-icon.tsx
index 40db6640..6e2f7eae 100644
--- a/packages/icons/20/hashtag.tsx
+++ b/packages/icons/20/hashtag-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgHashtag = (props: SvgProps) => {
+const SvgHashtagIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -32,4 +32,4 @@ const SvgHashtag = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgHashtag
+export default SvgHashtagIcon
diff --git a/packages/icons/20/heart.tsx b/packages/icons/20/heart-icon.tsx
similarity index 91%
rename from packages/icons/20/heart.tsx
rename to packages/icons/20/heart-icon.tsx
index 863ba345..f7999115 100644
--- a/packages/icons/20/heart.tsx
+++ b/packages/icons/20/heart-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgHeart = (props: SvgProps) => {
+const SvgHeartIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgHeart = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgHeart
+export default SvgHeartIcon
diff --git a/packages/icons/20/help.tsx b/packages/icons/20/help-icon.tsx
similarity index 94%
rename from packages/icons/20/help.tsx
rename to packages/icons/20/help-icon.tsx
index a112af7c..0268c176 100644
--- a/packages/icons/20/help.tsx
+++ b/packages/icons/20/help-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgHelp = (props: SvgProps) => {
+const SvgHelpIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgHelp = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgHelp
+export default SvgHelpIcon
diff --git a/packages/icons/20/hide.tsx b/packages/icons/20/hide-icon.tsx
similarity index 92%
rename from packages/icons/20/hide.tsx
rename to packages/icons/20/hide-icon.tsx
index 7c93e3eb..196dbce1 100644
--- a/packages/icons/20/hide.tsx
+++ b/packages/icons/20/hide-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgHide = (props: SvgProps) => {
+const SvgHideIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -28,4 +28,4 @@ const SvgHide = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgHide
+export default SvgHideIcon
diff --git a/packages/icons/20/history.tsx b/packages/icons/20/history-icon.tsx
similarity index 96%
rename from packages/icons/20/history.tsx
rename to packages/icons/20/history-icon.tsx
index 64bf4f26..d664a6bc 100644
--- a/packages/icons/20/history.tsx
+++ b/packages/icons/20/history-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgHistory = (props: SvgProps) => {
+const SvgHistoryIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgHistory = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgHistory
+export default SvgHistoryIcon
diff --git a/packages/icons/20/hold.tsx b/packages/icons/20/hold-icon.tsx
similarity index 88%
rename from packages/icons/20/hold.tsx
rename to packages/icons/20/hold-icon.tsx
index 1c1eaf4d..d8c48cc3 100644
--- a/packages/icons/20/hold.tsx
+++ b/packages/icons/20/hold-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgHold = (props: SvgProps) => {
+const SvgHoldIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgHold = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgHold
+export default SvgHoldIcon
diff --git a/packages/icons/20/image.tsx b/packages/icons/20/image-icon.tsx
similarity index 96%
rename from packages/icons/20/image.tsx
rename to packages/icons/20/image-icon.tsx
index 3ae5f529..dae7ba47 100644
--- a/packages/icons/20/image.tsx
+++ b/packages/icons/20/image-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgImage = (props: SvgProps) => {
+const SvgImageIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgImage = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgImage
+export default SvgImageIcon
diff --git a/packages/icons/20/inactive.tsx b/packages/icons/20/inactive-icon.tsx
similarity index 85%
rename from packages/icons/20/inactive.tsx
rename to packages/icons/20/inactive-icon.tsx
index 8a0f7d62..d11882c7 100644
--- a/packages/icons/20/inactive.tsx
+++ b/packages/icons/20/inactive-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgInactive = (props: SvgProps) => {
+const SvgInactiveIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgInactive = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgInactive
+export default SvgInactiveIcon
diff --git a/packages/icons/20/index.ts b/packages/icons/20/index.ts
index e3327f65..cce26a42 100644
--- a/packages/icons/20/index.ts
+++ b/packages/icons/20/index.ts
@@ -1,177 +1,177 @@
-export { default as AccountNumber } from './account-number'
-export { default as ActiveMember } from './active-member'
-export { default as ActivityCenter } from './activity-center'
-export { default as Add } from './add'
-export { default as AddReaction } from './add-reaction'
-export { default as AddSmall } from './add-small'
-export { default as AddToken } from './add-token'
-export { default as AddUser } from './add-user'
-export { default as Alert } from './alert'
-export { default as Alphabetically } from './alphabetically'
-export { default as Android } from './android'
-export { default as Anonymous } from './anonymous'
-export { default as ArrowDown } from './arrow-down'
-export { default as ArrowLeft } from './arrow-left'
-export { default as ArrowRight } from './arrow-right'
-export { default as ArrowUp } from './arrow-up'
-export { default as Attach } from './attach'
-export { default as Audio } from './audio'
-export { default as Automatic } from './automatic'
-export { default as Block } from './block'
-export { default as Bold } from './bold'
-export { default as Bridge } from './bridge'
-export { default as Browser } from './browser'
-export { default as Bullet } from './bullet'
-export { default as BulletList } from './bullet-list'
-export { default as Buy } from './buy'
-export { default as Camera } from './camera'
-export { default as CardView } from './card-view'
-export { default as CentreAlign } from './centre-align'
-export { default as Chatkey } from './chatkey'
-export { default as Check } from './check'
-export { default as ChevronDown } from './chevron-down'
-export { default as ChevronLeft } from './chevron-left'
-export { default as ChevronRight } from './chevron-right'
-export { default as ChevronUp } from './chevron-up'
-export { default as ChevronsLeft } from './chevrons-left'
-export { default as ChevronsRight } from './chevrons-right'
-export { default as Clear } from './clear'
-export { default as Close } from './close'
-export { default as Code } from './code'
-export { default as CodeBlock } from './code-block'
-export { default as Collapse } from './collapse'
-export { default as ColourPick } from './colour-pick'
-export { default as Communities } from './communities'
-export { default as Connection } from './connection'
-export { default as Contact } from './contact'
-export { default as ContactBook } from './contact-book'
-export { default as Copy } from './copy'
-export { default as Correct } from './correct'
-export { default as Crown } from './crown'
-export { default as Customize } from './customize'
-export { default as Dark } from './dark'
-export { default as DataUsage } from './data-usage'
-export { default as Delete } from './delete'
-export { default as Desktop } from './desktop'
-export { default as Download } from './download'
-export { default as Dropdown } from './dropdown'
-export { default as Duration } from './duration'
-export { default as Edit } from './edit'
-export { default as Email } from './email'
-export { default as Expand } from './expand'
-export { default as External } from './external'
-export { default as FaceId } from './face-id'
-export { default as Favourite } from './favourite'
-export { default as File } from './file'
-export { default as Flag } from './flag'
-export { default as Flash } from './flash'
-export { default as FlashOff } from './flash-off'
-export { default as FlashlightOff } from './flashlight-off'
-export { default as FlashlightOn } from './flashlight-on'
-export { default as Flip } from './flip'
-export { default as Folder } from './folder'
-export { default as Format } from './format'
-export { default as Forward } from './forward'
-export { default as Friend } from './friend'
-export { default as Gas } from './gas'
-export { default as Gif } from './gif'
-export { default as Globe } from './globe'
-export { default as Hashtag } from './hashtag'
-export { default as Hashtag1 } from './hashtag-1'
-export { default as Heart } from './heart'
-export { default as Help } from './help'
-export { default as Hide } from './hide'
-export { default as History } from './history'
-export { default as Hold } from './hold'
-export { default as Image } from './image'
-export { default as Inactive } from './inactive'
-export { default as Info } from './info'
-export { default as InfoBadge } from './info-badge'
-export { default as Italic } from './italic'
-export { default as Justify } from './justify'
-export { default as Key } from './key'
-export { default as Keyboard } from './keyboard'
-export { default as Keycard } from './keycard'
-export { default as KeycardLogo } from './keycard-logo'
-export { default as Laptop } from './laptop'
-export { default as LeftAlign } from './left-align'
-export { default as Light } from './light'
-export { default as Link } from './link'
-export { default as ListView } from './list-view'
-export { default as Loading } from './loading'
-export { default as Locked } from './locked'
-export { default as LogOut } from './log-out'
-export { default as Members } from './members'
-export { default as Mention } from './mention'
-export { default as Menu } from './menu'
-export { default as Messages } from './messages'
-export { default as Mobile } from './mobile'
-export { default as MultiProfile } from './multi-profile'
-export { default as Muted } from './muted'
-export { default as MutualContact } from './mutual-contact'
-export { default as NewMessage } from './new-message'
-export { default as Nft } from './nft'
-export { default as Node } from './node'
-export { default as Notification } from './notification'
-export { default as Notifications } from './notifications'
-export { default as NumberedList } from './numbered-list'
-export { default as Online } from './online'
-export { default as OnlineLeft } from './online-left'
-export { default as Options } from './options'
-export { default as Password } from './password'
-export { default as Pause } from './pause'
-export { default as Pending } from './pending'
-export { default as PendingUser } from './pending-user'
-export { default as Pin } from './pin'
-export { default as Pin1 } from './pin-1'
-export { default as Placeholder } from './placeholder'
-export { default as Play } from './play'
-export { default as Privacy } from './privacy'
-export { default as Profile } from './profile'
-export { default as Pullup } from './pullup'
-export { default as QrCode } from './qr-code'
-export { default as Quarter } from './quarter'
-export { default as Reaction } from './reaction'
-export { default as Receive } from './receive'
-export { default as ReceiveMessage } from './receive-message'
-export { default as Recent } from './recent'
-export { default as Refresh } from './refresh'
-export { default as RemoveUser } from './remove-user'
-export { default as Reply } from './reply'
-export { default as Reveal } from './reveal'
-export { default as Revere } from './revere'
-export { default as RightAlign } from './right-align'
-export { default as Rotate } from './rotate'
-export { default as Sad } from './sad'
-export { default as Save } from './save'
-export { default as Scan } from './scan'
-export { default as Search } from './search'
-export { default as Seed } from './seed'
-export { default as Send } from './send'
-export { default as SendMessage } from './send-message'
-export { default as Settings } from './settings'
-export { default as Share } from './share'
-export { default as Signature } from './signature'
-export { default as Sort } from './sort'
-export { default as Speed } from './speed'
-export { default as Status } from './status'
-export { default as Stickers } from './stickers'
-export { default as Stop } from './stop'
-export { default as Strikethrough } from './strikethrough'
-export { default as Subscript } from './subscript'
-export { default as Superscript } from './superscript'
-export { default as Swap } from './swap'
-export { default as Syncing } from './syncing'
-export { default as Toggle } from './toggle'
-export { default as Token } from './token'
-export { default as Unblock } from './unblock'
-export { default as Underline } from './underline'
-export { default as Unlocked } from './unlocked'
-export { default as Unread } from './unread'
-export { default as Untrustworthy } from './untrustworthy'
-export { default as UpToDate } from './up-to-date'
-export { default as Verified } from './verified'
-export { default as Video } from './video'
-export { default as Wallet } from './wallet'
-export { default as Warning } from './warning'
-export { default as World } from './world'
+export { default as AccountNumberIcon } from './account-number-icon'
+export { default as ActiveMemberIcon } from './active-member-icon'
+export { default as ActivityCenterIcon } from './activity-center-icon'
+export { default as AddIcon } from './add-icon'
+export { default as AddReactionIcon } from './add-reaction-icon'
+export { default as AddSmallIcon } from './add-small-icon'
+export { default as AddTokenIcon } from './add-token-icon'
+export { default as AddUserIcon } from './add-user-icon'
+export { default as AlertIcon } from './alert-icon'
+export { default as AlphabeticallyIcon } from './alphabetically-icon'
+export { default as AndroidIcon } from './android-icon'
+export { default as AnonymousIcon } from './anonymous-icon'
+export { default as ArrowDownIcon } from './arrow-down-icon'
+export { default as ArrowLeftIcon } from './arrow-left-icon'
+export { default as ArrowRightIcon } from './arrow-right-icon'
+export { default as ArrowUpIcon } from './arrow-up-icon'
+export { default as AttachIcon } from './attach-icon'
+export { default as AudioIcon } from './audio-icon'
+export { default as AutomaticIcon } from './automatic-icon'
+export { default as BlockIcon } from './block-icon'
+export { default as BoldIcon } from './bold-icon'
+export { default as BridgeIcon } from './bridge-icon'
+export { default as BrowserIcon } from './browser-icon'
+export { default as BulletIcon } from './bullet-icon'
+export { default as BulletListIcon } from './bullet-list-icon'
+export { default as BuyIcon } from './buy-icon'
+export { default as CameraIcon } from './camera-icon'
+export { default as CardViewIcon } from './card-view-icon'
+export { default as CentreAlignIcon } from './centre-align-icon'
+export { default as ChatkeyIcon } from './chatkey-icon'
+export { default as CheckIcon } from './check-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 ChevronUpIcon } from './chevron-up-icon'
+export { default as ChevronsLeftIcon } from './chevrons-left-icon'
+export { default as ChevronsRightIcon } from './chevrons-right-icon'
+export { default as ClearIcon } from './clear-icon'
+export { default as CloseIcon } from './close-icon'
+export { default as CodeBlockIcon } from './code-block-icon'
+export { default as CodeIcon } from './code-icon'
+export { default as CollapseIcon } from './collapse-icon'
+export { default as ColourPickIcon } from './colour-pick-icon'
+export { default as CommunitiesIcon } from './communities-icon'
+export { default as ConnectionIcon } from './connection-icon'
+export { default as ContactBookIcon } from './contact-book-icon'
+export { default as ContactIcon } from './contact-icon'
+export { default as CopyIcon } from './copy-icon'
+export { default as CorrectIcon } from './correct-icon'
+export { default as CrownIcon } from './crown-icon'
+export { default as CustomizeIcon } from './customize-icon'
+export { default as DarkIcon } from './dark-icon'
+export { default as DataUsageIcon } from './data-usage-icon'
+export { default as DeleteIcon } from './delete-icon'
+export { default as DesktopIcon } from './desktop-icon'
+export { default as DownloadIcon } from './download-icon'
+export { default as DropdownIcon } from './dropdown-icon'
+export { default as DurationIcon } from './duration-icon'
+export { default as EditIcon } from './edit-icon'
+export { default as EmailIcon } from './email-icon'
+export { default as ExpandIcon } from './expand-icon'
+export { default as ExternalIcon } from './external-icon'
+export { default as FaceIdIcon } from './face-id-icon'
+export { default as FavouriteIcon } from './favourite-icon'
+export { default as FileIcon } from './file-icon'
+export { default as FlagIcon } from './flag-icon'
+export { default as FlashIcon } from './flash-icon'
+export { default as FlashOffIcon } from './flash-off-icon'
+export { default as FlashlightOffIcon } from './flashlight-off-icon'
+export { default as FlashlightOnIcon } from './flashlight-on-icon'
+export { default as FlipIcon } from './flip-icon'
+export { default as FolderIcon } from './folder-icon'
+export { default as FormatIcon } from './format-icon'
+export { default as ForwardIcon } from './forward-icon'
+export { default as FriendIcon } from './friend-icon'
+export { default as GasIcon } from './gas-icon'
+export { default as GifIcon } from './gif-icon'
+export { default as GlobeIcon } from './globe-icon'
+export { default as Hashtag1Icon } from './hashtag-1-icon'
+export { default as HashtagIcon } from './hashtag-icon'
+export { default as HeartIcon } from './heart-icon'
+export { default as HelpIcon } from './help-icon'
+export { default as HideIcon } from './hide-icon'
+export { default as HistoryIcon } from './history-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 InfoBadgeIcon } from './info-badge-icon'
+export { default as InfoIcon } from './info-icon'
+export { default as ItalicIcon } from './italic-icon'
+export { default as JustifyIcon } from './justify-icon'
+export { default as KeyIcon } from './key-icon'
+export { default as KeyboardIcon } from './keyboard-icon'
+export { default as KeycardIcon } from './keycard-icon'
+export { default as KeycardLogoIcon } from './keycard-logo-icon'
+export { default as LaptopIcon } from './laptop-icon'
+export { default as LeftAlignIcon } from './left-align-icon'
+export { default as LightIcon } from './light-icon'
+export { default as LinkIcon } from './link-icon'
+export { default as ListViewIcon } from './list-view-icon'
+export { default as LoadingIcon } from './loading-icon'
+export { default as LockedIcon } from './locked-icon'
+export { default as LogOutIcon } from './log-out-icon'
+export { default as MembersIcon } from './members-icon'
+export { default as MentionIcon } from './mention-icon'
+export { default as MenuIcon } from './menu-icon'
+export { default as MessagesIcon } from './messages-icon'
+export { default as MobileIcon } from './mobile-icon'
+export { default as MultiProfileIcon } from './multi-profile-icon'
+export { default as MutedIcon } from './muted-icon'
+export { default as MutualContactIcon } from './mutual-contact-icon'
+export { default as NewMessageIcon } from './new-message-icon'
+export { default as NftIcon } from './nft-icon'
+export { default as NodeIcon } from './node-icon'
+export { default as NotificationIcon } from './notification-icon'
+export { default as NotificationsIcon } from './notifications-icon'
+export { default as NumberedListIcon } from './numbered-list-icon'
+export { default as OnlineIcon } from './online-icon'
+export { default as OnlineLeftIcon } from './online-left-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 PendingUserIcon } from './pending-user-icon'
+export { default as Pin1Icon } from './pin-1-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 PrivacyIcon } from './privacy-icon'
+export { default as ProfileIcon } from './profile-icon'
+export { default as PullupIcon } from './pullup-icon'
+export { default as QrCodeIcon } from './qr-code-icon'
+export { default as QuarterIcon } from './quarter-icon'
+export { default as ReactionIcon } from './reaction-icon'
+export { default as ReceiveIcon } from './receive-icon'
+export { default as ReceiveMessageIcon } from './receive-message-icon'
+export { default as RecentIcon } from './recent-icon'
+export { default as RefreshIcon } from './refresh-icon'
+export { default as RemoveUserIcon } from './remove-user-icon'
+export { default as ReplyIcon } from './reply-icon'
+export { default as RevealIcon } from './reveal-icon'
+export { default as RevereIcon } from './revere-icon'
+export { default as RightAlignIcon } from './right-align-icon'
+export { default as RotateIcon } from './rotate-icon'
+export { default as SadIcon } from './sad-icon'
+export { default as SaveIcon } from './save-icon'
+export { default as ScanIcon } from './scan-icon'
+export { default as SearchIcon } from './search-icon'
+export { default as SeedIcon } from './seed-icon'
+export { default as SendIcon } from './send-icon'
+export { default as SendMessageIcon } from './send-message-icon'
+export { default as SettingsIcon } from './settings-icon'
+export { default as ShareIcon } from './share-icon'
+export { default as SignatureIcon } from './signature-icon'
+export { default as SortIcon } from './sort-icon'
+export { default as SpeedIcon } from './speed-icon'
+export { default as StatusIcon } from './status-icon'
+export { default as StickersIcon } from './stickers-icon'
+export { default as StopIcon } from './stop-icon'
+export { default as StrikethroughIcon } from './strikethrough-icon'
+export { default as SubscriptIcon } from './subscript-icon'
+export { default as SuperscriptIcon } from './superscript-icon'
+export { default as SwapIcon } from './swap-icon'
+export { default as SyncingIcon } from './syncing-icon'
+export { default as ToggleIcon } from './toggle-icon'
+export { default as TokenIcon } from './token-icon'
+export { default as UnblockIcon } from './unblock-icon'
+export { default as UnderlineIcon } from './underline-icon'
+export { default as UnlockedIcon } from './unlocked-icon'
+export { default as UnreadIcon } from './unread-icon'
+export { default as UntrustworthyIcon } from './untrustworthy-icon'
+export { default as UpToDateIcon } from './up-to-date-icon'
+export { default as VerifiedIcon } from './verified-icon'
+export { default as VideoIcon } from './video-icon'
+export { default as WalletIcon } from './wallet-icon'
+export { default as WarningIcon } from './warning-icon'
+export { default as WorldIcon } from './world-icon'
diff --git a/packages/icons/20/info-badge.tsx b/packages/icons/20/info-badge-icon.tsx
similarity index 88%
rename from packages/icons/20/info-badge.tsx
rename to packages/icons/20/info-badge-icon.tsx
index 8ba42e55..a7ef6405 100644
--- a/packages/icons/20/info-badge.tsx
+++ b/packages/icons/20/info-badge-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgInfoBadge = (props: SvgProps) => {
+const SvgInfoBadgeIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -20,4 +20,4 @@ const SvgInfoBadge = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgInfoBadge
+export default SvgInfoBadgeIcon
diff --git a/packages/icons/20/info.tsx b/packages/icons/20/info-icon.tsx
similarity index 89%
rename from packages/icons/20/info.tsx
rename to packages/icons/20/info-icon.tsx
index 05958801..bcd2fe7b 100644
--- a/packages/icons/20/info.tsx
+++ b/packages/icons/20/info-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgInfo = (props: SvgProps) => {
+const SvgInfoIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -20,4 +20,4 @@ const SvgInfo = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgInfo
+export default SvgInfoIcon
diff --git a/packages/icons/20/italic.tsx b/packages/icons/20/italic-icon.tsx
similarity index 89%
rename from packages/icons/20/italic.tsx
rename to packages/icons/20/italic-icon.tsx
index 1a9d2d3e..f64ca531 100644
--- a/packages/icons/20/italic.tsx
+++ b/packages/icons/20/italic-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgItalic = (props: SvgProps) => {
+const SvgItalicIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgItalic = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgItalic
+export default SvgItalicIcon
diff --git a/packages/icons/20/justify.tsx b/packages/icons/20/justify-icon.tsx
similarity index 88%
rename from packages/icons/20/justify.tsx
rename to packages/icons/20/justify-icon.tsx
index 1a88a8fe..4b4525f7 100644
--- a/packages/icons/20/justify.tsx
+++ b/packages/icons/20/justify-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgJustify = (props: SvgProps) => {
+const SvgJustifyIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -24,4 +24,4 @@ const SvgJustify = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgJustify
+export default SvgJustifyIcon
diff --git a/packages/icons/20/key.tsx b/packages/icons/20/key-icon.tsx
similarity index 97%
rename from packages/icons/20/key.tsx
rename to packages/icons/20/key-icon.tsx
index 6a323a16..73c777d1 100644
--- a/packages/icons/20/key.tsx
+++ b/packages/icons/20/key-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgKey = (props: SvgProps) => {
+const SvgKeyIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -28,4 +28,4 @@ const SvgKey = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgKey
+export default SvgKeyIcon
diff --git a/packages/icons/20/keyboard.tsx b/packages/icons/20/keyboard-icon.tsx
similarity index 94%
rename from packages/icons/20/keyboard.tsx
rename to packages/icons/20/keyboard-icon.tsx
index 23a98d56..d11255a2 100644
--- a/packages/icons/20/keyboard.tsx
+++ b/packages/icons/20/keyboard-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgKeyboard = (props: SvgProps) => {
+const SvgKeyboardIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -29,4 +29,4 @@ const SvgKeyboard = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgKeyboard
+export default SvgKeyboardIcon
diff --git a/packages/icons/20/keycard.tsx b/packages/icons/20/keycard-icon.tsx
similarity index 95%
rename from packages/icons/20/keycard.tsx
rename to packages/icons/20/keycard-icon.tsx
index 4e1df95f..0317ff1e 100644
--- a/packages/icons/20/keycard.tsx
+++ b/packages/icons/20/keycard-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgKeycard = (props: SvgProps) => {
+const SvgKeycardIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -24,7 +24,7 @@ const SvgKeycard = (props: SvgProps) => {
         strokeWidth={1.3}
       />
       <Mask
-        id="keycard_svg__a"
+        id="keycard-icon_svg__a"
         maskUnits="userSpaceOnUse"
         x={6.287}
         y={4.5}
@@ -48,9 +48,9 @@ const SvgKeycard = (props: SvgProps) => {
       <Path
         d="M9.055 9.913h.17v-.138l-.134-.029-.036.167Zm2.68-2.196h-.17v.003l.17-.003ZM10.02 9.9l-.039-.166-.131.031v.135h.17Zm0 2.222h-.17v.17h.17v-.17Zm.054 0v.17h.078l.051-.06-.13-.11Zm1.178-1.388v-.17h-.078l-.051.06.13.11Zm1.126 0 .128.111.245-.281h-.373v.17Zm-1.394 1.602-.128-.112-.086.1.074.108.14-.096Zm1.474 2.163v.17h.322l-.181-.266-.141.096Zm-1.045 0-.14.097.051.073h.09v-.17Zm-1.072-1.549.14-.097-.125-.18-.143.166.128.111Zm-.321.374-.129-.11-.041.047v.063h.17Zm0 1.175v.17h.17v-.17h-.17Zm-.965 0h-.17v.17h.17v-.17Zm1.795-6.783-.17-.007v.007h.17Zm-1.76 2.03a2.075 2.075 0 0 1-1.633-2.03h-.34c0 1.153.813 2.132 1.903 2.362l.07-.333Zm-1.633-2.03c0-1.134.915-2.047 2.054-2.047v-.34a2.385 2.385 0 0 0-2.394 2.387h.34ZM9.511 5.67c1.139 0 2.054.913 2.054 2.047h.34A2.385 2.385 0 0 0 9.51 5.33v.34Zm2.054 2.05c.02.97-.667 1.8-1.584 2.015l.078.331c1.065-.25 1.87-1.214 1.846-2.353l-.34.007ZM9.85 9.9v2.223h.34V9.901h-.34Zm.17 2.393h.054v-.34h-.054v.34Zm.183-.06 1.179-1.389-.26-.22-1.178 1.39.26.22Zm1.05-1.329h1.125v-.34h-1.126v.34Zm.996-.281-1.393 1.602.257.223 1.393-1.602-.257-.223Zm-1.405 1.81 1.474 2.163.28-.192-1.473-2.163-.281.192Zm1.614 1.897h-1.045v.34h1.045v-.34Zm-.905.073-1.072-1.549-.28.194 1.072 1.549.28-.194Zm-1.34-1.563-.322.374.258.222.321-.374-.258-.222Zm-.363.485V14.5h.34v-1.175h-.34Zm.17 1.005h-.965v.34h.965v-.34Zm-.795.17V9.913h-.34V14.5h.34Zm.286-8.289c-.846 0-1.51.692-1.51 1.506h.34c0-.63.515-1.166 1.17-1.166v-.34Zm1.51 1.512c.03-.824-.67-1.512-1.51-1.512v.34c.66 0 1.193.541 1.17 1.16l.34.012ZM9.51 9.222c.846 0 1.51-.692 1.51-1.505h-.34c0 .628-.516 1.165-1.17 1.165v.34ZM8 7.717c0 .844.695 1.505 1.51 1.505v-.34c-.632 0-1.17-.514-1.17-1.165h-.34Z"
         fill={color}
-        mask="url(#keycard_svg__a)"
+        mask="url(#keycard-icon_svg__a)"
       />
     </Svg>
   )
 }
-export default SvgKeycard
+export default SvgKeycardIcon
diff --git a/packages/icons/20/keycard-logo.tsx b/packages/icons/20/keycard-logo-icon.tsx
similarity index 91%
rename from packages/icons/20/keycard-logo.tsx
rename to packages/icons/20/keycard-logo-icon.tsx
index a85dec77..3ac4aedf 100644
--- a/packages/icons/20/keycard-logo.tsx
+++ b/packages/icons/20/keycard-logo-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgKeycardLogo = (props: SvgProps) => {
+const SvgKeycardLogoIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgKeycardLogo = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgKeycardLogo
+export default SvgKeycardLogoIcon
diff --git a/packages/icons/20/laptop.tsx b/packages/icons/20/laptop-icon.tsx
similarity index 94%
rename from packages/icons/20/laptop.tsx
rename to packages/icons/20/laptop-icon.tsx
index 7e875ed2..153a1931 100644
--- a/packages/icons/20/laptop.tsx
+++ b/packages/icons/20/laptop-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgLaptop = (props: SvgProps) => {
+const SvgLaptopIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgLaptop = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgLaptop
+export default SvgLaptopIcon
diff --git a/packages/icons/20/left-align.tsx b/packages/icons/20/left-align-icon.tsx
similarity index 87%
rename from packages/icons/20/left-align.tsx
rename to packages/icons/20/left-align-icon.tsx
index cdc1c107..f1b1dfe0 100644
--- a/packages/icons/20/left-align.tsx
+++ b/packages/icons/20/left-align-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgLeftAlign = (props: SvgProps) => {
+const SvgLeftAlignIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -24,4 +24,4 @@ const SvgLeftAlign = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgLeftAlign
+export default SvgLeftAlignIcon
diff --git a/packages/icons/20/light.tsx b/packages/icons/20/light-icon.tsx
similarity index 90%
rename from packages/icons/20/light.tsx
rename to packages/icons/20/light-icon.tsx
index 6a64c767..3251be42 100644
--- a/packages/icons/20/light.tsx
+++ b/packages/icons/20/light-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgLight = (props: SvgProps) => {
+const SvgLightIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgLight = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgLight
+export default SvgLightIcon
diff --git a/packages/icons/20/link.tsx b/packages/icons/20/link-icon.tsx
similarity index 92%
rename from packages/icons/20/link.tsx
rename to packages/icons/20/link-icon.tsx
index 85976096..5d1d2987 100644
--- a/packages/icons/20/link.tsx
+++ b/packages/icons/20/link-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgLink = (props: SvgProps) => {
+const SvgLinkIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgLink = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgLink
+export default SvgLinkIcon
diff --git a/packages/icons/20/list-view.tsx b/packages/icons/20/list-view-icon.tsx
similarity index 90%
rename from packages/icons/20/list-view.tsx
rename to packages/icons/20/list-view-icon.tsx
index 66563a08..23594c48 100644
--- a/packages/icons/20/list-view.tsx
+++ b/packages/icons/20/list-view-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgListView = (props: SvgProps) => {
+const SvgListViewIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -35,4 +35,4 @@ const SvgListView = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgListView
+export default SvgListViewIcon
diff --git a/packages/icons/20/loading.tsx b/packages/icons/20/loading-icon.tsx
similarity index 86%
rename from packages/icons/20/loading.tsx
rename to packages/icons/20/loading-icon.tsx
index 84d57974..caaaded8 100644
--- a/packages/icons/20/loading.tsx
+++ b/packages/icons/20/loading-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgLoading = (props: SvgProps) => {
+const SvgLoadingIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -20,12 +20,12 @@ const SvgLoading = (props: SvgProps) => {
       />
       <Path
         d="M10 3a7 7 0 1 1 0 14"
-        stroke="url(#loading_svg__a)"
+        stroke="url(#loading-icon_svg__a)"
         strokeWidth={1.5}
       />
       <Defs>
         <LinearGradient
-          id="loading_svg__a"
+          id="loading-icon_svg__a"
           x1={9.417}
           y1={17}
           x2={4.75}
@@ -39,4 +39,4 @@ const SvgLoading = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgLoading
+export default SvgLoadingIcon
diff --git a/packages/icons/20/locked.tsx b/packages/icons/20/locked-icon.tsx
similarity index 95%
rename from packages/icons/20/locked.tsx
rename to packages/icons/20/locked-icon.tsx
index 99db014d..c65b96f9 100644
--- a/packages/icons/20/locked.tsx
+++ b/packages/icons/20/locked-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgLocked = (props: SvgProps) => {
+const SvgLockedIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgLocked = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgLocked
+export default SvgLockedIcon
diff --git a/packages/icons/20/log-out.tsx b/packages/icons/20/log-out-icon.tsx
similarity index 92%
rename from packages/icons/20/log-out.tsx
rename to packages/icons/20/log-out-icon.tsx
index ebf81d8d..30c66ecd 100644
--- a/packages/icons/20/log-out.tsx
+++ b/packages/icons/20/log-out-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgLogOut = (props: SvgProps) => {
+const SvgLogOutIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -29,4 +29,4 @@ const SvgLogOut = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgLogOut
+export default SvgLogOutIcon
diff --git a/packages/icons/20/members.tsx b/packages/icons/20/members-icon.tsx
similarity index 93%
rename from packages/icons/20/members.tsx
rename to packages/icons/20/members-icon.tsx
index e7d24472..bf7d06ff 100644
--- a/packages/icons/20/members.tsx
+++ b/packages/icons/20/members-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgMembers = (props: SvgProps) => {
+const SvgMembersIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -29,4 +29,4 @@ const SvgMembers = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgMembers
+export default SvgMembersIcon
diff --git a/packages/icons/20/mention.tsx b/packages/icons/20/mention-icon.tsx
similarity index 91%
rename from packages/icons/20/mention.tsx
rename to packages/icons/20/mention-icon.tsx
index be11d7b3..da8f8409 100644
--- a/packages/icons/20/mention.tsx
+++ b/packages/icons/20/mention-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgMention = (props: SvgProps) => {
+const SvgMentionIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgMention = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgMention
+export default SvgMentionIcon
diff --git a/packages/icons/20/menu.tsx b/packages/icons/20/menu-icon.tsx
similarity index 89%
rename from packages/icons/20/menu.tsx
rename to packages/icons/20/menu-icon.tsx
index d1b136e3..e6404dc1 100644
--- a/packages/icons/20/menu.tsx
+++ b/packages/icons/20/menu-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgMenu = (props: SvgProps) => {
+const SvgMenuIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -24,4 +24,4 @@ const SvgMenu = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgMenu
+export default SvgMenuIcon
diff --git a/packages/icons/20/messages.tsx b/packages/icons/20/messages-icon.tsx
similarity index 90%
rename from packages/icons/20/messages.tsx
rename to packages/icons/20/messages-icon.tsx
index 9bca9636..ddeee6d0 100644
--- a/packages/icons/20/messages.tsx
+++ b/packages/icons/20/messages-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgMessages = (props: SvgProps) => {
+const SvgMessagesIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgMessages = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgMessages
+export default SvgMessagesIcon
diff --git a/packages/icons/20/mobile.tsx b/packages/icons/20/mobile-icon.tsx
similarity index 89%
rename from packages/icons/20/mobile.tsx
rename to packages/icons/20/mobile-icon.tsx
index a0e95df8..0fe4cf28 100644
--- a/packages/icons/20/mobile.tsx
+++ b/packages/icons/20/mobile-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgMobile = (props: SvgProps) => {
+const SvgMobileIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -27,4 +27,4 @@ const SvgMobile = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgMobile
+export default SvgMobileIcon
diff --git a/packages/icons/20/multi-profile.tsx b/packages/icons/20/multi-profile-icon.tsx
similarity index 96%
rename from packages/icons/20/multi-profile.tsx
rename to packages/icons/20/multi-profile-icon.tsx
index b146a7f2..624809a6 100644
--- a/packages/icons/20/multi-profile.tsx
+++ b/packages/icons/20/multi-profile-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgMultiProfile = (props: SvgProps) => {
+const SvgMultiProfileIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -35,4 +35,4 @@ const SvgMultiProfile = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgMultiProfile
+export default SvgMultiProfileIcon
diff --git a/packages/icons/20/muted.tsx b/packages/icons/20/muted-icon.tsx
similarity index 93%
rename from packages/icons/20/muted.tsx
rename to packages/icons/20/muted-icon.tsx
index 521b8490..6660aa75 100644
--- a/packages/icons/20/muted.tsx
+++ b/packages/icons/20/muted-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgMuted = (props: SvgProps) => {
+const SvgMutedIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgMuted = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgMuted
+export default SvgMutedIcon
diff --git a/packages/icons/20/mutual-contact.tsx b/packages/icons/20/mutual-contact-icon.tsx
similarity index 88%
rename from packages/icons/20/mutual-contact.tsx
rename to packages/icons/20/mutual-contact-icon.tsx
index 6d0d8cfe..999e6fb3 100644
--- a/packages/icons/20/mutual-contact.tsx
+++ b/packages/icons/20/mutual-contact-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgMutualContact = (props: SvgProps) => {
+const SvgMutualContactIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -25,4 +25,4 @@ const SvgMutualContact = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgMutualContact
+export default SvgMutualContactIcon
diff --git a/packages/icons/20/new-message.tsx b/packages/icons/20/new-message-icon.tsx
similarity index 91%
rename from packages/icons/20/new-message.tsx
rename to packages/icons/20/new-message-icon.tsx
index 6b73c696..f7162d5e 100644
--- a/packages/icons/20/new-message.tsx
+++ b/packages/icons/20/new-message-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgNewMessage = (props: SvgProps) => {
+const SvgNewMessageIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgNewMessage = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgNewMessage
+export default SvgNewMessageIcon
diff --git a/packages/icons/20/nft.tsx b/packages/icons/20/nft-icon.tsx
similarity index 95%
rename from packages/icons/20/nft.tsx
rename to packages/icons/20/nft-icon.tsx
index 2cf359a6..abce588b 100644
--- a/packages/icons/20/nft.tsx
+++ b/packages/icons/20/nft-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgNft = (props: SvgProps) => {
+const SvgNftIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -36,4 +36,4 @@ const SvgNft = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgNft
+export default SvgNftIcon
diff --git a/packages/icons/20/node.tsx b/packages/icons/20/node-icon.tsx
similarity index 94%
rename from packages/icons/20/node.tsx
rename to packages/icons/20/node-icon.tsx
index cffb1d24..565fdd38 100644
--- a/packages/icons/20/node.tsx
+++ b/packages/icons/20/node-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgNode = (props: SvgProps) => {
+const SvgNodeIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgNode = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgNode
+export default SvgNodeIcon
diff --git a/packages/icons/20/notification.tsx b/packages/icons/20/notification-icon.tsx
similarity index 84%
rename from packages/icons/20/notification.tsx
rename to packages/icons/20/notification-icon.tsx
index 0065a47f..90703e20 100644
--- a/packages/icons/20/notification.tsx
+++ b/packages/icons/20/notification-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgNotification = (props: SvgProps) => {
+const SvgNotificationIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgNotification = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgNotification
+export default SvgNotificationIcon
diff --git a/packages/icons/20/notifications.tsx b/packages/icons/20/notifications-icon.tsx
similarity index 94%
rename from packages/icons/20/notifications.tsx
rename to packages/icons/20/notifications-icon.tsx
index e02cf763..af68bf1d 100644
--- a/packages/icons/20/notifications.tsx
+++ b/packages/icons/20/notifications-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgNotifications = (props: SvgProps) => {
+const SvgNotificationsIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgNotifications = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgNotifications
+export default SvgNotificationsIcon
diff --git a/packages/icons/20/numbered-list.tsx b/packages/icons/20/numbered-list-icon.tsx
similarity index 97%
rename from packages/icons/20/numbered-list.tsx
rename to packages/icons/20/numbered-list-icon.tsx
index 383df0a2..a5220c7c 100644
--- a/packages/icons/20/numbered-list.tsx
+++ b/packages/icons/20/numbered-list-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgNumberedList = (props: SvgProps) => {
+const SvgNumberedListIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -37,4 +37,4 @@ const SvgNumberedList = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgNumberedList
+export default SvgNumberedListIcon
diff --git a/packages/icons/20/online.tsx b/packages/icons/20/online-icon.tsx
similarity index 86%
rename from packages/icons/20/online.tsx
rename to packages/icons/20/online-icon.tsx
index ad24ae8a..679f006d 100644
--- a/packages/icons/20/online.tsx
+++ b/packages/icons/20/online-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgOnline = (props: SvgProps) => {
+const SvgOnlineIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgOnline = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgOnline
+export default SvgOnlineIcon
diff --git a/packages/icons/20/online-left.tsx b/packages/icons/20/online-left-icon.tsx
similarity index 84%
rename from packages/icons/20/online-left.tsx
rename to packages/icons/20/online-left-icon.tsx
index cd3a8683..2ade6eda 100644
--- a/packages/icons/20/online-left.tsx
+++ b/packages/icons/20/online-left-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgOnlineLeft = (props: SvgProps) => {
+const SvgOnlineLeftIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgOnlineLeft = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgOnlineLeft
+export default SvgOnlineLeftIcon
diff --git a/packages/icons/20/options.tsx b/packages/icons/20/options-icon.tsx
similarity index 88%
rename from packages/icons/20/options.tsx
rename to packages/icons/20/options-icon.tsx
index 0403eeb6..80718f6e 100644
--- a/packages/icons/20/options.tsx
+++ b/packages/icons/20/options-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgOptions = (props: SvgProps) => {
+const SvgOptionsIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -20,4 +20,4 @@ const SvgOptions = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgOptions
+export default SvgOptionsIcon
diff --git a/packages/icons/20/password.tsx b/packages/icons/20/password-icon.tsx
similarity index 91%
rename from packages/icons/20/password.tsx
rename to packages/icons/20/password-icon.tsx
index 13b5145f..17174b1e 100644
--- a/packages/icons/20/password.tsx
+++ b/packages/icons/20/password-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPassword = (props: SvgProps) => {
+const SvgPasswordIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -32,4 +32,4 @@ const SvgPassword = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPassword
+export default SvgPasswordIcon
diff --git a/packages/icons/20/pause.tsx b/packages/icons/20/pause-icon.tsx
similarity index 88%
rename from packages/icons/20/pause.tsx
rename to packages/icons/20/pause-icon.tsx
index 09a9618e..be9d6190 100644
--- a/packages/icons/20/pause.tsx
+++ b/packages/icons/20/pause-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPause = (props: SvgProps) => {
+const SvgPauseIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgPause = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPause
+export default SvgPauseIcon
diff --git a/packages/icons/20/pending.tsx b/packages/icons/20/pending-icon.tsx
similarity index 87%
rename from packages/icons/20/pending.tsx
rename to packages/icons/20/pending-icon.tsx
index b046e759..5dd6cdf2 100644
--- a/packages/icons/20/pending.tsx
+++ b/packages/icons/20/pending-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPending = (props: SvgProps) => {
+const SvgPendingIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgPending = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPending
+export default SvgPendingIcon
diff --git a/packages/icons/20/pending-user.tsx b/packages/icons/20/pending-user-icon.tsx
similarity index 91%
rename from packages/icons/20/pending-user.tsx
rename to packages/icons/20/pending-user-icon.tsx
index a27184e9..028f5f6d 100644
--- a/packages/icons/20/pending-user.tsx
+++ b/packages/icons/20/pending-user-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPendingUser = (props: SvgProps) => {
+const SvgPendingUserIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgPendingUser = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPendingUser
+export default SvgPendingUserIcon
diff --git a/packages/icons/20/pin-1.tsx b/packages/icons/20/pin-1-icon.tsx
similarity index 90%
rename from packages/icons/20/pin-1.tsx
rename to packages/icons/20/pin-1-icon.tsx
index e3f6585e..acb4f0ca 100644
--- a/packages/icons/20/pin-1.tsx
+++ b/packages/icons/20/pin-1-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPin1 = (props: SvgProps) => {
+const SvgPin1Icon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgPin1 = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPin1
+export default SvgPin1Icon
diff --git a/packages/icons/20/pin.tsx b/packages/icons/20/pin-icon.tsx
similarity index 92%
rename from packages/icons/20/pin.tsx
rename to packages/icons/20/pin-icon.tsx
index 30b6fc40..fd22723d 100644
--- a/packages/icons/20/pin.tsx
+++ b/packages/icons/20/pin-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPin = (props: SvgProps) => {
+const SvgPinIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgPin = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPin
+export default SvgPinIcon
diff --git a/packages/icons/20/placeholder.tsx b/packages/icons/20/placeholder-icon.tsx
similarity index 91%
rename from packages/icons/20/placeholder.tsx
rename to packages/icons/20/placeholder-icon.tsx
index 6e64b3fb..e4896fd0 100644
--- a/packages/icons/20/placeholder.tsx
+++ b/packages/icons/20/placeholder-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPlaceholder = (props: SvgProps) => {
+const SvgPlaceholderIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgPlaceholder = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPlaceholder
+export default SvgPlaceholderIcon
diff --git a/packages/icons/20/play.tsx b/packages/icons/20/play-icon.tsx
similarity index 91%
rename from packages/icons/20/play.tsx
rename to packages/icons/20/play-icon.tsx
index fc9caf07..f7b4c073 100644
--- a/packages/icons/20/play.tsx
+++ b/packages/icons/20/play-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPlay = (props: SvgProps) => {
+const SvgPlayIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -21,4 +21,4 @@ const SvgPlay = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPlay
+export default SvgPlayIcon
diff --git a/packages/icons/20/privacy.tsx b/packages/icons/20/privacy-icon.tsx
similarity index 93%
rename from packages/icons/20/privacy.tsx
rename to packages/icons/20/privacy-icon.tsx
index ad2d86cd..65e44bfe 100644
--- a/packages/icons/20/privacy.tsx
+++ b/packages/icons/20/privacy-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPrivacy = (props: SvgProps) => {
+const SvgPrivacyIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgPrivacy = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPrivacy
+export default SvgPrivacyIcon
diff --git a/packages/icons/20/profile.tsx b/packages/icons/20/profile-icon.tsx
similarity index 91%
rename from packages/icons/20/profile.tsx
rename to packages/icons/20/profile-icon.tsx
index 0eb79756..0165c8a3 100644
--- a/packages/icons/20/profile.tsx
+++ b/packages/icons/20/profile-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgProfile = (props: SvgProps) => {
+const SvgProfileIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -32,4 +32,4 @@ const SvgProfile = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgProfile
+export default SvgProfileIcon
diff --git a/packages/icons/20/pullup.tsx b/packages/icons/20/pullup-icon.tsx
similarity index 89%
rename from packages/icons/20/pullup.tsx
rename to packages/icons/20/pullup-icon.tsx
index b1eba5f0..343e9846 100644
--- a/packages/icons/20/pullup.tsx
+++ b/packages/icons/20/pullup-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgPullup = (props: SvgProps) => {
+const SvgPullupIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -25,4 +25,4 @@ const SvgPullup = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgPullup
+export default SvgPullupIcon
diff --git a/packages/icons/20/qr-code.tsx b/packages/icons/20/qr-code-icon.tsx
similarity index 95%
rename from packages/icons/20/qr-code.tsx
rename to packages/icons/20/qr-code-icon.tsx
index 70a1d58b..61b0b9cf 100644
--- a/packages/icons/20/qr-code.tsx
+++ b/packages/icons/20/qr-code-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgQrCode = (props: SvgProps) => {
+const SvgQrCodeIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -51,4 +51,4 @@ const SvgQrCode = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgQrCode
+export default SvgQrCodeIcon
diff --git a/packages/icons/20/quarter.tsx b/packages/icons/20/quarter-icon.tsx
similarity index 91%
rename from packages/icons/20/quarter.tsx
rename to packages/icons/20/quarter-icon.tsx
index 440388fd..f725b27d 100644
--- a/packages/icons/20/quarter.tsx
+++ b/packages/icons/20/quarter-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgQuarter = (props: SvgProps) => {
+const SvgQuarterIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -21,4 +21,4 @@ const SvgQuarter = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgQuarter
+export default SvgQuarterIcon
diff --git a/packages/icons/20/reaction.tsx b/packages/icons/20/reaction-icon.tsx
similarity index 89%
rename from packages/icons/20/reaction.tsx
rename to packages/icons/20/reaction-icon.tsx
index 77508916..ad7d0e85 100644
--- a/packages/icons/20/reaction.tsx
+++ b/packages/icons/20/reaction-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgReaction = (props: SvgProps) => {
+const SvgReactionIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -25,4 +25,4 @@ const SvgReaction = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgReaction
+export default SvgReactionIcon
diff --git a/packages/icons/20/receive.tsx b/packages/icons/20/receive-icon.tsx
similarity index 90%
rename from packages/icons/20/receive.tsx
rename to packages/icons/20/receive-icon.tsx
index d037391e..eaeca04a 100644
--- a/packages/icons/20/receive.tsx
+++ b/packages/icons/20/receive-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgReceive = (props: SvgProps) => {
+const SvgReceiveIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -29,4 +29,4 @@ const SvgReceive = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgReceive
+export default SvgReceiveIcon
diff --git a/packages/icons/20/receive-message.tsx b/packages/icons/20/receive-message-icon.tsx
similarity index 94%
rename from packages/icons/20/receive-message.tsx
rename to packages/icons/20/receive-message-icon.tsx
index 7fb2af10..e14c1386 100644
--- a/packages/icons/20/receive-message.tsx
+++ b/packages/icons/20/receive-message-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgReceiveMessage = (props: SvgProps) => {
+const SvgReceiveMessageIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgReceiveMessage = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgReceiveMessage
+export default SvgReceiveMessageIcon
diff --git a/packages/icons/20/recent.tsx b/packages/icons/20/recent-icon.tsx
similarity index 88%
rename from packages/icons/20/recent.tsx
rename to packages/icons/20/recent-icon.tsx
index e8a7ee25..bf5888fa 100644
--- a/packages/icons/20/recent.tsx
+++ b/packages/icons/20/recent-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgRecent = (props: SvgProps) => {
+const SvgRecentIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgRecent = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgRecent
+export default SvgRecentIcon
diff --git a/packages/icons/20/refresh.tsx b/packages/icons/20/refresh-icon.tsx
similarity index 89%
rename from packages/icons/20/refresh.tsx
rename to packages/icons/20/refresh-icon.tsx
index bd8ddeeb..3bfa21a4 100644
--- a/packages/icons/20/refresh.tsx
+++ b/packages/icons/20/refresh-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgRefresh = (props: SvgProps) => {
+const SvgRefreshIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgRefresh = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgRefresh
+export default SvgRefreshIcon
diff --git a/packages/icons/20/remove-user.tsx b/packages/icons/20/remove-user-icon.tsx
similarity index 90%
rename from packages/icons/20/remove-user.tsx
rename to packages/icons/20/remove-user-icon.tsx
index e5a9353e..62215457 100644
--- a/packages/icons/20/remove-user.tsx
+++ b/packages/icons/20/remove-user-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgRemoveUser = (props: SvgProps) => {
+const SvgRemoveUserIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgRemoveUser = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgRemoveUser
+export default SvgRemoveUserIcon
diff --git a/packages/icons/20/reply.tsx b/packages/icons/20/reply-icon.tsx
similarity index 92%
rename from packages/icons/20/reply.tsx
rename to packages/icons/20/reply-icon.tsx
index ea2f5285..55974b4e 100644
--- a/packages/icons/20/reply.tsx
+++ b/packages/icons/20/reply-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgReply = (props: SvgProps) => {
+const SvgReplyIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgReply = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgReply
+export default SvgReplyIcon
diff --git a/packages/icons/20/reveal.tsx b/packages/icons/20/reveal-icon.tsx
similarity index 89%
rename from packages/icons/20/reveal.tsx
rename to packages/icons/20/reveal-icon.tsx
index 86e8c931..cebec71e 100644
--- a/packages/icons/20/reveal.tsx
+++ b/packages/icons/20/reveal-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgReveal = (props: SvgProps) => {
+const SvgRevealIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgReveal = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgReveal
+export default SvgRevealIcon
diff --git a/packages/icons/20/revere.tsx b/packages/icons/20/revere-icon.tsx
similarity index 89%
rename from packages/icons/20/revere.tsx
rename to packages/icons/20/revere-icon.tsx
index c7df716f..f6513a40 100644
--- a/packages/icons/20/revere.tsx
+++ b/packages/icons/20/revere-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgRevere = (props: SvgProps) => {
+const SvgRevereIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgRevere = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgRevere
+export default SvgRevereIcon
diff --git a/packages/icons/20/right-align.tsx b/packages/icons/20/right-align-icon.tsx
similarity index 87%
rename from packages/icons/20/right-align.tsx
rename to packages/icons/20/right-align-icon.tsx
index 70e4c47b..c5e5b186 100644
--- a/packages/icons/20/right-align.tsx
+++ b/packages/icons/20/right-align-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgRightAlign = (props: SvgProps) => {
+const SvgRightAlignIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -24,4 +24,4 @@ const SvgRightAlign = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgRightAlign
+export default SvgRightAlignIcon
diff --git a/packages/icons/20/rotate.tsx b/packages/icons/20/rotate-icon.tsx
similarity index 92%
rename from packages/icons/20/rotate.tsx
rename to packages/icons/20/rotate-icon.tsx
index 9be38b7f..2ef52333 100644
--- a/packages/icons/20/rotate.tsx
+++ b/packages/icons/20/rotate-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgRotate = (props: SvgProps) => {
+const SvgRotateIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgRotate = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgRotate
+export default SvgRotateIcon
diff --git a/packages/icons/20/sad.tsx b/packages/icons/20/sad-icon.tsx
similarity index 91%
rename from packages/icons/20/sad.tsx
rename to packages/icons/20/sad-icon.tsx
index 0215c042..ce26ba04 100644
--- a/packages/icons/20/sad.tsx
+++ b/packages/icons/20/sad-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSad = (props: SvgProps) => {
+const SvgSadIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -25,4 +25,4 @@ const SvgSad = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSad
+export default SvgSadIcon
diff --git a/packages/icons/20/download.tsx b/packages/icons/20/save-icon.tsx
similarity index 91%
rename from packages/icons/20/download.tsx
rename to packages/icons/20/save-icon.tsx
index b922b1af..3f5fcc72 100644
--- a/packages/icons/20/download.tsx
+++ b/packages/icons/20/save-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgDownload = (props: SvgProps) => {
+const SvgSaveIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -29,4 +29,4 @@ const SvgDownload = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgDownload
+export default SvgSaveIcon
diff --git a/packages/icons/20/scan.tsx b/packages/icons/20/scan-icon.tsx
similarity index 92%
rename from packages/icons/20/scan.tsx
rename to packages/icons/20/scan-icon.tsx
index fdd231c0..d335e450 100644
--- a/packages/icons/20/scan.tsx
+++ b/packages/icons/20/scan-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgScan = (props: SvgProps) => {
+const SvgScanIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -22,4 +22,4 @@ const SvgScan = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgScan
+export default SvgScanIcon
diff --git a/packages/icons/20/search.tsx b/packages/icons/20/search-icon.tsx
similarity index 89%
rename from packages/icons/20/search.tsx
rename to packages/icons/20/search-icon.tsx
index 7d7695c1..51f5e191 100644
--- a/packages/icons/20/search.tsx
+++ b/packages/icons/20/search-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSearch = (props: SvgProps) => {
+const SvgSearchIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgSearch = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSearch
+export default SvgSearchIcon
diff --git a/packages/icons/20/seed.tsx b/packages/icons/20/seed-icon.tsx
similarity index 95%
rename from packages/icons/20/seed.tsx
rename to packages/icons/20/seed-icon.tsx
index 8df3a04a..781f08f2 100644
--- a/packages/icons/20/seed.tsx
+++ b/packages/icons/20/seed-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSeed = (props: SvgProps) => {
+const SvgSeedIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -21,4 +21,4 @@ const SvgSeed = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSeed
+export default SvgSeedIcon
diff --git a/packages/icons/20/send.tsx b/packages/icons/20/send-icon.tsx
similarity index 91%
rename from packages/icons/20/send.tsx
rename to packages/icons/20/send-icon.tsx
index 4a44ccb7..5f44840a 100644
--- a/packages/icons/20/send.tsx
+++ b/packages/icons/20/send-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSend = (props: SvgProps) => {
+const SvgSendIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -29,4 +29,4 @@ const SvgSend = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSend
+export default SvgSendIcon
diff --git a/packages/icons/20/send-message.tsx b/packages/icons/20/send-message-icon.tsx
similarity index 94%
rename from packages/icons/20/send-message.tsx
rename to packages/icons/20/send-message-icon.tsx
index d14bf632..b667fc78 100644
--- a/packages/icons/20/send-message.tsx
+++ b/packages/icons/20/send-message-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSendMessage = (props: SvgProps) => {
+const SvgSendMessageIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgSendMessage = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSendMessage
+export default SvgSendMessageIcon
diff --git a/packages/icons/20/settings.tsx b/packages/icons/20/settings-icon.tsx
similarity index 99%
rename from packages/icons/20/settings.tsx
rename to packages/icons/20/settings-icon.tsx
index 9f81648b..60ec78b0 100644
--- a/packages/icons/20/settings.tsx
+++ b/packages/icons/20/settings-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSettings = (props: SvgProps) => {
+const SvgSettingsIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -21,4 +21,4 @@ const SvgSettings = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSettings
+export default SvgSettingsIcon
diff --git a/packages/icons/20/share.tsx b/packages/icons/20/share-icon.tsx
similarity index 92%
rename from packages/icons/20/share.tsx
rename to packages/icons/20/share-icon.tsx
index 98fd6185..5723db44 100644
--- a/packages/icons/20/share.tsx
+++ b/packages/icons/20/share-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgShare = (props: SvgProps) => {
+const SvgShareIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -29,4 +29,4 @@ const SvgShare = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgShare
+export default SvgShareIcon
diff --git a/packages/icons/20/signature.tsx b/packages/icons/20/signature-icon.tsx
similarity index 96%
rename from packages/icons/20/signature.tsx
rename to packages/icons/20/signature-icon.tsx
index 9edb2fce..385100e6 100644
--- a/packages/icons/20/signature.tsx
+++ b/packages/icons/20/signature-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSignature = (props: SvgProps) => {
+const SvgSignatureIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -26,4 +26,4 @@ const SvgSignature = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSignature
+export default SvgSignatureIcon
diff --git a/packages/icons/20/sort.tsx b/packages/icons/20/sort-icon.tsx
similarity index 90%
rename from packages/icons/20/sort.tsx
rename to packages/icons/20/sort-icon.tsx
index 1b7ea324..b974e1d2 100644
--- a/packages/icons/20/sort.tsx
+++ b/packages/icons/20/sort-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSort = (props: SvgProps) => {
+const SvgSortIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgSort = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSort
+export default SvgSortIcon
diff --git a/packages/icons/20/speed.tsx b/packages/icons/20/speed-icon.tsx
similarity index 91%
rename from packages/icons/20/speed.tsx
rename to packages/icons/20/speed-icon.tsx
index 44891bff..6bb6a3f8 100644
--- a/packages/icons/20/speed.tsx
+++ b/packages/icons/20/speed-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSpeed = (props: SvgProps) => {
+const SvgSpeedIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -27,4 +27,4 @@ const SvgSpeed = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSpeed
+export default SvgSpeedIcon
diff --git a/packages/icons/20/status.tsx b/packages/icons/20/status-icon.tsx
similarity index 91%
rename from packages/icons/20/status.tsx
rename to packages/icons/20/status-icon.tsx
index ecfa5f5d..a09cd869 100644
--- a/packages/icons/20/status.tsx
+++ b/packages/icons/20/status-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgStatus = (props: SvgProps) => {
+const SvgStatusIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -21,4 +21,4 @@ const SvgStatus = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgStatus
+export default SvgStatusIcon
diff --git a/packages/icons/20/stickers.tsx b/packages/icons/20/stickers-icon.tsx
similarity index 95%
rename from packages/icons/20/stickers.tsx
rename to packages/icons/20/stickers-icon.tsx
index a03cdd72..cafc6d1e 100644
--- a/packages/icons/20/stickers.tsx
+++ b/packages/icons/20/stickers-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgStickers = (props: SvgProps) => {
+const SvgStickersIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgStickers = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgStickers
+export default SvgStickersIcon
diff --git a/packages/icons/20/stop.tsx b/packages/icons/20/stop-icon.tsx
similarity index 87%
rename from packages/icons/20/stop.tsx
rename to packages/icons/20/stop-icon.tsx
index 6e0574ce..ffae40e6 100644
--- a/packages/icons/20/stop.tsx
+++ b/packages/icons/20/stop-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgStop = (props: SvgProps) => {
+const SvgStopIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -18,4 +18,4 @@ const SvgStop = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgStop
+export default SvgStopIcon
diff --git a/packages/icons/20/strikethrough.tsx b/packages/icons/20/strikethrough-icon.tsx
similarity index 90%
rename from packages/icons/20/strikethrough.tsx
rename to packages/icons/20/strikethrough-icon.tsx
index 62397573..1fa6c4c8 100644
--- a/packages/icons/20/strikethrough.tsx
+++ b/packages/icons/20/strikethrough-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgStrikethrough = (props: SvgProps) => {
+const SvgStrikethroughIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgStrikethrough = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgStrikethrough
+export default SvgStrikethroughIcon
diff --git a/packages/icons/20/subscript.tsx b/packages/icons/20/subscript-icon.tsx
similarity index 98%
rename from packages/icons/20/subscript.tsx
rename to packages/icons/20/subscript-icon.tsx
index c495c860..dab7e1b4 100644
--- a/packages/icons/20/subscript.tsx
+++ b/packages/icons/20/subscript-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSubscript = (props: SvgProps) => {
+const SvgSubscriptIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -32,4 +32,4 @@ const SvgSubscript = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSubscript
+export default SvgSubscriptIcon
diff --git a/packages/icons/20/superscript.tsx b/packages/icons/20/superscript-icon.tsx
similarity index 96%
rename from packages/icons/20/superscript.tsx
rename to packages/icons/20/superscript-icon.tsx
index 574aa3f2..0b3fa9ef 100644
--- a/packages/icons/20/superscript.tsx
+++ b/packages/icons/20/superscript-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSuperscript = (props: SvgProps) => {
+const SvgSuperscriptIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -30,4 +30,4 @@ const SvgSuperscript = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSuperscript
+export default SvgSuperscriptIcon
diff --git a/packages/icons/20/swap.tsx b/packages/icons/20/swap-icon.tsx
similarity index 92%
rename from packages/icons/20/swap.tsx
rename to packages/icons/20/swap-icon.tsx
index 0a65e438..a06056a1 100644
--- a/packages/icons/20/swap.tsx
+++ b/packages/icons/20/swap-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSwap = (props: SvgProps) => {
+const SvgSwapIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -30,4 +30,4 @@ const SvgSwap = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSwap
+export default SvgSwapIcon
diff --git a/packages/icons/20/syncing.tsx b/packages/icons/20/syncing-icon.tsx
similarity index 94%
rename from packages/icons/20/syncing.tsx
rename to packages/icons/20/syncing-icon.tsx
index 0c79735a..8abb0b26 100644
--- a/packages/icons/20/syncing.tsx
+++ b/packages/icons/20/syncing-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSyncing = (props: SvgProps) => {
+const SvgSyncingIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgSyncing = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSyncing
+export default SvgSyncingIcon
diff --git a/packages/icons/20/toggle.tsx b/packages/icons/20/toggle-icon.tsx
similarity index 90%
rename from packages/icons/20/toggle.tsx
rename to packages/icons/20/toggle-icon.tsx
index 93da6f74..7705f340 100644
--- a/packages/icons/20/toggle.tsx
+++ b/packages/icons/20/toggle-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgToggle = (props: SvgProps) => {
+const SvgToggleIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -31,4 +31,4 @@ const SvgToggle = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgToggle
+export default SvgToggleIcon
diff --git a/packages/icons/20/token.tsx b/packages/icons/20/token-icon.tsx
similarity index 92%
rename from packages/icons/20/token.tsx
rename to packages/icons/20/token-icon.tsx
index f6e14a5d..8d71e231 100644
--- a/packages/icons/20/token.tsx
+++ b/packages/icons/20/token-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgToken = (props: SvgProps) => {
+const SvgTokenIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgToken = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgToken
+export default SvgTokenIcon
diff --git a/packages/icons/20/unblock.tsx b/packages/icons/20/unblock-icon.tsx
similarity index 87%
rename from packages/icons/20/unblock.tsx
rename to packages/icons/20/unblock-icon.tsx
index a31fb043..05cf2ea9 100644
--- a/packages/icons/20/unblock.tsx
+++ b/packages/icons/20/unblock-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgUnblock = (props: SvgProps) => {
+const SvgUnblockIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgUnblock = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgUnblock
+export default SvgUnblockIcon
diff --git a/packages/icons/20/underline.tsx b/packages/icons/20/underline-icon.tsx
similarity index 90%
rename from packages/icons/20/underline.tsx
rename to packages/icons/20/underline-icon.tsx
index a3f364ce..8ee17c48 100644
--- a/packages/icons/20/underline.tsx
+++ b/packages/icons/20/underline-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgUnderline = (props: SvgProps) => {
+const SvgUnderlineIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -31,4 +31,4 @@ const SvgUnderline = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgUnderline
+export default SvgUnderlineIcon
diff --git a/packages/icons/20/unlocked.tsx b/packages/icons/20/unlocked-icon.tsx
similarity index 95%
rename from packages/icons/20/unlocked.tsx
rename to packages/icons/20/unlocked-icon.tsx
index 71b32424..6c77ce8b 100644
--- a/packages/icons/20/unlocked.tsx
+++ b/packages/icons/20/unlocked-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgUnlocked = (props: SvgProps) => {
+const SvgUnlockedIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgUnlocked = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgUnlocked
+export default SvgUnlockedIcon
diff --git a/packages/icons/20/unread.tsx b/packages/icons/20/unread-icon.tsx
similarity index 88%
rename from packages/icons/20/unread.tsx
rename to packages/icons/20/unread-icon.tsx
index ab8d8d0a..69e91bd4 100644
--- a/packages/icons/20/unread.tsx
+++ b/packages/icons/20/unread-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgUnread = (props: SvgProps) => {
+const SvgUnreadIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -24,4 +24,4 @@ const SvgUnread = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgUnread
+export default SvgUnreadIcon
diff --git a/packages/icons/20/untrustworthy.tsx b/packages/icons/20/untrustworthy-icon.tsx
similarity index 87%
rename from packages/icons/20/untrustworthy.tsx
rename to packages/icons/20/untrustworthy-icon.tsx
index 6c17a5a1..7bbe76d9 100644
--- a/packages/icons/20/untrustworthy.tsx
+++ b/packages/icons/20/untrustworthy-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgUntrustworthy = (props: SvgProps) => {
+const SvgUntrustworthyIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -26,4 +26,4 @@ const SvgUntrustworthy = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgUntrustworthy
+export default SvgUntrustworthyIcon
diff --git a/packages/icons/20/up-to-date.tsx b/packages/icons/20/up-to-date-icon.tsx
similarity index 87%
rename from packages/icons/20/up-to-date.tsx
rename to packages/icons/20/up-to-date-icon.tsx
index 2b2598f8..4ce81c31 100644
--- a/packages/icons/20/up-to-date.tsx
+++ b/packages/icons/20/up-to-date-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgUpToDate = (props: SvgProps) => {
+const SvgUpToDateIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -19,4 +19,4 @@ const SvgUpToDate = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgUpToDate
+export default SvgUpToDateIcon
diff --git a/packages/icons/20/verified.tsx b/packages/icons/20/verified-icon.tsx
similarity index 89%
rename from packages/icons/20/verified.tsx
rename to packages/icons/20/verified-icon.tsx
index 691447ee..665f4e7a 100644
--- a/packages/icons/20/verified.tsx
+++ b/packages/icons/20/verified-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgVerified = (props: SvgProps) => {
+const SvgVerifiedIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -26,4 +26,4 @@ const SvgVerified = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgVerified
+export default SvgVerifiedIcon
diff --git a/packages/icons/20/video.tsx b/packages/icons/20/video-icon.tsx
similarity index 96%
rename from packages/icons/20/video.tsx
rename to packages/icons/20/video-icon.tsx
index 73aa26a6..f632fd74 100644
--- a/packages/icons/20/video.tsx
+++ b/packages/icons/20/video-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgVideo = (props: SvgProps) => {
+const SvgVideoIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgVideo = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgVideo
+export default SvgVideoIcon
diff --git a/packages/icons/20/wallet.tsx b/packages/icons/20/wallet-icon.tsx
similarity index 96%
rename from packages/icons/20/wallet.tsx
rename to packages/icons/20/wallet-icon.tsx
index 88487bee..40f28972 100644
--- a/packages/icons/20/wallet.tsx
+++ b/packages/icons/20/wallet-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgWallet = (props: SvgProps) => {
+const SvgWalletIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgWallet = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgWallet
+export default SvgWalletIcon
diff --git a/packages/icons/20/warning.tsx b/packages/icons/20/warning-icon.tsx
similarity index 94%
rename from packages/icons/20/warning.tsx
rename to packages/icons/20/warning-icon.tsx
index 8409bb71..e2790a34 100644
--- a/packages/icons/20/warning.tsx
+++ b/packages/icons/20/warning-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgWarning = (props: SvgProps) => {
+const SvgWarningIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -31,4 +31,4 @@ const SvgWarning = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgWarning
+export default SvgWarningIcon
diff --git a/packages/icons/20/world.tsx b/packages/icons/20/world-icon.tsx
similarity index 92%
rename from packages/icons/20/world.tsx
rename to packages/icons/20/world-icon.tsx
index 8a58d2f9..5dca1394 100644
--- a/packages/icons/20/world.tsx
+++ b/packages/icons/20/world-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgWorld = (props: SvgProps) => {
+const SvgWorldIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,4 +23,4 @@ const SvgWorld = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgWorld
+export default SvgWorldIcon
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 0fa7e84a..c622e7e1 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -26,7 +26,7 @@
   },
   "scripts": {
     "dev": "vite build --watch --mode development",
-    "generate": "svgr src && yarn fix",
+    "generate": "rimraf 12 16 20 reactions && svgr src && yarn fix",
     "build": "vite build",
     "#postbuild": "yarn typegen",
     "#test": "vitest",
diff --git a/packages/icons/reactions/angry.tsx b/packages/icons/reactions/angry-icon.tsx
similarity index 87%
rename from packages/icons/reactions/angry.tsx
rename to packages/icons/reactions/angry-icon.tsx
index 83063588..0b934ab9 100644
--- a/packages/icons/reactions/angry.tsx
+++ b/packages/icons/reactions/angry-icon.tsx
@@ -11,7 +11,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgAngry = (props: SvgProps) => {
+const SvgAngryIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -22,8 +22,8 @@ const SvgAngry = (props: SvgProps) => {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <Circle cx={8} cy={8} r={8} fill="url(#angry_svg__a)" />
-      <Circle cx={8} cy={8} r={8} fill="url(#angry_svg__b)" />
+      <Circle cx={8} cy={8} r={8} fill="url(#angry-icon_svg__a)" />
+      <Circle cx={8} cy={8} r={8} fill="url(#angry-icon_svg__b)" />
       <Path
         d="M3.672 5.598a.438.438 0 0 0-.344.804l1.056.453c.14.06.192.233.151.381a1.001 1.001 0 0 0 1.887.65c.03-.07.11-.11.181-.08l.225.096a.438.438 0 0 0 .344-.804l-3.5-1.5ZM12.33 5.598a.438.438 0 0 1 .345.804l-1.056.453c-.141.06-.192.233-.152.381a1.002 1.002 0 0 1-.965 1.264 1 1 0 0 1-.922-.613c-.03-.071-.11-.111-.18-.081l-.225.096a.437.437 0 0 1-.345-.804l3.5-1.5Z"
         fill="#424242"
@@ -36,7 +36,7 @@ const SvgAngry = (props: SvgProps) => {
       />
       <Defs>
         <RadialGradient
-          id="angry_svg__b"
+          id="angry-icon_svg__b"
           cx={0}
           cy={0}
           r={1}
@@ -47,7 +47,7 @@ const SvgAngry = (props: SvgProps) => {
           <Stop offset={1} stopColor="#FFB746" stopOpacity={0.1} />
         </RadialGradient>
         <LinearGradient
-          id="angry_svg__a"
+          id="angry-icon_svg__a"
           x1={8}
           y1={0}
           x2={8}
@@ -62,4 +62,4 @@ const SvgAngry = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgAngry
+export default SvgAngryIcon
diff --git a/packages/icons/reactions/index.ts b/packages/icons/reactions/index.ts
index d3b9e11c..6d668cea 100644
--- a/packages/icons/reactions/index.ts
+++ b/packages/icons/reactions/index.ts
@@ -1,6 +1,6 @@
-export { default as Angry } from './angry'
-export { default as Laugh } from './laugh'
-export { default as Love } from './love'
-export { default as Sad } from './sad'
-export { default as ThumbsDown } from './thumbs-down'
-export { default as ThumbsUp } from './thumbs-up'
+export { default as AngryIcon } from './angry-icon'
+export { default as LaughIcon } from './laugh-icon'
+export { default as LoveIcon } from './love-icon'
+export { default as SadIcon } from './sad-icon'
+export { default as ThumbsDownIcon } from './thumbs-down-icon'
+export { default as ThumbsUpIcon } from './thumbs-up-icon'
diff --git a/packages/icons/reactions/laugh.tsx b/packages/icons/reactions/laugh-icon.tsx
similarity index 91%
rename from packages/icons/reactions/laugh.tsx
rename to packages/icons/reactions/laugh-icon.tsx
index ab53ad2d..1b775b34 100644
--- a/packages/icons/reactions/laugh.tsx
+++ b/packages/icons/reactions/laugh-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgLaugh = (props: SvgProps) => {
+const SvgLaughIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -15,7 +15,7 @@ const SvgLaugh = (props: SvgProps) => {
       {...props}
     >
       <Circle cx={8} cy={8} r={8} fill="#FFD764" />
-      <Circle cx={8} cy={8} r={8} fill="url(#laugh_svg__a)" />
+      <Circle cx={8} cy={8} r={8} fill="url(#laugh-icon_svg__a)" />
       <Path
         d="M12.5 9.75c0 2.21-2.5 3.75-4.5 3.75s-4.5-1.54-4.5-3.75c0-1 2.25-1.5 4.5-1.5s4.5.5 4.5 1.5Z"
         fill="#772622"
@@ -36,7 +36,7 @@ const SvgLaugh = (props: SvgProps) => {
       />
       <Defs>
         <RadialGradient
-          id="laugh_svg__a"
+          id="laugh-icon_svg__a"
           cx={0}
           cy={0}
           r={1}
@@ -50,4 +50,4 @@ const SvgLaugh = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgLaugh
+export default SvgLaughIcon
diff --git a/packages/icons/reactions/love.tsx b/packages/icons/reactions/love-icon.tsx
similarity index 89%
rename from packages/icons/reactions/love.tsx
rename to packages/icons/reactions/love-icon.tsx
index a026006c..7c97b205 100644
--- a/packages/icons/reactions/love.tsx
+++ b/packages/icons/reactions/love-icon.tsx
@@ -3,7 +3,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgLove = (props: SvgProps) => {
+const SvgLoveIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -20,11 +20,11 @@ const SvgLove = (props: SvgProps) => {
       />
       <Path
         d="M.5 5.5C.5 10 5.79 15 8 15s7.5-5 7.5-9.5c0-2.21-1.5-4-3.5-4-1.758 0-3.25.791-3.787 2.5-.107.25-.16.25-.213.25-.053 0-.106 0-.213-.25C7.251 2.291 5.757 1.5 4 1.5 2 1.5.5 3.29.5 5.5Z"
-        fill="url(#love_svg__a)"
+        fill="url(#love-icon_svg__a)"
       />
       <Defs>
         <RadialGradient
-          id="love_svg__a"
+          id="love-icon_svg__a"
           cx={0}
           cy={0}
           r={1}
@@ -38,4 +38,4 @@ const SvgLove = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgLove
+export default SvgLoveIcon
diff --git a/packages/icons/reactions/sad.tsx b/packages/icons/reactions/sad-icon.tsx
similarity index 89%
rename from packages/icons/reactions/sad.tsx
rename to packages/icons/reactions/sad-icon.tsx
index 6365a503..b1d9d100 100644
--- a/packages/icons/reactions/sad.tsx
+++ b/packages/icons/reactions/sad-icon.tsx
@@ -11,7 +11,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgSad = (props: SvgProps) => {
+const SvgSadIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,10 +23,10 @@ const SvgSad = (props: SvgProps) => {
       {...props}
     >
       <Circle cx={8} cy={8} r={8} fill="#FFD764" />
-      <Circle cx={8} cy={8} r={8} fill="url(#sad_svg__a)" />
+      <Circle cx={8} cy={8} r={8} fill="url(#sad-icon_svg__a)" />
       <Path
         d="M5.39 11.253a1.5 1.5 0 1 1-2.954-.521c.125-.709.885-1.76 1.595-2.1a.504.504 0 0 1 .579.102c.55.562.905 1.81.78 2.519Z"
-        fill="url(#sad_svg__b)"
+        fill="url(#sad-icon_svg__b)"
       />
       <Path
         fillRule="evenodd"
@@ -36,7 +36,7 @@ const SvgSad = (props: SvgProps) => {
       />
       <Path
         d="M13.041 11.847a1.125 1.125 0 1 1-2.215.39c-.09-.507.148-1.382.53-1.828a.448.448 0 0 1 .563-.099c.51.288 1.033 1.03 1.122 1.537Z"
-        fill="url(#sad_svg__c)"
+        fill="url(#sad-icon_svg__c)"
       />
       <Path
         fillRule="evenodd"
@@ -46,7 +46,7 @@ const SvgSad = (props: SvgProps) => {
       />
       <Path
         d="M12.194 8.231a.75.75 0 0 1-1.477.26c-.054-.307.072-.816.286-1.13a.378.378 0 0 1 .536-.094c.309.221.601.657.655.964Z"
-        fill="url(#sad_svg__d)"
+        fill="url(#sad-icon_svg__d)"
       />
       <Path
         fillRule="evenodd"
@@ -56,7 +56,7 @@ const SvgSad = (props: SvgProps) => {
       />
       <Defs>
         <LinearGradient
-          id="sad_svg__b"
+          id="sad-icon_svg__b"
           x1={4.347}
           y1={8.53}
           x2={3.653}
@@ -67,7 +67,7 @@ const SvgSad = (props: SvgProps) => {
           <Stop offset={1} stopColor="#2196E8" />
         </LinearGradient>
         <LinearGradient
-          id="sad_svg__c"
+          id="sad-icon_svg__c"
           x1={11.608}
           y1={10.195}
           x2={12.129}
@@ -78,7 +78,7 @@ const SvgSad = (props: SvgProps) => {
           <Stop offset={1} stopColor="#2196E8" />
         </LinearGradient>
         <LinearGradient
-          id="sad_svg__d"
+          id="sad-icon_svg__d"
           x1={11.239}
           y1={7.13}
           x2={11.586}
@@ -89,7 +89,7 @@ const SvgSad = (props: SvgProps) => {
           <Stop offset={1} stopColor="#2196E8" />
         </LinearGradient>
         <RadialGradient
-          id="sad_svg__a"
+          id="sad-icon_svg__a"
           cx={0}
           cy={0}
           r={1}
@@ -103,4 +103,4 @@ const SvgSad = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgSad
+export default SvgSadIcon
diff --git a/packages/icons/reactions/thumbs-down.tsx b/packages/icons/reactions/thumbs-down-icon.tsx
similarity index 88%
rename from packages/icons/reactions/thumbs-down.tsx
rename to packages/icons/reactions/thumbs-down-icon.tsx
index f2782f58..bdfcbe40 100644
--- a/packages/icons/reactions/thumbs-down.tsx
+++ b/packages/icons/reactions/thumbs-down-icon.tsx
@@ -10,7 +10,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgThumbsDown = (props: SvgProps) => {
+const SvgThumbsDownIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -27,15 +27,15 @@ const SvgThumbsDown = (props: SvgProps) => {
       />
       <Path
         d="M4.5 14.097c0 1.25 1.284 1.75 2.25 1.75S8 15.063 8 14.097c0-.583-.25-1-.25-1.695 0-1.555 1.083-2.305 1.75-2.805 1-.75 3-.75 3-2.75 0-2.75-2.75-5.5-6-5.5a6 6 0 0 0-6 6c0 2.899 1.868 4.397 4.475 2.915.142-.08.325-.015.347.146.088.655-.193 1.331-.491 1.994-.331.695-.331 1.195-.331 1.695Z"
-        fill="url(#thumbs-down_svg__a)"
+        fill="url(#thumbs-down-icon_svg__a)"
       />
       <Path
         d="M10.626.63c.054-.426.455-.724.866-.602 3.807 1.128 5.72 5.29 3.676 8.759a.477.477 0 0 1-.545.21l-.846-.242c-.292-.084-.44-.408-.373-.704.478-2.11-1.077-5.074-2.598-6.029-.188-.118-.313-.328-.285-.549l.105-.843Z"
-        fill="url(#thumbs-down_svg__b)"
+        fill="url(#thumbs-down-icon_svg__b)"
       />
       <Defs>
         <RadialGradient
-          id="thumbs-down_svg__a"
+          id="thumbs-down-icon_svg__a"
           cx={0}
           cy={0}
           r={1}
@@ -46,7 +46,7 @@ const SvgThumbsDown = (props: SvgProps) => {
           <Stop offset={1} stopColor="#FFB746" />
         </RadialGradient>
         <LinearGradient
-          id="thumbs-down_svg__b"
+          id="thumbs-down-icon_svg__b"
           x1={13.258}
           y1={9.016}
           x2={13.258}
@@ -60,4 +60,4 @@ const SvgThumbsDown = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgThumbsDown
+export default SvgThumbsDownIcon
diff --git a/packages/icons/reactions/thumbs-up.tsx b/packages/icons/reactions/thumbs-up-icon.tsx
similarity index 88%
rename from packages/icons/reactions/thumbs-up.tsx
rename to packages/icons/reactions/thumbs-up-icon.tsx
index 7cd04513..227cb91f 100644
--- a/packages/icons/reactions/thumbs-up.tsx
+++ b/packages/icons/reactions/thumbs-up-icon.tsx
@@ -10,7 +10,7 @@ import { useCurrentColor } from 'tamagui'
 
 import type { SvgProps } from 'react-native-svg'
 
-const SvgThumbsUp = (props: SvgProps) => {
+const SvgThumbsUpIcon = (props: SvgProps) => {
   const { color: colorToken = 'currentColor', ...rest } = props
   const color = useCurrentColor(colorToken)
   return (
@@ -23,7 +23,7 @@ const SvgThumbsUp = (props: SvgProps) => {
     >
       <Path
         d="M5.874 15.217c-.053.426-.455.724-.866.602-3.807-1.128-5.72-5.29-3.676-8.76a.477.477 0 0 1 .545-.209l.846.242c.292.083.44.407.374.703-.479 2.111 1.076 5.075 2.597 6.03.188.118.313.327.285.548l-.105.844Z"
-        fill="url(#thumbs-up_svg__a)"
+        fill="url(#thumbs-up-icon_svg__a)"
       />
       <Path
         d="M12 1.75c0-1-.75-1.75-2-1.75-1 0-1.5.784-1.5 1.75 0 .582.25 1 .25 1.695C8.75 5 8 5.75 7 6.25S4 6.75 4 9c0 2.75 2.75 5.5 6 5.5s6-2.5 6-6c0-2.793-1.734-4.286-4.192-3.066-.292.144-.657.012-.661-.313-.007-.54.173-1.08.353-1.621.25-.75.5-1.25.5-1.75Z"
@@ -31,11 +31,11 @@ const SvgThumbsUp = (props: SvgProps) => {
       />
       <Path
         d="M12 1.75c0-1-.75-1.75-2-1.75-1 0-1.5.784-1.5 1.75 0 .582.25 1 .25 1.695C8.75 5 8 5.75 7 6.25S4 6.75 4 9c0 2.75 2.75 5.5 6 5.5s6-2.5 6-6c0-2.793-1.734-4.286-4.192-3.066-.292.144-.657.012-.661-.313-.007-.54.173-1.08.353-1.621.25-.75.5-1.25.5-1.75Z"
-        fill="url(#thumbs-up_svg__b)"
+        fill="url(#thumbs-up-icon_svg__b)"
       />
       <Defs>
         <RadialGradient
-          id="thumbs-up_svg__b"
+          id="thumbs-up-icon_svg__b"
           cx={0}
           cy={0}
           r={1}
@@ -46,7 +46,7 @@ const SvgThumbsUp = (props: SvgProps) => {
           <Stop offset={1} stopColor="#FFB746" />
         </RadialGradient>
         <LinearGradient
-          id="thumbs-up_svg__a"
+          id="thumbs-up-icon_svg__a"
           x1={3.242}
           y1={6.831}
           x2={3.242}
@@ -60,4 +60,4 @@ const SvgThumbsUp = (props: SvgProps) => {
     </Svg>
   )
 }
-export default SvgThumbsUp
+export default SvgThumbsUpIcon
diff --git a/packages/icons/src/12/add.svg b/packages/icons/src/12/add-icon.svg
similarity index 100%
rename from packages/icons/src/12/add.svg
rename to packages/icons/src/12/add-icon.svg
diff --git a/packages/icons/src/12/add-reaction.svg b/packages/icons/src/12/add-reaction-icon.svg
similarity index 100%
rename from packages/icons/src/12/add-reaction.svg
rename to packages/icons/src/12/add-reaction-icon.svg
diff --git a/packages/icons/src/12/alert.svg b/packages/icons/src/12/alert-icon.svg
similarity index 100%
rename from packages/icons/src/12/alert.svg
rename to packages/icons/src/12/alert-icon.svg
diff --git a/packages/icons/src/12/arrow-down.svg b/packages/icons/src/12/arrow-down-icon.svg
similarity index 100%
rename from packages/icons/src/12/arrow-down.svg
rename to packages/icons/src/12/arrow-down-icon.svg
diff --git a/packages/icons/src/12/arrow-right.svg b/packages/icons/src/12/arrow-right-icon.svg
similarity index 100%
rename from packages/icons/src/12/arrow-right.svg
rename to packages/icons/src/12/arrow-right-icon.svg
diff --git a/packages/icons/src/12/arrow-up.svg b/packages/icons/src/12/arrow-up-icon.svg
similarity index 100%
rename from packages/icons/src/12/arrow-up.svg
rename to packages/icons/src/12/arrow-up-icon.svg
diff --git a/packages/icons/src/12/block.svg b/packages/icons/src/12/block-icon.svg
similarity index 100%
rename from packages/icons/src/12/block.svg
rename to packages/icons/src/12/block-icon.svg
diff --git a/packages/icons/src/12/camera.svg b/packages/icons/src/12/camera-icon.svg
similarity index 100%
rename from packages/icons/src/12/camera.svg
rename to packages/icons/src/12/camera-icon.svg
diff --git a/packages/icons/src/12/cards.svg b/packages/icons/src/12/cards-icon.svg
similarity index 100%
rename from packages/icons/src/12/cards.svg
rename to packages/icons/src/12/cards-icon.svg
diff --git a/packages/icons/src/12/check.svg b/packages/icons/src/12/check-icon.svg
similarity index 100%
rename from packages/icons/src/12/check.svg
rename to packages/icons/src/12/check-icon.svg
diff --git a/packages/icons/src/12/check-large.svg b/packages/icons/src/12/check-large-icon.svg
similarity index 100%
rename from packages/icons/src/12/check-large.svg
rename to packages/icons/src/12/check-large-icon.svg
diff --git a/packages/icons/src/12/chevron-bottom.svg b/packages/icons/src/12/chevron-bottom-icon.svg
similarity index 100%
rename from packages/icons/src/12/chevron-bottom.svg
rename to packages/icons/src/12/chevron-bottom-icon.svg
diff --git a/packages/icons/src/12/chevron-left.svg b/packages/icons/src/12/chevron-left-icon.svg
similarity index 100%
rename from packages/icons/src/12/chevron-left.svg
rename to packages/icons/src/12/chevron-left-icon.svg
diff --git a/packages/icons/src/12/chevron-right.svg b/packages/icons/src/12/chevron-right-icon.svg
similarity index 100%
rename from packages/icons/src/12/chevron-right.svg
rename to packages/icons/src/12/chevron-right-icon.svg
diff --git a/packages/icons/src/12/chevron-top.svg b/packages/icons/src/12/chevron-top-icon.svg
similarity index 100%
rename from packages/icons/src/12/chevron-top.svg
rename to packages/icons/src/12/chevron-top-icon.svg
diff --git a/packages/icons/src/12/close.svg b/packages/icons/src/12/close-icon.svg
similarity index 100%
rename from packages/icons/src/12/close.svg
rename to packages/icons/src/12/close-icon.svg
diff --git a/packages/icons/src/12/color.svg b/packages/icons/src/12/color-icon.svg
similarity index 100%
rename from packages/icons/src/12/color.svg
rename to packages/icons/src/12/color-icon.svg
diff --git a/packages/icons/src/12/communities.svg b/packages/icons/src/12/communities-icon.svg
similarity index 100%
rename from packages/icons/src/12/communities.svg
rename to packages/icons/src/12/communities-icon.svg
diff --git a/packages/icons/src/12/contact.svg b/packages/icons/src/12/contact-icon.svg
similarity index 100%
rename from packages/icons/src/12/contact.svg
rename to packages/icons/src/12/contact-icon.svg
diff --git a/packages/icons/src/12/copy.svg b/packages/icons/src/12/copy-icon.svg
similarity index 100%
rename from packages/icons/src/12/copy.svg
rename to packages/icons/src/12/copy-icon.svg
diff --git a/packages/icons/src/12/delivered.svg b/packages/icons/src/12/delivered-icon.svg
similarity index 100%
rename from packages/icons/src/12/delivered.svg
rename to packages/icons/src/12/delivered-icon.svg
diff --git a/packages/icons/src/12/dropdown.svg b/packages/icons/src/12/dropdown-icon.svg
similarity index 100%
rename from packages/icons/src/12/dropdown.svg
rename to packages/icons/src/12/dropdown-icon.svg
diff --git a/packages/icons/src/12/edit.svg b/packages/icons/src/12/edit-icon.svg
similarity index 100%
rename from packages/icons/src/12/edit.svg
rename to packages/icons/src/12/edit-icon.svg
diff --git a/packages/icons/src/12/gas.svg b/packages/icons/src/12/gas-icon.svg
similarity index 100%
rename from packages/icons/src/12/gas.svg
rename to packages/icons/src/12/gas-icon.svg
diff --git a/packages/icons/src/12/hold.svg b/packages/icons/src/12/hold-icon.svg
similarity index 100%
rename from packages/icons/src/12/hold.svg
rename to packages/icons/src/12/hold-icon.svg
diff --git a/packages/icons/src/12/info-1.svg b/packages/icons/src/12/info-1-icon.svg
similarity index 100%
rename from packages/icons/src/12/info-1.svg
rename to packages/icons/src/12/info-1-icon.svg
diff --git a/packages/icons/src/12/info.svg b/packages/icons/src/12/info-icon.svg
similarity index 100%
rename from packages/icons/src/12/info.svg
rename to packages/icons/src/12/info-icon.svg
diff --git a/packages/icons/src/12/jump-to.svg b/packages/icons/src/12/jump-to-icon.svg
similarity index 100%
rename from packages/icons/src/12/jump-to.svg
rename to packages/icons/src/12/jump-to-icon.svg
diff --git a/packages/icons/src/12/lightning.svg b/packages/icons/src/12/lightning-icon.svg
similarity index 100%
rename from packages/icons/src/12/lightning.svg
rename to packages/icons/src/12/lightning-icon.svg
diff --git a/packages/icons/src/12/list.svg b/packages/icons/src/12/list-icon.svg
similarity index 100%
rename from packages/icons/src/12/list.svg
rename to packages/icons/src/12/list-icon.svg
diff --git a/packages/icons/src/12/loading.svg b/packages/icons/src/12/loading-icon.svg
similarity index 100%
rename from packages/icons/src/12/loading.svg
rename to packages/icons/src/12/loading-icon.svg
diff --git a/packages/icons/src/12/locked.svg b/packages/icons/src/12/locked-icon.svg
similarity index 100%
rename from packages/icons/src/12/locked.svg
rename to packages/icons/src/12/locked-icon.svg
diff --git a/packages/icons/src/12/mention.svg b/packages/icons/src/12/mention-icon.svg
similarity index 100%
rename from packages/icons/src/12/mention.svg
rename to packages/icons/src/12/mention-icon.svg
diff --git a/packages/icons/src/12/more.svg b/packages/icons/src/12/more-icon.svg
similarity index 100%
rename from packages/icons/src/12/more.svg
rename to packages/icons/src/12/more-icon.svg
diff --git a/packages/icons/src/12/negative.svg b/packages/icons/src/12/negative-icon.svg
similarity index 100%
rename from packages/icons/src/12/negative.svg
rename to packages/icons/src/12/negative-icon.svg
diff --git a/packages/icons/src/12/notification.svg b/packages/icons/src/12/notification-icon.svg
similarity index 100%
rename from packages/icons/src/12/notification.svg
rename to packages/icons/src/12/notification-icon.svg
diff --git a/packages/icons/src/12/pause.svg b/packages/icons/src/12/pause-icon.svg
similarity index 100%
rename from packages/icons/src/12/pause.svg
rename to packages/icons/src/12/pause-icon.svg
diff --git a/packages/icons/src/12/pending.svg b/packages/icons/src/12/pending-icon.svg
similarity index 100%
rename from packages/icons/src/12/pending.svg
rename to packages/icons/src/12/pending-icon.svg
diff --git a/packages/icons/src/12/pick.svg b/packages/icons/src/12/pick-icon.svg
similarity index 100%
rename from packages/icons/src/12/pick.svg
rename to packages/icons/src/12/pick-icon.svg
diff --git a/packages/icons/src/12/placeholder.svg b/packages/icons/src/12/placeholder-icon.svg
similarity index 100%
rename from packages/icons/src/12/placeholder.svg
rename to packages/icons/src/12/placeholder-icon.svg
diff --git a/packages/icons/src/12/play.svg b/packages/icons/src/12/play-icon.svg
similarity index 100%
rename from packages/icons/src/12/play.svg
rename to packages/icons/src/12/play-icon.svg
diff --git a/packages/icons/src/12/positive.svg b/packages/icons/src/12/positive-icon.svg
similarity index 100%
rename from packages/icons/src/12/positive.svg
rename to packages/icons/src/12/positive-icon.svg
diff --git a/packages/icons/src/12/progress.svg b/packages/icons/src/12/progress-icon.svg
similarity index 100%
rename from packages/icons/src/12/progress.svg
rename to packages/icons/src/12/progress-icon.svg
diff --git a/packages/icons/src/12/pullup.svg b/packages/icons/src/12/pullup-icon.svg
similarity index 100%
rename from packages/icons/src/12/pullup.svg
rename to packages/icons/src/12/pullup-icon.svg
diff --git a/packages/icons/src/12/remove.svg b/packages/icons/src/12/remove-icon.svg
similarity index 100%
rename from packages/icons/src/12/remove.svg
rename to packages/icons/src/12/remove-icon.svg
diff --git a/packages/icons/src/12/search.svg b/packages/icons/src/12/search-icon.svg
similarity index 100%
rename from packages/icons/src/12/search.svg
rename to packages/icons/src/12/search-icon.svg
diff --git a/packages/icons/src/12/send-message.svg b/packages/icons/src/12/send-message-icon.svg
similarity index 100%
rename from packages/icons/src/12/send-message.svg
rename to packages/icons/src/12/send-message-icon.svg
diff --git a/packages/icons/src/12/sent.svg b/packages/icons/src/12/sent-icon.svg
similarity index 100%
rename from packages/icons/src/12/sent.svg
rename to packages/icons/src/12/sent-icon.svg
diff --git a/packages/icons/src/12/timeout.svg b/packages/icons/src/12/timeout-icon.svg
similarity index 100%
rename from packages/icons/src/12/timeout.svg
rename to packages/icons/src/12/timeout-icon.svg
diff --git a/packages/icons/src/12/total-members.svg b/packages/icons/src/12/total-members-icon.svg
similarity index 100%
rename from packages/icons/src/12/total-members.svg
rename to packages/icons/src/12/total-members-icon.svg
diff --git a/packages/icons/src/12/trash.svg b/packages/icons/src/12/trash-icon.svg
similarity index 100%
rename from packages/icons/src/12/trash.svg
rename to packages/icons/src/12/trash-icon.svg
diff --git a/packages/icons/src/12/unlocked.svg b/packages/icons/src/12/unlocked-icon.svg
similarity index 100%
rename from packages/icons/src/12/unlocked.svg
rename to packages/icons/src/12/unlocked-icon.svg
diff --git a/packages/icons/src/12/untrustworthy.svg b/packages/icons/src/12/untrustworthy-icon.svg
similarity index 100%
rename from packages/icons/src/12/untrustworthy.svg
rename to packages/icons/src/12/untrustworthy-icon.svg
diff --git a/packages/icons/src/12/verified-1.svg b/packages/icons/src/12/verified-1-icon.svg
similarity index 100%
rename from packages/icons/src/12/verified-1.svg
rename to packages/icons/src/12/verified-1-icon.svg
diff --git a/packages/icons/src/12/verified.svg b/packages/icons/src/12/verified-icon.svg
similarity index 100%
rename from packages/icons/src/12/verified.svg
rename to packages/icons/src/12/verified-icon.svg
diff --git a/packages/icons/src/12/whistle.svg b/packages/icons/src/12/whistle-icon.svg
similarity index 100%
rename from packages/icons/src/12/whistle.svg
rename to packages/icons/src/12/whistle-icon.svg
diff --git a/packages/icons/src/16/add.svg b/packages/icons/src/16/add-icon.svg
similarity index 100%
rename from packages/icons/src/16/add.svg
rename to packages/icons/src/16/add-icon.svg
diff --git a/packages/icons/src/16/add-user.svg b/packages/icons/src/16/add-user-icon.svg
similarity index 100%
rename from packages/icons/src/16/add-user.svg
rename to packages/icons/src/16/add-user-icon.svg
diff --git a/packages/icons/src/16/alert.svg b/packages/icons/src/16/alert-icon.svg
similarity index 100%
rename from packages/icons/src/16/alert.svg
rename to packages/icons/src/16/alert-icon.svg
diff --git a/packages/icons/src/16/arrow-down.svg b/packages/icons/src/16/arrow-down-icon.svg
similarity index 100%
rename from packages/icons/src/16/arrow-down.svg
rename to packages/icons/src/16/arrow-down-icon.svg
diff --git a/packages/icons/src/16/arrow-right.svg b/packages/icons/src/16/arrow-right-icon.svg
similarity index 100%
rename from packages/icons/src/16/arrow-right.svg
rename to packages/icons/src/16/arrow-right-icon.svg
diff --git a/packages/icons/src/16/calendar.svg b/packages/icons/src/16/calendar-icon.svg
similarity index 100%
rename from packages/icons/src/16/calendar.svg
rename to packages/icons/src/16/calendar-icon.svg
diff --git a/packages/icons/src/16/check-circle.svg b/packages/icons/src/16/check-circle-icon.svg
similarity index 100%
rename from packages/icons/src/16/check-circle.svg
rename to packages/icons/src/16/check-circle-icon.svg
diff --git a/packages/icons/src/16/chevron-down.svg b/packages/icons/src/16/chevron-down-icon.svg
similarity index 100%
rename from packages/icons/src/16/chevron-down.svg
rename to packages/icons/src/16/chevron-down-icon.svg
diff --git a/packages/icons/src/16/chevron-left.svg b/packages/icons/src/16/chevron-left-icon.svg
similarity index 100%
rename from packages/icons/src/16/chevron-left.svg
rename to packages/icons/src/16/chevron-left-icon.svg
diff --git a/packages/icons/src/16/chevron-right.svg b/packages/icons/src/16/chevron-right-icon.svg
similarity index 100%
rename from packages/icons/src/16/chevron-right.svg
rename to packages/icons/src/16/chevron-right-icon.svg
diff --git a/packages/icons/src/16/chevron-top.svg b/packages/icons/src/16/chevron-top-icon.svg
similarity index 100%
rename from packages/icons/src/16/chevron-top.svg
rename to packages/icons/src/16/chevron-top-icon.svg
diff --git a/packages/icons/src/16/close.svg b/packages/icons/src/16/close-icon.svg
similarity index 100%
rename from packages/icons/src/16/close.svg
rename to packages/icons/src/16/close-icon.svg
diff --git a/packages/icons/src/16/connection.svg b/packages/icons/src/16/connection-icon.svg
similarity index 100%
rename from packages/icons/src/16/connection.svg
rename to packages/icons/src/16/connection-icon.svg
diff --git a/packages/icons/src/16/contact-book.svg b/packages/icons/src/16/contact-book-icon.svg
similarity index 100%
rename from packages/icons/src/16/contact-book.svg
rename to packages/icons/src/16/contact-book-icon.svg
diff --git a/packages/icons/src/16/delete.svg b/packages/icons/src/16/delete-icon.svg
similarity index 100%
rename from packages/icons/src/16/delete.svg
rename to packages/icons/src/16/delete-icon.svg
diff --git a/packages/icons/src/16/email.svg b/packages/icons/src/16/email-icon.svg
similarity index 100%
rename from packages/icons/src/16/email.svg
rename to packages/icons/src/16/email-icon.svg
diff --git a/packages/icons/src/16/forward.svg b/packages/icons/src/16/forward-icon.svg
similarity index 100%
rename from packages/icons/src/16/forward.svg
rename to packages/icons/src/16/forward-icon.svg
diff --git a/packages/icons/src/16/gif.svg b/packages/icons/src/16/gif-icon.svg
similarity index 100%
rename from packages/icons/src/16/gif.svg
rename to packages/icons/src/16/gif-icon.svg
diff --git a/packages/icons/src/16/group.svg b/packages/icons/src/16/group-icon.svg
similarity index 100%
rename from packages/icons/src/16/group.svg
rename to packages/icons/src/16/group-icon.svg
diff --git a/packages/icons/src/16/history.svg b/packages/icons/src/16/history-icon.svg
similarity index 100%
rename from packages/icons/src/16/history.svg
rename to packages/icons/src/16/history-icon.svg
diff --git a/packages/icons/src/16/info.svg b/packages/icons/src/16/info-icon.svg
similarity index 100%
rename from packages/icons/src/16/info.svg
rename to packages/icons/src/16/info-icon.svg
diff --git a/packages/icons/src/16/lightning.svg b/packages/icons/src/16/lightning-icon.svg
similarity index 100%
rename from packages/icons/src/16/lightning.svg
rename to packages/icons/src/16/lightning-icon.svg
diff --git a/packages/icons/src/16/locked.svg b/packages/icons/src/16/locked-icon.svg
similarity index 100%
rename from packages/icons/src/16/locked.svg
rename to packages/icons/src/16/locked-icon.svg
diff --git a/packages/icons/src/16/mention.svg b/packages/icons/src/16/mention-icon.svg
similarity index 100%
rename from packages/icons/src/16/mention.svg
rename to packages/icons/src/16/mention-icon.svg
diff --git a/packages/icons/src/16/more.svg b/packages/icons/src/16/more-icon.svg
similarity index 100%
rename from packages/icons/src/16/more.svg
rename to packages/icons/src/16/more-icon.svg
diff --git a/packages/icons/src/16/mute.svg b/packages/icons/src/16/mute-icon.svg
similarity index 100%
rename from packages/icons/src/16/mute.svg
rename to packages/icons/src/16/mute-icon.svg
diff --git a/packages/icons/src/16/negative.svg b/packages/icons/src/16/negative-icon.svg
similarity index 100%
rename from packages/icons/src/16/negative.svg
rename to packages/icons/src/16/negative-icon.svg
diff --git a/packages/icons/src/16/notification.svg b/packages/icons/src/16/notification-icon.svg
similarity index 100%
rename from packages/icons/src/16/notification.svg
rename to packages/icons/src/16/notification-icon.svg
diff --git a/packages/icons/src/16/pin.svg b/packages/icons/src/16/pin-icon.svg
similarity index 100%
rename from packages/icons/src/16/pin.svg
rename to packages/icons/src/16/pin-icon.svg
diff --git a/packages/icons/src/16/placeholder.svg b/packages/icons/src/16/placeholder-icon.svg
similarity index 100%
rename from packages/icons/src/16/placeholder.svg
rename to packages/icons/src/16/placeholder-icon.svg
diff --git a/packages/icons/src/16/positive.svg b/packages/icons/src/16/positive-icon.svg
similarity index 100%
rename from packages/icons/src/16/positive.svg
rename to packages/icons/src/16/positive-icon.svg
diff --git a/packages/icons/src/16/privacy.svg b/packages/icons/src/16/privacy-icon.svg
similarity index 100%
rename from packages/icons/src/16/privacy.svg
rename to packages/icons/src/16/privacy-icon.svg
diff --git a/packages/icons/src/16/progress.svg b/packages/icons/src/16/progress-icon.svg
similarity index 100%
rename from packages/icons/src/16/progress.svg
rename to packages/icons/src/16/progress-icon.svg
diff --git a/packages/icons/src/16/remove-user.svg b/packages/icons/src/16/remove-user-icon.svg
similarity index 100%
rename from packages/icons/src/16/remove-user.svg
rename to packages/icons/src/16/remove-user-icon.svg
diff --git a/packages/icons/src/16/sad.svg b/packages/icons/src/16/sad-icon.svg
similarity index 100%
rename from packages/icons/src/16/sad.svg
rename to packages/icons/src/16/sad-icon.svg
diff --git a/packages/icons/src/16/stickers.svg b/packages/icons/src/16/stickers-icon.svg
similarity index 100%
rename from packages/icons/src/16/stickers.svg
rename to packages/icons/src/16/stickers-icon.svg
diff --git a/packages/icons/src/16/unlocked.svg b/packages/icons/src/16/unlocked-icon.svg
similarity index 100%
rename from packages/icons/src/16/unlocked.svg
rename to packages/icons/src/16/unlocked-icon.svg
diff --git a/packages/icons/src/16/unmute.svg b/packages/icons/src/16/unmute-icon.svg
similarity index 100%
rename from packages/icons/src/16/unmute.svg
rename to packages/icons/src/16/unmute-icon.svg
diff --git a/packages/icons/src/16/world.svg b/packages/icons/src/16/world-icon.svg
similarity index 100%
rename from packages/icons/src/16/world.svg
rename to packages/icons/src/16/world-icon.svg
diff --git a/packages/icons/src/20/Menu.svg b/packages/icons/src/20/Menu-icon.svg
similarity index 100%
rename from packages/icons/src/20/Menu.svg
rename to packages/icons/src/20/Menu-icon.svg
diff --git a/packages/icons/src/20/Unread.svg b/packages/icons/src/20/Unread-icon.svg
similarity index 100%
rename from packages/icons/src/20/Unread.svg
rename to packages/icons/src/20/Unread-icon.svg
diff --git a/packages/icons/src/20/account number.svg b/packages/icons/src/20/account number-icon.svg
similarity index 100%
rename from packages/icons/src/20/account number.svg
rename to packages/icons/src/20/account number-icon.svg
diff --git a/packages/icons/src/20/active-member.svg b/packages/icons/src/20/active-member-icon.svg
similarity index 100%
rename from packages/icons/src/20/active-member.svg
rename to packages/icons/src/20/active-member-icon.svg
diff --git a/packages/icons/src/20/activity-center.svg b/packages/icons/src/20/activity-center-icon.svg
similarity index 100%
rename from packages/icons/src/20/activity-center.svg
rename to packages/icons/src/20/activity-center-icon.svg
diff --git a/packages/icons/src/20/add.svg b/packages/icons/src/20/add-icon.svg
similarity index 100%
rename from packages/icons/src/20/add.svg
rename to packages/icons/src/20/add-icon.svg
diff --git a/packages/icons/src/20/add-reaction.svg b/packages/icons/src/20/add-reaction-icon.svg
similarity index 100%
rename from packages/icons/src/20/add-reaction.svg
rename to packages/icons/src/20/add-reaction-icon.svg
diff --git a/packages/icons/src/20/add-small.svg b/packages/icons/src/20/add-small-icon.svg
similarity index 100%
rename from packages/icons/src/20/add-small.svg
rename to packages/icons/src/20/add-small-icon.svg
diff --git a/packages/icons/src/20/add-token.svg b/packages/icons/src/20/add-token-icon.svg
similarity index 100%
rename from packages/icons/src/20/add-token.svg
rename to packages/icons/src/20/add-token-icon.svg
diff --git a/packages/icons/src/20/add-user.svg b/packages/icons/src/20/add-user-icon.svg
similarity index 100%
rename from packages/icons/src/20/add-user.svg
rename to packages/icons/src/20/add-user-icon.svg
diff --git a/packages/icons/src/20/alert.svg b/packages/icons/src/20/alert-icon.svg
similarity index 100%
rename from packages/icons/src/20/alert.svg
rename to packages/icons/src/20/alert-icon.svg
diff --git a/packages/icons/src/20/alphabetically.svg b/packages/icons/src/20/alphabetically-icon.svg
similarity index 100%
rename from packages/icons/src/20/alphabetically.svg
rename to packages/icons/src/20/alphabetically-icon.svg
diff --git a/packages/icons/src/20/android.svg b/packages/icons/src/20/android-icon.svg
similarity index 100%
rename from packages/icons/src/20/android.svg
rename to packages/icons/src/20/android-icon.svg
diff --git a/packages/icons/src/20/anonymous.svg b/packages/icons/src/20/anonymous-icon.svg
similarity index 100%
rename from packages/icons/src/20/anonymous.svg
rename to packages/icons/src/20/anonymous-icon.svg
diff --git a/packages/icons/src/20/arrow-down.svg b/packages/icons/src/20/arrow-down-icon.svg
similarity index 100%
rename from packages/icons/src/20/arrow-down.svg
rename to packages/icons/src/20/arrow-down-icon.svg
diff --git a/packages/icons/src/20/arrow-left.svg b/packages/icons/src/20/arrow-left-icon.svg
similarity index 100%
rename from packages/icons/src/20/arrow-left.svg
rename to packages/icons/src/20/arrow-left-icon.svg
diff --git a/packages/icons/src/20/arrow-right.svg b/packages/icons/src/20/arrow-right-icon.svg
similarity index 100%
rename from packages/icons/src/20/arrow-right.svg
rename to packages/icons/src/20/arrow-right-icon.svg
diff --git a/packages/icons/src/20/arrow-up.svg b/packages/icons/src/20/arrow-up-icon.svg
similarity index 100%
rename from packages/icons/src/20/arrow-up.svg
rename to packages/icons/src/20/arrow-up-icon.svg
diff --git a/packages/icons/src/20/attach.svg b/packages/icons/src/20/attach-icon.svg
similarity index 100%
rename from packages/icons/src/20/attach.svg
rename to packages/icons/src/20/attach-icon.svg
diff --git a/packages/icons/src/20/audio.svg b/packages/icons/src/20/audio-icon.svg
similarity index 100%
rename from packages/icons/src/20/audio.svg
rename to packages/icons/src/20/audio-icon.svg
diff --git a/packages/icons/src/20/automatic.svg b/packages/icons/src/20/automatic-icon.svg
similarity index 100%
rename from packages/icons/src/20/automatic.svg
rename to packages/icons/src/20/automatic-icon.svg
diff --git a/packages/icons/src/20/block.svg b/packages/icons/src/20/block-icon.svg
similarity index 100%
rename from packages/icons/src/20/block.svg
rename to packages/icons/src/20/block-icon.svg
diff --git a/packages/icons/src/20/bold.svg b/packages/icons/src/20/bold-icon.svg
similarity index 100%
rename from packages/icons/src/20/bold.svg
rename to packages/icons/src/20/bold-icon.svg
diff --git a/packages/icons/src/20/bridge.svg b/packages/icons/src/20/bridge-icon.svg
similarity index 100%
rename from packages/icons/src/20/bridge.svg
rename to packages/icons/src/20/bridge-icon.svg
diff --git a/packages/icons/src/20/browser.svg b/packages/icons/src/20/browser-icon.svg
similarity index 100%
rename from packages/icons/src/20/browser.svg
rename to packages/icons/src/20/browser-icon.svg
diff --git a/packages/icons/src/20/bullet.svg b/packages/icons/src/20/bullet-icon.svg
similarity index 100%
rename from packages/icons/src/20/bullet.svg
rename to packages/icons/src/20/bullet-icon.svg
diff --git a/packages/icons/src/20/bullet-list.svg b/packages/icons/src/20/bullet-list-icon.svg
similarity index 100%
rename from packages/icons/src/20/bullet-list.svg
rename to packages/icons/src/20/bullet-list-icon.svg
diff --git a/packages/icons/src/20/buy.svg b/packages/icons/src/20/buy-icon.svg
similarity index 100%
rename from packages/icons/src/20/buy.svg
rename to packages/icons/src/20/buy-icon.svg
diff --git a/packages/icons/src/20/camera.svg b/packages/icons/src/20/camera-icon.svg
similarity index 100%
rename from packages/icons/src/20/camera.svg
rename to packages/icons/src/20/camera-icon.svg
diff --git a/packages/icons/src/20/card-view.svg b/packages/icons/src/20/card-view-icon.svg
similarity index 100%
rename from packages/icons/src/20/card-view.svg
rename to packages/icons/src/20/card-view-icon.svg
diff --git a/packages/icons/src/20/centre-align.svg b/packages/icons/src/20/centre-align-icon.svg
similarity index 100%
rename from packages/icons/src/20/centre-align.svg
rename to packages/icons/src/20/centre-align-icon.svg
diff --git a/packages/icons/src/20/chatkey.svg b/packages/icons/src/20/chatkey-icon.svg
similarity index 100%
rename from packages/icons/src/20/chatkey.svg
rename to packages/icons/src/20/chatkey-icon.svg
diff --git a/packages/icons/src/20/check.svg b/packages/icons/src/20/check-icon.svg
similarity index 100%
rename from packages/icons/src/20/check.svg
rename to packages/icons/src/20/check-icon.svg
diff --git a/packages/icons/src/20/chevron-down.svg b/packages/icons/src/20/chevron-down-icon.svg
similarity index 100%
rename from packages/icons/src/20/chevron-down.svg
rename to packages/icons/src/20/chevron-down-icon.svg
diff --git a/packages/icons/src/20/chevron-left.svg b/packages/icons/src/20/chevron-left-icon.svg
similarity index 100%
rename from packages/icons/src/20/chevron-left.svg
rename to packages/icons/src/20/chevron-left-icon.svg
diff --git a/packages/icons/src/20/chevron-right.svg b/packages/icons/src/20/chevron-right-icon.svg
similarity index 100%
rename from packages/icons/src/20/chevron-right.svg
rename to packages/icons/src/20/chevron-right-icon.svg
diff --git a/packages/icons/src/20/chevron-up.svg b/packages/icons/src/20/chevron-up-icon.svg
similarity index 100%
rename from packages/icons/src/20/chevron-up.svg
rename to packages/icons/src/20/chevron-up-icon.svg
diff --git a/packages/icons/src/20/chevrons-left.svg b/packages/icons/src/20/chevrons-left-icon.svg
similarity index 100%
rename from packages/icons/src/20/chevrons-left.svg
rename to packages/icons/src/20/chevrons-left-icon.svg
diff --git a/packages/icons/src/20/chevrons-right.svg b/packages/icons/src/20/chevrons-right-icon.svg
similarity index 100%
rename from packages/icons/src/20/chevrons-right.svg
rename to packages/icons/src/20/chevrons-right-icon.svg
diff --git a/packages/icons/src/20/clear.svg b/packages/icons/src/20/clear-icon.svg
similarity index 100%
rename from packages/icons/src/20/clear.svg
rename to packages/icons/src/20/clear-icon.svg
diff --git a/packages/icons/src/20/close.svg b/packages/icons/src/20/close-icon.svg
similarity index 100%
rename from packages/icons/src/20/close.svg
rename to packages/icons/src/20/close-icon.svg
diff --git a/packages/icons/src/20/code block.svg b/packages/icons/src/20/code block-icon.svg
similarity index 100%
rename from packages/icons/src/20/code block.svg
rename to packages/icons/src/20/code block-icon.svg
diff --git a/packages/icons/src/20/code.svg b/packages/icons/src/20/code-icon.svg
similarity index 100%
rename from packages/icons/src/20/code.svg
rename to packages/icons/src/20/code-icon.svg
diff --git a/packages/icons/src/20/collapse.svg b/packages/icons/src/20/collapse-icon.svg
similarity index 100%
rename from packages/icons/src/20/collapse.svg
rename to packages/icons/src/20/collapse-icon.svg
diff --git a/packages/icons/src/20/colour-pick.svg b/packages/icons/src/20/colour-pick-icon.svg
similarity index 100%
rename from packages/icons/src/20/colour-pick.svg
rename to packages/icons/src/20/colour-pick-icon.svg
diff --git a/packages/icons/src/20/communities.svg b/packages/icons/src/20/communities-icon.svg
similarity index 100%
rename from packages/icons/src/20/communities.svg
rename to packages/icons/src/20/communities-icon.svg
diff --git a/packages/icons/src/20/connection.svg b/packages/icons/src/20/connection-icon.svg
similarity index 100%
rename from packages/icons/src/20/connection.svg
rename to packages/icons/src/20/connection-icon.svg
diff --git a/packages/icons/src/20/contact-book.svg b/packages/icons/src/20/contact-book-icon.svg
similarity index 100%
rename from packages/icons/src/20/contact-book.svg
rename to packages/icons/src/20/contact-book-icon.svg
diff --git a/packages/icons/src/20/contact.svg b/packages/icons/src/20/contact-icon.svg
similarity index 100%
rename from packages/icons/src/20/contact.svg
rename to packages/icons/src/20/contact-icon.svg
diff --git a/packages/icons/src/20/copy.svg b/packages/icons/src/20/copy-icon.svg
similarity index 100%
rename from packages/icons/src/20/copy.svg
rename to packages/icons/src/20/copy-icon.svg
diff --git a/packages/icons/src/20/correct.svg b/packages/icons/src/20/correct-icon.svg
similarity index 100%
rename from packages/icons/src/20/correct.svg
rename to packages/icons/src/20/correct-icon.svg
diff --git a/packages/icons/src/20/crown.svg b/packages/icons/src/20/crown-icon.svg
similarity index 100%
rename from packages/icons/src/20/crown.svg
rename to packages/icons/src/20/crown-icon.svg
diff --git a/packages/icons/src/20/customize.svg b/packages/icons/src/20/customize-icon.svg
similarity index 100%
rename from packages/icons/src/20/customize.svg
rename to packages/icons/src/20/customize-icon.svg
diff --git a/packages/icons/src/20/dark.svg b/packages/icons/src/20/dark-icon.svg
similarity index 100%
rename from packages/icons/src/20/dark.svg
rename to packages/icons/src/20/dark-icon.svg
diff --git a/packages/icons/src/20/data-usage.svg b/packages/icons/src/20/data-usage-icon.svg
similarity index 100%
rename from packages/icons/src/20/data-usage.svg
rename to packages/icons/src/20/data-usage-icon.svg
diff --git a/packages/icons/src/20/delete.svg b/packages/icons/src/20/delete-icon.svg
similarity index 100%
rename from packages/icons/src/20/delete.svg
rename to packages/icons/src/20/delete-icon.svg
diff --git a/packages/icons/src/20/desktop.svg b/packages/icons/src/20/desktop-icon.svg
similarity index 100%
rename from packages/icons/src/20/desktop.svg
rename to packages/icons/src/20/desktop-icon.svg
diff --git a/packages/icons/src/20/download.svg b/packages/icons/src/20/download-icon.svg
similarity index 100%
rename from packages/icons/src/20/download.svg
rename to packages/icons/src/20/download-icon.svg
diff --git a/packages/icons/src/20/dropdown.svg b/packages/icons/src/20/dropdown-icon.svg
similarity index 100%
rename from packages/icons/src/20/dropdown.svg
rename to packages/icons/src/20/dropdown-icon.svg
diff --git a/packages/icons/src/20/duration.svg b/packages/icons/src/20/duration-icon.svg
similarity index 100%
rename from packages/icons/src/20/duration.svg
rename to packages/icons/src/20/duration-icon.svg
diff --git a/packages/icons/src/20/edit.svg b/packages/icons/src/20/edit-icon.svg
similarity index 100%
rename from packages/icons/src/20/edit.svg
rename to packages/icons/src/20/edit-icon.svg
diff --git a/packages/icons/src/20/email.svg b/packages/icons/src/20/email-icon.svg
similarity index 100%
rename from packages/icons/src/20/email.svg
rename to packages/icons/src/20/email-icon.svg
diff --git a/packages/icons/src/20/expand.svg b/packages/icons/src/20/expand-icon.svg
similarity index 100%
rename from packages/icons/src/20/expand.svg
rename to packages/icons/src/20/expand-icon.svg
diff --git a/packages/icons/src/20/external.svg b/packages/icons/src/20/external-icon.svg
similarity index 100%
rename from packages/icons/src/20/external.svg
rename to packages/icons/src/20/external-icon.svg
diff --git a/packages/icons/src/20/face-id.svg b/packages/icons/src/20/face-id-icon.svg
similarity index 100%
rename from packages/icons/src/20/face-id.svg
rename to packages/icons/src/20/face-id-icon.svg
diff --git a/packages/icons/src/20/favourite.svg b/packages/icons/src/20/favourite-icon.svg
similarity index 100%
rename from packages/icons/src/20/favourite.svg
rename to packages/icons/src/20/favourite-icon.svg
diff --git a/packages/icons/src/20/file.svg b/packages/icons/src/20/file-icon.svg
similarity index 100%
rename from packages/icons/src/20/file.svg
rename to packages/icons/src/20/file-icon.svg
diff --git a/packages/icons/src/20/flag.svg b/packages/icons/src/20/flag-icon.svg
similarity index 100%
rename from packages/icons/src/20/flag.svg
rename to packages/icons/src/20/flag-icon.svg
diff --git a/packages/icons/src/20/flash.svg b/packages/icons/src/20/flash-icon.svg
similarity index 100%
rename from packages/icons/src/20/flash.svg
rename to packages/icons/src/20/flash-icon.svg
diff --git a/packages/icons/src/20/flash-off.svg b/packages/icons/src/20/flash-off-icon.svg
similarity index 100%
rename from packages/icons/src/20/flash-off.svg
rename to packages/icons/src/20/flash-off-icon.svg
diff --git a/packages/icons/src/20/flashlight-off.svg b/packages/icons/src/20/flashlight-off-icon.svg
similarity index 100%
rename from packages/icons/src/20/flashlight-off.svg
rename to packages/icons/src/20/flashlight-off-icon.svg
diff --git a/packages/icons/src/20/flashlight-on.svg b/packages/icons/src/20/flashlight-on-icon.svg
similarity index 100%
rename from packages/icons/src/20/flashlight-on.svg
rename to packages/icons/src/20/flashlight-on-icon.svg
diff --git a/packages/icons/src/20/flip.svg b/packages/icons/src/20/flip-icon.svg
similarity index 100%
rename from packages/icons/src/20/flip.svg
rename to packages/icons/src/20/flip-icon.svg
diff --git a/packages/icons/src/20/folder.svg b/packages/icons/src/20/folder-icon.svg
similarity index 100%
rename from packages/icons/src/20/folder.svg
rename to packages/icons/src/20/folder-icon.svg
diff --git a/packages/icons/src/20/format.svg b/packages/icons/src/20/format-icon.svg
similarity index 100%
rename from packages/icons/src/20/format.svg
rename to packages/icons/src/20/format-icon.svg
diff --git a/packages/icons/src/20/forward.svg b/packages/icons/src/20/forward-icon.svg
similarity index 100%
rename from packages/icons/src/20/forward.svg
rename to packages/icons/src/20/forward-icon.svg
diff --git a/packages/icons/src/20/friend.svg b/packages/icons/src/20/friend-icon.svg
similarity index 100%
rename from packages/icons/src/20/friend.svg
rename to packages/icons/src/20/friend-icon.svg
diff --git a/packages/icons/src/20/gas.svg b/packages/icons/src/20/gas-icon.svg
similarity index 100%
rename from packages/icons/src/20/gas.svg
rename to packages/icons/src/20/gas-icon.svg
diff --git a/packages/icons/src/20/gif.svg b/packages/icons/src/20/gif-icon.svg
similarity index 100%
rename from packages/icons/src/20/gif.svg
rename to packages/icons/src/20/gif-icon.svg
diff --git a/packages/icons/src/20/globe.svg b/packages/icons/src/20/globe-icon.svg
similarity index 100%
rename from packages/icons/src/20/globe.svg
rename to packages/icons/src/20/globe-icon.svg
diff --git a/packages/icons/src/20/hashtag-1.svg b/packages/icons/src/20/hashtag-1-icon.svg
similarity index 100%
rename from packages/icons/src/20/hashtag-1.svg
rename to packages/icons/src/20/hashtag-1-icon.svg
diff --git a/packages/icons/src/20/hashtag.svg b/packages/icons/src/20/hashtag-icon.svg
similarity index 100%
rename from packages/icons/src/20/hashtag.svg
rename to packages/icons/src/20/hashtag-icon.svg
diff --git a/packages/icons/src/20/heart.svg b/packages/icons/src/20/heart-icon.svg
similarity index 100%
rename from packages/icons/src/20/heart.svg
rename to packages/icons/src/20/heart-icon.svg
diff --git a/packages/icons/src/20/help.svg b/packages/icons/src/20/help-icon.svg
similarity index 100%
rename from packages/icons/src/20/help.svg
rename to packages/icons/src/20/help-icon.svg
diff --git a/packages/icons/src/20/hide.svg b/packages/icons/src/20/hide-icon.svg
similarity index 100%
rename from packages/icons/src/20/hide.svg
rename to packages/icons/src/20/hide-icon.svg
diff --git a/packages/icons/src/20/history.svg b/packages/icons/src/20/history-icon.svg
similarity index 100%
rename from packages/icons/src/20/history.svg
rename to packages/icons/src/20/history-icon.svg
diff --git a/packages/icons/src/20/hold.svg b/packages/icons/src/20/hold-icon.svg
similarity index 100%
rename from packages/icons/src/20/hold.svg
rename to packages/icons/src/20/hold-icon.svg
diff --git a/packages/icons/src/20/image.svg b/packages/icons/src/20/image-icon.svg
similarity index 100%
rename from packages/icons/src/20/image.svg
rename to packages/icons/src/20/image-icon.svg
diff --git a/packages/icons/src/20/inactive.svg b/packages/icons/src/20/inactive-icon.svg
similarity index 100%
rename from packages/icons/src/20/inactive.svg
rename to packages/icons/src/20/inactive-icon.svg
diff --git a/packages/icons/src/20/info-badge.svg b/packages/icons/src/20/info-badge-icon.svg
similarity index 100%
rename from packages/icons/src/20/info-badge.svg
rename to packages/icons/src/20/info-badge-icon.svg
diff --git a/packages/icons/src/20/info.svg b/packages/icons/src/20/info-icon.svg
similarity index 100%
rename from packages/icons/src/20/info.svg
rename to packages/icons/src/20/info-icon.svg
diff --git a/packages/icons/src/20/italic.svg b/packages/icons/src/20/italic-icon.svg
similarity index 100%
rename from packages/icons/src/20/italic.svg
rename to packages/icons/src/20/italic-icon.svg
diff --git a/packages/icons/src/20/justify.svg b/packages/icons/src/20/justify-icon.svg
similarity index 100%
rename from packages/icons/src/20/justify.svg
rename to packages/icons/src/20/justify-icon.svg
diff --git a/packages/icons/src/20/key.svg b/packages/icons/src/20/key-icon.svg
similarity index 100%
rename from packages/icons/src/20/key.svg
rename to packages/icons/src/20/key-icon.svg
diff --git a/packages/icons/src/20/keyboard.svg b/packages/icons/src/20/keyboard-icon.svg
similarity index 100%
rename from packages/icons/src/20/keyboard.svg
rename to packages/icons/src/20/keyboard-icon.svg
diff --git a/packages/icons/src/20/keycard.svg b/packages/icons/src/20/keycard-icon.svg
similarity index 100%
rename from packages/icons/src/20/keycard.svg
rename to packages/icons/src/20/keycard-icon.svg
diff --git a/packages/icons/src/20/keycard-logo.svg b/packages/icons/src/20/keycard-logo-icon.svg
similarity index 100%
rename from packages/icons/src/20/keycard-logo.svg
rename to packages/icons/src/20/keycard-logo-icon.svg
diff --git a/packages/icons/src/20/laptop.svg b/packages/icons/src/20/laptop-icon.svg
similarity index 100%
rename from packages/icons/src/20/laptop.svg
rename to packages/icons/src/20/laptop-icon.svg
diff --git a/packages/icons/src/20/left-align.svg b/packages/icons/src/20/left-align-icon.svg
similarity index 100%
rename from packages/icons/src/20/left-align.svg
rename to packages/icons/src/20/left-align-icon.svg
diff --git a/packages/icons/src/20/light.svg b/packages/icons/src/20/light-icon.svg
similarity index 100%
rename from packages/icons/src/20/light.svg
rename to packages/icons/src/20/light-icon.svg
diff --git a/packages/icons/src/20/link.svg b/packages/icons/src/20/link-icon.svg
similarity index 100%
rename from packages/icons/src/20/link.svg
rename to packages/icons/src/20/link-icon.svg
diff --git a/packages/icons/src/20/list-view.svg b/packages/icons/src/20/list-view-icon.svg
similarity index 100%
rename from packages/icons/src/20/list-view.svg
rename to packages/icons/src/20/list-view-icon.svg
diff --git a/packages/icons/src/20/loading.svg b/packages/icons/src/20/loading-icon.svg
similarity index 100%
rename from packages/icons/src/20/loading.svg
rename to packages/icons/src/20/loading-icon.svg
diff --git a/packages/icons/src/20/locked.svg b/packages/icons/src/20/locked-icon.svg
similarity index 100%
rename from packages/icons/src/20/locked.svg
rename to packages/icons/src/20/locked-icon.svg
diff --git a/packages/icons/src/20/log-out.svg b/packages/icons/src/20/log-out-icon.svg
similarity index 100%
rename from packages/icons/src/20/log-out.svg
rename to packages/icons/src/20/log-out-icon.svg
diff --git a/packages/icons/src/20/members.svg b/packages/icons/src/20/members-icon.svg
similarity index 100%
rename from packages/icons/src/20/members.svg
rename to packages/icons/src/20/members-icon.svg
diff --git a/packages/icons/src/20/mention.svg b/packages/icons/src/20/mention-icon.svg
similarity index 100%
rename from packages/icons/src/20/mention.svg
rename to packages/icons/src/20/mention-icon.svg
diff --git a/packages/icons/src/20/messages.svg b/packages/icons/src/20/messages-icon.svg
similarity index 100%
rename from packages/icons/src/20/messages.svg
rename to packages/icons/src/20/messages-icon.svg
diff --git a/packages/icons/src/20/mobile.svg b/packages/icons/src/20/mobile-icon.svg
similarity index 100%
rename from packages/icons/src/20/mobile.svg
rename to packages/icons/src/20/mobile-icon.svg
diff --git a/packages/icons/src/20/multi-profile.svg b/packages/icons/src/20/multi-profile-icon.svg
similarity index 100%
rename from packages/icons/src/20/multi-profile.svg
rename to packages/icons/src/20/multi-profile-icon.svg
diff --git a/packages/icons/src/20/muted.svg b/packages/icons/src/20/muted-icon.svg
similarity index 100%
rename from packages/icons/src/20/muted.svg
rename to packages/icons/src/20/muted-icon.svg
diff --git a/packages/icons/src/20/mutual-contact.svg b/packages/icons/src/20/mutual-contact-icon.svg
similarity index 100%
rename from packages/icons/src/20/mutual-contact.svg
rename to packages/icons/src/20/mutual-contact-icon.svg
diff --git a/packages/icons/src/20/new-message.svg b/packages/icons/src/20/new-message-icon.svg
similarity index 100%
rename from packages/icons/src/20/new-message.svg
rename to packages/icons/src/20/new-message-icon.svg
diff --git a/packages/icons/src/20/nft.svg b/packages/icons/src/20/nft-icon.svg
similarity index 100%
rename from packages/icons/src/20/nft.svg
rename to packages/icons/src/20/nft-icon.svg
diff --git a/packages/icons/src/20/node.svg b/packages/icons/src/20/node-icon.svg
similarity index 100%
rename from packages/icons/src/20/node.svg
rename to packages/icons/src/20/node-icon.svg
diff --git a/packages/icons/src/20/notification.svg b/packages/icons/src/20/notification-icon.svg
similarity index 100%
rename from packages/icons/src/20/notification.svg
rename to packages/icons/src/20/notification-icon.svg
diff --git a/packages/icons/src/20/notifications.svg b/packages/icons/src/20/notifications-icon.svg
similarity index 100%
rename from packages/icons/src/20/notifications.svg
rename to packages/icons/src/20/notifications-icon.svg
diff --git a/packages/icons/src/20/numbered-list.svg b/packages/icons/src/20/numbered-list-icon.svg
similarity index 100%
rename from packages/icons/src/20/numbered-list.svg
rename to packages/icons/src/20/numbered-list-icon.svg
diff --git a/packages/icons/src/20/online.svg b/packages/icons/src/20/online-icon.svg
similarity index 100%
rename from packages/icons/src/20/online.svg
rename to packages/icons/src/20/online-icon.svg
diff --git a/packages/icons/src/20/online-left.svg b/packages/icons/src/20/online-left-icon.svg
similarity index 100%
rename from packages/icons/src/20/online-left.svg
rename to packages/icons/src/20/online-left-icon.svg
diff --git a/packages/icons/src/20/options.svg b/packages/icons/src/20/options-icon.svg
similarity index 100%
rename from packages/icons/src/20/options.svg
rename to packages/icons/src/20/options-icon.svg
diff --git a/packages/icons/src/20/password.svg b/packages/icons/src/20/password-icon.svg
similarity index 100%
rename from packages/icons/src/20/password.svg
rename to packages/icons/src/20/password-icon.svg
diff --git a/packages/icons/src/20/pause.svg b/packages/icons/src/20/pause-icon.svg
similarity index 100%
rename from packages/icons/src/20/pause.svg
rename to packages/icons/src/20/pause-icon.svg
diff --git a/packages/icons/src/20/pending.svg b/packages/icons/src/20/pending-icon.svg
similarity index 100%
rename from packages/icons/src/20/pending.svg
rename to packages/icons/src/20/pending-icon.svg
diff --git a/packages/icons/src/20/pending-user.svg b/packages/icons/src/20/pending-user-icon.svg
similarity index 100%
rename from packages/icons/src/20/pending-user.svg
rename to packages/icons/src/20/pending-user-icon.svg
diff --git a/packages/icons/src/20/pin-1.svg b/packages/icons/src/20/pin-1-icon.svg
similarity index 100%
rename from packages/icons/src/20/pin-1.svg
rename to packages/icons/src/20/pin-1-icon.svg
diff --git a/packages/icons/src/20/pin.svg b/packages/icons/src/20/pin-icon.svg
similarity index 100%
rename from packages/icons/src/20/pin.svg
rename to packages/icons/src/20/pin-icon.svg
diff --git a/packages/icons/src/20/placeholder.svg b/packages/icons/src/20/placeholder-icon.svg
similarity index 100%
rename from packages/icons/src/20/placeholder.svg
rename to packages/icons/src/20/placeholder-icon.svg
diff --git a/packages/icons/src/20/play.svg b/packages/icons/src/20/play-icon.svg
similarity index 100%
rename from packages/icons/src/20/play.svg
rename to packages/icons/src/20/play-icon.svg
diff --git a/packages/icons/src/20/privacy.svg b/packages/icons/src/20/privacy-icon.svg
similarity index 100%
rename from packages/icons/src/20/privacy.svg
rename to packages/icons/src/20/privacy-icon.svg
diff --git a/packages/icons/src/20/profile.svg b/packages/icons/src/20/profile-icon.svg
similarity index 100%
rename from packages/icons/src/20/profile.svg
rename to packages/icons/src/20/profile-icon.svg
diff --git a/packages/icons/src/20/pullup.svg b/packages/icons/src/20/pullup-icon.svg
similarity index 100%
rename from packages/icons/src/20/pullup.svg
rename to packages/icons/src/20/pullup-icon.svg
diff --git a/packages/icons/src/20/qr-code.svg b/packages/icons/src/20/qr-code-icon.svg
similarity index 100%
rename from packages/icons/src/20/qr-code.svg
rename to packages/icons/src/20/qr-code-icon.svg
diff --git a/packages/icons/src/20/quarter.svg b/packages/icons/src/20/quarter-icon.svg
similarity index 100%
rename from packages/icons/src/20/quarter.svg
rename to packages/icons/src/20/quarter-icon.svg
diff --git a/packages/icons/src/20/reaction.svg b/packages/icons/src/20/reaction-icon.svg
similarity index 100%
rename from packages/icons/src/20/reaction.svg
rename to packages/icons/src/20/reaction-icon.svg
diff --git a/packages/icons/src/20/receive.svg b/packages/icons/src/20/receive-icon.svg
similarity index 100%
rename from packages/icons/src/20/receive.svg
rename to packages/icons/src/20/receive-icon.svg
diff --git a/packages/icons/src/20/receive-message.svg b/packages/icons/src/20/receive-message-icon.svg
similarity index 100%
rename from packages/icons/src/20/receive-message.svg
rename to packages/icons/src/20/receive-message-icon.svg
diff --git a/packages/icons/src/20/recent.svg b/packages/icons/src/20/recent-icon.svg
similarity index 100%
rename from packages/icons/src/20/recent.svg
rename to packages/icons/src/20/recent-icon.svg
diff --git a/packages/icons/src/20/refresh.svg b/packages/icons/src/20/refresh-icon.svg
similarity index 100%
rename from packages/icons/src/20/refresh.svg
rename to packages/icons/src/20/refresh-icon.svg
diff --git a/packages/icons/src/20/remove-user.svg b/packages/icons/src/20/remove-user-icon.svg
similarity index 100%
rename from packages/icons/src/20/remove-user.svg
rename to packages/icons/src/20/remove-user-icon.svg
diff --git a/packages/icons/src/20/reply.svg b/packages/icons/src/20/reply-icon.svg
similarity index 100%
rename from packages/icons/src/20/reply.svg
rename to packages/icons/src/20/reply-icon.svg
diff --git a/packages/icons/src/20/reveal.svg b/packages/icons/src/20/reveal-icon.svg
similarity index 100%
rename from packages/icons/src/20/reveal.svg
rename to packages/icons/src/20/reveal-icon.svg
diff --git a/packages/icons/src/20/revere.svg b/packages/icons/src/20/revere-icon.svg
similarity index 100%
rename from packages/icons/src/20/revere.svg
rename to packages/icons/src/20/revere-icon.svg
diff --git a/packages/icons/src/20/right-align.svg b/packages/icons/src/20/right-align-icon.svg
similarity index 100%
rename from packages/icons/src/20/right-align.svg
rename to packages/icons/src/20/right-align-icon.svg
diff --git a/packages/icons/src/20/rotate.svg b/packages/icons/src/20/rotate-icon.svg
similarity index 100%
rename from packages/icons/src/20/rotate.svg
rename to packages/icons/src/20/rotate-icon.svg
diff --git a/packages/icons/src/20/sad.svg b/packages/icons/src/20/sad-icon.svg
similarity index 100%
rename from packages/icons/src/20/sad.svg
rename to packages/icons/src/20/sad-icon.svg
diff --git a/packages/icons/src/20/save.svg b/packages/icons/src/20/save-icon.svg
similarity index 100%
rename from packages/icons/src/20/save.svg
rename to packages/icons/src/20/save-icon.svg
diff --git a/packages/icons/src/20/scan.svg b/packages/icons/src/20/scan-icon.svg
similarity index 100%
rename from packages/icons/src/20/scan.svg
rename to packages/icons/src/20/scan-icon.svg
diff --git a/packages/icons/src/20/search.svg b/packages/icons/src/20/search-icon.svg
similarity index 100%
rename from packages/icons/src/20/search.svg
rename to packages/icons/src/20/search-icon.svg
diff --git a/packages/icons/src/20/seed.svg b/packages/icons/src/20/seed-icon.svg
similarity index 100%
rename from packages/icons/src/20/seed.svg
rename to packages/icons/src/20/seed-icon.svg
diff --git a/packages/icons/src/20/send.svg b/packages/icons/src/20/send-icon.svg
similarity index 100%
rename from packages/icons/src/20/send.svg
rename to packages/icons/src/20/send-icon.svg
diff --git a/packages/icons/src/20/send-message.svg b/packages/icons/src/20/send-message-icon.svg
similarity index 100%
rename from packages/icons/src/20/send-message.svg
rename to packages/icons/src/20/send-message-icon.svg
diff --git a/packages/icons/src/20/settings.svg b/packages/icons/src/20/settings-icon.svg
similarity index 100%
rename from packages/icons/src/20/settings.svg
rename to packages/icons/src/20/settings-icon.svg
diff --git a/packages/icons/src/20/share.svg b/packages/icons/src/20/share-icon.svg
similarity index 100%
rename from packages/icons/src/20/share.svg
rename to packages/icons/src/20/share-icon.svg
diff --git a/packages/icons/src/20/signature.svg b/packages/icons/src/20/signature-icon.svg
similarity index 100%
rename from packages/icons/src/20/signature.svg
rename to packages/icons/src/20/signature-icon.svg
diff --git a/packages/icons/src/20/sort.svg b/packages/icons/src/20/sort-icon.svg
similarity index 100%
rename from packages/icons/src/20/sort.svg
rename to packages/icons/src/20/sort-icon.svg
diff --git a/packages/icons/src/20/speed.svg b/packages/icons/src/20/speed-icon.svg
similarity index 100%
rename from packages/icons/src/20/speed.svg
rename to packages/icons/src/20/speed-icon.svg
diff --git a/packages/icons/src/20/status.svg b/packages/icons/src/20/status-icon.svg
similarity index 100%
rename from packages/icons/src/20/status.svg
rename to packages/icons/src/20/status-icon.svg
diff --git a/packages/icons/src/20/stickers.svg b/packages/icons/src/20/stickers-icon.svg
similarity index 100%
rename from packages/icons/src/20/stickers.svg
rename to packages/icons/src/20/stickers-icon.svg
diff --git a/packages/icons/src/20/stop.svg b/packages/icons/src/20/stop-icon.svg
similarity index 100%
rename from packages/icons/src/20/stop.svg
rename to packages/icons/src/20/stop-icon.svg
diff --git a/packages/icons/src/20/strikethrough.svg b/packages/icons/src/20/strikethrough-icon.svg
similarity index 100%
rename from packages/icons/src/20/strikethrough.svg
rename to packages/icons/src/20/strikethrough-icon.svg
diff --git a/packages/icons/src/20/subscript.svg b/packages/icons/src/20/subscript-icon.svg
similarity index 100%
rename from packages/icons/src/20/subscript.svg
rename to packages/icons/src/20/subscript-icon.svg
diff --git a/packages/icons/src/20/superscript.svg b/packages/icons/src/20/superscript-icon.svg
similarity index 100%
rename from packages/icons/src/20/superscript.svg
rename to packages/icons/src/20/superscript-icon.svg
diff --git a/packages/icons/src/20/swap.svg b/packages/icons/src/20/swap-icon.svg
similarity index 100%
rename from packages/icons/src/20/swap.svg
rename to packages/icons/src/20/swap-icon.svg
diff --git a/packages/icons/src/20/syncing.svg b/packages/icons/src/20/syncing-icon.svg
similarity index 100%
rename from packages/icons/src/20/syncing.svg
rename to packages/icons/src/20/syncing-icon.svg
diff --git a/packages/icons/src/20/toggle.svg b/packages/icons/src/20/toggle-icon.svg
similarity index 100%
rename from packages/icons/src/20/toggle.svg
rename to packages/icons/src/20/toggle-icon.svg
diff --git a/packages/icons/src/20/token.svg b/packages/icons/src/20/token-icon.svg
similarity index 100%
rename from packages/icons/src/20/token.svg
rename to packages/icons/src/20/token-icon.svg
diff --git a/packages/icons/src/20/unblock.svg b/packages/icons/src/20/unblock-icon.svg
similarity index 100%
rename from packages/icons/src/20/unblock.svg
rename to packages/icons/src/20/unblock-icon.svg
diff --git a/packages/icons/src/20/underline.svg b/packages/icons/src/20/underline-icon.svg
similarity index 100%
rename from packages/icons/src/20/underline.svg
rename to packages/icons/src/20/underline-icon.svg
diff --git a/packages/icons/src/20/unlocked.svg b/packages/icons/src/20/unlocked-icon.svg
similarity index 100%
rename from packages/icons/src/20/unlocked.svg
rename to packages/icons/src/20/unlocked-icon.svg
diff --git a/packages/icons/src/20/untrustworthy.svg b/packages/icons/src/20/untrustworthy-icon.svg
similarity index 100%
rename from packages/icons/src/20/untrustworthy.svg
rename to packages/icons/src/20/untrustworthy-icon.svg
diff --git a/packages/icons/src/20/up-to-date.svg b/packages/icons/src/20/up-to-date-icon.svg
similarity index 100%
rename from packages/icons/src/20/up-to-date.svg
rename to packages/icons/src/20/up-to-date-icon.svg
diff --git a/packages/icons/src/20/verified.svg b/packages/icons/src/20/verified-icon.svg
similarity index 100%
rename from packages/icons/src/20/verified.svg
rename to packages/icons/src/20/verified-icon.svg
diff --git a/packages/icons/src/20/video.svg b/packages/icons/src/20/video-icon.svg
similarity index 100%
rename from packages/icons/src/20/video.svg
rename to packages/icons/src/20/video-icon.svg
diff --git a/packages/icons/src/20/wallet.svg b/packages/icons/src/20/wallet-icon.svg
similarity index 100%
rename from packages/icons/src/20/wallet.svg
rename to packages/icons/src/20/wallet-icon.svg
diff --git a/packages/icons/src/20/warning.svg b/packages/icons/src/20/warning-icon.svg
similarity index 100%
rename from packages/icons/src/20/warning.svg
rename to packages/icons/src/20/warning-icon.svg
diff --git a/packages/icons/src/20/world.svg b/packages/icons/src/20/world-icon.svg
similarity index 100%
rename from packages/icons/src/20/world.svg
rename to packages/icons/src/20/world-icon.svg
diff --git a/packages/icons/src/audio-icon.tsx b/packages/icons/src/audio-icon.tsx
deleted file mode 100644
index 166d5416..00000000
--- a/packages/icons/src/audio-icon.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { memo } from 'react'
-
-import { Path, Svg } from 'react-native-svg'
-
-import { themed } from './themed'
-
-import type { IconProps } from './types'
-
-function Icon(props: IconProps) {
-  const { color, size = 20, ...rest } = props
-
-  return (
-    <Svg
-      width={size}
-      height={size}
-      viewBox={`0 0 ${size} ${size}`}
-      fill="none"
-      {...rest}
-    >
-      <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10 2.35A3.65 3.65 0 0 0 6.35 6v3a3.65 3.65 0 0 0 7.3 0V6A3.65 3.65 0 0 0 10 2.35ZM7.65 6a2.35 2.35 0 1 1 4.7 0v3a2.35 2.35 0 0 1-4.7 0V6Zm-2.5 1.5V9a4.85 4.85 0 1 0 9.7 0V7.5h1.3V9a6.15 6.15 0 0 1-5.5 6.116v1.234H12v1.3H8v-1.3h1.35v-1.234A6.15 6.15 0 0 1 3.85 9V7.5h1.3Z"
-        fill={color}
-      />
-    </Svg>
-  )
-}
-
-export const AudioIcon = memo<IconProps>(themed(Icon))
diff --git a/packages/icons/src/chevron-icon.tsx b/packages/icons/src/chevron-icon.tsx
deleted file mode 100644
index 9945d372..00000000
--- a/packages/icons/src/chevron-icon.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { memo } from 'react'
-
-import { themed } from '@status-im/icons/src/themed'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from './types'
-
-function Icon(props: IconProps) {
-  const { color, size = 16, ...otherProps } = props
-
-  return (
-    <Svg
-      width={size}
-      height={size}
-      viewBox={`0 0 ${size} ${size}`}
-      fill="none"
-      {...otherProps}
-    >
-      <Path d="M8 14L12 10L8 6" stroke={`${color}`} strokeWidth="1.3" />
-    </Svg>
-  )
-}
-
-export const ChevronIcon = memo<IconProps>(themed(Icon))
diff --git a/packages/icons/src/format-icon.tsx b/packages/icons/src/format-icon.tsx
deleted file mode 100644
index 206db0b1..00000000
--- a/packages/icons/src/format-icon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { memo } from 'react'
-
-import { ClipPath, Defs, G, Path, Svg } from 'react-native-svg'
-
-import { themed } from './themed'
-
-import type { IconProps } from './types'
-
-function Icon(props: IconProps) {
-  const { color, size = 20, ...rest } = props
-
-  return (
-    <Svg
-      width={size}
-      height={size}
-      viewBox={`0 0 ${size} ${size}`}
-      fill="none"
-      {...rest}
-    >
-      <G clipPath="url(#format-icon-a)" fill={color}>
-        <Path d="M4.343 14.047a.858.858 0 1 1-1.622-.558l2.575-7.314a1.493 1.493 0 0 1 2.817 0l2.578 7.314a.858.858 0 1 1-1.621.559L6.753 7.15a.051.051 0 0 0-.098 0l-2.312 6.896Zm-.137-2.434c0-.38.308-.688.688-.688h3.61a.688.688 0 0 1 0 1.376h-3.61a.688.688 0 0 1-.688-.688ZM13.82 14.823c-.449 0-.857-.085-1.223-.254a2.1 2.1 0 0 1-.872-.744c-.216-.326-.324-.72-.324-1.181 0-.407.08-.736.24-.988.16-.256.374-.456.642-.6.268-.145.563-.253.886-.324.327-.073.654-.132.984-.175.43-.055.78-.097 1.048-.125.27-.03.467-.081.59-.152.127-.07.19-.194.19-.37v-.036c0-.456-.125-.81-.374-1.062-.246-.252-.62-.379-1.122-.379-.52 0-.928.114-1.223.342-.13.1-.244.204-.34.311-.193.213-.49.344-.76.248-.303-.108-.457-.453-.275-.717.133-.192.285-.355.456-.488.311-.243.65-.413 1.016-.508.37-.099.732-.148 1.09-.148.227 0 .489.028.784.083.299.053.586.162.863.328.28.166.513.417.697.752.185.336.277.785.277 1.349v4.127c0 .3-.244.544-.544.544h-.065a.48.48 0 0 1-.48-.48v-.446a.034.034 0 0 0-.034-.034.035.035 0 0 0-.03.02 1.96 1.96 0 0 1-.36.474 2.131 2.131 0 0 1-.689.448c-.286.123-.635.185-1.048.185Zm.167-.98c.43 0 .794-.084 1.09-.253a1.729 1.729 0 0 0 .904-1.5v-.653c0-.117-.193-.225-.305-.192a5.124 5.124 0 0 1-.535.115 24.109 24.109 0 0 1-1.044.139 4.158 4.158 0 0 0-.794.18c-.243.08-.44.201-.59.364-.148.16-.222.379-.222.656 0 .379.14.665.42.859.283.19.642.286 1.076.286Z" />
-      </G>
-      <Defs>
-        <ClipPath id="format-icon-a">
-          <Path d="M0 0h20v20H0z" />
-        </ClipPath>
-      </Defs>
-    </Svg>
-  )
-}
-
-export const FormatIcon = memo<IconProps>(themed(Icon))
diff --git a/packages/icons/src/group-icon.tsx b/packages/icons/src/group-icon.tsx
deleted file mode 100644
index 8592a425..00000000
--- a/packages/icons/src/group-icon.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { memo } from 'react'
-
-import { themed } from '@status-im/icons/src/themed'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from './types'
-
-function Icon(props: IconProps) {
-  const { color, size = 16, ...otherProps } = props
-
-  return (
-    <Svg
-      width={size}
-      height={size}
-      viewBox={`0 0 ${size} ${size}`}
-      fill="none"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...otherProps}
-    >
-      <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4.6 5a1.9 1.9 0 1 1 3.8 0 1.9 1.9 0 0 1-3.8 0Zm1.9-3.1a3.1 3.1 0 1 0 0 6.2 3.1 3.1 0 0 0 0-6.2ZM5 8.9a3.6 3.6 0 0 0-3.6 3.6A1.6 1.6 0 0 0 3 14.1h6a1.6 1.6 0 0 0 1.6-1.6A3.6 3.6 0 0 0 7 8.9H5Zm-2.4 3.6A2.4 2.4 0 0 1 5 10.1h2a2.4 2.4 0 0 1 2.4 2.4.4.4 0 0 1-.4.4H3a.4.4 0 0 1-.4-.4Z"
-        fill={color}
-      />
-      <Path
-        d="M10 3.1a1.9 1.9 0 0 1 0 3.8v1.2a3.1 3.1 0 0 0 0-6.2v1.2ZM11 10.1h.5a2.4 2.4 0 0 1 2.4 2.4.4.4 0 0 1-.4.4h-2v1.2h2a1.6 1.6 0 0 0 1.6-1.6 3.6 3.6 0 0 0-3.6-3.6H11v1.2Z"
-        fill={color}
-      />
-    </Svg>
-  )
-}
-
-export const GroupIcon = memo<IconProps>(themed(Icon))
diff --git a/packages/icons/src/image-icon.tsx b/packages/icons/src/image-icon.tsx
deleted file mode 100644
index 7c0cf2f3..00000000
--- a/packages/icons/src/image-icon.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { memo } from 'react'
-
-import { Path, Svg } from 'react-native-svg'
-
-import { themed } from './themed'
-
-import type { IconProps } from './types'
-
-function Icon(props: IconProps) {
-  const { color, size = 20, ...rest } = props
-
-  return (
-    <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} {...rest}>
-      <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M9.9 2.85h-.029c-1.096 0-1.958 0-2.651.057-.707.057-1.296.177-1.831.45a4.65 4.65 0 0 0-2.032 2.032c-.273.535-.393 1.124-.45 1.83-.057.694-.057 1.556-.057 2.652v.258c0 1.096 0 1.958.057 2.651.057.707.177 1.296.45 1.831a4.65 4.65 0 0 0 2.032 2.032c.535.273 1.124.393 1.83.45.694.057 1.556.057 2.652.057h.258c1.096 0 1.958 0 2.651-.057.707-.057 1.296-.177 1.831-.45a4.65 4.65 0 0 0 2.032-2.032c.273-.535.393-1.124.45-1.83.057-.694.057-1.556.057-2.652V9.87c0-1.096 0-1.958-.057-2.651-.057-.707-.177-1.296-.45-1.831a4.65 4.65 0 0 0-2.032-2.032c-.535-.273-1.124-.393-1.83-.45-.694-.057-1.556-.057-2.652-.057H9.9ZM5.98 4.515c.32-.163.719-.261 1.346-.313.634-.051 1.443-.052 2.574-.052h.2c1.13 0 1.94 0 2.574.052.627.052 1.026.15 1.347.313a3.35 3.35 0 0 1 1.464 1.464c.163.321.261.72.313 1.347.052.634.052 1.443.052 2.574v.2c0 1.13 0 1.94-.052 2.574a8.05 8.05 0 0 1-.024.243 5.089 5.089 0 0 0-2.754-.549 5.197 5.197 0 0 0-2.284.763 8.646 8.646 0 0 0-6.58-4.703c.007-.424.02-.785.046-1.102.052-.627.15-1.026.313-1.347A3.35 3.35 0 0 1 5.98 4.515Zm5.256 9.841c.155.483.268.98.336 1.487.424-.006.785-.02 1.102-.045.627-.052 1.026-.15 1.347-.313a3.35 3.35 0 0 0 1.372-1.296 3.818 3.818 0 0 0-2.263-.525 3.936 3.936 0 0 0-1.894.692Zm-3.039-2.553a7.35 7.35 0 0 1 2.063 4.047H9.9c-1.13 0-1.94 0-2.574-.052-.627-.052-1.026-.15-1.347-.313a3.35 3.35 0 0 1-1.464-1.464c-.163-.321-.261-.72-.313-1.347-.051-.634-.052-1.443-.052-2.574v-.36a7.35 7.35 0 0 1 4.047 2.063ZM11.15 8a.85.85 0 1 1 1.7 0 .85.85 0 0 1-1.7 0ZM12 5.85a2.15 2.15 0 1 0 0 4.3 2.15 2.15 0 0 0 0-4.3Z"
-        fill={color}
-      />
-    </Svg>
-  )
-}
-
-export const ImageIcon = memo<IconProps>(themed(Icon))
diff --git a/packages/icons/src/muted-icon.tsx b/packages/icons/src/muted-icon.tsx
deleted file mode 100644
index 2158ffc3..00000000
--- a/packages/icons/src/muted-icon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { memo } from 'react'
-
-import { themed } from '@status-im/icons/src/themed'
-import { Path, Svg } from 'react-native-svg'
-
-import type { IconProps } from './types'
-
-function Icon(props: IconProps) {
-  const { color, size = 16, ...otherProps } = props
-
-  return (
-    <Svg
-      width={size}
-      height={size}
-      viewBox={`0 0 ${size} ${size}`}
-      fill="none"
-      {...otherProps}
-    >
-      <Path
-        d="M5.655 4.735A5.15 5.15 0 0 1 15.15 7.5v.75a3.1 3.1 0 0 0 .62 1.86l.45.6a2.15 2.15 0 0 1-1.212 3.38l2.523 2.523-.92.919-3.38-3.382H5.5a2.15 2.15 0 0 1-1.72-3.44l.45-.6a3.1 3.1 0 0 0 .62-1.86V7.5c0-.524.079-1.03.224-1.507L2.471 3.39l.919-.92 2.265 2.265Zm.517 2.356a3.894 3.894 0 0 0-.022.409v.75a4.4 4.4 0 0 1-.88 2.64l-.45.6a.85.85 0 0 0 .68 1.36h6.431l-5.76-5.76Zm7.598 5.759L6.604 5.685A3.85 3.85 0 0 1 13.85 7.5v.75a4.4 4.4 0 0 0 .88 2.64l.45.6a.85.85 0 0 1-.68 1.36h-.73Zm-2.373 4.522a3.649 3.649 0 0 1-3.978-.791l.92-.92a2.35 2.35 0 0 0 3.323 0l.919.92a3.65 3.65 0 0 1-1.184.791Z"
-        fill={`${color}`}
-        fillRule="evenodd"
-        clipRule="evenodd"
-      />
-    </Svg>
-  )
-}
-
-export const MutedIcon = memo<IconProps>(themed(Icon))
diff --git a/packages/icons/src/reaction-icon.tsx b/packages/icons/src/reaction-icon.tsx
deleted file mode 100644
index 9f972b7d..00000000
--- a/packages/icons/src/reaction-icon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { memo } from 'react'
-
-import { Circle, Path, Svg } from 'react-native-svg'
-
-import { themed } from './themed'
-
-import type { IconProps } from './types'
-
-export function Icon(props: IconProps) {
-  const { color = 'currentColor', size = 20, ...rest } = props
-
-  return (
-    <Svg
-      width={size}
-      height={size}
-      viewBox={`0 0 ${size} ${size}`}
-      fill="none"
-      {...rest}
-    >
-      <Circle cx="10" cy="10" r="6.75" stroke={color} strokeWidth="1.3" />
-      <Path
-        d="M7.525 12a3.5 3.5 0 0 0 4.95 0"
-        stroke={color}
-        strokeWidth="1.3"
-      />
-      <Circle cx="8" cy="8.5" r="1" fill={color} />
-      <Circle cx="12" cy="8.5" r="1" fill={color} />
-    </Svg>
-  )
-}
-
-export const ReactionIcon = memo<IconProps>(themed(Icon))
diff --git a/packages/icons/src/reactions/angry.svg b/packages/icons/src/reactions/angry-icon.svg
similarity index 100%
rename from packages/icons/src/reactions/angry.svg
rename to packages/icons/src/reactions/angry-icon.svg
diff --git a/packages/icons/src/reactions/laugh.svg b/packages/icons/src/reactions/laugh-icon.svg
similarity index 100%
rename from packages/icons/src/reactions/laugh.svg
rename to packages/icons/src/reactions/laugh-icon.svg
diff --git a/packages/icons/src/reactions/love.svg b/packages/icons/src/reactions/love-icon.svg
similarity index 100%
rename from packages/icons/src/reactions/love.svg
rename to packages/icons/src/reactions/love-icon.svg
diff --git a/packages/icons/src/reactions/sad.svg b/packages/icons/src/reactions/sad-icon.svg
similarity index 100%
rename from packages/icons/src/reactions/sad.svg
rename to packages/icons/src/reactions/sad-icon.svg
diff --git a/packages/icons/src/reactions/thumbs-down.svg b/packages/icons/src/reactions/thumbs-down-icon.svg
similarity index 100%
rename from packages/icons/src/reactions/thumbs-down.svg
rename to packages/icons/src/reactions/thumbs-down-icon.svg
diff --git a/packages/icons/src/reactions/thumbs-up.svg b/packages/icons/src/reactions/thumbs-up-icon.svg
similarity index 100%
rename from packages/icons/src/reactions/thumbs-up.svg
rename to packages/icons/src/reactions/thumbs-up-icon.svg
diff --git a/packages/icons/src/themed.tsx b/packages/icons/src/themed.tsx
deleted file mode 100644
index b1a1e9c0..00000000
--- a/packages/icons/src/themed.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useCurrentColor } from 'tamagui'
-
-import type { IconProps } from './types'
-import type React from 'react'
-
-export function themed(Component: React.ElementType) {
-  const useWrapped = (props: IconProps) => {
-    const { size, color: colorToken = '$neutral-100', ...rest } = props
-
-    const color = useCurrentColor(colorToken)
-
-    return <Component {...rest} color={color} size={size} />
-  }
-  return useWrapped
-}