@postal-music/icons 0.1.0

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

@@ -0,0 +1,27 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const LandingShareIcon: React.FC<IconProps> = ({ size = 24, color = "#020202" }) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <Path
+      d="M9.99825 13C10.4277 13.5741 10.9756 14.0491 11.6048 14.3929C12.234 14.7367 12.9298 14.9411 13.6449 14.9923C14.36 15.0435 15.0778 14.9403 15.7496 14.6897C16.4214 14.4392 17.0314 14.047 17.5382 13.54L20.5382 10.54C21.449 9.59695 21.953 8.33394 21.9416 7.02296C21.9302 5.71198 21.4044 4.45791 20.4773 3.53087C19.5503 2.60383 18.2962 2.07799 16.9853 2.0666C15.6743 2.0552 14.4113 2.55918 13.4682 3.46997L11.7482 5.17997M13.9982 11C13.5688 10.4258 13.0209 9.95078 12.3917 9.60703C11.7625 9.26327 11.0667 9.05885 10.3516 9.00763C9.63645 8.95641 8.91866 9.0596 8.2469 9.31018C7.57514 9.56077 6.96513 9.9529 6.45825 10.46L3.45825 13.46C2.54746 14.403 2.04348 15.666 2.05488 16.977C2.06627 18.288 2.59211 19.542 3.51915 20.4691C4.44619 21.3961 5.70026 21.9219 7.01124 21.9333C8.32222 21.9447 9.58524 21.4408 10.5282 20.53L12.2382 18.82"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { LandingShareIcon };
+export default LandingShareIcon;

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

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const LandingShareIcon: React.FC<IconProps> = ({ size = 24, color = "#020202" }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.99825 13C10.4277 13.5741 10.9756 14.0491 11.6048 14.3929C12.234 14.7367 12.9298 14.9411 13.6449 14.9923C14.36 15.0435 15.0778 14.9403 15.7496 14.6897C16.4214 14.4392 17.0314 14.047 17.5382 13.54L20.5382 10.54C21.449 9.59695 21.953 8.33394 21.9416 7.02296C21.9302 5.71198 21.4044 4.45791 20.4773 3.53087C19.5503 2.60383 18.2962 2.07799 16.9853 2.0666C15.6743 2.0552 14.4113 2.55918 13.4682 3.46997L11.7482 5.17997M13.9982 11C13.5688 10.4258 13.0209 9.95078 12.3917 9.60703C11.7625 9.26327 11.0667 9.05885 10.3516 9.00763C9.63645 8.95641 8.91866 9.0596 8.2469 9.31018C7.57514 9.56077 6.96513 9.9529 6.45825 10.46L3.45825 13.46C2.54746 14.403 2.04348 15.666 2.05488 16.977C2.06627 18.288 2.59211 19.542 3.51915 20.4691C4.44619 21.3961 5.70026 21.9219 7.01124 21.9333C8.32222 21.9447 9.58524 21.4408 10.5282 20.53L12.2382 18.82"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default LandingShareIcon;

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

@@ -0,0 +1,27 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const LandingUploadIcon: React.FC<IconProps> = ({ size = 24, color = "#020202" }) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <Path
+      d="M8 16L12 12M12 12L16 16M12 12V21M20 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={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { LandingUploadIcon };
+export default LandingUploadIcon;

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

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const LandingUploadIcon: React.FC<IconProps> = ({ size = 24, color = "#020202" }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 16L12 12M12 12L16 16M12 12V21M20 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={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default LandingUploadIcon;

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface LayersThree01IconProps {
+  size?: number | string;
+}
+
+const LayersThree01Icon: React.FC<LayersThree01IconProps> = ({ size = 24 }) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <Path
+        d="M2 12.0001L11.6422 16.8212C11.7734 16.8868 11.839 16.9196 11.9078 16.9325C11.9687 16.9439 12.0313 16.9439 12.0922 16.9325C12.161 16.9196 12.2266 16.8868 12.3578 16.8212L22 12.0001M2 17.0001L11.6422 21.8212C11.7734 21.8868 11.839 21.9196 11.9078 21.9325C11.9687 21.9439 12.0313 21.9439 12.0922 21.9325C12.161 21.9196 12.2266 21.8868 12.3578 21.8212L22 17.0001M2 7.00006L11.6422 2.17895C11.7734 2.11336 11.839 2.08056 11.9078 2.06766C11.9687 2.05622 12.0313 2.05622 12.0922 2.06766C12.161 2.08056 12.2266 2.11336 12.3578 2.17895L22 7.00006L12.3578 11.8212C12.2266 11.8868 12.161 11.9196 12.0922 11.9325C12.0313 11.9439 11.9687 11.9439 11.9078 11.9325C11.839 11.9196 11.7734 11.8868 11.6422 11.8212L2 7.00006Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { LayersThree01Icon };
+export default LayersThree01Icon;

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+interface LayersThree01IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+export default function LayersThree01Icon({
+  size = 24,
+  className,
+  ...props
+}: LayersThree01IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M2 12.0001L11.6422 16.8212C11.7734 16.8868 11.839 16.9196 11.9078 16.9325C11.9687 16.9439 12.0313 16.9439 12.0922 16.9325C12.161 16.9196 12.2266 16.8868 12.3578 16.8212L22 12.0001M2 17.0001L11.6422 21.8212C11.7734 21.8868 11.839 21.9196 11.9078 21.9325C11.9687 21.9439 12.0313 21.9439 12.0922 21.9325C12.161 21.9196 12.2266 21.8868 12.3578 21.8212L22 17.0001M2 7.00006L11.6422 2.17895C11.7734 2.11336 11.839 2.08056 11.9078 2.06766C11.9687 2.05622 12.0313 2.05622 12.0922 2.06766C12.161 2.08056 12.2266 2.11336 12.3578 2.17895L22 7.00006L12.3578 11.8212C12.2266 11.8868 12.161 11.9196 12.0922 11.9325C12.0313 11.9439 11.9687 11.9439 11.9078 11.9325C11.839 11.9196 11.7734 11.8868 11.6422 11.8212L2 7.00006Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,40 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface LyricsIconProps {
+  width?: number;
+  height?: number;
+  stroke?: string;
+  strokeWidth?: number;
+}
+
+const LyricsIcon: React.FC<LyricsIconProps> = ({
+  width = 18,
+  height = 18,
+  stroke = '#000000',
+  strokeWidth = 1.5,
+}) => {
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <Path
+        d="M9.75 5.25H3.9C3.05992 5.25 2.63988 5.25 2.31901 5.41349C2.03677 5.5573 1.8073 5.78677 1.66349 6.06901C1.5 6.38988 1.5 6.80992 1.5 7.65V10.35C1.5 11.1901 1.5 11.6101 1.66349 11.931C1.8073 12.2132 2.03677 12.4427 2.31901 12.5865C2.63988 12.75 3.05992 12.75 3.9 12.75H9.75
+        M12.75 5.25H14.1C14.9401 5.25 15.3601 5.25 15.681 5.41349C15.9632 5.5573 16.1927 5.78677 16.3365 6.06901C16.5 6.38988 16.5 6.80992 16.5 7.65V10.35C16.5 11.1901 16.5 11.6101 16.3365 11.931C16.1927 12.2132 15.9632 12.4427 15.681 12.5865C15.3601 12.75 14.9401 12.75 14.1 12.75H12.75
+        M12.75 15.75L12.75 2.25
+        M14.625 2.25001L10.875 2.25
+        M14.625 15.75L10.875 15.75"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { LyricsIcon };
+export default LyricsIcon;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+/**
+ * LyricsIcon React component
+ *
+ * @param props - SVG props to customize the icon (e.g., width, height, stroke color)
+ */
+const LyricsIcon: 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="M9.75 5.25H3.9C3.05992 5.25 2.63988 5.25 2.31901 5.41349C2.03677 5.5573 1.8073 5.78677 1.66349 6.06901C1.5 6.38988 1.5 6.80992 1.5 7.65V10.35C1.5 11.1901 1.5 11.6101 1.66349 11.931C1.8073 12.2132 2.03677 12.4427 2.31901 12.5865C2.63988 12.75 3.05992 12.75 3.9 12.75H9.75
+        M12.75 5.25H14.1C14.9401 5.25 15.3601 5.25 15.681 5.41349C15.9632 5.5573 16.1927 5.78677 16.3365 6.06901C16.5 6.38988 16.5 6.80992 16.5 7.65V10.35C16.5 11.1901 16.5 11.6101 16.3365 11.931C16.1927 12.2132 15.9632 12.4427 15.681 12.5865C15.3601 12.75 14.9401 12.75 14.1 12.75H12.75
+        M12.75 15.75L12.75 2.25
+        M14.625 2.25001L10.875 2.25
+        M14.625 15.75L10.875 15.75"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default LyricsIcon;

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

@@ -0,0 +1,34 @@
+import React from "react";
+import Svg, { Path, G, Defs, ClipPath, Rect } from "react-native-svg";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const MoonIcon: React.FC<IconProps> = ({ size = 18, color = '#000000' }) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <G clipPath="url(#moon-clip)">
+      <Path
+        d="M16.4661 9.71875C15.4335 11.5302 13.4844 12.7515 11.25 12.7515C7.93629 12.7515 5.25 10.0652 5.25 6.75153C5.25 4.517 6.4715 2.56778 8.2832 1.53516C4.47731 1.89601 1.5 5.10099 1.5 9.00135C1.5 13.1435 4.85786 16.5013 9 16.5013C12.9002 16.5013 16.105 13.5244 16.4661 9.71875Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="moon-clip">
+        <Rect width="18" height="18" fill="white" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+export { MoonIcon };
+export default MoonIcon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const MoonIcon: 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"
+  >
+    <g clipPath="url(#clip0_moonIcon)">
+      <path
+        d="M16.4661 9.71875C15.4335 11.5302 13.4844 12.7515 11.25 12.7515C7.93629 12.7515 5.25 10.0652 5.25 6.75153C5.25 4.517 6.4715 2.56778 8.2832 1.53516C4.47731 1.89601 1.5 5.10099 1.5 9.00135C1.5 13.1435 4.85786 16.5013 9 16.5013C12.9002 16.5013 16.105 13.5244 16.4661 9.71875Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_moonIcon">
+        <rect width="18" height="18" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default MoonIcon;

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

@@ -0,0 +1,32 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type MusicNoteIconProps = {
+  size?: number | string;
+};
+
+const MusicNoteIcon: React.FC<MusicNoteIconProps> = ({ size = 17 }) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 17 17"
+      fill="none"
+    >
+      <Path
+        d="M6.375 14.8748C7.5486 14.8748 8.5 13.9234 8.5 12.7498C8.5 11.5762 7.5486 10.6248 6.375 10.6248C5.20139 10.6248 4.25 11.5762 4.25 12.7498C4.25 13.9234 5.20139 14.8748 6.375 14.8748Z"
+        fill="currentColor"
+      />
+      <Path
+        d="M8.5 12.7498V3.95859C8.5 3.35139 8.5 3.04779 8.62788 2.86495C8.73955 2.70529 8.91206 2.59867 9.1048 2.5702C9.32554 2.53758 9.59708 2.67336 10.1402 2.9449L12.75 4.24982M8.5 12.7498C8.5 13.9234 7.5486 14.8748 6.375 14.8748C5.20139 14.8748 4.25 13.9234 4.25 12.7498C4.25 11.5762 5.20139 10.6248 6.375 10.6248C7.5486 10.6248 8.5 11.5762 8.5 12.7498Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { MusicNoteIcon };
+export default MusicNoteIcon;

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+
+type MusicNoteIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export default function MusicNoteIcon({
+  size = 17,
+  className,
+  ...props
+}: MusicNoteIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 17 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M6.375 14.8748C7.5486 14.8748 8.5 13.9234 8.5 12.7498C8.5 11.5762 7.5486 10.6248 6.375 10.6248C5.20139 10.6248 4.25 11.5762 4.25 12.7498C4.25 13.9234 5.20139 14.8748 6.375 14.8748Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8.5 12.7498V3.95859C8.5 3.35139 8.5 3.04779 8.62788 2.86495C8.73955 2.70529 8.91206 2.59867 9.1048 2.5702C9.32554 2.53758 9.59708 2.67336 10.1402 2.9449L12.75 4.24982M8.5 12.7498C8.5 13.9234 7.5486 14.8748 6.375 14.8748C5.20139 14.8748 4.25 13.9234 4.25 12.7498C4.25 11.5762 5.20139 10.6248 6.375 10.6248C7.5486 10.6248 8.5 11.5762 8.5 12.7498Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import Svg, { Path, G, Defs, ClipPath, Rect } from "react-native-svg";
+
+type IconProps = {
+  size?: number | string;
+};
+
+const PinIcon: React.FC<IconProps> = ({ size = 15 }) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 15 15"
+    fill="none"
+  >
+    <G clipPath="url(#pin-clip)">
+      <Path
+        d="M8.18921 2.27902C8.38413 1.82421 8.48159 1.5968 8.63908 1.4935C8.7768 1.40317 8.94461 1.37085 9.10603 1.40357C9.29062 1.44099 9.46557 1.61594 9.81546 1.96583L13.0299 5.18029C13.3798 5.53018 13.5548 5.70513 13.5922 5.88972C13.6249 6.05114 13.5926 6.21895 13.5023 6.35668C13.399 6.51416 13.1715 6.61162 12.7167 6.80654L11.1578 7.47468C11.0916 7.50302 11.0586 7.51719 11.0275 7.53491C11 7.55064 10.9737 7.56845 10.9489 7.58818C10.9209 7.6104 10.8955 7.63584 10.8446 7.68671L9.86902 8.66227C9.78944 8.74185 9.74965 8.78163 9.71804 8.82697C9.68997 8.8672 9.66675 8.91061 9.64883 8.95627C9.62865 9.00773 9.61762 9.0629 9.59555 9.17326L9.13749 11.4635C9.01845 12.0587 8.95893 12.3563 8.80202 12.4956C8.66533 12.6168 8.4824 12.6722 8.30138 12.6471C8.0936 12.6183 7.879 12.4037 7.4498 11.9745L3.02121 7.54595C2.59202 7.11676 2.37742 6.90216 2.34861 6.69437C2.32352 6.51336 2.3789 6.33042 2.50019 6.19373C2.63942 6.03682 2.93702 5.9773 3.5322 5.85827L5.82249 5.40021C5.93285 5.37814 5.98803 5.3671 6.03948 5.34692C6.08515 5.32901 6.12855 5.30578 6.16879 5.27772C6.21412 5.2461 6.25391 5.20631 6.33349 5.12673L7.30904 4.15118C7.35992 4.1003 7.38536 4.07486 7.40757 4.0469C7.4273 4.02206 7.44511 3.99575 7.46085 3.9682C7.47856 3.9372 7.49273 3.90413 7.52108 3.83799L8.18921 2.27902Z"
+        fill="currentColor"
+      />
+      <Path
+        d="M5.23549 9.76024L1.69995 13.2958M7.30904 4.15118L6.33349 5.12673C6.25391 5.20631 6.21412 5.2461 6.16879 5.27772C6.12855 5.30578 6.08515 5.32901 6.03948 5.34692C5.98803 5.3671 5.93285 5.37814 5.8225 5.40021L3.5322 5.85827C2.93702 5.9773 2.63942 6.03682 2.50019 6.19373C2.3789 6.33042 2.32352 6.51336 2.34861 6.69437C2.37742 6.90216 2.59202 7.11676 3.02121 7.54595L7.4498 11.9745C7.879 12.4037 8.0936 12.6183 8.30138 12.6471C8.4824 12.6722 8.66533 12.6168 8.80202 12.4956C8.95893 12.3563 9.01845 12.0587 9.13749 11.4635L9.59555 9.17326C9.61762 9.0629 9.62865 9.00773 9.64883 8.95627C9.66675 8.91061 9.68997 8.8672 9.71804 8.82697C9.74965 8.78163 9.78944 8.74185 9.86902 8.66227L10.8446 7.68671C10.8955 7.63584 10.9209 7.6104 10.9489 7.58818C10.9737 7.56845 11 7.55064 11.0275 7.53491C11.0586 7.51719 11.0916 7.50302 11.1578 7.47468L12.7167 6.80654C13.1715 6.61162 13.399 6.51416 13.5023 6.35667C13.5926 6.21895 13.6249 6.05114 13.5922 5.88972C13.5548 5.70513 13.3798 5.53018 13.0299 5.18029L9.81546 1.96583C9.46557 1.61594 9.29062 1.44099 9.10603 1.40357C8.94461 1.37085 8.7768 1.40317 8.63908 1.4935C8.48159 1.5968 8.38413 1.82421 8.18921 2.27902L7.52108 3.83799C7.49273 3.90413 7.47856 3.9372 7.46085 3.9682C7.44511 3.99575 7.4273 4.02206 7.40757 4.0469C7.38536 4.07486 7.35992 4.1003 7.30904 4.15118Z"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="pin-clip">
+        <Rect width="15" height="15" fill="white" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+export { PinIcon };
+export default PinIcon;

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

@@ -0,0 +1,49 @@
+// components/icons/pin-icon.tsx
+import * as React from "react";
+
+type IconProps = React.SVGProps<SVGSVGElement> & {
+  title?: string;
+  size?: number | string; // convenience
+};
+
+const PinIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ title, size = 15, className, ...props }, ref) => (
+    <svg
+      ref={ref}
+      width={size}
+      height={size}
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden={title ? undefined : true}
+      role={title ? "img" : "presentation"}
+      className={className}
+      {...props}
+    >
+      {title ? <title>{title}</title> : null}
+      <g clipPath="url(#clip0_8794_14510)">
+        {/* solid fill part */}
+        <path
+          d="M8.18921 2.27902C8.38413 1.82421 8.48159 1.5968 8.63908 1.4935C8.7768 1.40317 8.94461 1.37085 9.10603 1.40357C9.29062 1.44099 9.46557 1.61594 9.81546 1.96583L13.0299 5.18029C13.3798 5.53018 13.5548 5.70513 13.5922 5.88972C13.6249 6.05114 13.5926 6.21895 13.5023 6.35668C13.399 6.51416 13.1715 6.61162 12.7167 6.80654L11.1578 7.47468C11.0916 7.50302 11.0586 7.51719 11.0275 7.53491C11 7.55064 10.9737 7.56845 10.9489 7.58818C10.9209 7.6104 10.8955 7.63584 10.8446 7.68671L9.86902 8.66227C9.78944 8.74185 9.74965 8.78163 9.71804 8.82697C9.68997 8.8672 9.66675 8.91061 9.64883 8.95627C9.62865 9.00773 9.61762 9.0629 9.59555 9.17326L9.13749 11.4635C9.01845 12.0587 8.95893 12.3563 8.80202 12.4956C8.66533 12.6168 8.4824 12.6722 8.30138 12.6471C8.0936 12.6183 7.879 12.4037 7.4498 11.9745L3.02121 7.54595C2.59202 7.11676 2.37742 6.90216 2.34861 6.69437C2.32352 6.51336 2.3789 6.33042 2.50019 6.19373C2.63942 6.03682 2.93702 5.9773 3.5322 5.85827L5.82249 5.40021C5.93285 5.37814 5.98803 5.3671 6.03948 5.34692C6.08515 5.32901 6.12855 5.30578 6.16879 5.27772C6.21412 5.2461 6.25391 5.20631 6.33349 5.12673L7.30904 4.15118C7.35992 4.1003 7.38536 4.07486 7.40757 4.0469C7.4273 4.02206 7.44511 3.99575 7.46085 3.9682C7.47856 3.9372 7.49273 3.90413 7.52108 3.83799L8.18921 2.27902Z"
+          fill="currentColor"
+        />
+        {/* outline part */}
+        <path
+          d="M5.23549 9.76024L1.69995 13.2958M7.30904 4.15118L6.33349 5.12673C6.25391 5.20631 6.21412 5.2461 6.16879 5.27772C6.12855 5.30578 6.08515 5.32901 6.03948 5.34692C5.98803 5.3671 5.93285 5.37814 5.8225 5.40021L3.5322 5.85827C2.93702 5.9773 2.63942 6.03682 2.50019 6.19373C2.3789 6.33042 2.32352 6.51336 2.34861 6.69437C2.37742 6.90216 2.59202 7.11676 3.02121 7.54595L7.4498 11.9745C7.879 12.4037 8.0936 12.6183 8.30138 12.6471C8.4824 12.6722 8.66533 12.6168 8.80202 12.4956C8.95893 12.3563 9.01845 12.0587 9.13749 11.4635L9.59555 9.17326C9.61762 9.0629 9.62865 9.00773 9.64883 8.95627C9.66675 8.91061 9.68997 8.8672 9.71804 8.82697C9.74965 8.78163 9.78944 8.74185 9.86902 8.66227L10.8446 7.68671C10.8955 7.63584 10.9209 7.6104 10.9489 7.58818C10.9737 7.56845 11 7.55064 11.0275 7.53491C11.0586 7.51719 11.0916 7.50302 11.1578 7.47468L12.7167 6.80654C13.1715 6.61162 13.399 6.51416 13.5023 6.35667C13.5926 6.21895 13.6249 6.05114 13.5922 5.88972C13.5548 5.70513 13.3798 5.53018 13.0299 5.18029L9.81546 1.96583C9.46557 1.61594 9.29062 1.44099 9.10603 1.40357C8.94461 1.37085 8.7768 1.40317 8.63908 1.4935C8.48159 1.5968 8.38413 1.82421 8.18921 2.27902L7.52108 3.83799C7.49273 3.90413 7.47856 3.9372 7.46085 3.9682C7.44511 3.99575 7.4273 4.02206 7.40757 4.0469C7.38536 4.07486 7.35992 4.1003 7.30904 4.15118Z"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_8794_14510">
+          <rect width="15" height="15" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  ),
+);
+PinIcon.displayName = "PinIcon";
+
+export default PinIcon;

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

@@ -0,0 +1,34 @@
+import React from "react";
+import Svg, { Path, G, Defs, ClipPath, Rect } from "react-native-svg";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const QuestionCircleIcon: React.FC<IconProps> = ({ size = 18, color = '#000000' }) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <G clipPath="url(#questioncircle-clip)">
+      <Path
+        d="M6.8175 6.75C6.99383 6.24875 7.34186 5.82608 7.79997 5.55685C8.25807 5.28762 8.79667 5.1892 9.32038 5.27903C9.84409 5.36886 10.3191 5.64114 10.6613 6.04765C11.0035 6.45415 11.1908 6.96864 11.19 7.5C11.19 9 8.94 9.75 8.94 9.75M9 12.75H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="questioncircle-clip">
+        <Rect width="18" height="18" fill="white" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+export { QuestionCircleIcon };
+export default QuestionCircleIcon;

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

@@ -0,0 +1,33 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const QuestionCircleIcon: 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"
+  >
+    <g clipPath="url(#clip0_questionCircle)">
+      <path
+        d="M6.8175 6.75C6.99383 6.24875 7.34186 5.82608 7.79997 5.55685C8.25807 5.28762 8.79667 5.1892 9.32038 5.27903C9.84409 5.36886 10.3191 5.64114 10.6613 6.04765C11.0035 6.45415 11.1908 6.96864 11.19 7.5C11.19 9 8.94 9.75 8.94 9.75M9 12.75H9.0075M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_questionCircle">
+        <rect width="18" height="18" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default QuestionCircleIcon;

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type Recording01Props = {
+  size?: number | string;
+};
+
+const Recording01Icon: React.FC<Recording01Props> = ({ size = 18 }) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <Path
+        d="M2.25 7.5V10.5M5.625 8.25V9.75M9 4.5V13.5M12.375 2.25V15.75M15.75 7.5V10.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { Recording01Icon };
+export default Recording01Icon;

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

@@ -0,0 +1,39 @@
+import * as React from "react";
+
+type Recording01Props = React.SVGProps<SVGSVGElement> & {
+  title?: string;
+  size?: number | string;
+};
+
+const Recording01Icon = ({
+  title = "Copy",
+  className,
+  size = 18,
+  ...props
+}: Recording01Props) => {
+  const ariaLabel = props["aria-label"] ?? title;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label={ariaLabel}
+      className={className}
+      {...props}
+    >
+      <path
+        d="M2.25 7.5V10.5M5.625 8.25V9.75M9 4.5V13.5M12.375 2.25V15.75M15.75 7.5V10.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Recording01Icon;

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

@@ -0,0 +1,30 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type IconProps = {
+  size?: number;
+  color?: string;
+};
+
+const Share01Icon: React.FC<IconProps> = ({
+  size = 18,
+  color = '#000000',
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <Path
+      d="M15.75 9V12.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.15V9M12 5.25L9 2.25M9 2.25L6 5.25M9 2.25V11.25"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { Share01Icon };
+export default Share01Icon;