@postal-music/icons 0.1.0

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

@@ -0,0 +1,37 @@
+// components/icons/thumbs-down-icon.tsx
+import * as React from "react";
+
+type ThumbsDownIconProps = Omit<
+  React.SVGProps<SVGSVGElement>,
+  "width" | "height"
+> & {
+  size?: number;
+};
+
+export const ThumbsDownIcon = ({
+  size = 18,
+  className,
+  ...props
+}: ThumbsDownIconProps) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label={props["aria-label"] ?? "Thumbs down icon"}
+      className={className}
+      {...props}
+    >
+      <path
+        d="M12.75 1.5V9.75M16.5 7.35V3.9C16.5 3.05992 16.5 2.63988 16.3365 2.31901C16.1927 2.03677 15.9632 1.8073 15.681 1.66349C15.3601 1.5 14.9401 1.5 14.1 1.5H6.0885C4.99239 1.5 4.44433 1.5 4.00168 1.70058C3.61154 1.87735 3.27997 2.16182 3.04592 2.52054C2.78037 2.92755 2.69704 3.46923 2.53036 4.55259L2.13806 7.10259C1.91823 8.53148 1.80831 9.24593 2.02035 9.80184C2.20645 10.2898 2.55648 10.6978 3.01044 10.9559C3.52764 11.25 4.25049 11.25 5.69619 11.25H6.29999C6.72003 11.25 6.93005 11.25 7.09049 11.3317C7.23161 11.4037 7.34634 11.5184 7.41825 11.6595C7.49999 11.8199 7.49999 12.03 7.49999 12.45V14.6506C7.49999 15.672 8.32799 16.5 9.34937 16.5C9.59299 16.5 9.81376 16.3565 9.9127 16.1339L12.4333 10.4626C12.5479 10.2047 12.6052 10.0757 12.6958 9.98114C12.7759 9.89755 12.8743 9.83363 12.9832 9.79439C13.1064 9.75 13.2476 9.75 13.5298 9.75H14.1C14.9401 9.75 15.3601 9.75 15.681 9.58651C15.9632 9.4427 16.1927 9.21323 16.3365 8.93099C16.5 8.61012 16.5 8.19008 16.5 7.35Z"
+        stroke="currentColor"
+        strokeWidth={1.25}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,34 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface Type01IconProps {
+  size?: number | string;
+  stroke?: string;
+  strokeWidth?: number;
+}
+
+const Type01Icon: React.FC<Type01IconProps> = ({
+  size = 20,
+  stroke = '#000000',
+  strokeWidth = 1.5,
+}) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <Path
+        d="M3.33337 5.83331C3.33337 5.05674 3.33337 4.66846 3.46024 4.36217C3.6294 3.95379 3.95385 3.62934 4.36223 3.46018C4.66852 3.33331 5.0568 3.33331 5.83337 3.33331H14.1667C14.9433 3.33331 15.3316 3.33331 15.6378 3.46018C16.0462 3.62934 16.3707 3.95379 16.5398 4.36217C16.6667 4.66846 16.6667 5.05674 16.6667 5.83331M7.50004 16.6666H12.5M10 3.33331V16.6666"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { Type01Icon };
+export default Type01Icon;

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+interface Type01IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+}
+
+function Type01Icon({
+  size = 20,
+  stroke = "currentColor",
+  strokeWidth = 1.5,
+  ...props
+}: Type01IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M3.33337 5.83331C3.33337 5.05674 3.33337 4.66846 3.46024 4.36217C3.6294 3.95379 3.95385 3.62934 4.36223 3.46018C4.66852 3.33331 5.0568 3.33331 5.83337 3.33331H14.1667C14.9433 3.33331 15.3316 3.33331 15.6378 3.46018C16.0462 3.62934 16.3707 3.95379 16.5398 4.36217C16.6667 4.66846 16.6667 5.05674 16.6667 5.83331M7.50004 16.6666H12.5M10 3.33331V16.6666"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default Type01Icon;

package/src/icons/general/index.ts

@@ -0,0 +1,41 @@
+export { default as ActivityIcon } from './ActivityIcon';
+export { default as BookIcon } from './BookIcon';
+export { default as BookmarkIcon } from './BookmarkIcon';
+export { default as CollaborativeIcon } from './CollaborativeIcon';
+export { default as DataIcon } from './DataIcon';
+export { default as Dataflow03Icon } from './Dataflow03Icon';
+export { default as Datapoints01Icon } from './Datapoints01Icon';
+export { default as DropBoxIcon } from './DropBoxIcon';
+export { default as FaceSmileIcon } from './FaceSmileIcon';
+export { default as Flag01Icon } from './Flag01Icon';
+export { default as GlobeIcon } from './GlobeIcon';
+export { default as Globe02Icon } from './Globe02Icon';
+export { default as Globe05Icon } from './Globe05Icon';
+export { default as Hash02Icon } from './Hash02Icon';
+export { HeartIcon } from './HeartIcon';
+export { default as HelpIcon } from './HelpIcon';
+export { default as ImageIcon } from './ImageIcon';
+export { default as Image01Icon } from './Image01Icon';
+export { default as Image03Icon } from './Image03Icon';
+export { default as LandingCollaborativeIcon } from './LandingCollaborativeIcon';
+export { default as LandingControlsIcon } from './LandingControlsIcon';
+export { default as LandingMusicIcon } from './LandingMusicIcon';
+export { default as LandingShareIcon } from './LandingShareIcon';
+export { default as LandingUploadIcon } from './LandingUploadIcon';
+export { default as LayersThree01Icon } from './LayersThree01Icon';
+export { default as LyricsIcon } from './LyricsIcon';
+export { default as MoonIcon } from './MoonIcon';
+export { default as MusicNoteIcon } from './MusicNoteIcon';
+export { default as PinIcon } from './PinIcon';
+export { default as QuestionCircleIcon } from './QuestionCircleIcon';
+export { default as Recording01Icon } from './Recordering01';
+export { default as Share01Icon } from './Share01Icon';
+export { default as ShareIcon } from './ShareIcon';
+export { default as StarIcon } from './StarIcon';
+export { default as Stars01Icon } from './Stars01Icon';
+export { default as Stars02Icon } from './Stars02Icon';
+export { default as Stars04Icon } from './Stars04Icon';
+export { default as Stars06Icon } from './Stars06Icon';
+export { default as TagsIcon } from './TagsIcon';
+export { default as ThumbsDownIcon } from './ThumbsDownIcon';
+export { default as Type01Icon } from './Type01Icon';

package/src/icons/index.ts

@@ -0,0 +1,15 @@
+export * from './actions';
+export * from './alerts';
+export * from './arrows';
+export * from './brand';
+export * from './charts';
+export * from './communication';
+export * from './files';
+export * from './finance';
+export * from './general';
+export * from './media';
+export * from './navigation';
+export * from './security';
+export * from './social';
+export * from './time';
+export * from './users';

package/src/icons/media/10SecondsBackIcon.native.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type Props = {
+  size?: number | string;
+};
+
+const TenSecondsBackIcon = ({ size = 20 }: Props) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <Path
+      d="M7.948 13.9027C7.60633 13.9027 7.323 13.6193 7.323 13.2777V10.4527L7.16466 10.6277C6.93133 10.886 6.53966 10.9027 6.28133 10.6777C6.023 10.4443 6.00633 10.0527 6.23133 9.79432L7.48133 8.40265C7.65633 8.21097 7.93132 8.14429 8.17299 8.23596C8.41462 8.32763 8.57296 8.56099 8.57296 8.81932V13.2777C8.57296 13.6277 8.298 13.9027 7.948 13.9027Z"
+      fill="currentColor"
+    />
+    <Path
+      d="M8.35033 4.36174C8.20863 4.36174 8.0753 4.32009 7.95863 4.22009C7.69197 4.00343 7.65031 3.61177 7.85864 3.3451L9.50866 1.28679C9.72532 1.02013 10.117 0.97841 10.3837 1.18674C10.6503 1.39508 10.692 1.79512 10.4837 2.06179L8.83366 4.12009C8.71699 4.27843 8.53366 4.36174 8.35033 4.36174Z"
+      fill="currentColor"
+    />
+    <Path
+      d="M9.99819 18.9691C5.57319 18.9691 1.96484 15.369 1.96484 10.9357C1.96484 9.21065 2.52319 7.55234 3.58985 6.13568C3.79819 5.86068 4.18984 5.80238 4.46484 6.01071C4.73984 6.21904 4.79819 6.6107 4.58986 6.8857C3.68986 8.0857 3.21484 9.48565 3.21484 10.9357C3.21484 14.6773 6.25652 17.7191 9.99819 17.7191C13.7399 17.7191 16.7815 14.6773 16.7815 10.9357C16.7815 7.19402 13.7399 4.15234 9.99819 4.15234C9.51486 4.15234 9.02319 4.2107 8.48986 4.3357C8.15652 4.4107 7.81486 4.20237 7.73986 3.86904C7.66486 3.5357 7.87319 3.19402 8.20653 3.11902C8.83153 2.97735 9.42319 2.90234 9.99819 2.90234C14.4232 2.90234 18.0315 6.50235 18.0315 10.9357C18.0315 15.369 14.4232 18.9691 9.99819 18.9691Z"
+      fill="currentColor"
+    />
+    <Path
+      d="M11.6667 13.9036C10.4 13.9036 9.375 12.8786 9.375 11.612V10.487C9.375 9.2203 10.4 8.19531 11.6667 8.19531C12.9333 8.19531 13.9583 9.2203 13.9583 10.487V11.612C13.9583 12.8786 12.9333 13.9036 11.6667 13.9036ZM11.6667 9.45364C11.0917 9.45364 10.625 9.9203 10.625 10.4953V11.6203C10.625 12.1953 11.0917 12.662 11.6667 12.662C12.2417 12.662 12.7083 12.1953 12.7083 11.6203V10.4953C12.7083 9.9203 12.2417 9.45364 11.6667 9.45364Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+TenSecondsBackIcon.displayName = "TenSecondsBackIcon";
+
+export { TenSecondsBackIcon };
+export default TenSecondsBackIcon;

package/src/icons/media/10SecondsBackIcon.web.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+type Props = SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+const TenSecondsBackIcon = React.forwardRef<SVGSVGElement, Props>(
+  ({ size = 20, ...props }, ref) => (
+    <svg
+      ref={ref}
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.948 13.9027C7.60633 13.9027 7.323 13.6193 7.323 13.2777V10.4527L7.16466 10.6277C6.93133 10.886 6.53966 10.9027 6.28133 10.6777C6.023 10.4443 6.00633 10.0527 6.23133 9.79432L7.48133 8.40265C7.65633 8.21097 7.93132 8.14429 8.17299 8.23596C8.41462 8.32763 8.57296 8.56099 8.57296 8.81932V13.2777C8.57296 13.6277 8.298 13.9027 7.948 13.9027Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8.35033 4.36174C8.20863 4.36174 8.0753 4.32009 7.95863 4.22009C7.69197 4.00343 7.65031 3.61177 7.85864 3.3451L9.50866 1.28679C9.72532 1.02013 10.117 0.97841 10.3837 1.18674C10.6503 1.39508 10.692 1.79512 10.4837 2.06179L8.83366 4.12009C8.71699 4.27843 8.53366 4.36174 8.35033 4.36174Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.99819 18.9691C5.57319 18.9691 1.96484 15.369 1.96484 10.9357C1.96484 9.21065 2.52319 7.55234 3.58985 6.13568C3.79819 5.86068 4.18984 5.80238 4.46484 6.01071C4.73984 6.21904 4.79819 6.6107 4.58986 6.8857C3.68986 8.0857 3.21484 9.48565 3.21484 10.9357C3.21484 14.6773 6.25652 17.7191 9.99819 17.7191C13.7399 17.7191 16.7815 14.6773 16.7815 10.9357C16.7815 7.19402 13.7399 4.15234 9.99819 4.15234C9.51486 4.15234 9.02319 4.2107 8.48986 4.3357C8.15652 4.4107 7.81486 4.20237 7.73986 3.86904C7.66486 3.5357 7.87319 3.19402 8.20653 3.11902C8.83153 2.97735 9.42319 2.90234 9.99819 2.90234C14.4232 2.90234 18.0315 6.50235 18.0315 10.9357C18.0315 15.369 14.4232 18.9691 9.99819 18.9691Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.6667 13.9036C10.4 13.9036 9.375 12.8786 9.375 11.612V10.487C9.375 9.2203 10.4 8.19531 11.6667 8.19531C12.9333 8.19531 13.9583 9.2203 13.9583 10.487V11.612C13.9583 12.8786 12.9333 13.9036 11.6667 13.9036ZM11.6667 9.45364C11.0917 9.45364 10.625 9.9203 10.625 10.4953V11.6203C10.625 12.1953 11.0917 12.662 11.6667 12.662C12.2417 12.662 12.7083 12.1953 12.7083 11.6203V10.4953C12.7083 9.9203 12.2417 9.45364 11.6667 9.45364Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+);
+
+TenSecondsBackIcon.displayName = "TenSecondsBackIcon";
+
+export default TenSecondsBackIcon;

package/src/icons/media/EqualizerIcon.native.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+export default function EqualizerIcon({
+  size = 18,
+}: {
+  size?: number;
+}) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <Path
+        d="M2.25 7.5L2.25 10.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>
+  );
+}

