diff --git a/packages/components/src/accordion/accordion.tsx b/packages/components/src/accordion/accordion.tsx
index e8a73067..e1fd7f88 100644
--- a/packages/components/src/accordion/accordion.tsx
+++ b/packages/components/src/accordion/accordion.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { ChevronIcon } from '@status-im/icons'
+import { ChevronDown } from '@status-im/icons/20'
 import { Stack } from '@tamagui/core'
 import { AnimatePresence } from 'tamagui'
 
@@ -58,7 +58,7 @@ const Accordion = ({
                   },
                 ]}
               >
-                <ChevronIcon color="$neutral-50" size={16} />
+                <ChevronDown color="$neutral-50" />
               </Stack>
               <Paragraph
                 marginLeft={4}
diff --git a/packages/components/src/accordion/accordionItem.tsx b/packages/components/src/accordion/accordionItem.tsx
index b27db216..0b81b9ee 100644
--- a/packages/components/src/accordion/accordionItem.tsx
+++ b/packages/components/src/accordion/accordionItem.tsx
@@ -1,4 +1,4 @@
-import { MutedIcon } from '@status-im/icons'
+import { Muted } from '@status-im/icons/20'
 import { Stack } from '@tamagui/core'
 
 import { Label, Paragraph } from '../typography'
@@ -108,9 +108,7 @@ const AccordionItem = ({
               />
             </Stack>
           )}
-          {channelStatus === 'muted' && (
-            <MutedIcon size={20} color="$neutral-40" />
-          )}
+          {channelStatus === 'muted' && <Muted color="$neutral-40" />}
         </Stack>
       )}
     </Stack>
diff --git a/packages/components/src/composer/composer.tsx b/packages/components/src/composer/composer.tsx
index 45cb8b8b..8f2b99c7 100644
--- a/packages/components/src/composer/composer.tsx
+++ b/packages/components/src/composer/composer.tsx
@@ -1,9 +1,4 @@
-import {
-  AudioIcon,
-  FormatIcon,
-  ImageIcon,
-  ReactionIcon,
-} from '@status-im/icons'
+import { Audio, Format, Image, Reaction } from '@status-im/icons/20'
 import { Stack, XStack, YStack } from 'tamagui'
 
 import { IconButton } from '../icon-button'
@@ -39,11 +34,11 @@ const Composer = (props: BaseProps) => {
       </YStack>
       <XStack alignItems="center" justifyContent="space-between" pt={8}>
         <Stack space={12} flexDirection="row">
-          <IconButton noBackground icon={<ImageIcon />} />
-          <IconButton noBackground icon={<ReactionIcon />} />
-          <IconButton noBackground icon={<FormatIcon />} />
+          <IconButton noBackground icon={<Image />} />
+          <IconButton noBackground icon={<Reaction />} />
+          <IconButton noBackground icon={<Format />} />
         </Stack>
-        <IconButton noBackground icon={<AudioIcon />} />
+        <IconButton noBackground icon={<Audio />} />
       </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 cd5ee552..6fa7028e 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 { OptionsIcon } from '@status-im/icons'
+import { Options } 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: <OptionsIcon />,
+    icon: <Options />,
   },
 }
 
diff --git a/packages/components/src/icons/icons.stories.tsx b/packages/components/src/icons/icons.stories.tsx
index d2c18596..3f8f5b24 100644
--- a/packages/components/src/icons/icons.stories.tsx
+++ b/packages/components/src/icons/icons.stories.tsx
@@ -1,10 +1,13 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import * as icons from '@status-im/icons'
+import * as icons12 from '@status-im/icons/12'
+import * as icons16 from '@status-im/icons/16'
+import * as icons20 from '@status-im/icons/20'
+import * as reactions from '@status-im/icons/reactions'
 
 import { Paragraph } from '../typography'
 
-import type { IconProps } from '@status-im/icons'
+import type { IconProps } from '@status-im/icons/types'
 import type { Meta, StoryObj } from '@storybook/react'
 import type React from 'react'
 
@@ -26,23 +29,76 @@ export const All: Story = {
   args: {},
   render: () => {
     return (
-      <div style={{ display: 'grid', gap: 12 }}>
-        {Object.keys(icons).map(name => {
-          // @ts-ignore
-          // eslint-disable-next-line import/namespace
-          const Icon = icons[name] as React.FunctionComponent<IconProps>
+      <>
+        <div style={{ display: 'grid', gap: 12 }}>
+          {Object.keys(icons12).map(name => {
+            // @ts-ignore
+            // eslint-disable-next-line import/namespace
+            const Icon = icons[name] as React.FunctionComponent<IconProps>
 
-          return (
-            <div
-              key={name}
-              style={{ display: 'flex', flexDirection: 'column' }}
-            >
-              <Icon color="$background" />
-              <Paragraph>{unpascal(name)}</Paragraph>
-            </div>
-          )
-        })}
-      </div>
+            return (
+              <div
+                key={name}
+                style={{ display: 'flex', flexDirection: 'column' }}
+              >
+                <Icon color="$background" />
+                <Paragraph>{unpascal(name)}</Paragraph>
+              </div>
+            )
+          })}
+        </div>
+        <div style={{ display: 'grid', gap: 12 }}>
+          {Object.keys(icons16).map(name => {
+            // @ts-ignore
+            // eslint-disable-next-line import/namespace
+            const Icon = icons[name] as React.FunctionComponent<IconProps>
+
+            return (
+              <div
+                key={name}
+                style={{ display: 'flex', flexDirection: 'column' }}
+              >
+                <Icon color="$background" />
+                <Paragraph>{unpascal(name)}</Paragraph>
+              </div>
+            )
+          })}
+        </div>
+        <div style={{ display: 'grid', gap: 12 }}>
+          {Object.keys(icons20).map(name => {
+            // @ts-ignore
+            // eslint-disable-next-line import/namespace
+            const Icon = icons[name] as React.FunctionComponent<IconProps>
+
+            return (
+              <div
+                key={name}
+                style={{ display: 'flex', flexDirection: 'column' }}
+              >
+                <Icon color="$background" />
+                <Paragraph>{unpascal(name)}</Paragraph>
+              </div>
+            )
+          })}
+        </div>
+        <div style={{ display: 'grid', gap: 12 }}>
+          {Object.keys(reactions).map(name => {
+            // @ts-ignore
+            // eslint-disable-next-line import/namespace
+            const Icon = icons[name] as React.FunctionComponent<IconProps>
+
+            return (
+              <div
+                key={name}
+                style={{ display: 'flex', flexDirection: 'column' }}
+              >
+                <Icon color="$background" />
+                <Paragraph>{unpascal(name)}</Paragraph>
+              </div>
+            )
+          })}
+        </div>
+      </>
     )
   },
 }