@postal-music/icons 0.1.0

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

@@ -0,0 +1,48 @@
+import React from 'react';
+
+/**
+ * GlobeIcon React component
+ *
+ * @param props - SVG props to customize the icon (e.g., width, height, stroke color)
+ */
+const GlobeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => {
+  const {
+    width = 16,
+    height = 16,
+    stroke = 'currentColor',
+    strokeWidth = 1.5,
+    ...restProps
+  } = props;
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...restProps}
+    >
+      <g clipPath="url(#clip0)">
+        <path
+          d="M7.9987 1.33203C9.66622 3.1576 10.6139 5.52672 10.6654 7.9987C10.6139 10.4707 9.66622 12.8398 7.9987 14.6654
+             M7.9987 1.33203C6.33118 3.1576 5.38353 5.52672 5.33203 7.9987C5.38353 10.4707 6.33118 12.8398 7.9987 14.6654
+             M7.9987 1.33203C4.3168 1.33203 1.33203 4.3168 1.33203 7.9987C1.33203 11.6806 4.3168 14.6654 7.9987 14.6654
+             M7.9987 1.33203C11.6806 1.33203 14.6654 4.3168 14.6654 7.9987C14.6654 11.6806 11.6806 14.6654 7.9987 14.6654
+             M1.66538 5.9987H14.332M1.66536 9.9987H14.332"
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default GlobeIcon;

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type Hash02IconProps = {
+  size?: number | string;
+};
+
+const Hash02Icon: React.FC<Hash02IconProps> = ({ size = 16 }) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <Path
+      d="M6.33365 2L4.33365 14M11.667 2L9.66697 14M13.667 5.33333H2.33366M13.0003 10.6667H1.66699"
+      stroke="#666666"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { Hash02Icon };
+export default Hash02Icon;

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

@@ -0,0 +1,24 @@
+// Hash02Icon.tsx
+import * as React from "react";
+
+type Hash02IconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export const Hash02Icon: React.FC<Hash02IconProps> = ({ size = 16, ...props }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M6.33365 2L4.33365 14M11.667 2L9.66697 14M13.667 5.33333H2.33366M13.0003 10.6667H1.66699"
+      stroke="#666666"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

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

@@ -0,0 +1,35 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface HeartIconProps {
+  color?: string;
+  size?: number;
+  strokeWidth?: number;
+  fill?: string;
+}
+
+export const HeartIcon: React.FC<HeartIconProps> = ({
+  color = '#000000',
+  fill = 'none',
+  size = 17,
+  strokeWidth = 1.5,
+}) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 17 17"
+      fill={fill}
+    >
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.4945 3.63787C7.07829 1.9822 4.71667 1.53683 2.94226 3.05293C1.16785 4.56902 0.918034 7.10386 2.31149 8.89695C3.47005 10.3878 6.97627 13.5321 8.12542 14.5498C8.25399 14.6636 8.31827 14.7205 8.39325 14.7429C8.45869 14.7624 8.5303 14.7624 8.59575 14.7429C8.67073 14.7205 8.73501 14.6636 8.86358 14.5498C10.0127 13.5321 13.5189 10.3878 14.6775 8.89695C16.071 7.10386 15.8516 4.55307 14.0467 3.05293C12.2418 1.55278 9.91071 1.9822 8.4945 3.63787Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};

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

