@postal-music/icons 0.1.0

package/src/icons/files/UploadIcon.web.tsx

@@ -0,0 +1,34 @@
+// components/icons/UploadIcon.tsx
+import * as React from "react";
+
+interface UploadIconProps 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;
+}
+
+export const UploadIcon: React.FC<UploadIconProps> = ({
+  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}
+  >
+    <path
+      d="M14.875 10.625V11.475C14.875 12.6651 14.875 13.2602 14.6434 13.7147C14.4397 14.1146 14.1146 14.4397 13.7147 14.6434C13.2602 14.875 12.6651 14.875 11.475 14.875H5.525C4.33489 14.875 3.73983 14.875 3.28527 14.6434C2.88543 14.4397 2.56034 14.1146 2.35661 13.7147C2.125 13.2602 2.125 12.6651 2.125 11.475V10.625M12.0417 5.66667L8.5 2.125M8.5 2.125L4.95833 5.66667M8.5 2.125V10.625"
+      stroke={strokeColor}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/icons/files/index.ts

@@ -0,0 +1,14 @@
+export { default as CameraIcon } from './CameraIcon';
+export { default as Download02Icon } from './Download02Icon';
+export { default as Download03Icon } from './Download03Icon';
+export { default as Download04Icon } from './Download04Icon';
+export { default as DownloadCircleIcon } from './DownloadCircleIcon';
+export { default as DownloadIcon } from './DownloadIcon';
+export { default as File02Icon } from './File02Icon';
+export { default as FileDownload02Icon } from './FileDownload02Icon';
+export { default as FolderGradientIcon } from './FolderGradientIcon';
+export { default as FolderIcon } from './FolderIcon';
+export { default as FolderPlusIcon } from './FolderPlusIcon';
+export { default as Upload01Icon } from './Upload01Icon';
+export { default as UploadCloudIcon } from './UploadCloudIcon';
+export { default as UploadIcon } from './UploadIcon';

package/src/icons/finance/BankNote03Icon.native.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type BankNote03IconProps = {
+  size?: number | string;
+  strokeWidth?: number;
+  onClick?: () => void;
+};
+
+const BankNote03Icon = ({
+  size = 20,
+  strokeWidth = 1.5,
+  onClick,
+}: BankNote03IconProps) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      onPress={onClick}
+    >
+      <Path
+        d="M11.667 7.49984H9.58366C8.8933 7.49984 8.33366 8.05948 8.33366 8.74984C8.33366 9.44019 8.8933 9.99984 9.58366 9.99984H10.417C11.1073 9.99984 11.667 10.5595 11.667 11.2498C11.667 11.9402 11.1073 12.4998 10.417 12.4998H8.33366M10.0003 6.6665V7.49984M10.0003 12.4998V13.3332M15.0003 9.99984H15.0087M5.00033 9.99984H5.00866M1.66699 6.83317L1.66699 13.1665C1.66699 14.0999 1.66699 14.5666 1.84865 14.9232C2.00844 15.2368 2.2634 15.4917 2.57701 15.6515C2.93353 15.8332 3.40024 15.8332 4.33366 15.8332L15.667 15.8332C16.6004 15.8332 17.0671 15.8332 17.4236 15.6515C17.7372 15.4917 17.9922 15.2368 18.152 14.9232C18.3337 14.5666 18.3337 14.0999 18.3337 13.1665V6.83317C18.3337 5.89975 18.3337 5.43304 18.152 5.07652C17.9922 4.76292 17.7372 4.50795 17.4236 4.34816C17.0671 4.16651 16.6004 4.16651 15.667 4.1665L4.33366 4.1665C3.40024 4.1665 2.93353 4.1665 2.57701 4.34816C2.2634 4.50795 2.00844 4.76292 1.84865 5.07652C1.66699 5.43304 1.66699 5.89975 1.66699 6.83317ZM15.417 9.99984C15.417 10.23 15.2304 10.4165 15.0003 10.4165C14.7702 10.4165 14.5837 10.23 14.5837 9.99984C14.5837 9.76972 14.7702 9.58317 15.0003 9.58317C15.2304 9.58317 15.417 9.76972 15.417 9.99984ZM5.41699 9.99984C5.41699 10.23 5.23044 10.4165 5.00033 10.4165C4.77021 10.4165 4.58366 10.23 4.58366 9.99984C4.58366 9.76972 4.77021 9.58317 5.00033 9.58317C5.23044 9.58317 5.41699 9.76972 5.41699 9.99984Z"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { BankNote03Icon };
+export default BankNote03Icon;

package/src/icons/finance/BankNote03Icon.web.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../../utils/cn";
+
+type SvgProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+  strokeWidth?: number;
+  ariaLabel?: string;
+  title?: string;
+};
+
+const handleKeyDown: React.KeyboardEventHandler<SVGSVGElement> = (e) => {
+  const isEnter = e.key === "Enter";
+  const isSpace = e.key === " ";
+  if (!isEnter && !isSpace) return;
+  e.preventDefault();
+  (e.currentTarget as unknown as { click?: () => void })?.click?.();
+};
+
+const Banknote03Icon = React.memo(
+  React.forwardRef<SVGSVGElement, SvgProps>(function Banknote03Icon(
+    {
+      size = 20,
+      strokeWidth = 1.5,
+      className,
+      ariaLabel,
+      title,
+      onClick,
+      ...rest
+    },
+    ref,
+  ) {
+    const interactive = typeof onClick === "function";
+
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        width={size}
+        height={size}
+        role="img"
+        aria-hidden={interactive ? undefined : true}
+        aria-label={interactive ? (ariaLabel ?? "banknote icon") : undefined}
+        tabIndex={interactive ? 0 : -1}
+        onKeyDown={interactive ? handleKeyDown : undefined}
+        onClick={onClick}
+        className={cn("fill-none stroke-current", className)}
+        {...rest}
+      >
+        {title ? <title>{title}</title> : null}
+        <path
+          d="M11.667 7.49984H9.58366C8.8933 7.49984 8.33366 8.05948 8.33366 8.74984C8.33366 9.44019 8.8933 9.99984 9.58366 9.99984H10.417C11.1073 9.99984 11.667 10.5595 11.667 11.2498C11.667 11.9402 11.1073 12.4998 10.417 12.4998H8.33366M10.0003 6.6665V7.49984M10.0003 12.4998V13.3332M15.0003 9.99984H15.0087M5.00033 9.99984H5.00866M1.66699 6.83317L1.66699 13.1665C1.66699 14.0999 1.66699 14.5666 1.84865 14.9232C2.00844 15.2368 2.2634 15.4917 2.57701 15.6515C2.93353 15.8332 3.40024 15.8332 4.33366 15.8332L15.667 15.8332C16.6004 15.8332 17.0671 15.8332 17.4236 15.6515C17.7372 15.4917 17.9922 15.2368 18.152 14.9232C18.3337 14.5666 18.3337 14.0999 18.3337 13.1665V6.83317C18.3337 5.89975 18.3337 5.43304 18.152 5.07652C17.9922 4.76292 17.7372 4.50795 17.4236 4.34816C17.0671 4.16651 16.6004 4.16651 15.667 4.1665L4.33366 4.1665C3.40024 4.1665 2.93353 4.1665 2.57701 4.34816C2.2634 4.50795 2.00844 4.76292 1.84865 5.07652C1.66699 5.43304 1.66699 5.89975 1.66699 6.83317ZM15.417 9.99984C15.417 10.23 15.2304 10.4165 15.0003 10.4165C14.7702 10.4165 14.5837 10.23 14.5837 9.99984C14.5837 9.76972 14.7702 9.58317 15.0003 9.58317C15.2304 9.58317 15.417 9.76972 15.417 9.99984ZM5.41699 9.99984C5.41699 10.23 5.23044 10.4165 5.00033 10.4165C4.77021 10.4165 4.58366 10.23 4.58366 9.99984C4.58366 9.76972 4.77021 9.58317 5.00033 9.58317C5.23044 9.58317 5.41699 9.76972 5.41699 9.99984Z"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }),
+);
+
+export default Banknote03Icon;