package/src/icons/media/EqualizerIcon.web.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+
+export default function EqualizerIcon({
+  className,
+  size = 18,
+}: {
+  className?: string;
+  size?: number;
+}) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-label="Equalizer icon"
+    >
+      <path
+        d="M2.25 7.5L2.25 10.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>
+  );
+}

package/src/icons/media/HeadPhonesIcon.native.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type HeadphonesIconProps = {
+  size?: number | string;
+};
+
+export default function HeadphonesIcon({
+  size = 15,
+}: HeadphonesIconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 15 15"
+      fill="none"
+    >
+      <Path
+        d="M1.875 10.3125C1.875 9.44955 2.57456 8.75 3.4375 8.75C4.30044 8.75 5 9.44955 5 10.3125V11.5625C5 12.4254 4.30044 13.125 3.4375 13.125C2.57456 13.125 1.875 12.4254 1.875 11.5625V10.3125Z"
+        fill="currentColor"
+      />
+      <Path
+        d="M10 10.3125C10 9.44955 10.6996 8.75 11.5625 8.75C12.4254 8.75 13.125 9.44955 13.125 10.3125V11.5625C13.125 12.4254 12.4254 13.125 11.5625 13.125C10.6996 13.125 10 12.4254 10 11.5625V10.3125Z"
+        fill="currentColor"
+      />
+      <Path
+        d="M13.125 11.25V7.5C13.125 4.3934 10.6066 1.875 7.5 1.875C4.3934 1.875 1.875 4.3934 1.875 7.5V11.25M3.4375 13.125C2.57456 13.125 1.875 12.4254 1.875 11.5625V10.3125C1.875 9.44956 2.57456 8.75 3.4375 8.75C4.30044 8.75 5 9.44956 5 10.3125V11.5625C5 12.4254 4.30044 13.125 3.4375 13.125ZM11.5625 13.125C10.6996 13.125 10 12.4254 10 11.5625V10.3125C10 9.44956 10.6996 8.75 11.5625 8.75C12.4254 8.75 13.125 9.44956 13.125 10.3125V11.5625C13.125 12.4254 12.4254 13.125 11.5625 13.125Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/media/HeadPhonesIcon.web.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+
+type HeadphonesIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export default function HeadphonesIcon({
+  size = 15,
+  className,
+  ...props
+}: HeadphonesIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M1.875 10.3125C1.875 9.44955 2.57456 8.75 3.4375 8.75C4.30044 8.75 5 9.44955 5 10.3125V11.5625C5 12.4254 4.30044 13.125 3.4375 13.125C2.57456 13.125 1.875 12.4254 1.875 11.5625V10.3125Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10 10.3125C10 9.44955 10.6996 8.75 11.5625 8.75C12.4254 8.75 13.125 9.44955 13.125 10.3125V11.5625C13.125 12.4254 12.4254 13.125 11.5625 13.125C10.6996 13.125 10 12.4254 10 11.5625V10.3125Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13.125 11.25V7.5C13.125 4.3934 10.6066 1.875 7.5 1.875C4.3934 1.875 1.875 4.3934 1.875 7.5V11.25M3.4375 13.125C2.57456 13.125 1.875 12.4254 1.875 11.5625V10.3125C1.875 9.44956 2.57456 8.75 3.4375 8.75C4.30044 8.75 5 9.44956 5 10.3125V11.5625C5 12.4254 4.30044 13.125 3.4375 13.125ZM11.5625 13.125C10.6996 13.125 10 12.4254 10 11.5625V10.3125C10 9.44956 10.6996 8.75 11.5625 8.75C12.4254 8.75 13.125 9.44956 13.125 10.3125V11.5625C13.125 12.4254 12.4254 13.125 11.5625 13.125Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/media/MediaUploadIcon.native.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Svg, { Path, G, Defs, ClipPath, Rect } from 'react-native-svg';
+
+interface IconProps {
+  size?: number | string;
+  color?: string;
+}
+
+const MediaUploadIcon: React.FC<IconProps> = ({
+  size = 24,
+  color = '#000000',
+}) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 10 10"
+      fill="none"
+    >
+      <G clipPath="url(#clip0)">
+        <Path
+          d="M1.77971 8.63663L4.52827 5.88807C4.69328 5.72306 4.77578 5.64056 4.87092 5.60965C4.9546 5.58246 5.04475 5.58246 5.12843 5.60965C5.22357 5.64056 5.30607 5.72307 5.47108 5.88807L8.20131 8.6183M5.83301 6.25L7.02827 5.05474C7.19328 4.88973 7.27578 4.80723 7.37092 4.77632C7.4546 4.74912 7.54475 4.74912 7.62843 4.77632C7.72357 4.80723 7.80607 4.88973 7.97108 5.05474L9.16634 6.25M4.16634 3.75C4.16634 4.21024 3.79325 4.58333 3.33301 4.58333C2.87277 4.58333 2.49967 4.21024 2.49967 3.75C2.49967 3.28976 2.87277 2.91667 3.33301 2.91667C3.79325 2.91667 4.16634 3.28976 4.16634 3.75ZM2.83301 8.75H7.16634C7.86641 8.75 8.21644 8.75 8.48383 8.61376C8.71903 8.49392 8.91026 8.30269 9.0301 8.06749C9.16634 7.8001 9.16634 7.45007 9.16634 6.75V3.25C9.16634 2.54993 9.16634 2.1999 9.0301 1.93251C8.91026 1.69731 8.71903 1.50608 8.48383 1.38624C8.21644 1.25 7.86641 1.25 7.16634 1.25H2.83301C2.13294 1.25 1.78291 1.25 1.51552 1.38624C1.28032 1.50608 1.08909 1.69731 0.96925 1.93251C0.833008 2.1999 0.833008 2.54993 0.833008 3.25V6.75C0.833008 7.45007 0.833008 7.8001 0.96925 8.06749C1.08909 8.30269 1.28032 8.49392 1.51552 8.61376C1.78291 8.75 2.13294 8.75 2.83301 8.75Z"
+          stroke={color}
+          strokeWidth="0.75"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </G>
+      <Defs>
+        <ClipPath id="clip0">
+          <Rect width="10" height="10" fill="white" />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+};
+
+export { MediaUploadIcon };
+export default MediaUploadIcon;

package/src/icons/media/MediaUploadIcon.web.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+  color?: string;
+  className?: string;
+}
+
+const MediaUploadIcon: React.FC<IconProps> = ({
+  size = 24,
+  color = 'currentColor',
+  className,
+  ...props
+}) => {
+  return (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 10 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0)">
+        <path
+          d="M1.77971 8.63663L4.52827 5.88807C4.69328 5.72306 4.77578 5.64056 4.87092 5.60965C4.9546 5.58246 5.04475 5.58246 5.12843 5.60965C5.22357 5.64056 5.30607 5.72307 5.47108 5.88807L8.20131 8.6183M5.83301 6.25L7.02827 5.05474C7.19328 4.88973 7.27578 4.80723 7.37092 4.77632C7.4546 4.74912 7.54475 4.74912 7.62843 4.77632C7.72357 4.80723 7.80607 4.88973 7.97108 5.05474L9.16634 6.25M4.16634 3.75C4.16634 4.21024 3.79325 4.58333 3.33301 4.58333C2.87277 4.58333 2.49967 4.21024 2.49967 3.75C2.49967 3.28976 2.87277 2.91667 3.33301 2.91667C3.79325 2.91667 4.16634 3.28976 4.16634 3.75ZM2.83301 8.75H7.16634C7.86641 8.75 8.21644 8.75 8.48383 8.61376C8.71903 8.49392 8.91026 8.30269 9.0301 8.06749C9.16634 7.8001 9.16634 7.45007 9.16634 6.75V3.25C9.16634 2.54993 9.16634 2.1999 9.0301 1.93251C8.91026 1.69731 8.71903 1.50608 8.48383 1.38624C8.21644 1.25 7.86641 1.25 7.16634 1.25H2.83301C2.13294 1.25 1.78291 1.25 1.51552 1.38624C1.28032 1.50608 1.08909 1.69731 0.96925 1.93251C0.833008 2.1999 0.833008 2.54993 0.833008 3.25V6.75C0.833008 7.45007 0.833008 7.8001 0.96925 8.06749C1.08909 8.30269 1.28032 8.49392 1.51552 8.61376C1.78291 8.75 2.13294 8.75 2.83301 8.75Z"
+          stroke={color}
+          strokeWidth="0.75"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0">
+          <rect width="10" height="10" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default MediaUploadIcon;

package/src/icons/media/NextTrackIcon.native.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type NextTrackIconProps = {
+  size?: number | string;
+  color?: string;
+};
+
+const NextTrackIcon = ({ size = 15, color = '#000000' }: NextTrackIconProps) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 15 15"
+      fill="none"
+    >
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 1.72291C0 0.313108 1.60056 -0.485905 2.73822 0.323754L10.8559 6.10102C11.8203 6.78739 11.8203 8.21298 10.8559 8.89934L2.73822 14.6767C1.60056 15.4863 0 14.6873 0 13.2774V1.72291ZM15 1.15406C15 0.516805 14.4834 0.00021111 13.8462 0.00021111C13.2089 0.00021111 12.6923 0.516805 12.6923 1.15406V13.8464C12.6923 14.4836 13.2089 15.0002 13.8462 15.0002C14.4834 15.0002 15 14.4836 15 13.8464V1.15406Z"
+        fill={color}
+      />
+    </Svg>
+  );
+};
+
+NextTrackIcon.displayName = "NextTrackIcon";
+
+export { NextTrackIcon };
+export default NextTrackIcon;