@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface HeartIconProps {
+  className?: string;
+  color?: string;
+  size?: number;  
+  strokeWidth?: number;
+  fill?: string;
+}
+
+export const HeartIcon: React.FC<HeartIconProps> = ({ 
+  className,
+  color = 'currentColor',
+  fill = 'none',  
+  size = 17,
+  strokeWidth = 1.5
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 17 17"
+      fill={fill}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.4945 3.63787C7.07829 1.9822 4.71667 1.53683 2.94226 3.05293C1.16785 4.56902 0.918034 7.10386 2.31149 8.89695C3.47005 10.3878 6.97627 13.5321 8.12542 14.5498C8.25399 14.6636 8.31827 14.7205 8.39325 14.7429C8.45869 14.7624 8.5303 14.7624 8.59575 14.7429C8.67073 14.7205 8.73501 14.6636 8.86358 14.5498C10.0127 13.5321 13.5189 10.3878 14.6775 8.89695C16.071 7.10386 15.8516 4.55307 14.0467 3.05293C12.2418 1.55278 9.91071 1.9822 8.4945 3.63787Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+import Svg, { Path, G, Defs, ClipPath, Rect } from "react-native-svg";
+
+type HelpIconProps = {
+  size?: number | string;
+};
+
+const HelpIcon: React.FC<HelpIconProps> = ({ size = 16 }) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <G clipPath="url(#help-clip)">
+        <Path
+          d="M6.06 6c.157-.446.466-.822.873-1.061.407-.24.886-.327 1.352-.247.465.08.887.322 1.191.684.304.362.47.819.47 1.292 0 1.333-2 2-2 2m.053 2.667h.007M14.667 8c0 3.683-2.985 6.667-6.667 6.667S1.333 11.683 1.333 8C1.333 4.319 4.318 1.334 8 1.334c3.682 0 6.667 2.985 6.667 6.666Z"
+          stroke="currentColor"
+          strokeWidth={1.25}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </G>
+      <Defs>
+        <ClipPath id="help-clip">
+          <Rect width={16} height={16} fill="white" />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+};
+
+export { HelpIcon };
+export default HelpIcon;

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+type HelpIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string; // Accepts number (px) or string (e.g. '1.5em')
+};
+
+export function HelpIcon({ size = 16, ...props }: HelpIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0)">
+        <path
+          d="M6.06 6c.157-.446.466-.822.873-1.061.407-.24.886-.327 1.352-.247.465.08.887.322 1.191.684.304.362.47.819.47 1.292 0 1.333-2 2-2 2m.053 2.667h.007M14.667 8c0 3.683-2.985 6.667-6.667 6.667S1.333 11.683 1.333 8C1.333 4.319 4.318 1.334 8 1.334c3.682 0 6.667 2.985 6.667 6.666Z"
+          stroke="currentColor"
+          strokeWidth={1.25}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0">
+          <rect width={16} height={16} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

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