package/src/icons/finance/CoinsStacked03Icon.native.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type CoinsStacked03IconProps = {
+  size?: number | string;
+  strokeWidth?: number;
+  stroke?: string;
+  onClick?: () => void;
+};
+
+const CoinsStacked03Icon = ({
+  size = 20,
+  strokeWidth = 1.5,
+  stroke = '#000000',
+  onClick,
+}: CoinsStacked03IconProps) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      onPress={onClick}
+    >
+      <Path d="M10.8337 4.16667C10.8337 5.08714 8.78163 5.83333 6.25033 5.83333C3.71902 5.83333 1.66699 5.08714 1.66699 4.16667M10.8337 4.16667C10.8337 3.24619 8.78163 2.5 6.25033 2.5C3.71902 2.5 1.66699 3.24619 1.66699 4.16667M10.8337 4.16667V5.41667M1.66699 4.16667V14.1667C1.66699 15.0871 3.71902 15.8333 6.25033 15.8333M6.25033 9.16667C6.10987 9.16667 5.97089 9.16437 5.83366 9.15987C3.49762 9.08332 1.66699 8.3694 1.66699 7.5M6.25033 12.5C3.71902 12.5 1.66699 11.7538 1.66699 10.8333M18.3337 9.58333C18.3337 10.5038 16.2816 11.25 13.7503 11.25C11.219 11.25 9.16699 10.5038 9.16699 9.58333M18.3337 9.58333C18.3337 8.66286 16.2816 7.91667 13.7503 7.91667C11.219 7.91667 9.16699 8.66286 9.16699 9.58333M18.3337 9.58333V15.8333C18.3337 16.7538 16.2816 17.5 13.7503 17.5C11.219 17.5 9.16699 16.7538 9.16699 15.8333V9.58333M18.3337 12.7083C18.3337 13.6288 16.2816 14.375 13.7503 14.375C11.219 14.375 9.16699 13.6288 9.16699 12.7083" />
+    </Svg>
+  );
+};
+
+CoinsStacked03Icon.displayName = 'CoinsStacked03Icon';
+
+export { CoinsStacked03Icon };
+export default CoinsStacked03Icon;

