From a5d820d58ca1eadb92424b5c9f7bc3b574edbbbd Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Fri, 18 Mar 2022 19:12:50 +0100
Subject: [PATCH] refactor(react): improve icons

---
 packages/status-react/src/icons/bell-icon.tsx | 21 ++++++++++
 .../src/icons/chevron-down-icon.tsx           | 21 ++++++++++
 .../src/icons/chevron-right-icon.tsx          | 21 ++++++++++
 .../status-react/src/icons/cross-icon.tsx     | 19 +++++++++
 packages/status-react/src/icons/dots-icon.tsx | 27 ++++++++++++
 packages/status-react/src/icons/edit-icon.tsx | 25 +++++++++++
 .../status-react/src/icons/emoji-icon.tsx     | 33 +++++++++++++++
 packages/status-react/src/icons/exit-icon.tsx | 23 +++++++++++
 packages/status-react/src/icons/gif-icon.tsx  | 33 +++++++++++++++
 .../status-react/src/icons/group-icon.tsx     | 25 +++++++++++
 .../status-react/src/icons/image-icon.tsx     | 27 ++++++++++++
 .../status-react/src/icons/pencil-icon.tsx    | 21 ++++++++++
 packages/status-react/src/icons/pin-icon.tsx  | 25 +++++++++++
 .../status-react/src/icons/reaction-icon.tsx  | 41 +++++++++++++++++++
 .../status-react/src/icons/reply-icon.tsx     | 19 +++++++++
 .../status-react/src/icons/sticker-icon.tsx   | 25 +++++++++++
 .../status-react/src/icons/trash-icon.tsx     | 21 ++++++++++
 17 files changed, 427 insertions(+)
 create mode 100644 packages/status-react/src/icons/bell-icon.tsx
 create mode 100644 packages/status-react/src/icons/chevron-down-icon.tsx
 create mode 100644 packages/status-react/src/icons/chevron-right-icon.tsx
 create mode 100644 packages/status-react/src/icons/cross-icon.tsx
 create mode 100644 packages/status-react/src/icons/dots-icon.tsx
 create mode 100644 packages/status-react/src/icons/edit-icon.tsx
 create mode 100644 packages/status-react/src/icons/emoji-icon.tsx
 create mode 100644 packages/status-react/src/icons/exit-icon.tsx
 create mode 100644 packages/status-react/src/icons/gif-icon.tsx
 create mode 100644 packages/status-react/src/icons/group-icon.tsx
 create mode 100644 packages/status-react/src/icons/image-icon.tsx
 create mode 100644 packages/status-react/src/icons/pencil-icon.tsx
 create mode 100644 packages/status-react/src/icons/pin-icon.tsx
 create mode 100644 packages/status-react/src/icons/reaction-icon.tsx
 create mode 100644 packages/status-react/src/icons/reply-icon.tsx
 create mode 100644 packages/status-react/src/icons/sticker-icon.tsx
 create mode 100644 packages/status-react/src/icons/trash-icon.tsx