@@ -0,0 +1,24 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+const Image01Icon: React.FC = () => {
+  return (
+    <Svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <Path
+        d="M10.8 14H4.62091C4.21704 14 4.0151 14 3.92159 13.9201C3.84045 13.8508 3.79739 13.7469 3.80577 13.6405C3.81541 13.5179 3.95821 13.3751 4.24379 13.0895L9.91242 7.42091C10.1764 7.15691 10.3084 7.0249 10.4607 6.97544C10.5946 6.93193 10.7388 6.93193 10.8727 6.97544C11.0249 7.0249 11.1569 7.1569 11.4209 7.42091L14 10V10.8M10.8 14C11.9201 14 12.4802 14 12.908 13.782C13.2843 13.5903 13.5903 13.2843 13.782 12.908C14 12.4802 14 11.9201 14 10.8M10.8 14H5.2C4.0799 14 3.51984 14 3.09202 13.782C2.71569 13.5903 2.40973 13.2843 2.21799 12.908C2 12.4802 2 11.9201 2 10.8V5.2C2 4.0799 2 3.51984 2.21799 3.09202C2.40973 2.71569 2.71569 2.40973 3.09202 2.21799C3.51984 2 4.0799 2 5.2 2H10.8C11.9201 2 12.4802 2 12.908 2.21799C13.2843 2.40973 13.5903 2.71569 13.782 3.09202C14 3.51984 14 4.0799 14 5.2V10.8M7 5.66667C7 6.40305 6.40305 7 5.66667 7C4.93029 7 4.33333 6.40305 4.33333 5.66667C4.33333 4.93029 4.93029 4.33333 5.66667 4.33333C6.40305 4.33333 7 4.93029 7 5.66667Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { Image01Icon };
+export default Image01Icon;

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+type IconProps = React.SVGProps<SVGSVGElement>;
+
+const Image01Icon: React.FC<IconProps> = (props) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M10.8 14H4.62091C4.21704 14 4.0151 14 3.92159 13.9201C3.84045 13.8508 3.79739 13.7469 3.80577 13.6405C3.81541 13.5179 3.95821 13.3751 4.24379 13.0895L9.91242 7.42091C10.1764 7.15691 10.3084 7.0249 10.4607 6.97544C10.5946 6.93193 10.7388 6.93193 10.8727 6.97544C11.0249 7.0249 11.1569 7.1569 11.4209 7.42091L14 10V10.8M10.8 14C11.9201 14 12.4802 14 12.908 13.782C13.2843 13.5903 13.5903 13.2843 13.782 12.908C14 12.4802 14 11.9201 14 10.8M10.8 14H5.2C4.0799 14 3.51984 14 3.09202 13.782C2.71569 13.5903 2.40973 13.2843 2.21799 12.908C2 12.4802 2 11.9201 2 10.8V5.2C2 4.0799 2 3.51984 2.21799 3.09202C2.40973 2.71569 2.71569 2.40973 3.09202 2.21799C3.51984 2 4.0799 2 5.2 2H10.8C11.9201 2 12.4802 2 12.908 2.21799C13.2843 2.40973 13.5903 2.71569 13.782 3.09202C14 3.51984 14 4.0799 14 5.2V10.8M7 5.66667C7 6.40305 6.40305 7 5.66667 7C4.93029 7 4.33333 6.40305 4.33333 5.66667C4.33333 4.93029 4.93029 4.33333 5.66667 4.33333C6.40305 4.33333 7 4.93029 7 5.66667Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Image01Icon;

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type Image03IconProps = {
+  size?: number | string;
+  color?: string;
+  strokeColor?: string;
+};
+
+const Image03Icon: React.FC<Image03IconProps> = ({
+  size = 14,
+  color = '#000000',
+  strokeColor = '#000000',
+}) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+    >
+      <Path
+        d="M4.66602 6.41667C5.31035 6.41667 5.83268 5.89433 5.83268 5.25C5.83268 4.60567 5.31035 4.08333 4.66602 4.08333C4.02168 4.08333 3.49935 4.60567 3.49935 5.25C3.49935 5.89433 4.02168 6.41667 4.66602 6.41667Z"
+        fill={color}
+      />
+      <Path
+        d="M1.16602 4.55C1.16602 3.56991 1.16602 3.07986 1.35675 2.70552C1.52453 2.37623 1.79225 2.10852 2.12153 1.94074C2.49588 1.75 2.98592 1.75 3.96602 1.75H10.0327C11.0128 1.75 11.5028 1.75 11.8772 1.94074C12.2064 2.10852 12.4742 2.37623 12.6419 2.70552C12.8327 3.07986 12.8327 3.56991 12.8327 4.55V9.45C12.8327 10.4301 12.8327 10.9201 12.6419 11.2945C12.4742 11.6238 12.2064 11.8915 11.8772 12.0593C11.5028 12.25 11.0128 12.25 10.0327 12.25H3.96602C2.98592 12.25 2.49588 12.25 2.12153 12.0593C1.79225 11.8915 1.52453 11.6238 1.35675 11.2945C1.16602 10.9201 1.16602 10.4301 1.16602 9.45V4.55Z"
+        fill={color}
+      />
+      <Path
+        d="M2.4914 12.0913L6.33938 8.2433C6.57039 8.01229 6.6859 7.89678 6.81909 7.85351C6.93625 7.81544 7.06245 7.81544 7.17961 7.85351C7.3128 7.89678 7.42831 8.01229 7.65931 8.2433L11.4816 12.0656M8.16602 8.75L9.83938 7.07663C10.0704 6.84562 10.1859 6.73012 10.3191 6.68684C10.4362 6.64877 10.5624 6.64877 10.6796 6.68684C10.8128 6.73012 10.9283 6.84562 11.1593 7.07663L12.8327 8.75M5.83268 5.25C5.83268 5.89433 5.31035 6.41667 4.66602 6.41667C4.02168 6.41667 3.49935 5.89433 3.49935 5.25C3.49935 4.60567 4.02168 4.08333 4.66602 4.08333C5.31035 4.08333 5.83268 4.60567 5.83268 5.25ZM3.96602 12.25H10.0327C11.0128 12.25 11.5028 12.25 11.8772 12.0593C12.2064 11.8915 12.4742 11.6238 12.6419 11.2945C12.8327 10.9201 12.8327 10.4301 12.8327 9.45V4.55C12.8327 3.56991 12.8327 3.07986 12.6419 2.70552C12.4742 2.37623 12.2064 2.10852 11.8772 1.94074C11.5028 1.75 11.0128 1.75 10.0327 1.75H3.96602C2.98592 1.75 2.49588 1.75 2.12153 1.94074C1.79225 2.10852 1.52453 2.37623 1.35675 2.70552C1.16602 3.07986 1.16602 3.56991 1.16602 4.55V9.45C1.16602 10.4301 1.16602 10.9201 1.35675 11.2945C1.52453 11.6238 1.79225 11.8915 2.12153 12.0593C2.49588 12.25 2.98592 12.25 3.96602 12.25Z"
+        stroke={strokeColor}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { Image03Icon };
+export default Image03Icon;

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

@@ -0,0 +1,51 @@
+import * as React from "react";
+
+type Image03IconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+  color?: string; // applies to fills
+  strokeColor?: string; // applies to strokes
+  title?: string;
+};
+
+const Image03Icon: React.FC<Image03IconProps> = ({
+  size = 14,
+  color = "currentColor",
+  strokeColor = "currentColor",
+  title,
+  className,
+  ...props
+}) => {
+  const ariaProps = title
+    ? { role: "img", "aria-label": title }
+    : { "aria-hidden": true };
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 14 14"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...ariaProps}
+      {...props}
+    >
+      {title ? <title>{title}</title> : null}
+      <path
+        d="M4.66602 6.41667C5.31035 6.41667 5.83268 5.89433 5.83268 5.25C5.83268 4.60567 5.31035 4.08333 4.66602 4.08333C4.02168 4.08333 3.49935 4.60567 3.49935 5.25C3.49935 5.89433 4.02168 6.41667 4.66602 6.41667Z"
+        fill={color}
+      />
+      <path
+        d="M1.16602 4.55C1.16602 3.56991 1.16602 3.07986 1.35675 2.70552C1.52453 2.37623 1.79225 2.10852 2.12153 1.94074C2.49588 1.75 2.98592 1.75 3.96602 1.75H10.0327C11.0128 1.75 11.5028 1.75 11.8772 1.94074C12.2064 2.10852 12.4742 2.37623 12.6419 2.70552C12.8327 3.07986 12.8327 3.56991 12.8327 4.55V9.45C12.8327 10.4301 12.8327 10.9201 12.6419 11.2945C12.4742 11.6238 12.2064 11.8915 11.8772 12.0593C11.5028 12.25 11.0128 12.25 10.0327 12.25H3.96602C2.98592 12.25 2.49588 12.25 2.12153 12.0593C1.79225 11.8915 1.52453 11.6238 1.35675 11.2945C1.16602 10.9201 1.16602 10.4301 1.16602 9.45V4.55Z"
+        fill={color}
+      />
+      <path
+        d="M2.4914 12.0913L6.33938 8.2433C6.57039 8.01229 6.6859 7.89678 6.81909 7.85351C6.93625 7.81544 7.06245 7.81544 7.17961 7.85351C7.3128 7.89678 7.42831 8.01229 7.65931 8.2433L11.4816 12.0656M8.16602 8.75L9.83938 7.07663C10.0704 6.84562 10.1859 6.73012 10.3191 6.68684C10.4362 6.64877 10.5624 6.64877 10.6796 6.68684C10.8128 6.73012 10.9283 6.84562 11.1593 7.07663L12.8327 8.75M5.83268 5.25C5.83268 5.89433 5.31035 6.41667 4.66602 6.41667C4.02168 6.41667 3.49935 5.89433 3.49935 5.25C3.49935 4.60567 4.02168 4.08333 4.66602 4.08333C5.31035 4.08333 5.83268 4.60567 5.83268 5.25ZM3.96602 12.25H10.0327C11.0128 12.25 11.5028 12.25 11.8772 12.0593C12.2064 11.8915 12.4742 11.6238 12.6419 11.2945C12.8327 10.9201 12.8327 10.4301 12.8327 9.45V4.55C12.8327 3.56991 12.8327 3.07986 12.6419 2.70552C12.4742 2.37623 12.2064 2.10852 11.8772 1.94074C11.5028 1.75 11.0128 1.75 10.0327 1.75H3.96602C2.98592 1.75 2.49588 1.75 2.12153 1.94074C1.79225 2.10852 1.52453 2.37623 1.35675 2.70552C1.16602 3.07986 1.16602 3.56991 1.16602 4.55V9.45C1.16602 10.4301 1.16602 10.9201 1.35675 11.2945C1.52453 11.6238 1.79225 11.8915 2.12153 12.0593C2.49588 12.25 2.98592 12.25 3.96602 12.25Z"
+        stroke={strokeColor}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Image03Icon;

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

@@ -0,0 +1,34 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface ImageIconProps {
+  width?: number;
+  height?: number;
+}
+
+const ImageIcon: React.FC<ImageIconProps> = ({ width = 18, height = 18 }) => (
+  <Svg
+    width={width}
+    height={height}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <Path
+      d="M2.25 5.85C2.25 4.58988 2.25 3.95982 2.49524 3.47852C2.71095 3.05516 3.05516 2.71095 3.47852 2.49524C3.95982 2.25 4.58988 2.25 5.85 2.25H12.15C13.4101 2.25 14.0402 2.25 14.5215 2.49524C14.9448 2.71095 15.289 3.05516 15.5048 3.47852C15.75 3.95982 15.75 4.58988 15.75 5.85V12.15C15.75 13.4101 15.75 14.0402 15.5048 14.5215C15.289 14.9448 14.9448 15.289 14.5215 15.5048C14.0402 15.75 13.4101 15.75 12.15 15.75H5.85C4.58988 15.75 3.95982 15.75 3.47852 15.5048C3.05516 15.289 2.71095 14.9448 2.49524 14.5215C2.25 14.0402 2.25 13.4101 2.25 12.15V5.85Z"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M6.75 7.125L4.5 11.25H13.5L10.125 5.625L8.25 8.25L6.75 7.125Z"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { ImageIcon };
+export default ImageIcon;

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

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+interface ImageIconProps extends SVGProps<SVGSVGElement> {
+  /** Tailwind or custom classes to style the icon */
+  className?: string;
+}
+
+const ImageIcon = React.forwardRef<SVGSVGElement, ImageIconProps>(
+  ({ className = "text-gray-900", width = 18, height = 18, ...props }, ref) => (
+    <svg
+      ref={ref}
+      width={width}
+      height={height}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M2.25 5.85C2.25 4.58988 2.25 3.95982 2.49524 3.47852C2.71095 3.05516 3.05516 2.71095 3.47852 2.49524C3.95982 2.25 4.58988 2.25 5.85 2.25H12.15C13.4101 2.25 14.0402 2.25 14.5215 2.49524C14.9448 2.71095 15.289 3.05516 15.5048 3.47852C15.75 3.95982 15.75 4.58988 15.75 5.85V12.15C15.75 13.4101 15.75 14.0402 15.5048 14.5215C15.289 14.9448 14.9448 15.289 14.5215 15.5048C14.0402 15.75 13.4101 15.75 12.15 15.75H5.85C4.58988 15.75 3.95982 15.75 3.47852 15.5048C3.05516 15.289 2.71095 14.9448 2.49524 14.5215C2.25 14.0402 2.25 13.4101 2.25 12.15V5.85Z"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.75 7.125L4.5 11.25H13.5L10.125 5.625L8.25 8.25L6.75 7.125Z"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
+);
+
+export default ImageIcon;

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

@@ -0,0 +1,27 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface IconProps {
+  size?: number;
+  currentColor?: string;
+}
+
+const LandingCollaborativeIcon: React.FC<IconProps> = ({ size = 24, currentColor = '#000000' }) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <Path
+      d="M22 21V19C22 17.1362 20.7252 15.5701 19 15.126M15.5 3.29076C16.9659 3.88415 18 5.32131 18 7C18 8.67869 16.9659 10.1159 15.5 10.7092M17 21C17 19.1362 17 18.2044 16.6955 17.4693C16.2895 16.4892 15.5108 15.7105 14.5307 15.3045C13.7956 15 12.8638 15 11 15H8C6.13623 15 5.20435 15 4.46927 15.3045C3.48915 15.7105 2.71046 16.4892 2.30448 17.4693C2 18.2044 2 19.1362 2 21M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z"
+      stroke={currentColor}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { LandingCollaborativeIcon };
+export default LandingCollaborativeIcon;

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

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  currentColor?: string;
+}
+
+const LandingCollaborativeIcon: React.FC<IconProps> = ({ size = 24, currentColor = "currentColor" }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24" 
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M22 21V19C22 17.1362 20.7252 15.5701 19 15.126M15.5 3.29076C16.9659 3.88415 18 5.32131 18 7C18 8.67869 16.9659 10.1159 15.5 10.7092M17 21C17 19.1362 17 18.2044 16.6955 17.4693C16.2895 16.4892 15.5108 15.7105 14.5307 15.3045C13.7956 15 12.8638 15 11 15H8C6.13623 15 5.20435 15 4.46927 15.3045C3.48915 15.7105 2.71046 16.4892 2.30448 17.4693C2 18.2044 2 19.1362 2 21M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z"
+      stroke={currentColor}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default LandingCollaborativeIcon;

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

@@ -0,0 +1,27 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface IconProps {
+  size?: number;
+  currentColor?: string;
+}
+
+const LandingControlsIcon: React.FC<IconProps> = ({ size = 24, currentColor = '#000000' }) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <Path
+      d="M22 11V8.2C22 7.0799 22 6.51984 21.782 6.09202C21.5903 5.71569 21.2843 5.40973 20.908 5.21799C20.4802 5 19.9201 5 18.8 5H5.2C4.0799 5 3.51984 5 3.09202 5.21799C2.71569 5.40973 2.40973 5.71569 2.21799 6.09202C2 6.51984 2 7.0799 2 8.2V11.8C2 12.9201 2 13.4802 2.21799 13.908C2.40973 14.2843 2.71569 14.5903 3.09202 14.782C3.51984 15 4.0799 15 5.2 15H11M12 10H12.005M17 10H17.005M7 10H7.005M19.25 17V15.25C19.25 14.2835 18.4665 13.5 17.5 13.5C16.5335 13.5 15.75 14.2835 15.75 15.25V17M12.25 10C12.25 10.1381 12.1381 10.25 12 10.25C11.8619 10.25 11.75 10.1381 11.75 10C11.75 9.86193 11.8619 9.75 12 9.75C12.1381 9.75 12.25 9.86193 12.25 10ZM17.25 10C17.25 10.1381 17.1381 10.25 17 10.25C16.8619 10.25 16.75 10.1381 16.75 10C16.75 9.86193 16.8619 9.75 17 9.75C17.1381 9.75 17.25 9.86193 17.25 10ZM7.25 10C7.25 10.1381 7.13807 10.25 7 10.25C6.86193 10.25 6.75 10.1381 6.75 10C6.75 9.86193 6.86193 9.75 7 9.75C7.13807 9.75 7.25 9.86193 7.25 10ZM15.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7951 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V18.6C21 18.0399 21 17.7599 20.891 17.546C20.7951 17.3578 20.6422 17.2049 20.454 17.109C20.2401 17 19.9601 17 19.4 17H15.6C15.0399 17 14.7599 17 14.546 17.109C14.3578 17.2049 14.2049 17.3578 14.109 17.546C14 17.7599 14 18.0399 14 18.6V19.4C14 19.9601 14 20.2401 14.109 20.454C14.2049 20.6422 14.3578 20.7951 14.546 20.891C14.7599 21 15.0399 21 15.6 21Z"
+      stroke={currentColor}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { LandingControlsIcon };
+export default LandingControlsIcon;

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

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  currentColor?: string;
+}
+
+const LandingControlsIcon: React.FC<IconProps> = ({ size = 24, currentColor = "currentColor" }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M22 11V8.2C22 7.0799 22 6.51984 21.782 6.09202C21.5903 5.71569 21.2843 5.40973 20.908 5.21799C20.4802 5 19.9201 5 18.8 5H5.2C4.0799 5 3.51984 5 3.09202 5.21799C2.71569 5.40973 2.40973 5.71569 2.21799 6.09202C2 6.51984 2 7.0799 2 8.2V11.8C2 12.9201 2 13.4802 2.21799 13.908C2.40973 14.2843 2.71569 14.5903 3.09202 14.782C3.51984 15 4.0799 15 5.2 15H11M12 10H12.005M17 10H17.005M7 10H7.005M19.25 17V15.25C19.25 14.2835 18.4665 13.5 17.5 13.5C16.5335 13.5 15.75 14.2835 15.75 15.25V17M12.25 10C12.25 10.1381 12.1381 10.25 12 10.25C11.8619 10.25 11.75 10.1381 11.75 10C11.75 9.86193 11.8619 9.75 12 9.75C12.1381 9.75 12.25 9.86193 12.25 10ZM17.25 10C17.25 10.1381 17.1381 10.25 17 10.25C16.8619 10.25 16.75 10.1381 16.75 10C16.75 9.86193 16.8619 9.75 17 9.75C17.1381 9.75 17.25 9.86193 17.25 10ZM7.25 10C7.25 10.1381 7.13807 10.25 7 10.25C6.86193 10.25 6.75 10.1381 6.75 10C6.75 9.86193 6.86193 9.75 7 9.75C7.13807 9.75 7.25 9.86193 7.25 10ZM15.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7951 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V18.6C21 18.0399 21 17.7599 20.891 17.546C20.7951 17.3578 20.6422 17.2049 20.454 17.109C20.2401 17 19.9601 17 19.4 17H15.6C15.0399 17 14.7599 17 14.546 17.109C14.3578 17.2049 14.2049 17.3578 14.109 17.546C14 17.7599 14 18.0399 14 18.6V19.4C14 19.9601 14 20.2401 14.109 20.454C14.2049 20.6422 14.3578 20.7951 14.546 20.891C14.7599 21 15.0399 21 15.6 21Z"
+      stroke={currentColor}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default LandingControlsIcon;

package/src/icons/general/LandingMusicIcon.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 LandingMusicIcon: React.FC<IconProps> = ({
+  size = 24,
+  color = '#000000',
+  strokeWidth = 1.5,
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <Path
+      d="M9 18V6.35537C9 5.87383 9 5.63306 9.0876 5.43778C9.16482 5.26565 9.28917 5.11887 9.44627 5.0144C9.62449 4.89588 9.86198 4.8563 10.337 4.77714L19.137 3.31047C19.7779 3.20364 20.0984 3.15023 20.3482 3.243C20.5674 3.32441 20.7511 3.48005 20.8674 3.68286C21 3.91398 21 4.23889 21 4.8887V16M9 18C9 19.6568 7.65685 21 6 21C4.34315 21 3 19.6568 3 18C3 16.3431 4.34315 15 6 15C7.65685 15 9 16.3431 9 18ZM21 16C21 17.6568 19.6569 19 18 19C16.3431 19 15 17.6568 15 16C15 14.3431 16.3431 13 18 13C19.6569 13 21 14.3431 21 16Z"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { LandingMusicIcon };
+export default LandingMusicIcon;

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

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+}
+
+const LandingMusicIcon: React.FC<IconProps> = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 1.5,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9 18V6.35537C9 5.87383 9 5.63306 9.0876 5.43778C9.16482 5.26565 9.28917 5.11887 9.44627 5.0144C9.62449 4.89588 9.86198 4.8563 10.337 4.77714L19.137 3.31047C19.7779 3.20364 20.0984 3.15023 20.3482 3.243C20.5674 3.32441 20.7511 3.48005 20.8674 3.68286C21 3.91398 21 4.23889 21 4.8887V16M9 18C9 19.6568 7.65685 21 6 21C4.34315 21 3 19.6568 3 18C3 16.3431 4.34315 15 6 15C7.65685 15 9 16.3431 9 18ZM21 16C21 17.6568 19.6569 19 18 19C16.3431 19 15 17.6568 15 16C15 14.3431 16.3431 13 18 13C19.6569 13 21 14.3431 21 16Z"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default LandingMusicIcon;