package/src/icons/media/NextTrackIcon.web.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+
+type NextTrackIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+  color?: string;
+  label?: string;
+};
+
+const NextTrackIcon = React.forwardRef<SVGSVGElement, NextTrackIconProps>(
+  ({ size = 15, color = "currentColor", label, className, ...props }, ref) => {
+    const accessibility = label
+      ? { role: "img", "aria-label": label }
+      : { "aria-hidden": true };
+
+    return (
+      <svg
+        ref={ref}
+        width={size}
+        height={size}
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}
+        {...accessibility}
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M0 1.72291C0 0.313108 1.60056 -0.485905 2.73822 0.323754L10.8559 6.10102C11.8203 6.78739 11.8203 8.21298 10.8559 8.89934L2.73822 14.6767C1.60056 15.4863 0 14.6873 0 13.2774V1.72291ZM15 1.15406C15 0.516805 14.4834 0.00021111 13.8462 0.00021111C13.2089 0.00021111 12.6923 0.516805 12.6923 1.15406V13.8464C12.6923 14.4836 13.2089 15.0002 13.8462 15.0002C14.4834 15.0002 15 14.4836 15 13.8464V1.15406Z"
+          fill={color}
+        />
+      </svg>
+    );
+  },
+);
+
+NextTrackIcon.displayName = "NextTrackIcon";
+export default NextTrackIcon;

