feat: add sort and prompt icon [p0] (#2511)

* feat: add sort and cherry pick icons * chore: add changeset * chore: change sort * fix: more lint changes * chore: few changes * chore: sort icon * chore: remove path * chore: update changeset
razorpay · Jan 30, 2025 · 98be8f0 · 98be8f0
1 parent 6a8844d
commit 98be8f0
Show file tree

Hide file tree

Showing 16 changed files with 345 additions and 30 deletions.
diff --git a/.changeset/beige-ligers-fix.md b/.changeset/beige-ligers-fix.md
@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': minor
+---
+
+feat(blade): add prompt and sort icon
diff --git a/packages/blade/scripts/icons.json b/packages/blade/scripts/icons.json
@@ -1,35 +1,8 @@
 [
   {
-    "left-circular-corner": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 12C4 8.13401 7.13401 5 11 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H11C8.23858 7 6 9.23858 6 12C6 14.7614 8.23858 17 11 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H11C7.13401 19 4 15.866 4 12Z\" fill=\"#192839\"/></svg>"
+    "prompt": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z\" fill=\"#192839\"/>\n<path d=\"M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z\" fill=\"#192839\"/>\n<path d=\"M3 17C2.44772 17 2 17.4477 2 18C2 18.5523 2.44772 19 3 19H11C11.5523 19 12 18.5523 12 18C12 17.4477 11.5523 17 11 17H3Z\" fill=\"#192839\"/>\n</svg>\n"
   },
   {
-    "top-left-rounded-corner": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 13C4 8.02944 8.02944 4 13 4H20C20.5523 4 21 4.44772 21 5C21 5.55228 20.5523 6 20 6H13C9.13401 6 6 9.13401 6 13V20C6 20.5523 5.55228 21 5 21C4.44772 21 4 20.5523 4 20V13Z\" fill=\"#192839\"/></svg>"
-  },
-  {
-    "top-left-sharp-corner": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4 4H20C20.5523 4 21 4.44772 21 5C21 5.55228 20.5523 6 20 6H6V20C6 20.5523 5.55228 21 5 21C4.44772 21 4 20.5523 4 20V4\" fill=\"#192839\"/></svg>"
-  },
-  {
-    "arrow-square-down": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.54289 12.2929C8.93342 11.9024 9.56658 11.9024 9.95711 12.2929L12.25 14.5858L14.5429 12.2929C14.9334 11.9024 15.5666 11.9024 15.9571 12.2929C16.3476 12.6834 16.3476 13.3166 15.9571 13.7071L12.9571 16.7071C12.5666 17.0976 11.9334 17.0976 11.5429 16.7071L8.54289 13.7071C8.15237 13.3166 8.15237 12.6834 8.54289 12.2929Z\" fill=\"#192839\"/><path d=\"M13.25 8.5C13.25 7.94772 12.8023 7.5 12.25 7.5C11.6977 7.5 11.25 7.94772 11.25 8.5V16C11.25 16.5523 11.6977 17 12.25 17C12.8023 17 13.25 16.5523 13.25 16V8.5Z\" fill=\"#192839\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.75 3C3.7835 3 3 3.7835 3 4.75V19.75C3 20.7165 3.7835 21.5 4.75 21.5H19.75C20.7165 21.5 21.5 20.7165 21.5 19.75V4.75C21.5 3.7835 20.7165 3 19.75 3H4.75ZM5 19.5V5H19.5V19.5H5Z\" fill=\"#192839\"/></svg>"
-  },
-  {
-    "arrow-square-up": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.2929 7.54289C11.6834 7.15237 12.3166 7.15237 12.7071 7.54289L15.7071 10.5429C16.0976 10.9334 16.0976 11.5666 15.7071 11.9571C15.3166 12.3476 14.6834 12.3476 14.2929 11.9571L12 9.66421L9.70711 11.9571C9.31658 12.3476 8.68342 12.3476 8.29289 11.9571C7.90237 11.5666 7.90237 10.9334 8.29289 10.5429L11.2929 7.54289Z\" fill=\"#192839\"/><path d=\"M13 8.25C13 7.69772 12.5523 7.25 12 7.25C11.4477 7.25 11 7.69772 11 8.25V15.75C11 16.3023 11.4477 16.75 12 16.75C12.5523 16.75 13 16.3023 13 15.75V8.25Z\" fill=\"#192839\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.5 2.75C3.5335 2.75 2.75 3.5335 2.75 4.5V19.5C2.75 20.4665 3.5335 21.25 4.5 21.25H19.5C20.4665 21.25 21.25 20.4665 21.25 19.5V4.5C21.25 3.5335 20.4665 2.75 19.5 2.75H4.5ZM4.75 19.25V4.75H19.25V19.25H4.75Z\" fill=\"#192839\"/></svg>"
-  },
-  {
-    "arrow-square-right": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.25 11C7.69772 11 7.25 11.4477 7.25 12C7.25 12.5523 7.69772 13 8.25 13H15.75C16.3023 13 16.75 12.5523 16.75 12C16.75 11.4477 16.3023 11 15.75 11H8.25Z\" fill=\"#192839\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M21.25 4.5C21.25 3.5335 20.4665 2.75 19.5 2.75H4.5C3.5335 2.75 2.75 3.5335 2.75 4.5V19.5C2.75 20.4665 3.5335 21.25 4.5 21.25H19.5C20.4665 21.25 21.25 20.4665 21.25 19.5V4.5ZM4.75 4.75H19.25V19.25H4.75V4.75Z\" fill=\"#192839\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.0429 8.29289C12.4334 7.90237 13.0666 7.90237 13.4571 8.29289L16.4571 11.2929C16.8476 11.6834 16.8476 12.3166 16.4571 12.7071L13.4571 15.7071C13.0666 16.0976 12.4334 16.0976 12.0429 15.7071C11.6524 15.3166 11.6524 14.6834 12.0429 14.2929L14.3358 12L12.0429 9.70711C11.6524 9.31658 11.6524 8.68342 12.0429 8.29289Z\" fill=\"#192839\"/></svg>"
-  },
-  {
-    "arrow-square-left": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.25 11C7.69772 11 7.25 11.4477 7.25 12C7.25 12.5523 7.69772 13 8.25 13H15.75C16.3023 13 16.75 12.5523 16.75 12C16.75 11.4477 16.3023 11 15.75 11H8.25Z\" fill=\"#192839\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M21.25 4.5C21.25 3.5335 20.4665 2.75 19.5 2.75H4.5C3.5335 2.75 2.75 3.5335 2.75 4.5V19.5C2.75 20.4665 3.5335 21.25 4.5 21.25H19.5C20.4665 21.25 21.25 20.4665 21.25 19.5V4.5ZM4.75 4.75H19.25V19.25H4.75V4.75Z\" fill=\"#192839\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.9571 8.29289C12.3476 8.68342 12.3476 9.31658 11.9571 9.70711L9.66421 12L11.9571 14.2929C12.3476 14.6834 12.3476 15.3166 11.9571 15.7071C11.5666 16.0976 10.9334 16.0976 10.5429 15.7071L7.54289 12.7071C7.15237 12.3166 7.15237 11.6834 7.54289 11.2929L10.5429 8.29289C10.9334 7.90237 11.5666 7.90237 11.9571 8.29289Z\" fill=\"#192839\"/></svg>"
-  },
-  {
-    "arrow-square-down-left": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8 10.5C8 9.94772 8.44772 9.5 9 9.5C9.55228 9.5 10 9.94772 10 10.5V12.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L11.4142 14H13.5C14.0523 14 14.5 14.4477 14.5 15C14.5 15.5523 14.0523 16 13.5 16H9.00069C8.99969 16 8.998 16 8.997 16C8.72313 15.9992 8.47515 15.8883 8.29502 15.7092C8.2936 15.7078 8.29219 15.7064 8.29078 15.705C8.19595 15.6096 8.12432 15.4999 8.07588 15.3828C8.02699 15.2649 8 15.1356 8 15V10.5Z\" fill=\"#192839\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.5 21.25C3.5335 21.25 2.75 20.4665 2.75 19.5V4.5C2.75 3.5335 3.5335 2.75 4.5 2.75H19.5C20.4665 2.75 21.25 3.5335 21.25 4.5V19.5C21.25 20.4665 20.4665 21.25 19.5 21.25H4.5ZM4.75 19.25H19.25V4.75H4.75V19.25Z\" fill=\"#192839\"/></svg>"
-  },
-  {
-    "arrow-square-down-right": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.29289 8.29289C8.68342 7.90237 9.31658 7.90237 9.70711 8.29289L14 12.5858V10.5C14 9.94772 14.4477 9.5 15 9.5C15.5523 9.5 16 9.94772 16 10.5V14.9993C16 15.0003 16 15.002 16 15.003C15.9996 15.1375 15.9727 15.2657 15.9241 15.3828C15.8753 15.5007 15.803 15.6112 15.7071 15.7071C15.5126 15.9016 15.2579 15.9992 15.003 16C15.002 16 15.001 16 15 16H10.5C9.94772 16 9.5 15.5523 9.5 15C9.5 14.4477 9.94772 14 10.5 14H12.5858L8.29289 9.70711C7.90237 9.31658 7.90237 8.68342 8.29289 8.29289Z\" fill=\"#192839\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.5 2.75C20.4665 2.75 21.25 3.5335 21.25 4.5V19.5C21.25 20.4665 20.4665 21.25 19.5 21.25H4.5C3.5335 21.25 2.75 20.4665 2.75 19.5V4.5C2.75 3.5335 3.5335 2.75 4.5 2.75H19.5ZM19.25 4.75H4.75V19.25H19.25V4.75Z\" fill=\"#192839\"/></svg>"
-  },
-  {
-    "arrow-square-up-right": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14 11.4142L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L12.5858 10H10.5C9.94772 10 9.5 9.55228 9.5 9C9.5 8.44772 9.94772 8 10.5 8H15C15.1356 8 15.2649 8.02699 15.3828 8.07588C15.4999 8.12432 15.6096 8.19595 15.705 8.29078C15.7064 8.29219 15.7078 8.2936 15.7092 8.29502C15.9023 8.48924 15.9992 8.74301 16 8.997C16 8.998 16 8.999 16 9V13.5C16 14.0523 15.5523 14.5 15 14.5C14.4477 14.5 14 14.0523 14 13.5V11.4142Z\" fill=\"#192839\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.5 21.25C3.5335 21.25 2.75 20.4665 2.75 19.5V4.5C2.75 3.5335 3.5335 2.75 4.5 2.75H19.5C20.4665 2.75 21.25 3.5335 21.25 4.5V19.5C21.25 20.4665 20.4665 21.25 19.5 21.25H4.5ZM4.75 19.25H19.25V4.75H4.75V19.25Z\" fill=\"#192839\"/></svg>"
-  },
-  {
-    "arrow-square-up-left": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.61722 8.07588C8.73512 8.02699 8.86441 8 9 8H13.5C14.0523 8 14.5 8.44772 14.5 9C14.5 9.55228 14.0523 10 13.5 10H11.4142L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142V13.5C10 14.0523 9.55228 14.5 9 14.5C8.44772 14.5 8 14.0523 8 13.5V9C8 8.72494 8.11106 8.47581 8.29078 8.29502L8.29502 8.29078C8.3904 8.19595 8.50014 8.12432 8.61722 8.07588Z\" fill=\"#192839\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.5 2.75C20.4665 2.75 21.25 3.5335 21.25 4.5V19.5C21.25 20.4665 20.4665 21.25 19.5 21.25H4.5C3.5335 21.25 2.75 20.4665 2.75 19.5V4.5C2.75 3.5335 3.5335 2.75 4.5 2.75H19.5ZM19.25 4.75H4.75V19.25H19.25V4.75Z\" fill=\"#192839\"/></svg>"
+    "sort": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8.54893 1.29663C8.359 1.1067 8.1014 1 7.8328 1C7.5642 1 7.3066 1.1067 7.11667 1.29663L2.29662 6.11675C1.90112 6.51225 1.90113 7.1535 2.29663 7.549C2.69214 7.9445 3.33338 7.9445 3.72889 7.54899L6.88779 4.39005V12.9499C6.88779 13.5092 7.34121 13.9627 7.90054 13.9627C8.45987 13.9627 8.9133 13.5092 8.9133 12.9499V4.5255L11.9368 7.54899C12.3323 7.9445 12.9735 7.9445 13.369 7.54899C13.7645 7.15349 13.7645 6.51225 13.369 6.11674L8.54893 1.29663Z\" fill=\"#192839\"/>\n<path d=\"M15.2611 22.8159C14.9925 22.8159 14.7349 22.7092 14.545 22.5193L9.72486 17.6992C9.32935 17.3037 9.32935 16.6624 9.72486 16.2669C10.1204 15.8714 10.7616 15.8714 11.1571 16.2669L14.1806 19.2904L14.1806 10.866C14.1806 10.3067 14.634 9.85326 15.1934 9.85326C15.7527 9.85326 16.2061 10.3067 16.2061 10.866L16.2061 19.4259L19.365 16.2669C19.7605 15.8714 20.4018 15.8714 20.7973 16.2669C21.1928 16.6624 21.1928 17.3037 20.7973 17.6992L15.9772 22.5193C15.7873 22.7092 15.5297 22.8159 15.2611 22.8159Z\" fill=\"#192839\"/>\n</svg>\n"
   }
-]
+]
diff --git a/packages/blade/src/components/Icons/PromptIcon/PromptIcon.native.test.tsx b/packages/blade/src/components/Icons/PromptIcon/PromptIcon.native.test.tsx
@@ -0,0 +1,11 @@
+import PromptIcon from '.';
+import renderWithTheme from '~utils/testing/renderWithTheme.native';
+
+describe('<PromptIcon />', () => {
+  it('should render PromptIcon', () => {
+    const renderTree = renderWithTheme(
+      <PromptIcon color="feedback.icon.neutral.intense" size="large" />,
+    ).toJSON();
+    expect(renderTree).toMatchSnapshot();
+  });
+});
diff --git a/packages/blade/src/components/Icons/PromptIcon/PromptIcon.tsx b/packages/blade/src/components/Icons/PromptIcon/PromptIcon.tsx
@@ -0,0 +1,26 @@
+import { Svg, Path } from '../_Svg';
+import type { IconComponent } from '..';
+import useIconProps from '../useIconProps';
+
+const PromptIcon: IconComponent = ({ size, color, ...styledProps }) => {
+  const { height, width, iconColor } = useIconProps({ size, color });
+
+  return (
+    <Svg {...styledProps} width={width} height={height} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
+        fill={iconColor}
+      />
+      <Path
+        d="M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z"
+        fill={iconColor}
+      />
+      <Path
+        d="M3 17C2.44772 17 2 17.4477 2 18C2 18.5523 2.44772 19 3 19H11C11.5523 19 12 18.5523 12 18C12 17.4477 11.5523 17 11 17H3Z"
+        fill={iconColor}
+      />
+    </Svg>
+  );
+};
+
+export default PromptIcon;
diff --git a/packages/blade/src/components/Icons/PromptIcon/PromptIcon.web.test.tsx b/packages/blade/src/components/Icons/PromptIcon/PromptIcon.web.test.tsx
@@ -0,0 +1,11 @@
+import PromptIcon from './';
+import renderWithTheme from '~utils/testing/renderWithTheme.web';
+
+describe('<PromptIcon />', () => {
+  it('should render PromptIcon', () => {
+    const { container } = renderWithTheme(
+      <PromptIcon color="feedback.icon.neutral.intense" size="large" />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/blade/src/components/Icons/PromptIcon/__snapshots__/PromptIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/PromptIcon/__snapshots__/PromptIcon.native.test.tsx.snap
@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PromptIcon /> should render PromptIcon 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RNSVGSvgView
+    accessibilityElementsHidden={true}
+    align="xMidYMid"
+    bbHeight="20px"
+    bbWidth="20px"
+    data-blade-component="icon"
+    fill="none"
+    focusable={false}
+    height="20px"
+    importantForAccessibility="no-hide-descendants"
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        [
+          {},
+        ],
+        {
+          "flex": 0,
+          "height": 20,
+          "width": 20,
+        },
+      ]
+    }
+    vbHeight={24}
+    vbWidth={24}
+    width="20px"
+  >
+    <RNSVGGroup
+      fill={null}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    >
+      <RNSVGPath
+        d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
+        fill={
+          {
+            "payload": 4280563015,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "fill",
+          ]
+        }
+      />
+      <RNSVGPath
+        d="M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z"
+        fill={
+          {
+            "payload": 4280563015,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "fill",
+          ]
+        }
+      />
+      <RNSVGPath
+        d="M3 17C2.44772 17 2 17.4477 2 18C2 18.5523 2.44772 19 3 19H11C11.5523 19 12 18.5523 12 18C12 17.4477 11.5523 17 11 17H3Z"
+        fill={
+          {
+            "payload": 4280563015,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "fill",
+          ]
+        }
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+</View>
+`;
diff --git a/packages/blade/src/components/Icons/PromptIcon/__snapshots__/PromptIcon.web.test.tsx.snap b/packages/blade/src/components/Icons/PromptIcon/__snapshots__/PromptIcon.web.test.tsx.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PromptIcon /> should render PromptIcon 1`] = `
+<div>
+  <svg
+    aria-hidden="true"
+    class="Svgweb__StyledSvg-vcmjs8-0"
+    data-blade-component="icon"
+    fill="none"
+    height="20px"
+    viewBox="0 0 24 24"
+    width="20px"
+  >
+    <path
+      d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z"
+      data-blade-component="svg-path"
+      fill="hsla(211, 33%, 21%, 1)"
+    />
+    <path
+      d="M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z"
+      data-blade-component="svg-path"
+      fill="hsla(211, 33%, 21%, 1)"
+    />
+    <path
+      d="M3 17C2.44772 17 2 17.4477 2 18C2 18.5523 2.44772 19 3 19H11C11.5523 19 12 18.5523 12 18C12 17.4477 11.5523 17 11 17H3Z"
+      data-blade-component="svg-path"
+      fill="hsla(211, 33%, 21%, 1)"
+    />
+  </svg>
+</div>
+`;
diff --git a/packages/blade/src/components/Icons/PromptIcon/index.ts b/packages/blade/src/components/Icons/PromptIcon/index.ts
@@ -0,0 +1 @@
+export { default } from './PromptIcon';
diff --git a/packages/blade/src/components/Icons/SortIcon/SortIcon.native.test.tsx b/packages/blade/src/components/Icons/SortIcon/SortIcon.native.test.tsx
@@ -0,0 +1,11 @@
+import SortIcon from '.';
+import renderWithTheme from '~utils/testing/renderWithTheme.native';
+
+describe('<SortIcon />', () => {
+  it('should render SortIcon', () => {
+    const renderTree = renderWithTheme(
+      <SortIcon color="feedback.icon.neutral.intense" size="large" />,
+    ).toJSON();
+    expect(renderTree).toMatchSnapshot();
+  });
+});
diff --git a/packages/blade/src/components/Icons/SortIcon/SortIcon.tsx b/packages/blade/src/components/Icons/SortIcon/SortIcon.tsx
@@ -0,0 +1,22 @@
+import { Svg, Path } from '../_Svg';
+import type { IconComponent } from '..';
+import useIconProps from '../useIconProps';
+
+const SortIcon: IconComponent = ({ size, color, ...styledProps }) => {
+  const { height, width, iconColor } = useIconProps({ size, color });
+
+  return (
+    <Svg {...styledProps} width={width} height={height} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M8.54893 1.29663C8.359 1.1067 8.1014 1 7.8328 1C7.5642 1 7.3066 1.1067 7.11667 1.29663L2.29662 6.11675C1.90112 6.51225 1.90113 7.1535 2.29663 7.549C2.69214 7.9445 3.33338 7.9445 3.72889 7.54899L6.88779 4.39005V12.9499C6.88779 13.5092 7.34121 13.9627 7.90054 13.9627C8.45987 13.9627 8.9133 13.5092 8.9133 12.9499V4.5255L11.9368 7.54899C12.3323 7.9445 12.9735 7.9445 13.369 7.54899C13.7645 7.15349 13.7645 6.51225 13.369 6.11674L8.54893 1.29663Z"
+        fill={iconColor}
+      />
+      <Path
+        d="M15.2611 22.8159C14.9925 22.8159 14.7349 22.7092 14.545 22.5193L9.72486 17.6992C9.32935 17.3037 9.32935 16.6624 9.72486 16.2669C10.1204 15.8714 10.7616 15.8714 11.1571 16.2669L14.1806 19.2904L14.1806 10.866C14.1806 10.3067 14.634 9.85326 15.1934 9.85326C15.7527 9.85326 16.2061 10.3067 16.2061 10.866L16.2061 19.4259L19.365 16.2669C19.7605 15.8714 20.4018 15.8714 20.7973 16.2669C21.1928 16.6624 21.1928 17.3037 20.7973 17.6992L15.9772 22.5193C15.7873 22.7092 15.5297 22.8159 15.2611 22.8159Z"
+        fill={iconColor}
+      />
+    </Svg>
+  );
+};
+
+export default SortIcon;
diff --git a/packages/blade/src/components/Icons/SortIcon/SortIcon.web.test.tsx b/packages/blade/src/components/Icons/SortIcon/SortIcon.web.test.tsx
@@ -0,0 +1,11 @@
+import SortIcon from './';
+import renderWithTheme from '~utils/testing/renderWithTheme.web';
+
+describe('<SortIcon />', () => {
+  it('should render SortIcon', () => {
+    const { container } = renderWithTheme(
+      <SortIcon color="feedback.icon.neutral.intense" size="large" />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/blade/src/components/Icons/SortIcon/__snapshots__/SortIcon.native.test.tsx.snap b/packages/blade/src/components/Icons/SortIcon/__snapshots__/SortIcon.native.test.tsx.snap
@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SortIcon /> should render SortIcon 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RNSVGSvgView
+    accessibilityElementsHidden={true}
+    align="xMidYMid"
+    bbHeight="20px"
+    bbWidth="20px"
+    data-blade-component="icon"
+    fill="none"
+    focusable={false}
+    height="20px"
+    importantForAccessibility="no-hide-descendants"
+    meetOrSlice={0}
+    minX={0}
+    minY={0}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        [
+          {},
+        ],
+        {
+          "flex": 0,
+          "height": 20,
+          "width": 20,
+        },
+      ]
+    }
+    vbHeight={24}
+    vbWidth={24}
+    width="20px"
+  >
+    <RNSVGGroup
+      fill={null}
+      propList={
+        [
+          "fill",
+        ]
+      }
+    >
+      <RNSVGPath
+        d="M8.54893 1.29663C8.359 1.1067 8.1014 1 7.8328 1C7.5642 1 7.3066 1.1067 7.11667 1.29663L2.29662 6.11675C1.90112 6.51225 1.90113 7.1535 2.29663 7.549C2.69214 7.9445 3.33338 7.9445 3.72889 7.54899L6.88779 4.39005V12.9499C6.88779 13.5092 7.34121 13.9627 7.90054 13.9627C8.45987 13.9627 8.9133 13.5092 8.9133 12.9499V4.5255L11.9368 7.54899C12.3323 7.9445 12.9735 7.9445 13.369 7.54899C13.7645 7.15349 13.7645 6.51225 13.369 6.11674L8.54893 1.29663Z"
+        fill={
+          {
+            "payload": 4280563015,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "fill",
+          ]
+        }
+      />
+      <RNSVGPath
+        d="M15.2611 22.8159C14.9925 22.8159 14.7349 22.7092 14.545 22.5193L9.72486 17.6992C9.32935 17.3037 9.32935 16.6624 9.72486 16.2669C10.1204 15.8714 10.7616 15.8714 11.1571 16.2669L14.1806 19.2904L14.1806 10.866C14.1806 10.3067 14.634 9.85326 15.1934 9.85326C15.7527 9.85326 16.2061 10.3067 16.2061 10.866L16.2061 19.4259L19.365 16.2669C19.7605 15.8714 20.4018 15.8714 20.7973 16.2669C21.1928 16.6624 21.1928 17.3037 20.7973 17.6992L15.9772 22.5193C15.7873 22.7092 15.5297 22.8159 15.2611 22.8159Z"
+        fill={
+          {
+            "payload": 4280563015,
+            "type": 0,
+          }
+        }
+        propList={
+          [
+            "fill",
+          ]
+        }
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+</View>
+`;