add suffix to icons

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}

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>

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

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

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

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

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

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

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

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>
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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'

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

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

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

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

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

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

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

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

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

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

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

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