package/src/icons/media/PauseIcon.native.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const PauseIcon: React.FC<IconProps> = ({ size = 20, color = '#000000' }) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <Path
+      d="M7 16.5V3.5"
+      stroke={color}
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M13 16.5V3.5"
+      stroke={color}
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { PauseIcon };
+export default PauseIcon;

package/src/icons/media/PauseIcon.web.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const PauseIcon: React.FC<IconProps> = ({ size = 20, color = "currentColor" }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    {/* Left bar */}
+    <path
+      d="M7 16.5V3.5"
+      stroke={color}
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    {/* Right bar */}
+    <path
+      d="M13 16.5V3.5"
+      stroke={color}
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default PauseIcon;

package/src/icons/media/PlayIcon.native.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const PlayIcon: React.FC<IconProps> = ({ size = 20, color = '#000000' }) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 22 20"
+    fill="none"
+  >
+    <Path
+      transform="translate(2, 0)"
+      d="M4.16602 4.1576C4.16602 3.3483 4.16602 2.94365 4.33476 2.72059C4.48176 2.52626 4.70645 2.40601 4.94968 2.39149C5.22888 2.37482 5.56557 2.59928 6.23895 3.0482L15.0019 8.89018C15.5583 9.26111 15.8365 9.44658 15.9335 9.68035C16.0182 9.88473 16.0182 10.1144 15.9335 10.3188C15.8365 10.5526 15.5583 10.738 15.0019 11.109L6.23895 16.951C5.56557 17.3999 5.22888 17.6243 4.94968 17.6077C4.70645 17.5931 4.48176 17.4729 4.33476 17.2786C4.16602 17.0555 4.16602 16.6509 4.16602 15.8416V4.1576Z"
+      fill={color}
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { PlayIcon };
+export default PlayIcon;

package/src/icons/media/PlayIcon.web.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const PlayIcon: React.FC<IconProps> = ({ size = 20, color = "currentColor" }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 22 20" // widened from 20 to 22
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      transform="translate(2, 0)" // shifts everything 2px right
+      d="M4.16602 4.1576C4.16602 3.3483 4.16602 2.94365 4.33476 2.72059C4.48176 2.52626 4.70645 2.40601 4.94968 2.39149C5.22888 2.37482 5.56557 2.59928 6.23895 3.0482L15.0019 8.89018C15.5583 9.26111 15.8365 9.44658 15.9335 9.68035C16.0182 9.88473 16.0182 10.1144 15.9335 10.3188C15.8365 10.5526 15.5583 10.738 15.0019 11.109L6.23895 16.951C5.56557 17.3999 5.22888 17.6243 4.94968 17.6077C4.70645 17.5931 4.48176 17.4729 4.33476 17.2786C4.16602 17.0555 4.16602 16.6509 4.16602 15.8416V4.1576Z"
+      fill={color}
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default PlayIcon;