package/src/icons/finance/CoinsStacked03Icon.web.tsx

@@ -0,0 +1,71 @@
+// CoinsStacked03Icon.tsx
+"use client";
+
+import * as React from "react";
+
+type CoinsStacked03IconProps = {
+  size?: number | string;
+  strokeWidth?: number;
+  stroke?: string;
+  className?: string;
+  title?: string;
+  onClick?: () => void;
+};
+
+const CoinsStacked03Icon = React.forwardRef<
+  SVGSVGElement,
+  CoinsStacked03IconProps
+>(
+  (
+    {
+      size = 20,
+      strokeWidth = 1.5,
+      stroke = "currentColor",
+      className,
+      title,
+      onClick,
+    },
+    ref,
+  ) => {
+    const isInteractive = Boolean(onClick);
+
+    const handleKeyDown: React.KeyboardEventHandler<SVGSVGElement> = (
+      event,
+    ) => {
+      if (!isInteractive) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onClick?.();
+      }
+    };
+
+    return (
+      <svg
+        ref={ref}
+        width={size}
+        height={size}
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        role="img"
+        tabIndex={isInteractive ? 0 : undefined}
+        aria-label={isInteractive ? title || "coins stacked icon" : undefined}
+        aria-hidden={isInteractive ? undefined : title ? undefined : true}
+        onClick={onClick}
+        onKeyDown={handleKeyDown}
+      >
+        {title ? <title>{title}</title> : null}
+        <path d="M10.8337 4.16667C10.8337 5.08714 8.78163 5.83333 6.25033 5.83333C3.71902 5.83333 1.66699 5.08714 1.66699 4.16667M10.8337 4.16667C10.8337 3.24619 8.78163 2.5 6.25033 2.5C3.71902 2.5 1.66699 3.24619 1.66699 4.16667M10.8337 4.16667V5.41667M1.66699 4.16667V14.1667C1.66699 15.0871 3.71902 15.8333 6.25033 15.8333M6.25033 9.16667C6.10987 9.16667 5.97089 9.16437 5.83366 9.15987C3.49762 9.08332 1.66699 8.3694 1.66699 7.5M6.25033 12.5C3.71902 12.5 1.66699 11.7538 1.66699 10.8333M18.3337 9.58333C18.3337 10.5038 16.2816 11.25 13.7503 11.25C11.219 11.25 9.16699 10.5038 9.16699 9.58333M18.3337 9.58333C18.3337 8.66286 16.2816 7.91667 13.7503 7.91667C11.219 7.91667 9.16699 8.66286 9.16699 9.58333M18.3337 9.58333V15.8333C18.3337 16.7538 16.2816 17.5 13.7503 17.5C11.219 17.5 9.16699 16.7538 9.16699 15.8333V9.58333M18.3337 12.7083C18.3337 13.6288 16.2816 14.375 13.7503 14.375C11.219 14.375 9.16699 13.6288 9.16699 12.7083" />
+      </svg>
+    );
+  },
+);
+
+CoinsStacked03Icon.displayName = "CoinsStacked03Icon";
+
+export default CoinsStacked03Icon;

