New icons

src/iconList.tsx

@@ -227,6 +227,10 @@ export const iconList = [
       'ChevronDownIcon',
       'ChevronLeftIcon',
       'ChevronRightIcon',
+      'ChevronSmallUpIcon',
+      'ChevronSmallDownIcon',
+      'ChevronSmallLeftIcon',
+      'ChevronSmallRightIcon',
       'ArrowUpIcon',
       'ArrowDownIcon',
       'ArrowLeftIcon',

src/icons/ChevronSmallDownIcon.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ChevronSmallDownIcon } from './ChevronSmallDownIcon';
+
+const meta: Meta<typeof ChevronSmallDownIcon> = {
+  component: ChevronSmallDownIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof ChevronSmallDownIcon>;
+
+export const Default: Story = { args: { size: 100 } };

src/icons/ChevronSmallDownIcon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+
+export const ChevronSmallDownIcon = /* @__PURE__ */ React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = 'currentColor', size = 14, ...props }, forwardedRef) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={forwardedRef}
+      {...props}
+    >
+      <path
+        d="M3.854 4.896a.5.5 0 10-.708.708l3.5 3.5a.5.5 0 00.708 0l3.5-3.5a.5.5 0 00-.708-.708L7 8.043 3.854 4.896z"
+        fill={color}
+      />
+    </svg>
+  );
+});

src/icons/ChevronSmallLeftIcon.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ChevronSmallLeftIcon } from './ChevronSmallLeftIcon';
+
+const meta: Meta<typeof ChevronSmallLeftIcon> = {
+  component: ChevronSmallLeftIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof ChevronSmallLeftIcon>;
+
+export const Default: Story = { args: { size: 100 } };

src/icons/ChevronSmallLeftIcon.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+
+export const ChevronSmallLeftIcon = /* @__PURE__ */ React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = 'currentColor', size = 14, ...props }, forwardedRef) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={forwardedRef}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.104 10.146a.5.5 0 01-.708.708l-3.5-3.5a.5.5 0 010-.708l3.5-3.5a.5.5 0 11.708.708L5.957 7l3.147 3.146z"
+        fill={color}
+      />
+    </svg>
+  );
+});

src/icons/ChevronSmallRightIcon.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ChevronSmallRightIcon } from './ChevronSmallRightIcon';
+
+const meta: Meta<typeof ChevronSmallRightIcon> = {
+  component: ChevronSmallRightIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof ChevronSmallRightIcon>;
+
+export const Default: Story = { args: { size: 100 } };

src/icons/ChevronSmallRightIcon.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+
+export const ChevronSmallRightIcon = /* @__PURE__ */ React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = 'currentColor', size = 14, ...props }, forwardedRef) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={forwardedRef}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.896 10.146a.5.5 0 00.708.708l3.5-3.5a.5.5 0 000-.708l-3.5-3.5a.5.5 0 10-.708.708L8.043 7l-3.147 3.146z"
+        fill={color}
+      />
+    </svg>
+  );
+});

src/icons/ChevronSmallUpIcon.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ChevronSmallUpIcon } from './ChevronSmallUpIcon';
+
+const meta: Meta<typeof ChevronSmallUpIcon> = {
+  component: ChevronSmallUpIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof ChevronSmallUpIcon>;
+
+export const Default: Story = { args: { size: 100 } };

src/icons/ChevronSmallUpIcon.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { IconProps } from '../types';
+
+export const ChevronSmallUpIcon = /* @__PURE__ */ React.forwardRef<
+  SVGSVGElement,
+  IconProps
+>(({ color = 'currentColor', size = 14, ...props }, forwardedRef) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={forwardedRef}
+      {...props}
+    >
+      <path
+        d="M3.854 9.104a.5.5 0 11-.708-.708l3.5-3.5a.5.5 0 01.708 0l3.5 3.5a.5.5 0 01-.708.708L7 5.957 3.854 9.104z"
+        fill={color}
+      />
+    </svg>
+  );
+});

src/index.ts

@@ -180,6 +180,10 @@ export { ChevronUpIcon } from './icons/ChevronUpIcon';
 export { ChevronDownIcon } from './icons/ChevronDownIcon';
 export { ChevronLeftIcon } from './icons/ChevronLeftIcon';
 export { ChevronRightIcon } from './icons/ChevronRightIcon';
+export { ChevronSmallUpIcon } from './icons/ChevronSmallUpIcon';
+export { ChevronSmallDownIcon } from './icons/ChevronSmallDownIcon';
+export { ChevronSmallLeftIcon } from './icons/ChevronSmallLeftIcon';
+export { ChevronSmallRightIcon } from './icons/ChevronSmallRightIcon';
 export { ArrowUpIcon } from './icons/ArrowUpIcon';
 export { ArrowDownIcon } from './icons/ArrowDownIcon';
 export { ArrowLeftIcon } from './icons/ArrowLeftIcon';