@postal-music/icons 0.1.0

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

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { cn } from "../../utils/cn";
+
+type MoreOptionsIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  ariaLabel?: string;
+};
+
+const MoreOptionsIcon: React.FC<MoreOptionsIconProps> = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ariaLabel = "More options",
+  className,
+  ...props
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label={ariaLabel}
+      className={cn("inline-block align-middle", className)}
+      {...props}
+    >
+      {/* Left dot */}
+      <circle
+        cx="5"
+        cy="12"
+        r="1"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* Middle dot */}
+      <circle
+        cx="12"
+        cy="12"
+        r="1"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* Right dot */}
+      <circle
+        cx="19"
+        cy="12"
+        r="1"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default MoreOptionsIcon;

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import Svg, { Path, G, Defs, ClipPath, Rect } from 'react-native-svg';
+
+interface MoveIconProps {
+  size?: number;
+  strokeColor?: string;
+}
+
+const MoveIcon: React.FC<MoveIconProps> = ({
+  size = 17,
+  strokeColor = '#000000',
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 17 17" fill="none">
+    <G clipPath="url(#clip0_4587_7734)">
+      <Path
+        d="M3.54297 6.3763L1.41797 8.5013M1.41797 8.5013L3.54297 10.6263M1.41797 8.5013H15.5846M6.3763 3.54297L8.5013 1.41797M8.5013 1.41797L10.6263 3.54297M8.5013 1.41797V15.5846M10.6263 13.4596L8.5013 15.5846M8.5013 15.5846L6.3763 13.4596M13.4596 6.3763L15.5846 8.5013M15.5846 8.5013L13.4596 10.6263"
+        stroke={strokeColor}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="clip0_4587_7734">
+        <Rect width="17" height="17" fill="white" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+export { MoveIcon };
+export default MoveIcon;

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

@@ -0,0 +1,45 @@
+// components/icons/MoveIcon.tsx
+import * as React from "react";
+
+interface MoveIconProps extends React.SVGProps<SVGSVGElement> {
+  /** Width and height (in pixels). Defaults to 17. */
+  size?: number;
+  /** Stroke color. Defaults to currentColor so it inherits from text color. */
+  strokeColor?: string;
+}
+
+
+
+const MoveIcon: React.FC<MoveIconProps> = ({
+  size = 17,
+  strokeColor = "currentColor",
+  className = "",
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 17 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...props}
+  >
+    <g clipPath="url(#clip0_4587_7734)">
+      <path
+        d="M3.54297 6.3763L1.41797 8.5013M1.41797 8.5013L3.54297 10.6263M1.41797 8.5013H15.5846M6.3763 3.54297L8.5013 1.41797M8.5013 1.41797L10.6263 3.54297M8.5013 1.41797V15.5846M10.6263 13.4596L8.5013 15.5846M8.5013 15.5846L6.3763 13.4596M13.4596 6.3763L15.5846 8.5013M15.5846 8.5013L13.4596 10.6263"
+        stroke={strokeColor}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4587_7734">
+        <rect width="17" height="17" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default MoveIcon;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface PencilIconProps {
+  size?: number;
+  strokeWidth?: number;
+  stroke?: string;
+}
+
+const PencilIcon: React.FC<PencilIconProps> = ({ size = 18, strokeWidth = 1.5, stroke = '#000000' }) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M8.99998 15.0012H15.75M2.25 15.0011H3.50591C3.87279 15.0011 4.05624 15.0011 4.22887 14.9597C4.38192 14.923 4.52824 14.8624 4.66245 14.7801C4.81382 14.6873 4.94354 14.5576 5.20296 14.2982L14.625 4.87615C15.2463 4.25483 15.2463 3.24747 14.625 2.62615C14.0037 2.00483 12.9963 2.00483 12.375 2.62615L2.95295 12.0482C2.69352 12.3076 2.5638 12.4373 2.47104 12.5887C2.3888 12.7229 2.32819 12.8692 2.29145 13.0223C2.25 13.1949 2.25 13.3784 2.25 13.7453V15.0011Z"
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { PencilIcon };
+export default PencilIcon;

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

@@ -0,0 +1,29 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number; 
+  stroke?: string;
+}
+
+const PencilIcon: React.FC<IconProps> = ({ size = 18, color = "currentColor", strokeWidth = 1.5, stroke = "currentColor", ...props }) => (
+  <svg
+  width={size}
+  height={size}
+  viewBox="0 0 18 18"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  {...props}
+>
+  <path
+    d="M8.99998 15.0012H15.75M2.25 15.0011H3.50591C3.87279 15.0011 4.05624 15.0011 4.22887 14.9597C4.38192 14.923 4.52824 14.8624 4.66245 14.7801C4.81382 14.6873 4.94354 14.5576 5.20296 14.2982L14.625 4.87615C15.2463 4.25483 15.2463 3.24747 14.625 2.62615C14.0037 2.00483 12.9963 2.00483 12.375 2.62615L2.95295 12.0482C2.69352 12.3076 2.5638 12.4373 2.47104 12.5887C2.3888 12.7229 2.32819 12.8692 2.29145 13.0223C2.25 13.1949 2.25 13.3784 2.25 13.7453V15.0011Z"
+    stroke={stroke}
+    strokeWidth={strokeWidth}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  />
+</svg>
+);
+
+export default PencilIcon;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface PlusCircleIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const PlusCircleIcon: React.FC<PlusCircleIconProps> = ({
+  size = 28,
+  color = '#000000',
+  strokeWidth = 2,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 28 28" fill="none">
+    <Path
+      d="M13.9987 9.33203V18.6654M9.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 { PlusCircleIcon };
+export default PlusCircleIcon;

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

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const PlusCircleIcon: React.FC<IconProps> = ({
+  size = 28,
+  color = "currentColor",
+  strokeWidth = 2,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 28 28"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.9987 9.33203V18.6654M9.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 PlusCircleIcon;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface PlusIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: string;
+}
+
+const PlusIcon: React.FC<PlusIconProps> = ({ size = 16, color = '#000000', strokeWidth = '1.25' }) => (
+  <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+    <Path
+      d="M8.00065 3.33203V12.6654M3.33398 7.9987H12.6673"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { PlusIcon };
+export default PlusIcon;

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

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: string;
+}
+
+const PlusIcon: React.FC<IconProps> = ({ size = 16, color = "currentColor", strokeWidth = "1.25" }) => (
+  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.00065 3.33203V12.6654M3.33398 7.9987H12.6673"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      
+    />
+  </svg>
+);
+
+export default PlusIcon;

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface RefreshIconProps {
+  width?: number;
+  height?: number;
+  stroke?: string;
+}
+
+export const RefreshIcon: React.FC<RefreshIconProps> = ({
+  width = 24,
+  height = 24,
+  stroke = '#000000',
+}) => (
+  <Svg width={width} height={height} viewBox="0 0 24 24" fill="none" stroke={stroke}>
+    <Path
+      d="M2 10C2 10 4.00498 7.26822 5.63384 5.63824C7.26269 4.00827 9.5136 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.89691 21 4.43511 18.2543 3.35177 14.5M2 10V4M2 10H8"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export default RefreshIcon;

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+interface RefreshIconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const RefreshIcon: React.FC<RefreshIconProps> = ({
+  width = 24,
+  height = 24,
+  stroke = "currentColor",
+  className,
+  ...props
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke={stroke}
+    className={className}
+    {...props}
+  >
+    <path
+      d="M2 10C2 10 4.00498 7.26822 5.63384 5.63824C7.26269 4.00827 9.5136 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.89691 21 4.43511 18.2543 3.35177 14.5M2 10V4M2 10H8"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type ResetIconProps = {
+  size?: number;
+  color?: string;
+};
+
+const ResetIcon: React.FC<ResetIconProps> = ({
+  size = 18,
+  color = '#000000',
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M1.5 7.5C1.5 7.5 3.00374 5.45116 4.22538 4.22868C5.44702 3.0062 7.1352 2.25 9 2.25C12.7279 2.25 15.75 5.27208 15.75 9C15.75 12.7279 12.7279 15.75 9 15.75C5.92268 15.75 3.32633 13.6907 2.51382 10.875M1.5 7.5V3M1.5 7.5H6"
+      stroke={color}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { ResetIcon };
+export default ResetIcon;

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

@@ -0,0 +1,36 @@
+// components/icons/ResetIcon.tsx
+import React from "react";
+
+type ResetIconProps = {
+  /** Width and height of the icon (px) */
+  size?: number;
+  /** Stroke color; defaults to current text color */
+  color?: string;
+  /** Additional Tailwind or custom classes */
+  className?: string;
+};
+
+const ResetIcon: React.FC<ResetIconProps> = ({
+  size = 18,
+  color = "currentColor",
+  className = "",
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.5 7.5C1.5 7.5 3.00374 5.45116 4.22538 4.22868C5.44702 3.0062 7.1352 2.25 9 2.25C12.7279 2.25 15.75 5.27208 15.75 9C15.75 12.7279 12.7279 15.75 9 15.75C5.92268 15.75 3.32633 13.6907 2.51382 10.875M1.5 7.5V3M1.5 7.5H6"
+      stroke={color}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default React.memo(ResetIcon);

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface SettingsIconProps {
+  size?: number;
+  color?: string;
+}
+
+const SettingsIcon: React.FC<SettingsIconProps> = ({ size = 18, color = '#000000' }) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M7.04775 14.5283L7.48608 15.5142C7.61638 15.8076 7.82904 16.057 8.09825 16.232C8.36746 16.4069 8.68166 16.5001 9.00275 16.5C9.32383 16.5001 9.63803 16.4069 9.90724 16.232C10.1765 16.057 10.3891 15.8076 10.5194 15.5142L10.9577 14.5283C11.1138 14.1785 11.3763 13.8869 11.7077 13.695C12.0413 13.5026 12.4272 13.4206 12.8102 13.4608L13.8827 13.575C14.202 13.6088 14.5242 13.5492 14.8103 13.4035C15.0963 13.2578 15.334 13.0322 15.4944 12.7542C15.655 12.4763 15.7316 12.1577 15.7147 11.8372C15.6978 11.5166 15.5883 11.2079 15.3994 10.9483L14.7644 10.0758C14.5383 9.76285 14.4175 9.38611 14.4194 9C14.4193 8.61494 14.5413 8.23976 14.7677 7.92833L15.4027 7.05583C15.5917 6.79632 15.7012 6.48755 15.718 6.16701C15.7349 5.84646 15.6584 5.52791 15.4977 5.25C15.3373 4.97193 15.0997 4.74637 14.8136 4.60067C14.5275 4.45497 14.2053 4.3954 13.8861 4.42917L12.8136 4.54333C12.4306 4.58356 12.0447 4.50159 11.7111 4.30917C11.3789 4.11619 11.1164 3.82302 10.9611 3.47167L10.5194 2.48583C10.3891 2.19238 10.1765 1.94304 9.90724 1.76805C9.63803 1.59306 9.32383 1.49995 9.00275 1.5C8.68166 1.49995 8.36746 1.59306 8.09825 1.76805C7.82904 1.94304 7.61638 2.19238 7.48608 2.48583L7.04775 3.47167C6.89244 3.82302 6.6299 4.11619 6.29775 4.30917C5.96416 4.50159 5.57825 4.58356 5.19525 4.54333L4.11941 4.42917C3.80016 4.3954 3.47797 4.45497 3.1919 4.60067C2.90583 4.74637 2.66817 4.97193 2.50775 5.25C2.34711 5.52791 2.27058 5.84646 2.28745 6.16701C2.30431 6.48755 2.41384 6.79632 2.60275 7.05583L3.23775 7.92833C3.4642 8.23976 3.58615 8.61494 3.58608 9C3.58615 9.38506 3.4642 9.76024 3.23775 10.0717L2.60275 10.9442C2.41384 11.2037 2.30431 11.5124 2.28745 11.833C2.27058 12.1535 2.34711 12.4721 2.50775 12.75C2.66833 13.0279 2.90602 13.2534 3.19204 13.399C3.47807 13.5447 3.80018 13.6044 4.11941 13.5708L5.19191 13.4567C5.57491 13.4164 5.96082 13.4984 6.29441 13.6908C6.62781 13.8833 6.89157 14.1765 7.04775 14.5283Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M9.00141 11.25C10.244 11.25 11.2514 10.2426 11.2514 9C11.2514 7.75736 10.244 6.75 9.00141 6.75C7.75877 6.75 6.75141 7.75736 6.75141 9C6.75141 10.2426 7.75877 11.25 9.00141 11.25Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { SettingsIcon };
+export default SettingsIcon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const SettingsIcon: 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="M7.04775 14.5283L7.48608 15.5142C7.61638 15.8076 7.82904 16.057 8.09825 16.232C8.36746 16.4069 8.68166 16.5001 9.00275 16.5C9.32383 16.5001 9.63803 16.4069 9.90724 16.232C10.1765 16.057 10.3891 15.8076 10.5194 15.5142L10.9577 14.5283C11.1138 14.1785 11.3763 13.8869 11.7077 13.695C12.0413 13.5026 12.4272 13.4206 12.8102 13.4608L13.8827 13.575C14.202 13.6088 14.5242 13.5492 14.8103 13.4035C15.0963 13.2578 15.334 13.0322 15.4944 12.7542C15.655 12.4763 15.7316 12.1577 15.7147 11.8372C15.6978 11.5166 15.5883 11.2079 15.3994 10.9483L14.7644 10.0758C14.5383 9.76285 14.4175 9.38611 14.4194 9C14.4193 8.61494 14.5413 8.23976 14.7677 7.92833L15.4027 7.05583C15.5917 6.79632 15.7012 6.48755 15.718 6.16701C15.7349 5.84646 15.6584 5.52791 15.4977 5.25C15.3373 4.97193 15.0997 4.74637 14.8136 4.60067C14.5275 4.45497 14.2053 4.3954 13.8861 4.42917L12.8136 4.54333C12.4306 4.58356 12.0447 4.50159 11.7111 4.30917C11.3789 4.11619 11.1164 3.82302 10.9611 3.47167L10.5194 2.48583C10.3891 2.19238 10.1765 1.94304 9.90724 1.76805C9.63803 1.59306 9.32383 1.49995 9.00275 1.5C8.68166 1.49995 8.36746 1.59306 8.09825 1.76805C7.82904 1.94304 7.61638 2.19238 7.48608 2.48583L7.04775 3.47167C6.89244 3.82302 6.6299 4.11619 6.29775 4.30917C5.96416 4.50159 5.57825 4.58356 5.19525 4.54333L4.11941 4.42917C3.80016 4.3954 3.47797 4.45497 3.1919 4.60067C2.90583 4.74637 2.66817 4.97193 2.50775 5.25C2.34711 5.52791 2.27058 5.84646 2.28745 6.16701C2.30431 6.48755 2.41384 6.79632 2.60275 7.05583L3.23775 7.92833C3.4642 8.23976 3.58615 8.61494 3.58608 9C3.58615 9.38506 3.4642 9.76024 3.23775 10.0717L2.60275 10.9442C2.41384 11.2037 2.30431 11.5124 2.28745 11.833C2.27058 12.1535 2.34711 12.4721 2.50775 12.75C2.66833 13.0279 2.90602 13.2534 3.19204 13.399C3.47807 13.5447 3.80018 13.6044 4.11941 13.5708L5.19191 13.4567C5.57491 13.4164 5.96082 13.4984 6.29441 13.6908C6.62781 13.8833 6.89157 14.1765 7.04775 14.5283Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9.00141 11.25C10.244 11.25 11.2514 10.2426 11.2514 9C11.2514 7.75736 10.244 6.75 9.00141 6.75C7.75877 6.75 6.75141 7.75736 6.75141 9C6.75141 10.2426 7.75877 11.25 9.00141 11.25Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default SettingsIcon;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface SlidersIconProps {
+  size?: number;
+  color?: string;
+}
+
+const SlidersIcon: React.FC<SlidersIconProps> = ({
+  size = 18,
+  color = '#000000',
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M2.25 4.5H6M6 4.5C6 5.32843 6.67157 6 7.5 6C8.32843 6 9 5.32843 9 4.5C9 3.67157 8.32843 3 7.5 3C6.67157 3 6 3.67157 6 4.5ZM2.25 13.5H10.5M10.5 13.5C10.5 14.3284 11.1716 15 12 15C12.8284 15 13.5 14.3284 13.5 13.5C13.5 12.6716 12.8284 12 12 12C11.1716 12 10.5 12.6716 10.5 13.5ZM13.5 13.5H15.75M9 4.5H15.75M2.25 9H12M12 9C12 9.82843 12.6716 10.5 13.5 10.5C14.3284 10.5 15 9.82843 15 9C15 8.17157 14.3284 7.5 13.5 7.5C12.6716 7.5 12 8.17157 12 9Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { SlidersIcon };
+export default SlidersIcon;

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

@@ -0,0 +1,29 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const SlidersIcon: 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="M2.25 4.5H6M6 4.5C6 5.32843 6.67157 6 7.5 6C8.32843 6 9 5.32843 9 4.5C9 3.67157 8.32843 3 7.5 3C6.67157 3 6 3.67157 6 4.5ZM2.25 13.5H10.5M10.5 13.5C10.5 14.3284 11.1716 15 12 15C12.8284 15 13.5 14.3284 13.5 13.5C13.5 12.6716 12.8284 12 12 12C11.1716 12 10.5 12.6716 10.5 13.5ZM13.5 13.5H15.75M9 4.5H15.75M2.25 9H12M12 9C12 9.82843 12.6716 10.5 13.5 10.5C14.3284 10.5 15 9.82843 15 9C15 8.17157 14.3284 7.5 13.5 7.5C12.6716 7.5 12 8.17157 12 9Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default SlidersIcon;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface SmallMagnifyIconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const SmallMagnifyIcon: React.FC<SmallMagnifyIconProps> = ({
+  size = 14,
+  color = '#000000',
+  strokeWidth = 1.5,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 14 14" fill="none">
+    <Path
+      d="M12.25 12.25L9.7125 9.7125M11.0833 6.41667C11.0833 8.994 8.994 11.0833 6.41667 11.0833C3.83934 11.0833 1.75 8.994 1.75 6.41667C1.75 3.83934 3.83934 1.75 6.41667 1.75C8.994 1.75 11.0833 3.83934 11.0833 6.41667Z"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { SmallMagnifyIcon };
+export default SmallMagnifyIcon;

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

@@ -0,0 +1,34 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  className?: string;
+}
+
+const SmallMagnifyIcon: React.FC<IconProps> = ({
+  size = 14,
+  color = "currentColor",
+  strokeWidth = 1.5,
+  className, 
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 14 14"
+    fill="none"
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12.25 12.25L9.7125 9.7125M11.0833 6.41667C11.0833 8.994 8.994 11.0833 6.41667 11.0833C3.83934 11.0833 1.75 8.994 1.75 6.41667C1.75 3.83934 3.83934 1.75 6.41667 1.75C8.994 1.75 11.0833 3.83934 11.0833 6.41667Z"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default SmallMagnifyIcon;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type Trash02IconProps = {
+  color?: string;
+  size?: number;
+};
+
+const Trash02Icon: React.FC<Trash02IconProps> = ({
+  color = '#000000',
+  size = 18,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M12 4.5V3.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.5H8.4C7.55992 1.5 7.13988 1.5 6.81901 1.66349C6.53677 1.8073 6.3073 2.03677 6.16349 2.31901C6 2.63988 6 3.05992 6 3.9V4.5M2.25 4.5H15.75M14.25 4.5V12.9C14.25 14.1601 14.25 14.7902 14.0048 15.2715C13.789 15.6948 13.4448 16.039 13.0215 16.2548C12.5402 16.5 11.9101 16.5 10.65 16.5H7.35C6.08988 16.5 5.45982 16.5 4.97852 16.2548C4.55516 16.039 4.21095 15.6948 3.99524 15.2715C3.75 14.7902 3.75 14.1601 3.75 12.9V4.5"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { Trash02Icon };
+export default Trash02Icon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+type Trash02IconProps = React.SVGProps<SVGSVGElement> & {
+  color?: string;
+  size?: number;    
+};
+
+const Trash02Icon: React.FC<Trash02IconProps> = ({
+  color = "currentColor",
+  size = 18,    
+  className,
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M12 4.5V3.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.5H8.4C7.55992 1.5 7.13988 1.5 6.81901 1.66349C6.53677 1.8073 6.3073 2.03677 6.16349 2.31901C6 2.63988 6 3.05992 6 3.9V4.5M2.25 4.5H15.75M14.25 4.5V12.9C14.25 14.1601 14.25 14.7902 14.0048 15.2715C13.789 15.6948 13.4448 16.039 13.0215 16.2548C12.5402 16.5 11.9101 16.5 10.65 16.5H7.35C6.08988 16.5 5.45982 16.5 4.97852 16.2548C4.55516 16.039 4.21095 15.6948 3.99524 15.2715C3.75 14.7902 3.75 14.1601 3.75 12.9V4.5"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Trash02Icon;