@postal-music/icons 0.1.0

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

@@ -0,0 +1,38 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type PlaySquareIconProps = {
+  size?: number | string;
+};
+
+export const PlaySquareIcon = ({ size }: PlaySquareIconProps) => {
+  const dimension = size ?? 22;
+
+  return (
+    <Svg
+      width={dimension}
+      height={dimension}
+      viewBox="0 0 22 22"
+      fill="none"
+    >
+      <Path
+        d="M8.70833 8.21822C8.70833 7.78071 8.70833 7.56195 8.79976 7.43983C8.87944 7.3334 9.0014 7.26682 9.13401 7.25734C9.28619 7.24648 9.4702 7.36477 9.83822 7.60136L14.1654 10.3831C14.4848 10.5884 14.6445 10.6911 14.6996 10.8216C14.7478 10.9357 14.7478 11.0643 14.6996 11.1784C14.6445 11.3089 14.4848 11.4116 14.1654 11.6169L9.83822 14.3986C9.4702 14.6352 9.28619 14.7535 9.13401 14.7427C9.0014 14.7332 8.87944 14.6666 8.79976 14.5602C8.70833 14.438 8.70833 14.2193 8.70833 13.7818V8.21822Z"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M2.75 7.15C2.75 5.60986 2.75 4.83978 3.04973 4.25153C3.31338 3.73408 3.73408 3.31338 4.25153 3.04973C4.83978 2.75 5.60986 2.75 7.15 2.75H14.85C16.3901 2.75 17.1602 2.75 17.7485 3.04973C18.2659 3.31338 18.6866 3.73408 18.9503 4.25153C19.25 4.83978 19.25 5.60986 19.25 7.15V14.85C19.25 16.3901 19.25 17.1602 18.9503 17.7485C18.6866 18.2659 18.2659 18.6866 17.7485 18.9503C17.1602 19.25 16.3901 19.25 14.85 19.25H7.15C5.60986 19.25 4.83978 19.25 4.25153 18.9503C3.73408 18.6866 3.31338 18.2659 3.04973 17.7485C2.75 17.1602 2.75 16.3901 2.75 14.85V7.15Z"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+PlaySquareIcon.displayName = "PlaySquareIcon";
+
+export default PlaySquareIcon;

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

@@ -0,0 +1,47 @@
+"use client";
+
+import * as React from "react";
+
+type PlaySquareIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export const PlaySquareIcon = React.forwardRef<
+  SVGSVGElement,
+  PlaySquareIconProps
+>(({ className, size, ...props }, ref) => {
+  const dimension = size ?? 22;
+
+  return (
+    <svg
+      ref={ref}
+      width={dimension}
+      height={dimension}
+      viewBox="0 0 22 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-hidden={props["aria-label"] ? undefined : true}
+      role={props["aria-label"] ? "img" : "presentation"}
+      focusable="false"
+      {...props}
+    >
+      <path
+        d="M8.70833 8.21822C8.70833 7.78071 8.70833 7.56195 8.79976 7.43983C8.87944 7.3334 9.0014 7.26682 9.13401 7.25734C9.28619 7.24648 9.4702 7.36477 9.83822 7.60136L14.1654 10.3831C14.4848 10.5884 14.6445 10.6911 14.6996 10.8216C14.7478 10.9357 14.7478 11.0643 14.6996 11.1784C14.6445 11.3089 14.4848 11.4116 14.1654 11.6169L9.83822 14.3986C9.4702 14.6352 9.28619 14.7535 9.13401 14.7427C9.0014 14.7332 8.87944 14.6666 8.79976 14.5602C8.70833 14.438 8.70833 14.2193 8.70833 13.7818V8.21822Z"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.75 7.15C2.75 5.60986 2.75 4.83978 3.04973 4.25153C3.31338 3.73408 3.73408 3.31338 4.25153 3.04973C4.83978 2.75 5.60986 2.75 7.15 2.75H14.85C16.3901 2.75 17.1602 2.75 17.7485 3.04973C18.2659 3.31338 18.6866 3.73408 18.9503 4.25153C19.25 4.83978 19.25 5.60986 19.25 7.15V14.85C19.25 16.3901 19.25 17.1602 18.9503 17.7485C18.6866 18.2659 18.2659 18.6866 17.7485 18.9503C17.1602 19.25 16.3901 19.25 14.85 19.25H7.15C5.60986 19.25 4.83978 19.25 4.25153 18.9503C3.73408 18.6866 3.31338 18.2659 3.04973 17.7485C2.75 17.1602 2.75 16.3901 2.75 14.85V7.15Z"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+});
+
+PlaySquareIcon.displayName = "PlaySquareIcon";

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type PreviousTrackIconProps = {
+  size?: number | string;
+  color?: string;
+};
+
+const PreviousTrackIcon = ({ size = 15, color = '#000000' }: PreviousTrackIconProps) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 15 15"
+      fill="none"
+    >
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.2618 0.323757C13.3995 -0.485909 15 0.31311 15 1.72293V13.2775C15 14.6874 13.3995 15.4864 12.2618 14.6768L4.14405 8.89941C3.17961 8.21304 3.17961 6.78744 4.14405 6.10107L12.2618 0.323757ZM2.30771 1.15407C2.30771 0.516809 1.79111 0.000211111 1.15386 0.000211111C0.516598 0.000211111 0 0.516809 0 1.15407V13.8465C0 14.4837 0.516598 15.0003 1.15386 15.0003C1.79111 15.0003 2.30771 14.4837 2.30771 13.8465V1.15407Z"
+        fill={color}
+      />
+    </Svg>
+  );
+};
+
+PreviousTrackIcon.displayName = "PreviousTrackIcon";
+
+export { PreviousTrackIcon };
+export default PreviousTrackIcon;

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+
+type PreviousTrackIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+  color?: string;
+  label?: string;
+};
+
+const PreviousTrackIcon = React.forwardRef<
+  SVGSVGElement,
+  PreviousTrackIconProps
+>(({ 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="M12.2618 0.323757C13.3995 -0.485909 15 0.31311 15 1.72293V13.2775C15 14.6874 13.3995 15.4864 12.2618 14.6768L4.14405 8.89941C3.17961 8.21304 3.17961 6.78744 4.14405 6.10107L12.2618 0.323757ZM2.30771 1.15407C2.30771 0.516809 1.79111 0.000211111 1.15386 0.000211111C0.516598 0.000211111 0 0.516809 0 1.15407V13.8465C0 14.4837 0.516598 15.0003 1.15386 15.0003C1.79111 15.0003 2.30771 14.4837 2.30771 13.8465V1.15407Z"
+        fill={color}
+      />
+    </svg>
+  );
+});
+
+PreviousTrackIcon.displayName = "PreviousTrackIcon";
+export default PreviousTrackIcon;

package/src/icons/media/Repeat01Icon.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 Repeat01Icon: React.FC<IconProps> = ({
+  size = 18,
+  color = '#000000',
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <Path
+      d="M12.75 1.5L15.75 4.5M15.75 4.5L12.75 7.5M15.75 4.5H5.85C4.58988 4.5 3.95982 4.5 3.47852 4.74524C3.05516 4.96095 2.71095 5.30516 2.49524 5.72852C2.25 6.20982 2.25 6.83988 2.25 8.1V8.25M2.25 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.9V9.75M2.25 13.5L5.25 16.5M2.25 13.5L5.25 10.5"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export default Repeat01Icon;

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

@@ -0,0 +1,32 @@
+import React from "react";
+
+type IconProps = {
+  size?: number;
+  color?: string;
+  className?: string;
+};
+
+export const Repeat01Icon: 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="M12.75 1.5L15.75 4.5M15.75 4.5L12.75 7.5M15.75 4.5H5.85C4.58988 4.5 3.95982 4.5 3.47852 4.74524C3.05516 4.96095 2.71095 5.30516 2.49524 5.72852C2.25 6.20982 2.25 6.83988 2.25 8.1V8.25M2.25 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.9V9.75M2.25 13.5L5.25 16.5M2.25 13.5L5.25 10.5"
+      stroke={color}
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface Repeat02IconProps {
+  size?: number;
+}
+
+const Repeat02Icon: React.FC<Repeat02IconProps> = ({
+  size = 18,
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <Path
+      d="M8.25 1.5L10.5 3.75M10.5 3.75L8.25 6M10.5 3.75H5.1C3.83988 3.75 3.20982 3.75 2.72852 3.99524C2.30516 4.21095 1.96095 4.55516 1.74524 4.97852C1.5 5.45982 1.5 6.08988 1.5 7.35V11.625C1.5 11.9733 1.5 12.1475 1.51925 12.2937C1.65217 13.3033 2.44667 14.0978 3.45632 14.2308C3.60253 14.25 3.77668 14.25 4.125 14.25M7.5 14.25H12.9C14.1601 14.25 14.7902 14.25 15.2715 14.0048C15.6948 13.789 16.039 13.4448 16.2548 13.0215C16.5 12.5402 16.5 11.9101 16.5 10.65V6.375C16.5 6.02668 16.5 5.85253 16.4808 5.70632C16.3478 4.69667 15.5533 3.90217 14.5437 3.76925C14.3975 3.75 14.2233 3.75 13.875 3.75M7.5 14.25L9.75 16.5M7.5 14.25L9.75 12"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { Repeat02Icon };
+export default Repeat02Icon;

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+interface Repeat02IconProps extends SVGProps<SVGSVGElement> {
+  /** Tailwind or custom classes to style the icon */
+  className?: string;
+  size?: number;
+}
+
+const Repeat02Icon: React.FC<Repeat02IconProps> = ({
+  className = "text-gray-900",
+  size = 18,
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M8.25 1.5L10.5 3.75M10.5 3.75L8.25 6M10.5 3.75H5.1C3.83988 3.75 3.20982 3.75 2.72852 3.99524C2.30516 4.21095 1.96095 4.55516 1.74524 4.97852C1.5 5.45982 1.5 6.08988 1.5 7.35V11.625C1.5 11.9733 1.5 12.1475 1.51925 12.2937C1.65217 13.3033 2.44667 14.0978 3.45632 14.2308C3.60253 14.25 3.77668 14.25 4.125 14.25M7.5 14.25H12.9C14.1601 14.25 14.7902 14.25 15.2715 14.0048C15.6948 13.789 16.039 13.4448 16.2548 13.0215C16.5 12.5402 16.5 11.9101 16.5 10.65V6.375C16.5 6.02668 16.5 5.85253 16.4808 5.70632C16.3478 4.69667 15.5533 3.90217 14.5437 3.76925C14.3975 3.75 14.2233 3.75 13.875 3.75M7.5 14.25L9.75 16.5M7.5 14.25L9.75 12"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+export default Repeat02Icon;

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import Svg, { Path, G, Defs, ClipPath, Rect } from "react-native-svg";
+
+interface Repeat03IconProps {
+  size?: number;
+  color?: string;
+}
+
+const Repeat03Icon: React.FC<Repeat03IconProps> = ({
+  color = '#000000',
+  size = 18,
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <G clipPath="url(#clip0_repeat03icon)">
+      <Path
+        d="M9.75 16.5L7.5 14.25M7.5 14.25L9.75 12M7.5 14.25H11.25C14.1495 14.25 16.5 11.8995 16.5 9C16.5 6.9057 15.2737 5.09782 13.5 4.25522M4.5 13.7448C2.72629 12.9022 1.5 11.0943 1.5 9C1.5 6.10051 3.85051 3.75 6.75 3.75H10.5M10.5 3.75L8.25 1.5M10.5 3.75L8.25 6"
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="clip0_repeat03icon">
+        <Rect width="18" height="18" fill={color} />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+export { Repeat03Icon };
+export default Repeat03Icon;

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

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+interface Repeat03IconProps extends SVGProps<SVGSVGElement> {
+  className?: string;
+  size?: number;
+}
+
+const Repeat03Icon: React.FC<Repeat03IconProps> = ({
+  className,
+  color = "currentColor",
+  size = 18,
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...props}
+  >
+    <g clipPath="url(#clip0_repeat03icon)">
+      <path
+        d="M9.75 16.5L7.5 14.25M7.5 14.25L9.75 12M7.5 14.25H11.25C14.1495 14.25 16.5 11.8995 16.5 9C16.5 6.9057 15.2737 5.09782 13.5 4.25522M4.5 13.7448C2.72629 12.9022 1.5 11.0943 1.5 9C1.5 6.10051 3.85051 3.75 6.75 3.75H10.5M10.5 3.75L8.25 1.5M10.5 3.75L8.25 6"
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_repeat03icon">
+        <rect width="18" height="18" fill={color} />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default Repeat03Icon;

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

@@ -0,0 +1,34 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type Shuffle01IconProps = {
+  size?: number | string;
+  strokeWidth?: number;
+};
+
+const Shuffle01Icon = ({
+  size = 16,
+  strokeWidth = 1.25,
+}: Shuffle01IconProps) => {
+  return (
+    <Svg
+      viewBox="0 0 16 16"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+    >
+      <Path
+        d="M12 10L14 12M14 12L12 14M14 12H12.3793C11.7531 12 11.44 12 11.1559 11.9137C10.9043 11.8373 10.6702 11.712 10.4671 11.5451C10.2377 11.3565 10.064 11.096 9.71669 10.575L9.55556 10.3333M12 2L14 4M14 4L12 6M14 4H12.3793C11.7531 4 11.44 4 11.1559 4.0863C10.9043 4.1627 10.6702 4.28796 10.4671 4.45491C10.2377 4.64349 10.064 4.90398 9.71669 5.42496L6.28331 10.575C5.93599 11.096 5.76232 11.3565 5.53288 11.5451C5.32976 11.712 5.09572 11.8373 4.84414 11.9137C4.55996 12 4.24689 12 3.62075 12H2M2 4H3.62075C4.24689 4 4.55996 4 4.84414 4.0863C5.09572 4.1627 5.32976 4.28796 5.53288 4.45491C5.76232 4.64349 5.93599 4.90398 6.28331 5.42496L6.44444 5.66667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+Shuffle01Icon.displayName = "Shuffle01Icon";
+
+export { Shuffle01Icon };
+export default Shuffle01Icon;

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

@@ -0,0 +1,74 @@
+// components/icons/shuffle-01-icon.tsx
+"use client";
+
+import React, { forwardRef } from "react";
+import { cn } from "../../utils/cn";
+
+type Shuffle01IconProps = Omit<
+  React.SVGProps<SVGSVGElement>,
+  "width" | "height"
+> & {
+  size?: number | string;
+  strokeWidth?: number;
+  label?: string; // Accessible name. If omitted, icon is aria-hidden.
+};
+
+const Shuffle01Icon = forwardRef<SVGSVGElement, Shuffle01IconProps>(
+  (
+    {
+      size = 16,
+      strokeWidth = 1.25,
+      className,
+      label,
+      onClick,
+      onKeyDown,
+      ...rest
+    },
+    ref,
+  ) => {
+    const isInteractive = Boolean(onClick);
+    const ariaProps = label
+      ? { role: "img", "aria-label": label }
+      : { "aria-hidden": true as const };
+
+    const handleKeyDown = (e: React.KeyboardEvent<SVGSVGElement>) => {
+      if (!isInteractive) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick?.(e as unknown as React.MouseEvent<SVGSVGElement, MouseEvent>);
+      }
+      onKeyDown?.(e);
+    };
+
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+        width={size}
+        height={size}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        className={cn(
+          isInteractive && "cursor-pointer outline-none",
+          className,
+        )}
+        tabIndex={isInteractive ? 0 : undefined}
+        onKeyDown={handleKeyDown}
+        {...ariaProps}
+        {...rest}
+      >
+        <path
+          d="M12 10L14 12M14 12L12 14M14 12H12.3793C11.7531 12 11.44 12 11.1559 11.9137C10.9043 11.8373 10.6702 11.712 10.4671 11.5451C10.2377 11.3565 10.064 11.096 9.71669 10.575L9.55556 10.3333M12 2L14 4M14 4L12 6M14 4H12.3793C11.7531 4 11.44 4 11.1559 4.0863C10.9043 4.1627 10.6702 4.28796 10.4671 4.45491C10.2377 4.64349 10.064 4.90398 9.71669 5.42496L6.28331 10.575C5.93599 11.096 5.76232 11.3565 5.53288 11.5451C5.32976 11.712 5.09572 11.8373 4.84414 11.9137C4.55996 12 4.24689 12 3.62075 12H2M2 4H3.62075C4.24689 4 4.55996 4 4.84414 4.0863C5.09572 4.1627 5.32976 4.28796 5.53288 4.45491C5.76232 4.64349 5.93599 4.90398 6.28331 5.42496L6.44444 5.66667"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  },
+);
+
+Shuffle01Icon.displayName = "Shuffle01Icon";
+
+export default Shuffle01Icon;

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type Props = {
+  size?: number | string;
+};
+
+const TenSecondsForwardIcon = ({ size = 20 }: Props) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <Path
+      d="M16.411 6.13286C16.2026 5.85786 15.811 5.79952 15.536 6.00786C15.261 6.21619 15.2026 6.60786 15.411 6.88286C16.311 8.08286 16.786 9.48286 16.786 10.9329C16.786 14.6745 13.7443 17.7162 10.0026 17.7162C6.26094 17.7162 3.21927 14.6745 3.21927 10.9329C3.21927 7.19119 6.26094 4.15786 10.0026 4.15786C10.486 4.15786 10.9776 4.21619 11.511 4.34119C11.536 4.34952 11.561 4.34119 11.5943 4.34119C11.611 4.34119 11.636 4.35786 11.6526 4.35786C11.6776 4.35786 11.6943 4.34952 11.7193 4.34952C11.7526 4.34952 11.7776 4.34119 11.8026 4.33286C11.8443 4.32452 11.886 4.30786 11.9276 4.28286C11.9526 4.26619 11.986 4.25786 12.011 4.24119C12.0193 4.23286 12.036 4.23286 12.0443 4.22452C12.0693 4.20786 12.0776 4.18286 12.0943 4.16619C12.1276 4.13286 12.1526 4.10786 12.1776 4.06619C12.2026 4.03286 12.211 3.99119 12.2276 3.95786C12.236 3.93286 12.2526 3.90786 12.261 3.88286C12.261 3.86619 12.261 3.85786 12.261 3.84119C12.2693 3.79952 12.2693 3.75786 12.261 3.71619C12.261 3.67452 12.261 3.64119 12.2526 3.59952C12.2443 3.56619 12.2276 3.53286 12.211 3.49119C12.1943 3.44952 12.1776 3.40786 12.1526 3.37452C12.1443 3.35786 12.1443 3.34952 12.136 3.34119L10.486 1.28286C10.2693 1.01619 9.87764 0.974524 9.61097 1.18286C9.3443 1.39952 9.30264 1.79119 9.51097 2.05786L10.1943 2.90786C10.1276 2.90786 10.061 2.89952 9.9943 2.89952C5.56927 2.89952 1.96094 6.49952 1.96094 10.9329C1.96094 15.3662 5.56094 18.9662 9.9943 18.9662C14.4276 18.9662 18.0276 15.3662 18.0276 10.9329C18.036 9.20786 17.4693 7.54952 16.411 6.13286Z"
+      fill="currentColor"
+    />
+    <Path
+      d="M7.9519 13.9021C7.61024 13.9021 7.3269 13.6188 7.3269 13.2771V10.4521L7.16857 10.6354C6.93524 10.8938 6.54357 10.9104 6.28524 10.6854C6.0269 10.4521 6.01024 10.0604 6.23524 9.8021L7.48524 8.41043C7.66024 8.21878 7.93524 8.15211 8.1769 8.24378C8.41857 8.33544 8.5769 8.56877 8.5769 8.8271V13.2854C8.5769 13.6271 8.3019 13.9021 7.9519 13.9021Z"
+      fill="currentColor"
+    />
+    <Path
+      d="M11.6667 13.8997C10.4 13.8997 9.375 12.8747 9.375 11.6081V10.4831C9.375 9.2164 10.4 8.19141 11.6667 8.19141C12.9333 8.19141 13.9583 9.2164 13.9583 10.4831V11.6081C13.9583 12.8747 12.9333 13.8997 11.6667 13.8997ZM11.6667 9.44973C11.0917 9.44973 10.625 9.9164 10.625 10.4914V11.6164C10.625 12.1914 11.0917 12.6581 11.6667 12.6581C12.2417 12.6581 12.7083 12.1914 12.7083 11.6164V10.4914C12.7083 9.9164 12.2417 9.44973 11.6667 9.44973Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+TenSecondsForwardIcon.displayName = "TenSecondsForwardIcon";
+
+export { TenSecondsForwardIcon };
+export default TenSecondsForwardIcon;

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+type Props = SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+const TenSecondsForwardIcon = 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="M16.411 6.13286C16.2026 5.85786 15.811 5.79952 15.536 6.00786C15.261 6.21619 15.2026 6.60786 15.411 6.88286C16.311 8.08286 16.786 9.48286 16.786 10.9329C16.786 14.6745 13.7443 17.7162 10.0026 17.7162C6.26094 17.7162 3.21927 14.6745 3.21927 10.9329C3.21927 7.19119 6.26094 4.15786 10.0026 4.15786C10.486 4.15786 10.9776 4.21619 11.511 4.34119C11.536 4.34952 11.561 4.34119 11.5943 4.34119C11.611 4.34119 11.636 4.35786 11.6526 4.35786C11.6776 4.35786 11.6943 4.34952 11.7193 4.34952C11.7526 4.34952 11.7776 4.34119 11.8026 4.33286C11.8443 4.32452 11.886 4.30786 11.9276 4.28286C11.9526 4.26619 11.986 4.25786 12.011 4.24119C12.0193 4.23286 12.036 4.23286 12.0443 4.22452C12.0693 4.20786 12.0776 4.18286 12.0943 4.16619C12.1276 4.13286 12.1526 4.10786 12.1776 4.06619C12.2026 4.03286 12.211 3.99119 12.2276 3.95786C12.236 3.93286 12.2526 3.90786 12.261 3.88286C12.261 3.86619 12.261 3.85786 12.261 3.84119C12.2693 3.79952 12.2693 3.75786 12.261 3.71619C12.261 3.67452 12.261 3.64119 12.2526 3.59952C12.2443 3.56619 12.2276 3.53286 12.211 3.49119C12.1943 3.44952 12.1776 3.40786 12.1526 3.37452C12.1443 3.35786 12.1443 3.34952 12.136 3.34119L10.486 1.28286C10.2693 1.01619 9.87764 0.974524 9.61097 1.18286C9.3443 1.39952 9.30264 1.79119 9.51097 2.05786L10.1943 2.90786C10.1276 2.90786 10.061 2.89952 9.9943 2.89952C5.56927 2.89952 1.96094 6.49952 1.96094 10.9329C1.96094 15.3662 5.56094 18.9662 9.9943 18.9662C14.4276 18.9662 18.0276 15.3662 18.0276 10.9329C18.036 9.20786 17.4693 7.54952 16.411 6.13286Z"
+        fill="currentColor"
+      />
+      <path
+        d="M7.9519 13.9021C7.61024 13.9021 7.3269 13.6188 7.3269 13.2771V10.4521L7.16857 10.6354C6.93524 10.8938 6.54357 10.9104 6.28524 10.6854C6.0269 10.4521 6.01024 10.0604 6.23524 9.8021L7.48524 8.41043C7.66024 8.21878 7.93524 8.15211 8.1769 8.24378C8.41857 8.33544 8.5769 8.56877 8.5769 8.8271V13.2854C8.5769 13.6271 8.3019 13.9021 7.9519 13.9021Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.6667 13.8997C10.4 13.8997 9.375 12.8747 9.375 11.6081V10.4831C9.375 9.2164 10.4 8.19141 11.6667 8.19141C12.9333 8.19141 13.9583 9.2164 13.9583 10.4831V11.6081C13.9583 12.8747 12.9333 13.8997 11.6667 13.8997ZM11.6667 9.44973C11.0917 9.44973 10.625 9.9164 10.625 10.4914V11.6164C10.625 12.1914 11.0917 12.6581 11.6667 12.6581C12.2417 12.6581 12.7083 12.1914 12.7083 11.6164V10.4914C12.7083 9.9164 12.2417 9.44973 11.6667 9.44973Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+);
+
+TenSecondsForwardIcon.displayName = "TenSecondsForwardIcon";
+
+export default TenSecondsForwardIcon;

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

@@ -0,0 +1,37 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const VideoRecorderIcon: React.FC<IconProps> = ({
+  size = 24,
+  color = '#000000',
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <Path
+      d="M22 8.93137C22 8.32555 22 8.02265 21.8802 7.88238C21.7763 7.76068 21.6203 7.69609 21.4608 7.70865C21.2769 7.72312 21.0627 7.93731 20.6343 8.36569L17 12L20.6343 15.6343C21.0627 16.0627 21.2769 16.2769 21.4608 16.2914C21.6203 16.3039 21.7763 16.2393 21.8802 16.1176C22 15.9774 22 15.6744 22 15.0686V8.93137Z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M2 9.8C2 8.11984 2 7.27976 2.32698 6.63803C2.6146 6.07354 3.07354 5.6146 3.63803 5.32698C4.27976 5 5.11984 5 6.8 5H12.2C13.8802 5 14.7202 5 15.362 5.32698C15.9265 5.6146 16.3854 6.07354 16.673 6.63803C17 7.27976 17 8.11984 17 9.8V14.2C17 15.8802 17 16.7202 16.673 17.362C16.3854 17.9265 15.9265 18.3854 15.362 18.673C14.7202 19 13.8802 19 12.2 19H6.8C5.11984 19 4.27976 19 3.63803 18.673C3.07354 18.3854 2.6146 17.9265 2.32698 17.362C2 16.7202 2 15.8802 2 14.2V9.8Z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { VideoRecorderIcon };
+export default VideoRecorderIcon;

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

@@ -0,0 +1,36 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const VideoRecorderIcon: React.FC<IconProps> = ({
+  size = 24,
+  color = "currentColor",
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M22 8.93137C22 8.32555 22 8.02265 21.8802 7.88238C21.7763 7.76068 21.6203 7.69609 21.4608 7.70865C21.2769 7.72312 21.0627 7.93731 20.6343 8.36569L17 12L20.6343 15.6343C21.0627 16.0627 21.2769 16.2769 21.4608 16.2914C21.6203 16.3039 21.7763 16.2393 21.8802 16.1176C22 15.9774 22 15.6744 22 15.0686V8.93137Z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M2 9.8C2 8.11984 2 7.27976 2.32698 6.63803C2.6146 6.07354 3.07354 5.6146 3.63803 5.32698C4.27976 5 5.11984 5 6.8 5H12.2C13.8802 5 14.7202 5 15.362 5.32698C15.9265 5.6146 16.3854 6.07354 16.673 6.63803C17 7.27976 17 8.11984 17 9.8V14.2C17 15.8802 17 16.7202 16.673 17.362C16.3854 17.9265 15.9265 18.3854 15.362 18.673C14.7202 19 13.8802 19 12.2 19H6.8C5.11984 19 4.27976 19 3.63803 18.673C3.07354 18.3854 2.6146 17.9265 2.32698 17.362C2 16.7202 2 15.8802 2 14.2V9.8Z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default VideoRecorderIcon;

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface VolumeIconProps {
+  size?: number;
+}
+
+const VolumeIcon = ({ size = 20 }: VolumeIconProps) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <Path
+      d="M16.4579 4.16595C17.639 5.80782 18.3346 7.82232 18.3346 9.99929C18.3346 12.1763 17.639 14.1908 16.4579 15.8326M13.1224 6.66596C13.7815 7.61082 14.168 8.75991 14.168 9.99929C14.168 11.2387 13.7815 12.3878 13.1224 13.3326M8.0299 4.47069L5.39183 7.10876C5.2477 7.25289 5.17564 7.32495 5.09154 7.37649C5.01698 7.42218 4.93569 7.45585 4.85066 7.47626C4.75476 7.49929 4.65284 7.49929 4.44902 7.49929H3.0013C2.53459 7.49929 2.30124 7.49929 2.12298 7.59012C1.96617 7.67001 1.83869 7.79749 1.7588 7.9543C1.66797 8.13256 1.66797 8.36591 1.66797 8.83262V11.166C1.66797 11.6327 1.66797 11.866 1.7588 12.0443C1.83869 12.2011 1.96617 12.3286 2.12298 12.4085C2.30124 12.4993 2.53459 12.4993 3.0013 12.4993H4.44902C4.65284 12.4993 4.75476 12.4993 4.85066 12.5223C4.93569 12.5427 5.01698 12.5764 5.09154 12.6221C5.17564 12.6736 5.2477 12.7457 5.39183 12.8898L8.0299 15.5279C8.38688 15.8849 8.56537 16.0634 8.71861 16.0754C8.85158 16.0859 8.98152 16.0321 9.06814 15.9306C9.16797 15.8137 9.16797 15.5613 9.16797 15.0565V4.9421C9.16797 4.43725 9.16797 4.18483 9.06814 4.06794C8.98152 3.96652 8.85158 3.9127 8.71861 3.92316C8.56537 3.93522 8.38688 4.11371 8.0299 4.47069Z"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { VolumeIcon };
+export default VolumeIcon;