diff --git a/packages/status-react/src/icons/bell-icon.tsx b/packages/status-react/src/icons/bell-icon.tsx
new file mode 100644
index 00000000..57d2752e
--- /dev/null
+++ b/packages/status-react/src/icons/bell-icon.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+export const BellIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="18"
+      height="21"
+      viewBox="0 0 18 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.2815 17C11.9452 17 11.7036 17.3279 11.7349 17.6628C11.7449 17.7703 11.7504 17.8827 11.7504 18C11.7504 19.3889 10.5441 20.75 9.00041 20.75C7.45677 20.75 6.25041 19.3889 6.25041 18C6.25041 17.8827 6.25591 17.7703 6.26596 17.6628C6.29725 17.3279 6.05564 17 5.71934 17H2.52151C0.785229 17 -0.126317 14.9394 1.04163 13.6547L2.21849 12.3601C2.72921 11.7983 3.06949 11.1028 3.19958 10.3548L4.31505 3.94085C4.71121 1.66293 6.6883 0 9.00041 0C11.3125 0 13.2896 1.66293 13.6858 3.94085L14.8012 10.3548C14.9313 11.1028 15.2716 11.7983 15.7823 12.3601L16.9592 13.6547C18.1271 14.9394 17.2156 17 15.4793 17H12.2815ZM8.03273 17.0283L8.03176 17.0293L8.03951 17.0214L8.04195 17.0188C8.04319 17.0175 8.04382 17.0168 8.04389 17.0167C8.04428 17.0163 8.04393 17.0167 8.04389 17.0167L8.04195 17.0188C8.05295 17.0073 8.06855 17 8.08446 17H9.91637C9.93228 17 9.94735 17.0068 9.95835 17.0183C9.96125 17.0217 9.96836 17.0302 9.97854 17.0438C10.0015 17.0744 10.0394 17.13 10.0796 17.2104C10.1587 17.3687 10.2504 17.6296 10.2504 18C10.2504 18.6111 9.66591 19.25 9.00041 19.25C8.33491 19.25 7.75041 18.6111 7.75041 18C7.75041 17.6296 7.84209 17.3687 7.92123 17.2104C7.96142 17.13 7.9993 17.0744 8.02229 17.0438C8.03246 17.0302 8.03906 17.0222 8.04195 17.0188L8.03951 17.0214L8.03766 17.0233L8.03454 17.0265L8.03273 17.0283ZM2.15154 14.6637L3.3284 13.3691C4.03064 12.5967 4.49853 11.6403 4.6774 10.6118L5.79286 4.19786C6.06407 2.63842 7.41757 1.5 9.00041 1.5C10.5833 1.5 11.9368 2.63842 12.208 4.19786L13.3234 10.6118C13.5023 11.6403 13.9702 12.5967 14.6724 13.3691L15.8493 14.6637C16.1413 14.9849 15.9134 15.5 15.4793 15.5H2.52151C2.08744 15.5 1.85956 14.9849 2.15154 14.6637Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/chevron-down-icon.tsx b/packages/status-react/src/icons/chevron-down-icon.tsx
new file mode 100644
index 00000000..a01397c1
--- /dev/null
+++ b/packages/status-react/src/icons/chevron-down-icon.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+export const ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="10"
+      height="7"
+      viewBox="0 0 10 7"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.587087 1.08709C0.953204 0.720971 1.5468 0.720971 1.91291 1.08709L4.64645 3.82062C4.84171 4.01588 5.15829 4.01588 5.35355 3.82062L8.08709 1.08709C8.4532 0.720971 9.0468 0.720971 9.41291 1.08709C9.77903 1.4532 9.77903 2.0468 9.41291 2.41291L5.66291 6.16291C5.2968 6.52903 4.7032 6.52903 4.33709 6.16291L0.587087 2.41291C0.220971 2.0468 0.220971 1.4532 0.587087 1.08709Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/chevron-right-icon.tsx b/packages/status-react/src/icons/chevron-right-icon.tsx
new file mode 100644
index 00000000..9094fede
--- /dev/null
+++ b/packages/status-react/src/icons/chevron-right-icon.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+export const ChevronRightIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="6"
+      height="10"
+      viewBox="0 0 6 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.312951 0.646447C0.508213 0.451184 0.824795 0.451184 1.02006 0.646447L4.78435 4.41074C5.10979 4.73618 5.10979 5.26382 4.78435 5.58926L1.02006 9.35355C0.824795 9.54882 0.508213 9.54882 0.312951 9.35355C0.117688 9.15829 0.117688 8.84171 0.312951 8.64645L3.72369 5.2357C3.85387 5.10553 3.85387 4.89447 3.72369 4.7643L0.312951 1.35355C0.117688 1.15829 0.117688 0.841709 0.312951 0.646447Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/cross-icon.tsx b/packages/status-react/src/icons/cross-icon.tsx
new file mode 100644
index 00000000..7ddbd567
--- /dev/null
+++ b/packages/status-react/src/icons/cross-icon.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+export const CrossIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M10.4697 11.5303C10.7626 11.8232 11.2374 11.8232 11.5303 11.5303C11.8232 11.2374 11.8232 10.7626 11.5303 10.4697L7.41421 6.35355C7.21895 6.15829 7.21895 5.84171 7.41421 5.64645L11.5303 1.53033C11.8232 1.23744 11.8232 0.762564 11.5303 0.46967C11.2374 0.176777 10.7626 0.176777 10.4697 0.46967L6.35355 4.58579C6.15829 4.78105 5.84171 4.78105 5.64645 4.58579L1.53033 0.46967C1.23744 0.176777 0.762563 0.176777 0.46967 0.46967C0.176777 0.762563 0.176777 1.23744 0.46967 1.53033L4.58579 5.64645C4.78105 5.84171 4.78105 6.15829 4.58579 6.35355L0.46967 10.4697C0.176777 10.7626 0.176777 11.2374 0.46967 11.5303C0.762563 11.8232 1.23744 11.8232 1.53033 11.5303L5.64645 7.41421C5.84171 7.21895 6.15829 7.21895 6.35355 7.41421L10.4697 11.5303Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/dots-icon.tsx b/packages/status-react/src/icons/dots-icon.tsx
new file mode 100644
index 00000000..f50d8a7d
--- /dev/null
+++ b/packages/status-react/src/icons/dots-icon.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+export const DotsIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="18"
+      height="4"
+      viewBox="0 0 18 4"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11 2C11 3.10457 10.1046 4 9 4C7.89543 4 7 3.10457 7 2C7 0.895431 7.89543 0 9 0C10.1046 0 11 0.895431 11 2Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16 4C17.1046 4 18 3.10457 18 2C18 0.895431 17.1046 0 16 0C14.8954 0 14 0.895431 14 2C14 3.10457 14.8954 4 16 4Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/edit-icon.tsx b/packages/status-react/src/icons/edit-icon.tsx
new file mode 100644
index 00000000..95a59f08
--- /dev/null
+++ b/packages/status-react/src/icons/edit-icon.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+export const EditIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width={21}
+      height={21}
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M9.25 2.5a.75.75 0 000-1.5H4a4 4 0 00-4 4v12a4 4 0 004 4h12a4 4 0 004-4v-5.25a.75.75 0 00-1.5 0V17a2.5 2.5 0 01-2.5 2.5H4A2.5 2.5 0 011.5 17V5A2.5 2.5 0 014 2.5h5.25z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.28 1.72a2.518 2.518 0 00-3.56 0l-8.384 8.383c-.33.33-.571.74-.7 1.19l-.857 3.001a.75.75 0 00.927.927l3.002-.857a2.75 2.75 0 001.189-.7l8.383-8.383a2.518 2.518 0 000-3.561zm-2.5 1.06a1.018 1.018 0 011.44 1.44l-8.384 8.383c-.15.15-.336.26-.54.318a.984.984 0 01-1.217-1.216 1.25 1.25 0 01.318-.54L16.78 2.78z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/emoji-icon.tsx b/packages/status-react/src/icons/emoji-icon.tsx
new file mode 100644
index 00000000..e80c8f55
--- /dev/null
+++ b/packages/status-react/src/icons/emoji-icon.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+
+export const EmojiIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 18.5C14.6944 18.5 18.5 14.6944 18.5 10C18.5 5.30558 14.6944 1.5 10 1.5C5.30558 1.5 1.5 5.30558 1.5 10C1.5 14.6944 5.30558 18.5 10 18.5ZM10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.56858 13.1746C7.22903 12.9373 6.75712 12.9308 6.46422 13.2237C6.17133 13.5166 6.16876 13.996 6.49708 14.2485C7.46695 14.9946 8.68155 15.4381 9.99976 15.4381C11.318 15.4381 12.5326 14.9946 13.5024 14.2485C13.8308 13.996 13.8282 13.5166 13.5353 13.2237C13.2424 12.9308 12.7705 12.9373 12.4309 13.1746C11.742 13.6558 10.9039 13.9381 9.99976 13.9381C9.09565 13.9381 8.25747 13.6558 7.56858 13.1746Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15 8.5C15 9.32843 14.3284 10 13.5 10C12.6716 10 12 9.32843 12 8.5C12 7.67157 12.6716 7 13.5 7C14.3284 7 15 7.67157 15 8.5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8 8.5C8 9.32843 7.32843 10 6.5 10C5.67157 10 5 9.32843 5 8.5C5 7.67157 5.67157 7 6.5 7C7.32843 7 8 7.67157 8 8.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/exit-icon.tsx b/packages/status-react/src/icons/exit-icon.tsx
new file mode 100644
index 00000000..f3041f06
--- /dev/null
+++ b/packages/status-react/src/icons/exit-icon.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+export const ExitIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="20"
+      height="18"
+      viewBox="0 0 20 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M15.985 8.36367C16.363 8.36367 16.5523 7.9067 16.285 7.63944L14.7017 6.05607C14.4531 5.80755 14.4531 5.40463 14.7017 5.15611C14.9502 4.9076 15.3531 4.9076 15.6016 5.15611L18.9956 8.55005C19.2441 8.79857 19.2441 9.20149 18.9956 9.45001L15.6016 12.8439C15.3531 13.0925 14.9502 13.0925 14.7017 12.8439C14.4531 12.5954 14.4531 12.1925 14.7017 11.944L16.285 10.3606C16.5523 10.0934 16.363 9.63639 15.985 9.63639L7.51527 9.63639C7.16382 9.63639 6.87891 9.35148 6.87891 9.00003C6.87891 8.64858 7.16382 8.36367 7.51527 8.36367L15.985 8.36367Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.1218 3.90908C11.1218 2.73756 10.1721 1.78786 9.00059 1.78786H3.90968C2.73817 1.78786 1.78847 2.73756 1.78847 3.90908V14.0909C1.78847 15.2624 2.73817 16.2121 3.90968 16.2121H9.00059C10.1721 16.2121 11.1218 15.2624 11.1218 14.0909V11.3333C11.1218 10.9819 11.4067 10.697 11.7582 10.697C12.1096 10.697 12.3945 10.9819 12.3945 11.3333V14.0909C12.3945 15.9653 10.875 17.4848 9.00059 17.4848H3.90968C2.03526 17.4848 0.515744 15.9653 0.515744 14.0909V3.90908C0.515744 2.03466 2.03526 0.515137 3.90968 0.515137H9.00059C10.875 0.515137 12.3945 2.03466 12.3945 3.90908V6.66665C12.3945 7.01811 12.1096 7.30302 11.7582 7.30302C11.4067 7.30302 11.1218 7.01811 11.1218 6.66665V3.90908Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/gif-icon.tsx b/packages/status-react/src/icons/gif-icon.tsx
new file mode 100644
index 00000000..e4c942c3
--- /dev/null
+++ b/packages/status-react/src/icons/gif-icon.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+
+export const GifIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 1.5H4C2.61929 1.5 1.5 2.61929 1.5 4V16C1.5 17.3807 2.61929 18.5 4 18.5H16C17.3807 18.5 18.5 17.3807 18.5 16V4C18.5 2.61929 17.3807 1.5 16 1.5ZM4 0C1.79086 0 0 1.79086 0 4V16C0 18.2091 1.79086 20 4 20H16C18.2091 20 20 18.2091 20 16V4C20 1.79086 18.2091 0 16 0H4Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8.72261 11.4868V10.4133C8.72261 9.99528 8.38061 9.65328 7.96261 9.65328H6.22411C5.90111 9.65328 5.64461 9.90978 5.64461 10.2328C5.64461 10.5748 5.90111 10.8313 6.22411 10.8313H7.37361V11.5913C7.11711 11.8288 6.58511 12.0758 6.02461 12.0758C4.87511 12.0758 4.03911 11.1923 4.03911 9.99528C4.03911 8.79828 4.87511 7.91478 6.02461 7.91478C6.50911 7.91478 6.98411 8.12378 7.34511 8.47528C7.46861 8.59878 7.63961 8.66528 7.80111 8.66528C8.13361 8.66528 8.43761 8.38978 8.43761 8.05728C8.43761 7.91478 8.38061 7.76278 8.27611 7.64878C7.78211 7.11678 7.05061 6.71778 6.02461 6.71778C4.17211 6.71778 2.65211 7.99078 2.65211 9.99528C2.65211 11.9903 4.17211 13.2823 6.02461 13.2823C7.30711 13.2823 8.72261 12.6363 8.72261 11.4868Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.4392 12.5603V7.43978C11.4392 7.07878 11.1352 6.77478 10.7742 6.77478C10.3942 6.77478 10.0902 7.07878 10.0902 7.43978V12.5603C10.0902 12.9213 10.3942 13.2253 10.7552 13.2253C11.1352 13.2253 11.4392 12.9213 11.4392 12.5603Z"
+        fill="currentColor"
+      />
+      <path
+        d="M17.3479 7.43029C17.3479 7.09778 17.0819 6.83179 16.7684 6.83179H13.5669C13.1489 6.83179 12.8069 7.17379 12.8069 7.59179V12.5603C12.8069 12.9213 13.1109 13.2253 13.4719 13.2253C13.8519 13.2253 14.1559 12.9213 14.1559 12.5603V11.0463C14.1559 10.7701 14.3797 10.5463 14.6559 10.5463H16.2425C16.556 10.5463 16.822 10.2803 16.822 9.95728C16.822 9.62478 16.556 9.35879 16.2425 9.35879H14.6559C14.3797 9.35879 14.1559 9.13493 14.1559 8.85879V8.51929C14.1559 8.24314 14.3797 8.01929 14.6559 8.01929H16.7684C17.0819 8.01929 17.3479 7.75329 17.3479 7.43029Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/group-icon.tsx b/packages/status-react/src/icons/group-icon.tsx
new file mode 100644
index 00000000..b780b4c7
--- /dev/null
+++ b/packages/status-react/src/icons/group-icon.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+export const GroupIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="20"
+      height="19"
+      viewBox="0 0 20 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.2516 9.46557C12.4937 9.34326 12.7935 9.40699 12.9707 9.61232C13.7042 10.4621 14.7893 11 16 11C18.2091 11 20 9.20914 20 7C20 4.79086 18.2091 3 16 3C15.7062 3 15.4199 3.03167 15.1441 3.09177C14.8792 3.14951 14.6011 3.02089 14.4804 2.77808C13.6623 1.13156 11.9633 0 10 0C8.0367 0 6.33769 1.13156 5.51958 2.77808C5.39894 3.02089 5.12078 3.14952 4.85587 3.09177C4.58013 3.03167 4.29376 3 4 3C1.79086 3 0 4.79086 0 7C0 9.20914 1.79086 11 4 11C5.21068 11 6.29574 10.4621 7.02925 9.61231C7.20647 9.40699 7.50633 9.34325 7.74842 9.46556C8.42511 9.80742 9.19007 10 10 10C10.8099 10 11.5749 9.80743 12.2516 9.46557ZM13.5 5C13.5 6.933 11.933 8.5 10 8.5C8.067 8.5 6.5 6.933 6.5 5C6.5 3.067 8.067 1.5 10 1.5C11.933 1.5 13.5 3.067 13.5 5ZM14.0355 7.95264C13.912 8.12116 13.8848 8.34954 14.0116 8.51562C14.4684 9.11395 15.1891 9.5 16 9.5C17.3807 9.5 18.5 8.38071 18.5 7C18.5 5.61929 17.3807 4.5 16 4.5C15.7431 4.5 15.4953 4.53875 15.262 4.61071C15.0961 4.66188 15 4.82644 15 5C15 6.10444 14.6419 7.12524 14.0355 7.95264ZM4.73802 4.61072C4.50475 4.53875 4.2569 4.5 4 4.5C2.61929 4.5 1.5 5.61929 1.5 7C1.5 8.38071 2.61929 9.5 4 9.5C4.81088 9.5 5.53159 9.11394 5.98837 8.5156C6.11515 8.34953 6.08799 8.12115 5.96448 7.95262C5.35808 7.12523 5 6.10443 5 5C5 4.82644 4.90387 4.66189 4.73802 4.61072Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.14735 18.0368C3.53098 18.1327 3.91944 17.9141 4.08362 17.5543C5.1079 15.3099 7.37181 13.75 10 13.75C12.6684 13.75 14.9613 15.3579 15.9625 17.6577C16.1289 18.0398 16.5478 18.2663 16.9456 18.142C17.3386 18.0192 17.5622 17.6006 17.4061 17.2196C16.2119 14.3039 13.3458 12.25 10 12.25C6.70404 12.25 3.8736 14.2432 2.64834 17.0901C2.47629 17.4898 2.72515 17.9313 3.14735 18.0368Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/image-icon.tsx b/packages/status-react/src/icons/image-icon.tsx
new file mode 100644
index 00000000..143dc54a
--- /dev/null
+++ b/packages/status-react/src/icons/image-icon.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+export const ImageIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="20"
+      height="18"
+      viewBox="0 0 20 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.5 6.5C16.5 8.15685 15.1569 9.5 13.5 9.5C11.8431 9.5 10.5 8.15685 10.5 6.5C10.5 4.84315 11.8431 3.5 13.5 3.5C15.1569 3.5 16.5 4.84315 16.5 6.5ZM15 6.5C15 7.32843 14.3284 8 13.5 8C12.6716 8 12 7.32843 12 6.5C12 5.67157 12.6716 5 13.5 5C14.3284 5 15 5.67157 15 6.5Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 0C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H16C18.2091 18 20 16.2091 20 14V4C20 1.79086 18.2091 0 16 0H4ZM16 1.5H4C2.61929 1.5 1.5 2.61929 1.5 4V7.23223C1.5 7.67768 2.03857 7.90077 2.35355 7.58579L3.76256 6.17678C4.44598 5.49336 5.55402 5.49336 6.23744 6.17678L16.3181 16.2575C16.4372 16.3765 16.6094 16.4311 16.7695 16.3793C17.7737 16.0548 18.5 15.1122 18.5 14V4C18.5 2.61929 17.3807 1.5 16 1.5ZM1.53033 10.5303C1.51153 10.5491 1.5 10.5742 1.5 10.6008V14C1.5 15.3807 2.61929 16.5 4 16.5H13.2322C13.6777 16.5 13.9008 15.9614 13.5858 15.6464L5.17678 7.23744C5.07914 7.1398 4.92085 7.13981 4.82322 7.23744L1.53033 10.5303Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/pencil-icon.tsx b/packages/status-react/src/icons/pencil-icon.tsx
new file mode 100644
index 00000000..4bf16352
--- /dev/null
+++ b/packages/status-react/src/icons/pencil-icon.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+export const PencilIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.8384 0.975419C13.9944 -0.18061 15.8687 -0.180608 17.0247 0.975421C18.1807 2.13145 18.1807 4.00574 17.0247 5.16177L6.25231 15.9342C5.86073 16.3257 5.37581 16.6111 4.84333 16.7632L0.986328 17.8652C0.745833 17.9339 0.486992 17.8669 0.310134 17.69C0.133274 17.5131 0.0662017 17.2543 0.134914 17.0138L1.23692 13.1568C1.38905 12.6243 1.67438 12.1394 2.06596 11.7478L12.8384 0.975419ZM16.0507 1.9494C15.4326 1.33129 14.4305 1.33129 13.8123 1.9494L3.03994 12.7218C2.81388 12.9479 2.64916 13.2278 2.56134 13.5352C2.22946 14.6968 3.30336 15.7707 4.46493 15.4388C4.77232 15.351 5.05226 15.1862 5.27833 14.9602L16.0507 4.18779C16.6688 3.56967 16.6688 2.56751 16.0507 1.9494Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/pin-icon.tsx b/packages/status-react/src/icons/pin-icon.tsx
new file mode 100644
index 00000000..3aab7865
--- /dev/null
+++ b/packages/status-react/src/icons/pin-icon.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+export const PinIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="12"
+      height="19"
+      viewBox="0 0 12 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M8.6543 5.67717C8.6543 4.91778 8.06011 4.14118 7.32715 3.94259C6.59419 3.744 6 4.19862 6 4.95801C6 5.7174 6.59419 6.494 7.32715 6.69259C8.06011 6.89118 8.6543 6.43657 8.6543 5.67717Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 0.833008C2.96243 0.833008 0.5 3.29544 0.5 6.33301C0.5 8.9984 2.39598 11.221 4.91284 11.7256C5.13953 11.771 5.3125 11.964 5.3125 12.1952L5.3125 18.2497C5.3125 18.6294 5.6203 18.9372 6 18.9372C6.3797 18.9372 6.6875 18.6294 6.6875 18.2497L6.6875 12.1952C6.6875 11.964 6.86047 11.771 7.08716 11.7256C9.60402 11.221 11.5 8.9984 11.5 6.33301C11.5 3.29544 9.03757 0.833008 6 0.833008ZM1.875 6.33301C1.875 8.61118 3.72183 10.458 6 10.458C8.27817 10.458 10.125 8.61118 10.125 6.33301C10.125 4.05483 8.27817 2.20801 6 2.20801C3.72183 2.20801 1.875 4.05483 1.875 6.33301Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/reaction-icon.tsx b/packages/status-react/src/icons/reaction-icon.tsx
new file mode 100644
index 00000000..bdce9195
--- /dev/null
+++ b/packages/status-react/src/icons/reaction-icon.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+
+export const ReactionIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M17.3757 0C17.7554 0 18.0632 0.307804 18.0632 0.6875V2.42917C18.0632 2.73292 18.3095 2.97917 18.6132 2.97917H20.3122C20.6919 2.97917 20.9997 3.28697 20.9997 3.66667C20.9997 4.04636 20.6919 4.35417 20.3122 4.35417H18.6132C18.3095 4.35417 18.0632 4.60041 18.0632 4.90417V6.64583C18.0632 7.02553 17.7554 7.33333 17.3757 7.33333C16.996 7.33333 16.6882 7.02553 16.6882 6.64583V4.90417C16.6882 4.60041 16.442 4.35417 16.1382 4.35417H14.3516C13.9719 4.35417 13.6641 4.04636 13.6641 3.66667C13.6641 3.28697 13.9719 2.97917 14.3516 2.97917H16.1382C16.442 2.97917 16.6882 2.73292 16.6882 2.42917V0.6875C16.6882 0.307804 16.996 0 17.3757 0Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.091 2.7009C12.1859 2.40694 12.0501 2.05817 11.7469 1.99964C11.1813 1.89049 10.5971 1.83333 9.99967 1.83333C4.93706 1.83333 0.833008 5.93739 0.833008 11C0.833008 16.0626 4.93706 20.1667 9.99967 20.1667C15.0623 20.1667 19.1663 16.0626 19.1663 11C19.1663 10.4778 19.1227 9.96581 19.0388 9.46746C18.9854 9.1504 18.6156 9.01041 18.3126 9.11795C18.2542 9.13865 18.1949 9.15727 18.1347 9.17371C17.8598 9.24877 17.6552 9.51421 17.6989 9.79585C17.7597 10.1883 17.7913 10.5905 17.7913 11C17.7913 15.3032 14.3029 18.7917 9.99967 18.7917C5.69646 18.7917 2.20801 15.3032 2.20801 11C2.20801 6.69678 5.69646 3.20833 9.99967 3.20833C10.4758 3.20833 10.9419 3.25104 11.3945 3.33283C11.6886 3.38598 11.9706 3.16641 12.0415 2.87609C12.0559 2.81684 12.0725 2.75842 12.091 2.7009Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.403 12.2118C4.65348 11.9242 5.04637 11.7708 5.45419 11.835C6.27435 11.9641 7.82042 12.1429 10.0927 12.1429C12.365 12.1429 13.9111 11.9641 14.7312 11.835C15.139 11.7708 15.5319 11.9242 15.7824 12.2118C16.0416 12.5093 16.1427 12.9507 15.9525 13.3727C15.3715 14.6619 13.7525 17.1846 10.0927 17.1846C6.43289 17.1846 4.81387 14.6619 4.2329 13.3727C4.04271 12.9507 4.14383 12.5093 4.403 12.2118ZM6.62315 13.3648C6.24765 13.3289 5.98773 13.7257 6.22337 14.0203C6.94714 14.925 8.14921 15.8096 10.0927 15.8096C12.0362 15.8096 13.2383 14.925 13.962 14.0203C14.1977 13.7257 13.9378 13.3289 13.5623 13.3648C12.6745 13.4498 11.5179 13.5179 10.0927 13.5179C8.66749 13.5179 7.51095 13.4498 6.62315 13.3648Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.50323 6.45233C5.76116 6.14281 6.22116 6.101 6.53068 6.35892L9.03186 8.44324C9.26781 8.63987 9.35533 8.96322 9.25077 9.25201C9.14622 9.5408 8.87197 9.73318 8.56484 9.73318C7.40819 9.73318 5.7234 10.1077 4.78295 10.6957C4.44133 10.9093 3.99124 10.8055 3.77765 10.4639C3.56405 10.1223 3.66784 9.67217 4.00946 9.45857C4.65208 9.05678 5.49476 8.75255 6.34472 8.55308C6.51583 8.51292 6.5718 8.29242 6.43679 8.1799L5.59664 7.47977C5.28712 7.22185 5.2453 6.76184 5.50323 6.45233Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.4961 6.45233C14.2382 6.14281 13.7782 6.101 13.4687 6.35892L10.9675 8.44324C10.7315 8.63987 10.644 8.96322 10.7486 9.25201C10.8531 9.5408 11.1274 9.73318 11.4345 9.73318C12.5912 9.73318 14.2759 10.1077 15.2164 10.6957C15.558 10.9093 16.0081 10.8055 16.2217 10.4639C16.4353 10.1223 16.3315 9.67217 15.9899 9.45857C15.3473 9.05678 14.5046 8.75255 13.6546 8.55308C13.4835 8.51292 13.4275 8.29242 13.5626 8.1799L14.4027 7.47977C14.7122 7.22185 14.754 6.76184 14.4961 6.45233Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/reply-icon.tsx b/packages/status-react/src/icons/reply-icon.tsx
new file mode 100644
index 00000000..916b7808
--- /dev/null
+++ b/packages/status-react/src/icons/reply-icon.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+export const ReplyIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="16"
+      height="18"
+      viewBox="0 0 16 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M11.2358 9.43053C10.9673 9.16205 10.532 9.16205 10.2635 9.43053C9.99505 9.69902 9.99505 10.1343 10.2635 10.4028L11.9741 12.1134C12.2629 12.4021 12.0584 12.8958 11.6501 12.8958L7.99967 12.8958C4.83554 12.8958 2.27051 10.3308 2.27051 7.16667C2.27051 4.00254 4.83554 1.4375 7.99967 1.4375C8.37937 1.4375 8.68717 1.1297 8.68717 0.75C8.68717 0.370305 8.37937 0.0625 7.99967 0.0625C4.07615 0.0624998 0.895507 3.24315 0.895508 7.16667C0.895508 11.0902 4.07615 14.2708 7.99967 14.2708H11.6501C12.0584 14.2708 12.2629 14.7645 11.9741 15.0533L10.2635 16.7639C9.99505 17.0323 9.99505 17.4677 10.2635 17.7361C10.532 18.0046 10.9673 18.0046 11.2358 17.7361L14.9025 14.0695C15.171 13.801 15.171 13.3657 14.9025 13.0972L11.2358 9.43053Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/sticker-icon.tsx b/packages/status-react/src/icons/sticker-icon.tsx
new file mode 100644
index 00000000..ffedcb75
--- /dev/null
+++ b/packages/status-react/src/icons/sticker-icon.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+export const StickerIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.56858 13.4863C7.22903 13.2491 6.75712 13.2426 6.46422 13.5354C6.17133 13.8283 6.16876 14.3077 6.49708 14.5603C7.46695 15.3063 8.68155 15.7499 9.99976 15.7499C11.318 15.7499 12.5326 15.3063 13.5024 14.5603C13.8308 14.3077 13.8282 13.8283 13.5353 13.5354C13.2424 13.2426 12.7705 13.2491 12.4309 13.4863C11.742 13.9676 10.9039 14.2499 9.99976 14.2499C9.09565 14.2499 8.25747 13.9676 7.56858 13.4863Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.8645 11.6499C19.9401 11.1946 19.8959 10.7435 19.7602 10.3174C19.5838 9.76409 19.253 9.25286 18.8292 8.82907L11.1708 1.17069C10.747 0.746897 10.2358 0.416048 9.68247 0.239716C9.62921 0.222742 9.57555 0.2072 9.52155 0.193144C9.14354 0.0947561 8.7484 0.0692148 8.35001 0.135358C8.28899 0.145488 8.22816 0.156171 8.16753 0.1674C3.51984 1.02813 0 5.10295 0 9.99988C0 15.5227 4.47715 19.9999 10 19.9999C14.8969 19.9999 18.9717 16.48 19.8325 11.8324C19.8437 11.7717 19.8544 11.7109 19.8645 11.6499ZM1.5 9.99988C1.5 6.08625 4.14622 2.78816 7.74701 1.8013C7.87574 1.76602 8 1.8664 8 1.99988C8 7.52272 12.4772 11.9999 18 11.9999C18.1335 11.9999 18.2339 12.1241 18.1986 12.2529C17.2117 15.8537 13.9136 18.4999 10 18.4999C5.30558 18.4999 1.5 14.6943 1.5 9.99988ZM18 10.4999C18.1011 10.4999 18.1641 10.3935 18.1094 10.3085C18.0185 10.1673 17.9054 10.0266 17.7685 9.88973L10.1101 2.23135C9.97328 2.09448 9.83259 1.98135 9.69142 1.89052C9.60642 1.83582 9.5 1.89879 9.5 1.99988C9.5 6.6943 13.3056 10.4999 18 10.4999Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/packages/status-react/src/icons/trash-icon.tsx b/packages/status-react/src/icons/trash-icon.tsx
new file mode 100644
index 00000000..3d86cd18
--- /dev/null
+++ b/packages/status-react/src/icons/trash-icon.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+export const TrashIcon = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      width="18"
+      height="19"
+      viewBox="0 0 18 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.61012 0.0625002C5.52527 0.0625003 4.64583 0.941942 4.64583 2.02679C4.64583 2.58729 4.19146 3.04167 3.63095 3.04167H0.75C0.370304 3.04167 0.0625 3.34947 0.0625 3.72917C0.0625 4.10886 0.370304 4.41667 0.75 4.41667H1.4272C1.659 4.41667 1.85431 4.58973 1.8822 4.81985L3.10904 14.9412C3.33218 16.7821 4.89466 18.1667 6.74906 18.1667H11.2509C13.1053 18.1667 14.6678 16.7821 14.891 14.9412L16.1178 4.81985C16.1457 4.58973 16.341 4.41667 16.5728 4.41667H17.25C17.6297 4.41667 17.9375 4.10886 17.9375 3.72917C17.9375 3.34947 17.6297 3.04167 17.25 3.04167H14.369C13.8085 3.04167 13.3542 2.58729 13.3542 2.02679C13.3542 0.941941 12.4747 0.0625 11.3899 0.0625L6.61012 0.0625002ZM11.4831 3.04167C11.8189 3.04167 12.0464 2.68496 12.0011 2.35221C11.9867 2.2458 11.9792 2.13717 11.9792 2.02679C11.9792 1.70133 11.7153 1.4375 11.3899 1.4375L6.61012 1.4375C6.28467 1.4375 6.02083 1.70133 6.02083 2.02679C6.02083 2.13717 6.01335 2.2458 5.99886 2.35221C5.95356 2.68496 6.18111 3.04167 6.51694 3.04167L11.4831 3.04167ZM14.369 4.41667C14.5884 4.41667 14.7584 4.60848 14.732 4.82623L13.526 14.7758C13.3865 15.9263 12.4099 16.7917 11.2509 16.7917H6.74906C5.59006 16.7917 4.61351 15.9263 4.47405 14.7758L3.26804 4.82622C3.24165 4.60848 3.41161 4.41667 3.63095 4.41667L14.369 4.41667Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}