@postal-music/icons 0.1.0

package/src/icons/communication/MailIcon.web.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+/**
+ * MailIcon React component
+ *
+ * @param props - SVG props to customize the icon (e.g., width, height, stroke color)
+ */
+const MailIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  const {
+    width = 18,
+    height = 18,
+    stroke = 'currentColor',
+    strokeWidth = 1.5,
+    ...restProps
+  } = props;
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...restProps}
+    >
+      <path
+        d="M1.5 5.25L7.62369 9.53658C8.11957 9.8837 8.36751 10.0573 8.6372 10.1245C8.87542 10.1839 9.12458 10.1839 9.3628 10.1245C9.63249 10.0573 9.88043 9.8837 10.3763 9.53658L16.5 5.25M5.1 15H12.9C14.1601 15 14.7902 15 15.2715 14.7548C15.6948 14.539 16.039 14.1948 16.2548 13.7715C16.5 13.2902 16.5 12.6601 16.5 11.4V6.6C16.5 5.33988 16.5 4.70982 16.2548 4.22852C16.039 3.80516 15.6948 3.46095 15.2715 3.24524C14.7902 3 14.1601 3 12.9 3H5.1C3.83988 3 3.20982 3 2.72852 3.24524C2.30516 3.46095 1.96095 3.80516 1.74524 4.22852C1.5 4.70982 1.5 5.33988 1.5 6.6V11.4C1.5 12.6601 1.5 13.2902 1.74524 13.7715C1.96095 14.1948 2.30516 14.539 2.72852 14.7548C3.20982 15 3.83988 15 5.1 15Z"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default MailIcon;

