@postal-music/icons 0.1.0

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@postal-music/icons",
+  "version": "0.1.0",
+  "description": "Shared design system for Postal — icons and tokens for React and React Native",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./src/index.ts",
+  "react-native": "./dist/index.native.js",
+  "exports": {
+    ".": {
+      "react-native": {
+        "types": "./src/index.ts",
+        "import": "./dist/index.native.mjs",
+        "require": "./dist/index.native.js"
+      },
+      "types": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native-svg": ">=13.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-svg": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "tsup": "^8.4.0",
+    "typescript": "~5.9.2"
+  }
+}

package/src/icons/_icon-props.ts

@@ -0,0 +1,7 @@
+export interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  className?: string;
+  fill?: string;
+}

package/src/icons/actions/CheckIcon.native.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface CheckIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const CheckIcon: React.FC<CheckIconProps> = ({
+  size = 24,
+  color = '#000000',
+  strokeWidth = 2,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M20 6L9 17L4 12"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { CheckIcon };
+export default CheckIcon;

package/src/icons/actions/CheckIcon.web.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const CheckIcon: React.FC<IconProps> = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M20 6L9 17L4 12"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default CheckIcon;

package/src/icons/actions/Copy02Icon.native.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Copy02IconProps {
+  size?: number;
+}
+
+const Copy02Icon = ({ size = 18 }: Copy02IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+      <Path
+        d="M12 6V3.9C12 3.05992 12 2.63988 11.8365 2.31901C11.6927 2.03677 11.4632 1.8073 11.181 1.66349C10.8601 1.5 10.4401 1.5 9.6 1.5H3.9C3.05992 1.5 2.63988 1.5 2.31901 1.66349C2.03677 1.8073 1.8073 2.03677 1.66349 2.31901C1.5 2.63988 1.5 3.05992 1.5 3.9V9.6C1.5 10.4401 1.5 10.8601 1.66349 11.181C1.8073 11.4632 2.03677 11.6927 2.31901 11.8365C2.63988 12 3.05992 12 3.9 12H6M8.4 16.5H14.1C14.9401 16.5 15.3601 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3601 16.5 14.9401 16.5 14.1V8.4C16.5 7.55992 16.5 7.13988 16.3365 6.81901C16.1927 6.53677 15.9632 6.3073 15.681 6.16349C15.3601 6 14.9401 6 14.1 6H8.4C7.55992 6 7.13988 6 6.81901 6.16349C6.53677 6.3073 6.3073 6.53677 6.16349 6.81901C6 7.13988 6 7.55992 6 8.4V14.1C6 14.9401 6 15.3601 6.16349 15.681C6.3073 15.9632 6.53677 16.1927 6.81901 16.3365C7.13988 16.5 7.55992 16.5 8.4 16.5Z"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { Copy02Icon };
+export default Copy02Icon;

package/src/icons/actions/Copy02Icon.web.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+interface Copy02IconProps extends SVGProps<SVGSVGElement> {
+  size?: number;
+}
+
+function Copy02Icon({ size = 18, ...props }: Copy02IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M12 6V3.9C12 3.05992 12 2.63988 11.8365 2.31901C11.6927 2.03677 11.4632 1.8073 11.181 1.66349C10.8601 1.5 10.4401 1.5 9.6 1.5H3.9C3.05992 1.5 2.63988 1.5 2.31901 1.66349C2.03677 1.8073 1.8073 2.03677 1.66349 2.31901C1.5 2.63988 1.5 3.05992 1.5 3.9V9.6C1.5 10.4401 1.5 10.8601 1.66349 11.181C1.8073 11.4632 2.03677 11.6927 2.31901 11.8365C2.63988 12 3.05992 12 3.9 12H6M8.4 16.5H14.1C14.9401 16.5 15.3601 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3601 16.5 14.9401 16.5 14.1V8.4C16.5 7.55992 16.5 7.13988 16.3365 6.81901C16.1927 6.53677 15.9632 6.3073 15.681 6.16349C15.3601 6 14.9401 6 14.1 6H8.4C7.55992 6 7.13988 6 6.81901 6.16349C6.53677 6.3073 6.3073 6.53677 6.16349 6.81901C6 7.13988 6 7.55992 6 8.4V14.1C6 14.9401 6 15.3601 6.16349 15.681C6.3073 15.9632 6.53677 16.1927 6.81901 16.3365C7.13988 16.5 7.55992 16.5 8.4 16.5Z"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default Copy02Icon;

package/src/icons/actions/Copy06Icon.native.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type Copy06IconProps = {
+  size?: number | string;
+  color?: string;
+};
+
+export function Copy06Icon({ size = 18, color = '#000000' }: Copy06IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+      <Path
+        d="M2.25 7.275C2.25 6.43492 2.25 6.01488 2.41349 5.69401C2.5573 5.41177 2.78677 5.1823 3.06901 5.03849C3.38988 4.875 3.80992 4.875 4.65 4.875H10.725C11.5651 4.875 11.9851 4.875 12.306 5.03849C12.5882 5.1823 12.8177 5.41177 12.9615 5.69401C13.125 6.01488 13.125 6.43492 13.125 7.275V13.35C13.125 14.1901 13.125 14.6101 12.9615 14.931C12.8177 15.2132 12.5882 15.4427 12.306 15.5865C11.9851 15.75 11.5651 15.75 10.725 15.75H4.65C3.80992 15.75 3.38988 15.75 3.06901 15.5865C2.78677 15.4427 2.5573 15.2132 2.41349 14.931C2.25 14.6101 2.25 14.1901 2.25 13.35V7.275Z"
+        fill={color}
+      />
+      <Path
+        d="M5.625 2.25H10.95C12.6302 2.25 13.4702 2.25 14.112 2.57698C14.6765 2.8646 15.1354 3.32354 15.423 3.88803C15.75 4.52976 15.75 5.36984 15.75 7.05V12.375M4.65 15.75H10.725C11.5651 15.75 11.9851 15.75 12.306 15.5865C12.5882 15.4427 12.8177 15.2132 12.9615 14.931C13.125 14.6101 13.125 14.1901 13.125 13.35V7.275C13.125 6.43492 13.125 6.01488 12.9615 5.69401C12.8177 5.41177 12.5882 5.1823 12.306 5.03849C11.9851 4.875 11.5651 4.875 10.725 4.875H4.65C3.80992 4.875 3.38988 4.875 3.06901 5.03849C2.78677 5.1823 2.5573 5.41177 2.41349 5.69401C2.25 6.01488 2.25 6.43492 2.25 7.275V13.35C2.25 14.1901 2.25 14.6101 2.41349 14.931C2.5573 15.2132 2.78677 15.4427 3.06901 15.5865C3.38988 15.75 3.80992 15.75 4.65 15.75Z"
+        stroke={color}
+        strokeWidth={1.25}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export default Copy06Icon;

package/src/icons/actions/Copy06Icon.web.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+
+type IconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+  color?: string;
+};
+
+export function Copy06Icon({
+  size = 18,
+  color = "currentColor",
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+      {...props}
+    >
+      {/* Filled front square */}
+      <path
+        d="M2.25 7.275C2.25 6.43492 2.25 6.01488 2.41349 5.69401C2.5573 5.41177 2.78677 5.1823 3.06901 5.03849C3.38988 4.875 3.80992 4.875 4.65 4.875H10.725C11.5651 4.875 11.9851 4.875 12.306 5.03849C12.5882 5.1823 12.8177 5.41177 12.9615 5.69401C13.125 6.01488 13.125 6.43492 13.125 7.275V13.35C13.125 14.1901 13.125 14.6101 12.9615 14.931C12.8177 15.2132 12.5882 15.4427 12.306 15.5865C11.9851 15.75 11.5651 15.75 10.725 15.75H4.65C3.80992 15.75 3.38988 15.75 3.06901 15.5865C2.78677 15.4427 2.5573 15.2132 2.41349 14.931C2.25 14.6101 2.25 14.1901 2.25 13.35V7.275Z"
+        fill={color}
+      />
+
+      {/* Outline + back sheet */}
+      <path
+        d="M5.625 2.25H10.95C12.6302 2.25 13.4702 2.25 14.112 2.57698C14.6765 2.8646 15.1354 3.32354 15.423 3.88803C15.75 4.52976 15.75 5.36984 15.75 7.05V12.375M4.65 15.75H10.725C11.5651 15.75 11.9851 15.75 12.306 15.5865C12.5882 15.4427 12.8177 15.2132 12.9615 14.931C13.125 14.6101 13.125 14.1901 13.125 13.35V7.275C13.125 6.43492 13.125 6.01488 12.9615 5.69401C12.8177 5.41177 12.5882 5.1823 12.306 5.03849C11.9851 4.875 11.5651 4.875 10.725 4.875H4.65C3.80992 4.875 3.38988 4.875 3.06901 5.03849C2.78677 5.1823 2.5573 5.41177 2.41349 5.69401C2.25 6.01488 2.25 6.43492 2.25 7.275V13.35C2.25 14.1901 2.25 14.6101 2.41349 14.931C2.5573 15.2132 2.78677 15.4427 3.06901 15.5865C3.38988 15.75 3.80992 15.75 4.65 15.75Z"
+        stroke={color}
+        strokeWidth={1.25}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/actions/CopyIcon.native.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface CopyIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const CopyIcon: React.FC<CopyIconProps> = ({ size = 16, color = '#000000', strokeWidth = 1.5 }) => (
+  <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+    <Path
+      d="M6.67018 8.65794C6.95624 9.04037 7.32121 9.35681 7.74032 9.58579C8.15943 9.81477 8.62289 9.95094 9.09925 9.98505C9.57561 10.0192 10.0537 9.95044 10.5012 9.78352C10.9487 9.6166 11.355 9.35541 11.6926 9.01764L13.691 7.01931C14.2977 6.39117 14.6334 5.54986 14.6258 4.6766C14.6182 3.80335 14.2679 2.968 13.6504 2.35049C13.0329 1.73298 12.1975 1.38271 11.3243 1.37513C10.451 1.36754 9.60973 1.70324 8.98158 2.30992L7.83587 3.44897M9.33462 7.32572C9.04856 6.94329 8.68359 6.62685 8.26448 6.39787C7.84537 6.16889 7.38192 6.03273 6.90555 5.99861C6.42919 5.9645 5.95106 6.03323 5.5036 6.20015C5.05613 6.36706 4.6498 6.62826 4.31216 6.96603L2.31383 8.96435C1.70714 9.5925 1.37144 10.4338 1.37903 11.3071C1.38662 12.1803 1.73689 13.0157 2.3544 13.6332C2.97191 14.2507 3.80725 14.601 4.68051 14.6085C5.55377 14.6161 6.39507 14.2804 7.02322 13.6737L8.16227 12.5347"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { CopyIcon };
+export default CopyIcon;

package/src/icons/actions/CopyIcon.web.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  className?: string;
+}
+
+const CopyIcon: React.FC<IconProps> = ({ size = 16, color = "currentColor", strokeWidth = 1.5, className }) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path
+      d="M6.67018 8.65794C6.95624 9.04037 7.32121 9.35681 7.74032 9.58579C8.15943 9.81477 8.62289 9.95094 9.09925 9.98505C9.57561 10.0192 10.0537 9.95044 10.5012 9.78352C10.9487 9.6166 11.355 9.35541 11.6926 9.01764L13.691 7.01931C14.2977 6.39117 14.6334 5.54986 14.6258 4.6766C14.6182 3.80335 14.2679 2.968 13.6504 2.35049C13.0329 1.73298 12.1975 1.38271 11.3243 1.37513C10.451 1.36754 9.60973 1.70324 8.98158 2.30992L7.83587 3.44897M9.33462 7.32572C9.04856 6.94329 8.68359 6.62685 8.26448 6.39787C7.84537 6.16889 7.38192 6.03273 6.90555 5.99861C6.42919 5.9645 5.95106 6.03323 5.5036 6.20015C5.05613 6.36706 4.6498 6.62826 4.31216 6.96603L2.31383 8.96435C1.70714 9.5925 1.37144 10.4338 1.37903 11.3071C1.38662 12.1803 1.73689 13.0157 2.3544 13.6332C2.97191 14.2507 3.80725 14.601 4.68051 14.6085C5.55377 14.6161 6.39507 14.2804 7.02322 13.6737L8.16227 12.5347"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default CopyIcon;

package/src/icons/actions/Expand01Icon.native.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Expand01IconProps {
+  size?: number;
+  stroke?: string;
+  strokeWidth?: number;
+}
+
+const Expand01Icon: React.FC<Expand01IconProps> = ({
+  size = 18,
+  stroke = '#000000',
+  strokeWidth = 1.5,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M10.5 7.5L15.75 2.25M15.75 2.25H11.25M15.75 2.25V6.75M7.5 10.5L2.25 15.75M2.25 15.75H6.75M2.25 15.75L2.25 11.25"
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { Expand01Icon };
+export default Expand01Icon;

package/src/icons/actions/Expand01Icon.web.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+interface Expand01IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  stroke?: string;
+  strokeWidth?: number;
+}
+
+const Expand01Icon: React.FC<Expand01IconProps> = ({
+  size = 18,
+  stroke = "currentColor",
+  strokeWidth = 1.5,
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10.5 7.5L15.75 2.25M15.75 2.25H11.25M15.75 2.25V6.75M7.5 10.5L2.25 15.75M2.25 15.75H6.75M2.25 15.75L2.25 11.25"
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Expand01Icon;

package/src/icons/actions/LogoutIcon.native.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface LogoutIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const LogoutIcon: React.FC<LogoutIconProps> = ({
+  size = 18,
+  color = '#000000',
+  strokeWidth = 1.5,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M12 12.75L15.75 9M15.75 9L12 5.25M15.75 9H6.75M6.75 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V12.15C2.25 13.4101 2.25 14.0402 2.49524 14.5215C2.71095 14.9448 3.05516 15.289 3.47852 15.5048C3.95982 15.75 4.58988 15.75 5.85 15.75H6.75"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { LogoutIcon };
+export default LogoutIcon;

package/src/icons/actions/LogoutIcon.web.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const LogoutIcon: React.FC<IconProps> = ({
+  size = 18,
+  color = "currentColor",
+  strokeWidth = 1.5,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 12.75L15.75 9M15.75 9L12 5.25M15.75 9H6.75M6.75 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V12.15C2.25 13.4101 2.25 14.0402 2.49524 14.5215C2.71095 14.9448 3.05516 15.289 3.47852 15.5048C3.95982 15.75 4.58988 15.75 5.85 15.75H6.75"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default LogoutIcon;

package/src/icons/actions/MinCircleIcon.native.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface MinCircleIconProps {
+  size?: number;
+  color?: string;
+  fill?: string;
+  strokeWidth?: number;
+}
+
+const MinCircleIcon: React.FC<MinCircleIconProps> = ({
+  size = 28,
+  color = '#000000',
+  fill = 'none',
+  strokeWidth = 2,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 28 28" fill={fill}>
+    <Path
+      d="M9.33203 13.9987H18.6654M25.6654 13.9987C25.6654 20.442 20.442 25.6654 13.9987 25.6654C7.55538 25.6654 2.33203 20.442 2.33203 13.9987C2.33203 7.55538 7.55538 2.33203 13.9987 2.33203C20.442 2.33203 25.6654 7.55538 25.6654 13.9987Z"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { MinCircleIcon };
+export default MinCircleIcon;

package/src/icons/actions/MinCircleIcon.web.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  fill?: string;
+  strokeWidth?: number;
+}
+
+const MinCircleIcon: React.FC<IconProps> = ({
+  size = 28,
+  color = "currentColor",
+  fill = "none",
+  strokeWidth = 2,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 28 28"
+    fill={fill}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.33203 13.9987H18.6654M25.6654 13.9987C25.6654 20.442 20.442 25.6654 13.9987 25.6654C7.55538 25.6654 2.33203 20.442 2.33203 13.9987C2.33203 7.55538 7.55538 2.33203 13.9987 2.33203C20.442 2.33203 25.6654 7.55538 25.6654 13.9987Z"
+      stroke={color}
+
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default MinCircleIcon;

package/src/icons/actions/MinimiseIcon.native.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface MinimiseIconProps {
+  size?: number;
+  stroke?: string;
+  strokeWidth?: number;
+}
+
+const MinimiseIcon: React.FC<MinimiseIconProps> = ({
+  size = 24,
+  stroke = '#000000',
+  strokeWidth = 1.5,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M4 14H10M10 14V20M10 14L3 21M20 10H14M14 10V4M14 10L21 3"
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { MinimiseIcon };
+export default MinimiseIcon;

package/src/icons/actions/MinimiseIcon.web.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+interface MinimiseIconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  stroke?: string;
+  strokeWidth?: number;
+}
+
+const MinimiseIcon: React.FC<MinimiseIconProps> = ({
+  size = 24,
+  stroke = "currentColor",
+  strokeWidth = 1.5,
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M4 14H10M10 14V20M10 14L3 21M20 10H14M14 10V4M14 10L21 3"
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default MinimiseIcon;

package/src/icons/actions/MinusIcon.native.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface MinusIconProps {
+  size?: number;
+  color?: string;
+}
+
+const MinusIcon: React.FC<MinusIconProps> = ({ size = 18, color = '#000000' }) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M3.75 9H14.25"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { MinusIcon };
+export default MinusIcon;

package/src/icons/actions/MinusIcon.web.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const MinusIcon: React.FC<IconProps> = ({ size = 18, color = "currentColor" }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.75 9H14.25"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default MinusIcon;

package/src/icons/actions/MoreOptionsIcon.native.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import Svg, { Circle } from 'react-native-svg';
+
+type MoreOptionsIconProps = {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+};
+
+const MoreOptionsIcon: React.FC<MoreOptionsIconProps> = ({
+  size = 24,
+  color = '#000000',
+  strokeWidth = 2,
+}) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24">
+      <Circle
+        cx="5"
+        cy="12"
+        r="1"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Circle
+        cx="12"
+        cy="12"
+        r="1"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Circle
+        cx="19"
+        cy="12"
+        r="1"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { MoreOptionsIcon };
+export default MoreOptionsIcon;