use icons from @status-im

apps/vite/src/components/topbar.tsx

@@ -1,5 +1,5 @@
 import { Divider, IconButton, Paragraph } from '@status-im/components'
-import { LockedIcon, MembersIcon, OptionsIcon } from '@status-im/icons'
+import { Locked, Members, Options } from '@status-im/icons/20'
 import { Stack } from '@tamagui/core'
 
 type Props = {
@@ -24,7 +24,7 @@ export const Topbar = (props: Props) => {
         <Paragraph weight="semibold" marginRight={4}>
           # random
         </Paragraph>
-        <LockedIcon color="rgba(27, 39, 61, 0.4)" size={16} />
+        <Locked color="rgba(27, 39, 61, 0.4)" size={16} />
         <Divider height={16} />
         <Paragraph weight="medium" color="$neutral-80-opa-50" variant="smaller">
           Share random funny stuff with the community. Play nice.
@@ -33,11 +33,11 @@ export const Topbar = (props: Props) => {
 
       <Stack space={12} flexDirection="row">
         <IconButton
-          icon={<MembersIcon />}
+          icon={<Members />}
           selected={membersVisisble}
           onPress={onMembersPress}
         />
-        <IconButton icon={<OptionsIcon />} />
+        <IconButton icon={<Options />} />
       </Stack>
     </Stack>
   )

packages/components/src/author/author.tsx

@@ -1,3 +1,4 @@
+import { Contact, Untrustworthy, Verified } from '@status-im/icons/12'
 import { XStack } from 'tamagui'
 
 import { Paragraph } from '../typography'
@@ -20,59 +21,9 @@ const Author = (props: Props) => {
         <Paragraph weight="semibold" variant="smaller" color="$neutral-100">
           {name}
         </Paragraph>
-        {status === 'contact' && (
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 12 12"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle cx="6" cy="6" r="5" fill="#4360DF" />
-            <path
-              d="M9 9.5V9.5C8.37526 8.56288 7.3235 8 6.19722 8H5.80278C4.6765 8 3.62474 8.56288 3 9.5V9.5"
-              stroke="white"
-              strokeLinejoin="round"
-            />
-            <circle cx="6" cy="6" r="4.25" stroke="#4360DF" strokeWidth="1.5" />
-            <circle
-              cx="6"
-              cy="4.5"
-              r="1.5"
-              stroke="white"
-              strokeLinejoin="round"
-            />
-          </svg>
-        )}
-        {status === 'verified' && (
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 12 12"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle cx="6" cy="6" r="5" fill="#26A69A" />
-            <path
-              d="M4 6.3L5.33333 7.5L8 4.5"
-              stroke="white"
-              strokeWidth="1.1"
-            />
-          </svg>
-        )}
-        {status === 'untrustworthy' && (
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 12 12"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle cx="6" cy="6" r="5" fill="#E65F5C" />
-            <path d="M6 7L6 3" stroke="white" strokeWidth="1.1" />
-            <path d="M6 9L6 8" stroke="white" strokeWidth="1.1" />
-          </svg>
-        )}
+        {status === 'contact' && <Contact />}
+        {status === 'verified' && <Verified />}
+        {status === 'untrustworthy' && <Untrustworthy />}
       </XStack>
 
       {address && (

packages/components/src/sidebar/sidebar.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-import { GroupIcon } from '@status-im/icons'
+import { Group } 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}>
-            <GroupIcon color="$neutral-100" size={16} />
+            <Group color="$neutral-100" />
             <Paragraph ml={8}>{membersCount}</Paragraph>
           </Stack>
 
@@ -123,7 +123,6 @@ const Sidebar = (props: Props) => {
           </Accordion>
         ))}
         <Stack borderBottomColor="$neutral-10" borderBottomWidth={1} />
-        {/* <Button mt={20}>Request to join community</Button> */}
       </Stack>
     </Stack>
   )