package/src/icons/finance/CreditCardIcon.native.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface CreditCardIconProps {
+  size?: number;
+  color?: string;
+}
+
+const CreditCardIcon: React.FC<CreditCardIconProps> = ({ size = 18, color = '#000000' }) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M16.5 7.5H1.5M1.5 6.15L1.5 11.85C1.5 12.6901 1.5 13.1101 1.66349 13.431C1.8073 13.7132 2.03677 13.9427 2.31901 14.0865C2.63988 14.25 3.05992 14.25 3.9 14.25L14.1 14.25C14.9401 14.25 15.3601 14.25 15.681 14.0865C15.9632 13.9427 16.1927 13.7132 16.3365 13.431C16.5 13.1101 16.5 12.6901 16.5 11.85V6.15C16.5 5.30992 16.5 4.88988 16.3365 4.56902C16.1927 4.28677 15.9632 4.0573 15.681 3.91349C15.3601 3.75 14.9401 3.75 14.1 3.75L3.9 3.75C3.05992 3.75 2.63988 3.75 2.31901 3.91349C2.03677 4.0573 1.8073 4.28677 1.66349 4.56901C1.5 4.88988 1.5 5.30992 1.5 6.15Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { CreditCardIcon };
+export default CreditCardIcon;

package/src/icons/finance/CreditCardIcon.web.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const CreditCardIcon: 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="M16.5 7.5H1.5
+         M1.5 6.15L1.5 11.85C1.5 12.6901 1.5 13.1101 1.66349 13.431C1.8073 13.7132 2.03677 13.9427 2.31901 14.0865C2.63988 14.25 3.05992 14.25 3.9 14.25L14.1 14.25C14.9401 14.25 15.3601 14.25 15.681 14.0865C15.9632 13.9427 16.1927 13.7132 16.3365 13.431C16.5 13.1101 16.5 12.6901 16.5 11.85V6.15C16.5 5.30992 16.5 4.88988 16.3365 4.56902C16.1927 4.28677 15.9632 4.0573 15.681 3.91349C15.3601 3.75 14.9401 3.75 14.1 3.75L3.9 3.75C3.05992 3.75 2.63988 3.75 2.31901 3.91349C2.03677 4.0573 1.8073 4.28677 1.66349 4.56901C1.5 4.88988 1.5 5.30992 1.5 6.15Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default CreditCardIcon;

package/src/icons/finance/index.ts

@@ -0,0 +1,3 @@
+export { default as BankNote03Icon } from './BankNote03Icon';
+export { default as CoinsStacked03Icon } from './CoinsStacked03Icon';
+export { default as CreditCardIcon } from './CreditCardIcon';