package/src/icons/communication/MessageSquareTextIcon.native.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+interface MessageSquareTextIconProps {
+  size?: number;
+  strokeWidth?: number;
+}
+
+const MessageSquareTextIcon: React.FC<MessageSquareTextIconProps> = ({
+  size = 18,
+  strokeWidth = 1.5,
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <Path
+      d="M5.25 6.375H9M5.25 9H11.25M7.26281 13.5H12.15C13.4101 13.5 14.0402 13.5 14.5215 13.2548C14.9448 13.039 15.289 12.6948 15.5048 12.2715C15.75 11.7902 15.75 11.1601 15.75 9.9V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.289 3.05516 14.9448 2.71095 14.5215 2.49524C14.0402 2.25 13.4101 2.25 12.15 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.85V15.2516C2.25 15.6513 2.25 15.8511 2.33192 15.9537C2.40317 16.043 2.5112 16.0949 2.6254 16.0948C2.75672 16.0946 2.91275 15.9698 3.22482 15.7201L5.01391 14.2889C5.37939 13.9965 5.56213 13.8503 5.76561 13.7463C5.94615 13.6541 6.13832 13.5867 6.33691 13.5459C6.56075 13.5 6.79477 13.5 7.26281 13.5Z"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { MessageSquareTextIcon };
+export default MessageSquareTextIcon;

package/src/icons/communication/MessageSquareTextIcon.web.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+interface MessageSquareTextIconProps extends SVGProps<SVGSVGElement> {
+  /**
+   * Size of the icon (width and height). Default is 18.
+   */
+  size?: number;
+  strokeWidth?: number;
+}
+
+/**
+ * A reusable "Message Square Text" icon component.
+ *
+ * @param size - width and height of the SVG in pixels.
+ * @param props - additional SVG props such as className or style.
+ */
+const MessageSquareTextIcon: React.FC<MessageSquareTextIconProps> = ({
+  size = 18,
+  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="M5.25 6.375H9M5.25 9H11.25M7.26281 13.5H12.15C13.4101 13.5 14.0402 13.5 14.5215 13.2548C14.9448 13.039 15.289 12.6948 15.5048 12.2715C15.75 11.7902 15.75 11.1601 15.75 9.9V5.85C15.75 4.58988 15.75 3.95982 15.5048 3.47852C15.289 3.05516 14.9448 2.71095 14.5215 2.49524C14.0402 2.25 13.4101 2.25 12.15 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.85V15.2516C2.25 15.6513 2.25 15.8511 2.33192 15.9537C2.40317 16.043 2.5112 16.0949 2.6254 16.0948C2.75672 16.0946 2.91275 15.9698 3.22482 15.7201L5.01391 14.2889C5.37939 13.9965 5.56213 13.8503 5.76561 13.7463C5.94615 13.6541 6.13832 13.5867 6.33691 13.5459C6.56075 13.5 6.79477 13.5 7.26281 13.5Z"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default MessageSquareTextIcon;

package/src/icons/communication/MessageTextCircle01Icon.native.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+type IconProps = {
+  size?: number;
+  color?: string;
+};
+
+export const MessageTextCircle01Icon: React.FC<IconProps> = ({
+  size = 18,
+  color = '#000000',
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <Path
+      d="M5.99972 7.125H8.99972M5.99972 9.75H11.2497M9.37472 15C12.8955 15 15.7497 12.1458 15.7497 8.625C15.7497 5.10418 12.8955 2.25 9.37472 2.25C5.8539 2.25 2.99972 5.10418 2.99972 8.625C2.99972 9.3375 3.1166 10.0227 3.33225 10.6625C3.4134 10.9032 3.45397 11.0236 3.46129 11.1161C3.46852 11.2074 3.46305 11.2714 3.44046 11.3602C3.41758 11.4501 3.36707 11.5436 3.26604 11.7306L2.0393 14.0013C1.86431 14.3252 1.77682 14.4871 1.7964 14.6121C1.81346 14.7209 1.87753 14.8168 1.9716 14.8742C2.0796 14.9401 2.26269 14.9211 2.62887 14.8833L6.46964 14.4863C6.58595 14.4742 6.64411 14.4682 6.69711 14.4703C6.74925 14.4722 6.78605 14.4771 6.83689 14.4889C6.88858 14.5008 6.95358 14.5258 7.08358 14.5759C7.79462 14.8498 8.56713 15 9.37472 15Z"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export default MessageTextCircle01Icon;

package/src/icons/communication/MessageTextCircle01Icon.web.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+type IconProps = {
+  size?: number;
+  color?: string;
+  className?: string;
+};
+
+export const MessageTextCircle01Icon: React.FC<IconProps> = ({
+  size = 18,
+  color = "currentColor",
+  className,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    role="img"
+    aria-hidden="true"
+  >
+    <path
+      d="M5.99972 7.125H8.99972M5.99972 9.75H11.2497M9.37472 15C12.8955 15 15.7497 12.1458 15.7497 8.625C15.7497 5.10418 12.8955 2.25 9.37472 2.25C5.8539 2.25 2.99972 5.10418 2.99972 8.625C2.99972 9.3375 3.1166 10.0227 3.33225 10.6625C3.4134 10.9032 3.45397 11.0236 3.46129 11.1161C3.46852 11.2074 3.46305 11.2714 3.44046 11.3602C3.41758 11.4501 3.36707 11.5436 3.26604 11.7306L2.0393 14.0013C1.86431 14.3252 1.77682 14.4871 1.7964 14.6121C1.81346 14.7209 1.87753 14.8168 1.9716 14.8742C2.0796 14.9401 2.26269 14.9211 2.62887 14.8833L6.46964 14.4863C6.58595 14.4742 6.64411 14.4682 6.69711 14.4703C6.74925 14.4722 6.78605 14.4771 6.83689 14.4889C6.88858 14.5008 6.95358 14.5258 7.08358 14.5759C7.79462 14.8498 8.56713 15 9.37472 15Z"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/icons/communication/NotificationTextIcon.native.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+export const NotificationTextIcon = () => (
+  <Svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <Path
+      d="M8.25 3H5.85C4.58988 3 3.95982 3 3.47852 3.24524C3.05516 3.46095 2.71095 3.80516 2.49524 4.22852C2.25 4.70982 2.25 5.33988 2.25 6.6V12.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.75H11.4C12.6601 15.75 13.2902 15.75 13.7715 15.5048C14.1948 15.289 14.539 14.9448 14.7548 14.5215C15 14.0402 15 13.4101 15 12.15V9.75M9.75 12.75H5.25M11.25 9.75H5.25M15.091 2.90901C15.9697 3.78769 15.9697 5.21231 15.091 6.09099C14.2123 6.96967 12.7877 6.96967 11.909 6.09099C11.0303 5.21231 11.0303 3.78769 11.909 2.90901C12.7877 2.03033 14.2123 2.03033 15.091 2.90901Z"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export default NotificationTextIcon;

package/src/icons/communication/NotificationTextIcon.web.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+type IconProps = React.SVGProps<SVGSVGElement>;
+
+export const NotificationTextIcon = (props: IconProps) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+    {...props}
+  >
+    <path
+      d="M8.25 3H5.85C4.58988 3 3.95982 3 3.47852 3.24524C3.05516 3.46095 2.71095 3.80516 2.49524 4.22852C2.25 4.70982 2.25 5.33988 2.25 6.6V12.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.75H11.4C12.6601 15.75 13.2902 15.75 13.7715 15.5048C14.1948 15.289 14.539 14.9448 14.7548 14.5215C15 14.0402 15 13.4101 15 12.15V9.75M9.75 12.75H5.25M11.25 9.75H5.25M15.091 2.90901C15.9697 3.78769 15.9697 5.21231 15.091 6.09099C14.2123 6.96967 12.7877 6.96967 11.909 6.09099C11.0303 5.21231 11.0303 3.78769 11.909 2.90901C12.7877 2.03033 14.2123 2.03033 15.091 2.90901Z"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/icons/communication/SendIcon.native.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+type Props = {
+  size?: number | string;
+};
+
+const SendIcon = ({ size = 18 }: Props) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <Path
+      opacity={0.9}
+      d="M7.87318 10.1251L15.7482 2.25013M7.96886 10.3712L9.93995 15.4397C10.1136 15.8862 10.2004 16.1094 10.3255 16.1746C10.434 16.2311 10.5631 16.2312 10.6717 16.1748C10.7968 16.1098 10.8839 15.8866 11.0581 15.4403L16.0009 2.77453C16.1581 2.37164 16.2367 2.1702 16.1937 2.04148C16.1563 1.92969 16.0686 1.84197 15.9568 1.80462C15.8281 1.76162 15.6267 1.84023 15.2238 1.99746L2.55797 6.94021C2.11166 7.11438 1.88851 7.20146 1.82348 7.32664C1.7671 7.43516 1.76718 7.56434 1.82368 7.67279C1.88886 7.7979 2.11212 7.88472 2.55862 8.05836L7.62713 10.0294C7.71776 10.0647 7.76308 10.0823 7.80124 10.1095C7.83507 10.1337 7.86464 10.1632 7.88877 10.1971C7.91599 10.2352 7.93361 10.2805 7.96886 10.3712Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+SendIcon.displayName = "SendIcon";
+
+export { SendIcon };
+export default SendIcon;

package/src/icons/communication/SendIcon.web.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+type Props = SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+const SendIcon = React.forwardRef<SVGSVGElement, Props>(
+  ({ size = 18, ...props }, ref) => (
+    <svg
+      ref={ref}
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        opacity={0.9}
+        d="M7.87318 10.1251L15.7482 2.25013M7.96886 10.3712L9.93995 15.4397C10.1136 15.8862 10.2004 16.1094 10.3255 16.1746C10.434 16.2311 10.5631 16.2312 10.6717 16.1748C10.7968 16.1098 10.8839 15.8866 11.0581 15.4403L16.0009 2.77453C16.1581 2.37164 16.2367 2.1702 16.1937 2.04148C16.1563 1.92969 16.0686 1.84197 15.9568 1.80462C15.8281 1.76162 15.6267 1.84023 15.2238 1.99746L2.55797 6.94021C2.11166 7.11438 1.88851 7.20146 1.82348 7.32664C1.7671 7.43516 1.76718 7.56434 1.82368 7.67279C1.88886 7.7979 2.11212 7.88472 2.55862 8.05836L7.62713 10.0294C7.71776 10.0647 7.76308 10.0823 7.80124 10.1095C7.83507 10.1337 7.86464 10.1632 7.88877 10.1971C7.91599 10.2352 7.93361 10.2805 7.96886 10.3712Z"
+        stroke="currentColor"
+        strokeWidth={"currentStroke"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
+);
+
+SendIcon.displayName = "SendIcon";
+
+export default SendIcon;

package/src/icons/communication/index.ts

@@ -0,0 +1,8 @@
+export { default as AnnotationInfoIcon } from './AnnotationInfoIcon';
+export { default as ChatBubbleDotIcon } from './ChatBubbleDotIcon';
+export { default as ChatBubbleIcon } from './ChatBubbleIcon';
+export { default as MailIcon } from './MailIcon';
+export { default as MessageSquareTextIcon } from './MessageSquareTextIcon';
+export { default as MessageTextCircle01Icon } from './MessageTextCircle01Icon';
+export { default as NotificationTextIcon } from './NotificationTextIcon';
+export { default as SendIcon } from './SendIcon';

package/src/icons/files/CameraIcon.native.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+export const CameraIcon = (
+  props: { width?: number | string; height?: number | string; stroke?: string }
+): React.JSX.Element => (
+  <Svg
+    width={props.width ?? 16}
+    height={props.height ?? 16}
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <Path
+      d="M1.33398 5.58473C1.33398 5.35119 1.33398 5.23442 1.34373 5.13606C1.43772 4.18743 2.18816 3.43699 3.13679 3.343C3.23515 3.33325 3.35822 3.33325 3.60437 3.33325C3.69922 3.33325 3.74664 3.33325 3.78691 3.33081C4.30106 3.29968 4.75129 2.97517 4.94341 2.49725C4.95846 2.45982 4.97252 2.41763 5.00065 2.33325C5.02878 2.24887 5.04284 2.20668 5.05789 2.16925C5.25002 1.69133 5.70024 1.36683 6.21439 1.33569C6.25466 1.33325 6.29913 1.33325 6.38808 1.33325H9.61323C9.70217 1.33325 9.74664 1.33325 9.78691 1.33569C10.3011 1.36683 10.7513 1.69133 10.9434 2.16925C10.9585 2.20668 10.9725 2.24887 11.0007 2.33325C11.0288 2.41763 11.0428 2.45982 11.0579 2.49725C11.25 2.97517 11.7002 3.29968 12.2144 3.33081C12.2547 3.33325 12.3021 3.33325 12.3969 3.33325C12.6431 3.33325 12.7662 3.33325 12.8645 3.343C13.8131 3.43699 14.5636 4.18743 14.6576 5.13606C14.6673 5.23442 14.6673 5.35119 14.6673 5.58473V10.7999C14.6673 11.92 14.6673 12.4801 14.4493 12.9079C14.2576 13.2842 13.9516 13.5902 13.5753 13.7819C13.1475 13.9999 12.5874 13.9999 11.4673 13.9999H4.53398C3.41388 13.9999 2.85383 13.9999 2.426 13.7819C2.04968 13.5902 1.74372 13.2842 1.55197 12.9079C1.33398 12.4801 1.33398 11.92 1.33398 10.7999V5.58473Z"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M8.00065 10.9999C9.47341 10.9999 10.6673 9.80601 10.6673 8.33325C10.6673 6.86049 9.47341 5.66659 8.00065 5.66659C6.52789 5.66659 5.33398 6.86049 5.33398 8.33325C5.33398 9.80601 6.52789 10.9999 8.00065 10.9999Z"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export default CameraIcon;

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+export const CameraIcon = (
+  props: React.SVGProps<SVGSVGElement>
+): React.JSX.Element => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+    {...props}
+  >
+    <path
+      d="M1.33398 5.58473C1.33398 5.35119 1.33398 5.23442 1.34373 5.13606C1.43772 4.18743 2.18816 3.43699 3.13679 3.343C3.23515 3.33325 3.35822 3.33325 3.60437 3.33325C3.69922 3.33325 3.74664 3.33325 3.78691 3.33081C4.30106 3.29968 4.75129 2.97517 4.94341 2.49725C4.95846 2.45982 4.97252 2.41763 5.00065 2.33325C5.02878 2.24887 5.04284 2.20668 5.05789 2.16925C5.25002 1.69133 5.70024 1.36683 6.21439 1.33569C6.25466 1.33325 6.29913 1.33325 6.38808 1.33325H9.61323C9.70217 1.33325 9.74664 1.33325 9.78691 1.33569C10.3011 1.36683 10.7513 1.69133 10.9434 2.16925C10.9585 2.20668 10.9725 2.24887 11.0007 2.33325C11.0288 2.41763 11.0428 2.45982 11.0579 2.49725C11.25 2.97517 11.7002 3.29968 12.2144 3.33081C12.2547 3.33325 12.3021 3.33325 12.3969 3.33325C12.6431 3.33325 12.7662 3.33325 12.8645 3.343C13.8131 3.43699 14.5636 4.18743 14.6576 5.13606C14.6673 5.23442 14.6673 5.35119 14.6673 5.58473V10.7999C14.6673 11.92 14.6673 12.4801 14.4493 12.9079C14.2576 13.2842 13.9516 13.5902 13.5753 13.7819C13.1475 13.9999 12.5874 13.9999 11.4673 13.9999H4.53398C3.41388 13.9999 2.85383 13.9999 2.426 13.7819C2.04968 13.5902 1.74372 13.2842 1.55197 12.9079C1.33398 12.4801 1.33398 11.92 1.33398 10.7999V5.58473Z"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.00065 10.9999C9.47341 10.9999 10.6673 9.80601 10.6673 8.33325C10.6673 6.86049 9.47341 5.66659 8.00065 5.66659C6.52789 5.66659 5.33398 6.86049 5.33398 8.33325C5.33398 9.80601 6.52789 10.9999 8.00065 10.9999Z"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/icons/files/Download02Icon.native.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+interface Download02IconProps {
+  size?: number | string;
+  strokeColor?: string;
+}
+
+const Download02Icon: React.FC<Download02IconProps> = ({
+  size = 16,
+  strokeColor = '#000000',
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <Path
+      d="M14 14H2M12 7.33333L8 11.3333M8 11.3333L4 7.33333M8 11.3333V2"
+      stroke={strokeColor}
+      strokeWidth={1.25}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { Download02Icon };
+export default Download02Icon;

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

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface Download02IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+  strokeColor?: string;
+}
+
+const Download02Icon: React.FC<Download02IconProps> = ({
+  size = 16,
+  strokeColor = "currentColor",
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M14 14H2M12 7.33333L8 11.3333M8 11.3333L4 7.33333M8 11.3333V2"
+      stroke={strokeColor}
+      strokeWidth={1.25}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Download02Icon;

package/src/icons/files/Download03Icon.native.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+interface Download03IconProps {
+  size?: number | string;
+  strokeColor?: string;
+  strokeWidth?: number;
+}
+
+const Download03Icon: React.FC<Download03IconProps> = ({
+  size = 24,
+  strokeColor = '#000000',
+  strokeWidth = 2,
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <Path
+      d="M8 12L12 16M12 16L16 12M12 16V8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+      stroke={strokeColor}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { Download03Icon };
+export default Download03Icon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+interface Download03IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+  strokeColor?: string;
+  strokeWidth?: number;
+}
+
+const Download03Icon: React.FC<Download03IconProps> = ({
+  size = 24,
+  strokeColor = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M8 12L12 16M12 16L16 12M12 16V8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+      stroke={strokeColor}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Download03Icon;

package/src/icons/files/Download04Icon.native.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+type Download04IconProps = {
+  size?: number;
+  stroke?: string;
+  strokeWidth?: number;
+};
+
+const Download04Icon: React.FC<Download04IconProps> = ({
+  size = 24,
+  stroke = '#000000',
+  strokeWidth = 2,
+}) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <Path
+        d="M8 17L12 21M12 21L16 17M12 21V12M20 16.7428C21.2215 15.734 22 14.2079 22 12.5C22 9.46243 19.5376 7 16.5 7C16.2815 7 16.0771 6.886 15.9661 6.69774C14.6621 4.48484 12.2544 3 9.5 3C5.35786 3 2 6.35786 2 10.5C2 12.5661 2.83545 14.4371 4.18695 15.7935"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { Download04Icon };
+export default Download04Icon;

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

@@ -0,0 +1,58 @@
+// Download04Icon.tsx
+"use client";
+
+import * as React from "react";
+
+type Download04IconProps = {
+  size?: number;
+  stroke?: string;
+  strokeWidth?: number;
+  className?: string;
+  title?: string;
+  ariaLabel?: string;
+  tabIndex?: number;
+  onClick?: React.MouseEventHandler<SVGSVGElement>;
+  onKeyDown?: React.KeyboardEventHandler<SVGSVGElement>;
+};
+
+const Download04Icon: React.FC<Download04IconProps> = ({
+  size = 24,
+  stroke = "currentColor",
+  strokeWidth = 2,
+  className = "",
+  title,
+  ariaLabel,
+  tabIndex,
+  onClick,
+  onKeyDown,
+}) => {
+  const isInteractive = Boolean(onClick || onKeyDown);
+  const computedTabIndex = tabIndex ?? (isInteractive ? 0 : -1);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      role="img"
+      aria-label={ariaLabel || title || "Download"}
+      focusable={false}
+      tabIndex={computedTabIndex}
+      className={className}
+      onClick={onClick}
+    >
+      {title ? <title>{title}</title> : null}
+      <path
+        d="M8 17L12 21M12 21L16 17M12 21V12M20 16.7428C21.2215 15.734 22 14.2079 22 12.5C22 9.46243 19.5376 7 16.5 7C16.2815 7 16.0771 6.886 15.9661 6.69774C14.6621 4.48484 12.2544 3 9.5 3C5.35786 3 2 6.35786 2 10.5C2 12.5661 2.83545 14.4371 4.18695 15.7935"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Download04Icon;

package/src/icons/files/DownloadCircleIcon.native.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+interface DownloadCircleIconProps {
+  size?: number | string;
+  stroke?: string;
+  strokeWidth?: number;
+}
+
+export const DownloadCircleIcon: React.FC<DownloadCircleIconProps> = ({
+  size = 26,
+  stroke = '#000000',
+  strokeWidth = 2,
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 26 26"
+    fill="none"
+    stroke={stroke}
+    strokeWidth={strokeWidth}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <Path d="M8.66797 13.0013L13.0013 17.3346M13.0013 17.3346L17.3346 13.0013M13.0013 17.3346V8.66797" />
+    <Path d="M23.8346 13.0013C23.8346 18.9844 18.9844 23.8346 13.0013 23.8346C7.01822 23.8346 2.16797 18.9844 2.16797 13.0013C2.16797 7.01822 7.01822 2.16797 13.0013 2.16797C18.9844 2.16797 23.8346 7.01822 23.8346 13.0013Z" />
+  </Svg>
+);
+
+export default DownloadCircleIcon;

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

@@ -0,0 +1,39 @@
+interface DownloadCircleIconProps extends React.SVGProps<SVGSVGElement> {
+  /**
+   * The size of the icon (width and height).
+   * Can be a number (pixels) or a CSS size string (e.g., '1em').
+   * @default 26
+   */
+  size?: number | string;
+}
+
+/**
+ * DownloadCircleIcon
+ *
+ * A circular download icon with an arrow pointing down inside a circle.
+ * Accepts standard SVG props and a custom `size` prop to adjust dimensions.
+ */
+export const DownloadCircleIcon: React.FC<DownloadCircleIconProps> = ({
+  size = 26,
+  stroke = "currentColor",
+  strokeWidth = 2,
+  className,
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 26 26"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke={stroke}
+    strokeWidth={strokeWidth}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className={className}
+    {...props}
+  >
+    <path d="M8.66797 13.0013L13.0013 17.3346M13.0013 17.3346L17.3346 13.0013M13.0013 17.3346V8.66797" />
+    <path d="M23.8346 13.0013C23.8346 18.9844 18.9844 23.8346 13.0013 23.8346C7.01822 23.8346 2.16797 18.9844 2.16797 13.0013C2.16797 7.01822 7.01822 2.16797 13.0013 2.16797C18.9844 2.16797 23.8346 7.01822 23.8346 13.0013Z" />
+  </svg>
+);