package/src/icons/general/ActivityIcon.native.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface ActivityIconProps {
+  size?: number;
+}
+
+const ActivityIcon: React.FC<ActivityIconProps> = ({ size = 18 }) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <Path
+        d="M16.5 9H13.5L11.25 15.75L6.75 2.25L4.5 9H1.5"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { ActivityIcon };
+export default ActivityIcon;

package/src/icons/general/ActivityIcon.web.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+interface ActivityIconProps extends SVGProps<SVGSVGElement> {
+  /**
+   * Size of the icon (width and height). Default is 18.
+   */
+  size?: number;
+}
+
+/**
+ * A reusable "Activity" icon component.
+ *
+ * @param size - width and height of the SVG in pixels.
+ * @param props - additional SVG props such as className or style.
+ */
+const ActivityIcon: React.FC<ActivityIconProps> = ({ size = 18, ...props }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M16.5 9H13.5L11.25 15.75L6.75 2.25L4.5 9H1.5"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ActivityIcon;

package/src/icons/general/BookIcon.native.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const BookIcon: React.FC<IconProps> = ({ size = 18, color = '#000000' }) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <Path
+      d="M15 14.25V12H5.25C4.00736 12 3 13.0074 3 14.25M6.6 16.5H12.6C13.4401 16.5 13.8601 16.5 14.181 16.3365C14.4632 16.1927 14.6927 15.9632 14.8365 15.681C15 15.3601 15 14.9401 15 14.1V3.9C15 3.05992 15 2.63988 14.8365 2.31901C14.6927 2.03677 14.4632 1.8073 14.181 1.66349C13.8601 1.5 13.4401 1.5 12.6 1.5H6.6C5.33988 1.5 4.70982 1.5 4.22852 1.74524C3.80516 1.96095 3.46095 2.30516 3.24524 2.72852C3 3.20982 3 3.83988 3 5.1V12.9C3 14.1601 3 14.7902 3.24524 15.2715C3.46095 15.6948 3.80516 16.039 4.22852 16.2548C4.70982 16.5 5.33988 16.5 6.6 16.5Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { BookIcon };
+export default BookIcon;

package/src/icons/general/BookIcon.web.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const BookIcon: 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="M15 14.25V12H5.25C4.00736 12 3 13.0074 3 14.25M6.6 16.5H12.6C13.4401 16.5 13.8601 16.5 14.181 16.3365C14.4632 16.1927 14.6927 15.9632 14.8365 15.681C15 15.3601 15 14.9401 15 14.1V3.9C15 3.05992 15 2.63988 14.8365 2.31901C14.6927 2.03677 14.4632 1.8073 14.181 1.66349C13.8601 1.5 13.4401 1.5 12.6 1.5H6.6C5.33988 1.5 4.70982 1.5 4.22852 1.74524C3.80516 1.96095 3.46095 2.30516 3.24524 2.72852C3 3.20982 3 3.83988 3 5.1V12.9C3 14.1601 3 14.7902 3.24524 15.2715C3.46095 15.6948 3.80516 16.039 4.22852 16.2548C4.70982 16.5 5.33988 16.5 6.6 16.5Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default BookIcon;

package/src/icons/general/BookmarkIcon.native.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type IconProps = {
+  size?: number;
+  color?: string;
+  fill?: string;
+};
+
+const BookmarkIcon: React.FC<IconProps> = ({
+  size = 18,
+  color = '#000000',
+  fill = "none",
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill={fill}
+  >
+    <Path
+      d="M3.75 5.85C3.75 4.58988 3.75 3.95982 3.99524 3.47852C4.21095 3.05516 4.55516 2.71095 4.97852 2.49524C5.45982 2.25 6.08988 2.25 7.35 2.25H10.65C11.9101 2.25 12.5402 2.25 13.0215 2.49524C13.4448 2.71095 13.789 3.05516 14.0048 3.47852C14.25 3.95982 14.25 4.58988 14.25 5.85V15.75L9 12.75L3.75 15.75V5.85Z"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { BookmarkIcon };
+export default BookmarkIcon;

package/src/icons/general/BookmarkIcon.web.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+type IconProps = {
+  size?: number;
+  color?: string;
+  className?: string;
+  fill?: string;
+};
+
+const BookmarkIcon: React.FC<IconProps> = ({
+  size = 18,
+  color = "currentColor",
+  className,
+  fill = "none",
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    role="img"
+    fill={fill}
+    aria-hidden="true"
+  >
+    <path
+      d="M3.75 5.85C3.75 4.58988 3.75 3.95982 3.99524 3.47852C4.21095 3.05516 4.55516 2.71095 4.97852 2.49524C5.45982 2.25 6.08988 2.25 7.35 2.25H10.65C11.9101 2.25 12.5402 2.25 13.0215 2.49524C13.4448 2.71095 13.789 3.05516 14.0048 3.47852C14.25 3.95982 14.25 4.58988 14.25 5.85V15.75L9 12.75L3.75 15.75V5.85Z"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default BookmarkIcon;

package/src/icons/general/CollaborativeIcon.native.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const CollaborativeIcon: React.FC<IconProps> = ({
+  size = 18,
+  color = '#000000',
+  strokeWidth = 1.5,
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <Path
+      d="M12 13.5L14.25 11.25M14.25 11.25L16.5 13.5M14.25 11.25V15.75M11.625 2.46807C12.7244 2.91311 13.5 3.99098 13.5 5.25C13.5 6.50902 12.7244 7.58689 11.625 8.03193M9 11.25H6C4.60218 11.25 3.90326 11.25 3.35195 11.4784C2.61687 11.7828 2.03284 12.3669 1.72836 13.1019C1.5 13.6533 1.5 14.3522 1.5 15.75M10.125 5.25C10.125 6.90685 8.78185 8.25 7.125 8.25C5.46815 8.25 4.125 6.90685 4.125 5.25C4.125 3.59315 5.46815 2.25 7.125 2.25C8.78185 2.25 10.125 3.59315 10.125 5.25Z"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { CollaborativeIcon };
+export default CollaborativeIcon;

package/src/icons/general/CollaborativeIcon.web.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const CollaborativeIcon: 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 13.5L14.25 11.25M14.25 11.25L16.5 13.5M14.25 11.25V15.75M11.625 2.46807C12.7244 2.91311 13.5 3.99098 13.5 5.25C13.5 6.50902 12.7244 7.58689 11.625 8.03193M9 11.25H6C4.60218 11.25 3.90326 11.25 3.35195 11.4784C2.61687 11.7828 2.03284 12.3669 1.72836 13.1019C1.5 13.6533 1.5 14.3522 1.5 15.75M10.125 5.25C10.125 6.90685 8.78185 8.25 7.125 8.25C5.46815 8.25 4.125 6.90685 4.125 5.25C4.125 3.59315 5.46815 2.25 7.125 2.25C8.78185 2.25 10.125 3.59315 10.125 5.25Z"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default CollaborativeIcon;

package/src/icons/general/DataIcon.native.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type DataIconProps = {
+  size?: number | string;
+  stroke?: string;
+  strokeWidth?: number;
+};
+
+const DataIcon: React.FC<DataIconProps> = ({
+  size = 24,
+  stroke = '#000000',
+  strokeWidth = 2,
+}) => {
+  return (
+    <Svg
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size}
+      height={size}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <Path d="M21.2 22C21.48 22 21.62 22 21.727 21.9455C21.8211 21.8976 21.8976 21.8211 21.9455 21.727C22 21.62 22 21.48 22 21.2V10.8C22 10.52 22 10.38 21.9455 10.273C21.8976 10.1789 21.8211 10.1024 21.727 10.0545C21.62 10 21.48 10 21.2 10L18.8 10C18.52 10 18.38 10 18.273 10.0545C18.1789 10.1024 18.1024 10.1789 18.0545 10.273C18 10.38 18 10.52 18 10.8V13.2C18 13.48 18 13.62 17.9455 13.727C17.8976 13.8211 17.8211 13.8976 17.727 13.9455C17.62 14 17.48 14 17.2 14H14.8C14.52 14 14.38 14 14.273 14.0545C14.1789 14.1024 14.1024 14.1789 14.0545 14.273C14 14.38 14 14.52 14 14.8V17.2C14 17.48 14 17.62 13.9455 17.727C13.8976 17.8211 13.8211 17.8976 13.727 17.9455C13.62 18 13.48 18 13.2 18H10.8C10.52 18 10.38 18 10.273 18.0545C10.1789 18.1024 10.1024 18.1789 10.0545 18.273C10 18.38 10 18.52 10 18.8V21.2C10 21.48 10 21.62 10.0545 21.727C10.1024 21.8211 10.1789 21.8976 10.273 21.9455C10.38 22 10.52 22 10.8 22L21.2 22Z" />
+      <Path d="M10 6.8C10 6.51997 10 6.37996 10.0545 6.273C10.1024 6.17892 10.1789 6.10243 10.273 6.0545C10.38 6 10.52 6 10.8 6H13.2C13.48 6 13.62 6 13.727 6.0545C13.8211 6.10243 13.8976 6.17892 13.9455 6.273C14 6.37996 14 6.51997 14 6.8V9.2C14 9.48003 14 9.62004 13.9455 9.727C13.8976 9.82108 13.8211 9.89757 13.727 9.9455C13.62 10 13.48 10 13.2 10H10.8C10.52 10 10.38 10 10.273 9.9455C10.1789 9.89757 10.1024 9.82108 10.0545 9.727C10 9.62004 10 9.48003 10 9.2V6.8Z" />
+      <Path d="M3 12.8C3 12.52 3 12.38 3.0545 12.273C3.10243 12.1789 3.17892 12.1024 3.273 12.0545C3.37996 12 3.51997 12 3.8 12H6.2C6.48003 12 6.62004 12 6.727 12.0545C6.82108 12.1024 6.89757 12.1789 6.9455 12.273C7 12.38 7 12.52 7 12.8V15.2C7 15.48 7 15.62 6.9455 15.727C6.89757 15.8211 6.82108 15.8976 6.727 15.9455C6.62004 16 6.48003 16 6.2 16H3.8C3.51997 16 3.37996 16 3.273 15.9455C3.17892 15.8976 3.10243 15.8211 3.0545 15.727C3 15.62 3 15.48 3 15.2V12.8Z" />
+      <Path d="M2 2.8C2 2.51997 2 2.37996 2.0545 2.273C2.10243 2.17892 2.17892 2.10243 2.273 2.0545C2.37996 2 2.51997 2 2.8 2H5.2C5.48003 2 5.62004 2 5.727 2.0545C5.82108 2.10243 5.89757 2.17892 5.9455 2.273C6 2.37996 6 2.51997 6 2.8V5.2C6 5.48003 6 5.62004 5.9455 5.727C5.89757 5.82108 5.82108 5.89757 5.727 5.9455C5.62004 6 5.48003 6 5.2 6H2.8C2.51997 6 2.37996 6 2.273 5.9455C2.17892 5.89757 2.10243 5.82108 2.0545 5.727C2 5.62004 2 5.48003 2 5.2V2.8Z" />
+    </Svg>
+  );
+};
+
+export { DataIcon };
+export default DataIcon;

package/src/icons/general/DataIcon.web.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+
+type DataIconProps = React.SVGProps<SVGSVGElement> & {
+  title?: string;
+  size?: number | string;
+};
+
+export const DataIcon = React.forwardRef<SVGSVGElement, DataIconProps>(
+  (
+    {
+      title,
+      size = 24,
+      stroke = "currentColor",
+      strokeWidth = 2,
+      width,
+      height,
+      role,
+      ...rest
+    },
+    ref,
+  ) => {
+    const ariaProps = title
+      ? { role: role ?? "img", "aria-label": title }
+      : { "aria-hidden": true as const };
+
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        width={width ?? size}
+        height={height ?? size}
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...ariaProps}
+        {...rest}
+      >
+        {title ? <title>{title}</title> : null}
+        <path d="M21.2 22C21.48 22 21.62 22 21.727 21.9455C21.8211 21.8976 21.8976 21.8211 21.9455 21.727C22 21.62 22 21.48 22 21.2V10.8C22 10.52 22 10.38 21.9455 10.273C21.8976 10.1789 21.8211 10.1024 21.727 10.0545C21.62 10 21.48 10 21.2 10L18.8 10C18.52 10 18.38 10 18.273 10.0545C18.1789 10.1024 18.1024 10.1789 18.0545 10.273C18 10.38 18 10.52 18 10.8V13.2C18 13.48 18 13.62 17.9455 13.727C17.8976 13.8211 17.8211 13.8976 17.727 13.9455C17.62 14 17.48 14 17.2 14H14.8C14.52 14 14.38 14 14.273 14.0545C14.1789 14.1024 14.1024 14.1789 14.0545 14.273C14 14.38 14 14.52 14 14.8V17.2C14 17.48 14 17.62 13.9455 17.727C13.8976 17.8211 13.8211 17.8976 13.727 17.9455C13.62 18 13.48 18 13.2 18H10.8C10.52 18 10.38 18 10.273 18.0545C10.1789 18.1024 10.1024 18.1789 10.0545 18.273C10 18.38 10 18.52 10 18.8V21.2C10 21.48 10 21.62 10.0545 21.727C10.1024 21.8211 10.1789 21.8976 10.273 21.9455C10.38 22 10.52 22 10.8 22L21.2 22Z" />
+        <path d="M10 6.8C10 6.51997 10 6.37996 10.0545 6.273C10.1024 6.17892 10.1789 6.10243 10.273 6.0545C10.38 6 10.52 6 10.8 6H13.2C13.48 6 13.62 6 13.727 6.0545C13.8211 6.10243 13.8976 6.17892 13.9455 6.273C14 6.37996 14 6.51997 14 6.8V9.2C14 9.48003 14 9.62004 13.9455 9.727C13.8976 9.82108 13.8211 9.89757 13.727 9.9455C13.62 10 13.48 10 13.2 10H10.8C10.52 10 10.38 10 10.273 9.9455C10.1789 9.89757 10.1024 9.82108 10.0545 9.727C10 9.62004 10 9.48003 10 9.2V6.8Z" />
+        <path d="M3 12.8C3 12.52 3 12.38 3.0545 12.273C3.10243 12.1789 3.17892 12.1024 3.273 12.0545C3.37996 12 3.51997 12 3.8 12H6.2C6.48003 12 6.62004 12 6.727 12.0545C6.82108 12.1024 6.89757 12.1789 6.9455 12.273C7 12.38 7 12.52 7 12.8V15.2C7 15.48 7 15.62 6.9455 15.727C6.89757 15.8211 6.82108 15.8976 6.727 15.9455C6.62004 16 6.48003 16 6.2 16H3.8C3.51997 16 3.37996 16 3.273 15.9455C3.17892 15.8976 3.10243 15.8211 3.0545 15.727C3 15.62 3 15.48 3 15.2V12.8Z" />
+        <path d="M2 2.8C2 2.51997 2 2.37996 2.0545 2.273C2.10243 2.17892 2.17892 2.10243 2.273 2.0545C2.37996 2 2.51997 2 2.8 2H5.2C5.48003 2 5.62004 2 5.727 2.0545C5.82108 2.10243 5.89757 2.17892 5.9455 2.273C6 2.37996 6 2.51997 6 2.8V5.2C6 5.48003 6 5.62004 5.9455 5.727C5.89757 5.82108 5.82108 5.89757 5.727 5.9455C5.62004 6 5.48003 6 5.2 6H2.8C2.51997 6 2.37996 6 2.273 5.9455C2.17892 5.89757 2.10243 5.82108 2.0545 5.727C2 5.62004 2 5.48003 2 5.2V2.8Z" />
+      </svg>
+    );
+  },
+);
+
+DataIcon.displayName = "DataIcon";