@postal-music/icons 0.1.0

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+interface VolumeIconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+}
+
+const VolumeIcon = React.forwardRef<SVGSVGElement, VolumeIconProps>(
+  ({ className, size = 20, ...props }, ref) => (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ref={ref}
+      className={className}
+      {...props}
+    >
+      <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 default VolumeIcon;

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type VolumeMaxIconProps = {
+  size?: number | string;
+};
+
+export const VolumeMaxIcon = ({ size = 20 }: VolumeMaxIconProps) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <Path
+        d="M16.4559 4.16595C17.637 5.80782 18.3327 7.82232 18.3327 9.99929C18.3327 12.1763 17.637 14.1908 16.4559 15.8326M13.1204 6.66596C13.7795 7.61082 14.166 8.75991 14.166 9.99929C14.166 11.2387 13.7795 12.3878 13.1204 13.3326M8.02795 4.47069L5.38987 7.10876C5.24575 7.25289 5.17368 7.32495 5.08959 7.37649C5.01503 7.42218 4.93374 7.45585 4.84871 7.47626C4.7528 7.49929 4.65089 7.49929 4.44706 7.49929H2.99935C2.53264 7.49929 2.29928 7.49929 2.12102 7.59012C1.96422 7.67001 1.83674 7.79749 1.75684 7.9543C1.66602 8.13256 1.66602 8.36591 1.66602 8.83262V11.166C1.66602 11.6327 1.66602 11.866 1.75684 12.0443C1.83674 12.2011 1.96422 12.3286 2.12102 12.4085C2.29928 12.4993 2.53264 12.4993 2.99935 12.4993H4.44706C4.65089 12.4993 4.7528 12.4993 4.84871 12.5223C4.93374 12.5427 5.01503 12.5764 5.08959 12.6221C5.17368 12.6736 5.24575 12.7457 5.38987 12.8898L8.02794 15.5279C8.38493 15.8849 8.56342 16.0634 8.71666 16.0754C8.84962 16.0859 8.97956 16.0321 9.06619 15.9306C9.16602 15.8137 9.16602 15.5613 9.16602 15.0565V4.9421C9.16602 4.43725 9.16602 4.18483 9.06619 4.06794C8.97956 3.96652 8.84962 3.9127 8.71666 3.92316C8.56342 3.93522 8.38493 4.11371 8.02795 4.47069Z"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export default VolumeMaxIcon;

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+type VolumeMaxIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+  label?: string;
+};
+
+export const VolumeMaxIcon = React.forwardRef<
+  SVGSVGElement,
+  VolumeMaxIconProps
+>(({ size = 20, 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 20 20"
+      fill="none"
+      className={className}
+      {...accessibility}
+      {...props}
+    >
+      <path
+        d="M16.4559 4.16595C17.637 5.80782 18.3327 7.82232 18.3327 9.99929C18.3327 12.1763 17.637 14.1908 16.4559 15.8326M13.1204 6.66596C13.7795 7.61082 14.166 8.75991 14.166 9.99929C14.166 11.2387 13.7795 12.3878 13.1204 13.3326M8.02795 4.47069L5.38987 7.10876C5.24575 7.25289 5.17368 7.32495 5.08959 7.37649C5.01503 7.42218 4.93374 7.45585 4.84871 7.47626C4.7528 7.49929 4.65089 7.49929 4.44706 7.49929H2.99935C2.53264 7.49929 2.29928 7.49929 2.12102 7.59012C1.96422 7.67001 1.83674 7.79749 1.75684 7.9543C1.66602 8.13256 1.66602 8.36591 1.66602 8.83262V11.166C1.66602 11.6327 1.66602 11.866 1.75684 12.0443C1.83674 12.2011 1.96422 12.3286 2.12102 12.4085C2.29928 12.4993 2.53264 12.4993 2.99935 12.4993H4.44706C4.65089 12.4993 4.7528 12.4993 4.84871 12.5223C4.93374 12.5427 5.01503 12.5764 5.08959 12.6221C5.17368 12.6736 5.24575 12.7457 5.38987 12.8898L8.02794 15.5279C8.38493 15.8849 8.56342 16.0634 8.71666 16.0754C8.84962 16.0859 8.97956 16.0321 9.06619 15.9306C9.16602 15.8137 9.16602 15.5613 9.16602 15.0565V4.9421C9.16602 4.43725 9.16602 4.18483 9.06619 4.06794C8.97956 3.96652 8.84962 3.9127 8.71666 3.92316C8.56342 3.93522 8.38493 4.11371 8.02795 4.47069Z"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+});

package/src/icons/media/index.ts

@@ -0,0 +1,17 @@
+export { default as TenSecondsBackIcon } from './10SecondsBackIcon';
+export { default as EqualizerIcon } from './EqualizerIcon';
+export { default as HeadphonesIcon } from './HeadPhonesIcon';
+export { default as MediaUploadIcon } from './MediaUploadIcon';
+export { default as NextTrackIcon } from './NextTrackIcon';
+export { default as PauseIcon } from './PauseIcon';
+export { default as PlayIcon } from './PlayIcon';
+export { default as PlaySquareIcon } from './PlaySquareIcon';
+export { default as PreviousTrackIcon } from './PreviousTrackIcon';
+export { default as Repeat01Icon } from './Repeat01Icon';
+export { default as Repeat02Icon } from './Repeat02Icon';
+export { default as Repeat03Icon } from './Repeat03Icon';
+export { default as Shuffle01Icon } from './Shuffle01Icon';
+export { default as TenSecondsForwardIcon } from './TenSecondsForwardIcon';
+export { default as VideoRecorderIcon } from './VideoRecorderIcon';
+export { default as VolumeIcon } from './VolumeIcon';
+export { default as VolumeMaxIcon } from './VolumeMaxIcon';

package/src/icons/navigation/AlignLeftIcon.native.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type AlignLeftIconProps = {
+  size?: number | string;
+};
+
+const AlignLeftIcon = ({ size = 16 }: AlignLeftIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+    <Path
+      d="M4.33333 11.6667L4.33333 4.33333M5.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.8C14 11.9201 14 12.4802 13.782 12.908C13.5903 13.2843 13.2843 13.5903 12.908 13.782C12.4802 14 11.9201 14 10.8 14H5.2C4.07989 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.07989 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 2Z"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { AlignLeftIcon };
+export default AlignLeftIcon;

package/src/icons/navigation/AlignLeftIcon.web.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type AlignLeftIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export default function AlignLeftIcon({
+  size = 16,
+  className,
+  ...props
+}: AlignLeftIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M4.33333 11.6667L4.33333 4.33333M5.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.8C14 11.9201 14 12.4802 13.782 12.908C13.5903 13.2843 13.2843 13.5903 12.908 13.782C12.4802 14 11.9201 14 10.8 14H5.2C4.07989 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.07989 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 2Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/navigation/DotgridIcon.native.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import Svg, { Circle } from 'react-native-svg';
+
+type DotgridIconProps = {
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number | string;
+};
+
+const DotgridIcon = ({
+  size = 18,
+  color = '#000000',
+  strokeWidth = 1.67,
+}: DotgridIconProps) => {
+  const coords = [3.75, 9, 14.25];
+  const radius = 0.75;
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+      {coords.map((x) =>
+        coords.map((y) => (
+          <Circle
+            key={`${x}-${y}`}
+            cx={x}
+            cy={y}
+            r={radius}
+            fill={color}
+            stroke={color}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        )),
+      )}
+    </Svg>
+  );
+};
+
+export { DotgridIcon };
+export default DotgridIcon;

package/src/icons/navigation/DotgridIcon.web.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+
+type DotgridIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number | string;
+  title?: string;
+};
+
+export default function DotgridIcon({
+  size = 18,
+  color = "currentColor",
+  strokeWidth = 1.67,
+  title,
+  className,
+  ...props
+}: DotgridIconProps) {
+  const coords = [3.75, 9, 14.25];
+  const radius = 0.75;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-hidden={title ? undefined : true}
+      className={className}
+      {...props}
+    >
+      {title ? <title>{title}</title> : null}
+      {coords.map((x) =>
+        coords.map((y) => (
+          <circle
+            key={`${x}-${y}`}
+            cx={x}
+            cy={y}
+            r={radius}
+            fill={color}
+            stroke={color}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        )),
+      )}
+    </svg>
+  );
+}

package/src/icons/navigation/FilterIcon.native.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface FilterIconProps {
+  size?: number;
+  color?: string;
+}
+
+const FilterIcon: React.FC<FilterIconProps> = ({ size = 18, color = '#000000' }) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M2.57 2.57H15.43L9 9V14.79L6.43 12.86V9L2.57 2.57Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { FilterIcon };
+export default FilterIcon;

package/src/icons/navigation/FilterIcon.web.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const FilterIcon: 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"
+  >
+    <path
+      d="M2.57 2.57H15.43L9 9V14.79L6.43 12.86V9L2.57 2.57Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default FilterIcon;

package/src/icons/navigation/Grid01Icon.native.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type Grid01IconProps = {
+  size?: number | string;
+};
+
+const Grid01Icon = ({ size = 15 }: Grid01IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 15 15" fill="none">
+    <Path
+      d="M5.25 1.875H2.875C2.52497 1.875 2.34995 1.875 2.21626 1.94312C2.09865 2.00304 2.00304 2.09865 1.94312 2.21626C1.875 2.34995 1.875 2.52497 1.875 2.875V5.25C1.875 5.60003 1.875 5.77505 1.94312 5.90874C2.00304 6.02635 2.09865 6.12196 2.21626 6.18188C2.34995 6.25 2.52497 6.25 2.875 6.25H5.25C5.60003 6.25 5.77505 6.25 5.90874 6.18188C6.02635 6.12196 6.12196 6.02635 6.18188 5.90874C6.25 5.77505 6.25 5.60003 6.25 5.25V2.875C6.25 2.52497 6.25 2.34995 6.18188 2.21626C6.12196 2.09865 6.02635 2.00304 5.90874 1.94312C5.77505 1.875 5.60003 1.875 5.25 1.875Z"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M12.125 1.875H9.75C9.39997 1.875 9.22495 1.875 9.09126 1.94312C8.97365 2.00304 8.87804 2.09865 8.81812 2.21626C8.75 2.34995 8.75 2.52497 8.75 2.875V5.25C8.75 5.60003 8.75 5.77505 8.81812 5.90874C8.87804 6.02635 8.97365 6.12196 9.09126 6.18188C9.22495 6.25 9.39997 6.25 9.75 6.25H12.125C12.475 6.25 12.65 6.25 12.7837 6.18188C12.9013 6.12196 12.997 6.02635 13.0569 5.90874C13.125 5.77505 13.125 5.60003 13.125 5.25V2.875C13.125 2.52497 13.125 2.34995 13.0569 2.21626C12.997 2.09865 12.9013 2.00304 12.7837 1.94312C12.65 1.875 12.475 1.875 12.125 1.875Z"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M12.125 8.75H9.75C9.39997 8.75 9.22495 8.75 9.09126 8.81812C8.97365 8.87804 8.87804 8.97365 8.81812 9.09126C8.75 9.22495 8.75 9.39997 8.75 9.75V12.125C8.75 12.475 8.75 12.65 8.81812 12.7837C8.87804 12.9013 8.97365 12.997 9.09126 13.0569C9.22495 13.125 9.39997 13.125 9.75 13.125H12.125C12.475 13.125 12.65 13.125 12.7837 13.0569C12.9013 12.997 12.997 12.9013 13.0569 12.7837C13.125 12.65 13.125 12.475 13.125 12.125V9.75C13.125 9.39997 13.125 9.22495 13.0569 9.09126C12.997 8.97365 12.9013 8.87804 12.7837 8.81812C12.65 8.75 12.475 8.75 12.125 8.75Z"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M5.25 8.75H2.875C2.52497 8.75 2.34995 8.75 2.21626 8.81812C2.09865 8.87804 2.00304 8.97365 1.94312 9.09126C1.875 9.22495 1.875 9.39997 1.875 9.75V12.125C1.875 12.475 1.875 12.65 1.94312 12.7837C2.00304 12.9013 2.09865 12.997 2.21626 13.0569C2.34995 13.125 2.52497 13.125 2.875 13.125H5.25C5.60003 13.125 5.77505 13.125 5.90874 13.0569C6.02635 12.997 6.12196 12.9013 6.18188 12.7837C6.25 12.65 6.25 12.475 6.25 12.125V9.75C6.25 9.39997 6.25 9.22495 6.18188 9.09126C6.12196 8.97365 6.02635 8.87804 5.90874 8.81812C5.77505 8.75 5.60003 8.75 5.25 8.75Z"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { Grid01Icon };
+export default Grid01Icon;

package/src/icons/navigation/Grid01Icon.web.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+
+type Grid01IconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export default function Grid01Icon({
+  size = 15,
+  className,
+  ...props
+}: Grid01IconProps) {
+  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="M5.25 1.875H2.875C2.52497 1.875 2.34995 1.875 2.21626 1.94312C2.09865 2.00304 2.00304 2.09865 1.94312 2.21626C1.875 2.34995 1.875 2.52497 1.875 2.875V5.25C1.875 5.60003 1.875 5.77505 1.94312 5.90874C2.00304 6.02635 2.09865 6.12196 2.21626 6.18188C2.34995 6.25 2.52497 6.25 2.875 6.25H5.25C5.60003 6.25 5.77505 6.25 5.90874 6.18188C6.02635 6.12196 6.12196 6.02635 6.18188 5.90874C6.25 5.77505 6.25 5.60003 6.25 5.25V2.875C6.25 2.52497 6.25 2.34995 6.18188 2.21626C6.12196 2.09865 6.02635 2.00304 5.90874 1.94312C5.77505 1.875 5.60003 1.875 5.25 1.875Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.125 1.875H9.75C9.39997 1.875 9.22495 1.875 9.09126 1.94312C8.97365 2.00304 8.87804 2.09865 8.81812 2.21626C8.75 2.34995 8.75 2.52497 8.75 2.875V5.25C8.75 5.60003 8.75 5.77505 8.81812 5.90874C8.87804 6.02635 8.97365 6.12196 9.09126 6.18188C9.22495 6.25 9.39997 6.25 9.75 6.25H12.125C12.475 6.25 12.65 6.25 12.7837 6.18188C12.9013 6.12196 12.997 6.02635 13.0569 5.90874C13.125 5.77505 13.125 5.60003 13.125 5.25V2.875C13.125 2.52497 13.125 2.34995 13.0569 2.21626C12.997 2.09865 12.9013 2.00304 12.7837 1.94312C12.65 1.875 12.475 1.875 12.125 1.875Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.125 8.75H9.75C9.39997 8.75 9.22495 8.75 9.09126 8.81812C8.97365 8.87804 8.87804 8.97365 8.81812 9.09126C8.75 9.22495 8.75 9.39997 8.75 9.75V12.125C8.75 12.475 8.75 12.65 8.81812 12.7837C8.87804 12.9013 8.97365 12.997 9.09126 13.0569C9.22495 13.125 9.39997 13.125 9.75 13.125H12.125C12.475 13.125 12.65 13.125 12.7837 13.0569C12.9013 12.997 12.997 12.9013 13.0569 12.7837C13.125 12.65 13.125 12.475 13.125 12.125V9.75C13.125 9.39997 13.125 9.22495 13.0569 9.09126C12.997 8.97365 12.9013 8.87804 12.7837 8.81812C12.65 8.75 12.475 8.75 12.125 8.75Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.25 8.75H2.875C2.52497 8.75 2.34995 8.75 2.21626 8.81812C2.09865 8.87804 2.00304 8.97365 1.94312 9.09126C1.875 9.22495 1.875 9.39997 1.875 9.75V12.125C1.875 12.475 1.875 12.65 1.94312 12.7837C2.00304 12.9013 2.09865 12.997 2.21626 13.0569C2.34995 13.125 2.52497 13.125 2.875 13.125H5.25C5.60003 13.125 5.77505 13.125 5.90874 13.0569C6.02635 12.997 6.12196 12.9013 6.18188 12.7837C6.25 12.65 6.25 12.475 6.25 12.125V9.75C6.25 9.39997 6.25 9.22495 6.18188 9.09126C6.12196 8.97365 6.02635 8.87804 5.90874 8.81812C5.77505 8.75 5.60003 8.75 5.25 8.75Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/navigation/GridIcon.native.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface GridIconProps {
+  size?: number;
+  color?: string;
+}
+
+export const GridIcon: React.FC<GridIconProps> = ({
+  size = 16,
+  color = '#000000',
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+    <Path
+      d="M5.6 2H3.06667C2.6933 2 2.50661 2 2.36401 2.07266C2.23856 2.13658 2.13658 2.23856 2.07266 2.36401C2 2.50661 2 2.6933 2 3.06667V5.6C2 5.97337 2 6.16005 2.07266 6.30266C2.13658 6.4281 2.23856 6.53009 2.36401 6.594C2.50661 6.66667 2.6933 6.66667 3.06667 6.66667H5.6C5.97337 6.66667 6.16005 6.66667 6.30266 6.594C6.4281 6.53009 6.53009 6.4281 6.594 6.30266C6.66667 6.16005 6.66667 5.97337 6.66667 5.6V3.06667C6.66667 2.6933 6.66667 2.50661 6.594 2.36401C6.53009 2.23856 6.4281 2.13658 6.30266 2.07266C6.16005 2 5.97337 2 5.6 2Z"
+      fill={color}
+    />
+    <Path
+      d="M12.9333 2H10.4C10.0266 2 9.83995 2 9.69734 2.07266C9.5719 2.13658 9.46991 2.23856 9.406 2.36401C9.33333 2.50661 9.33333 2.6933 9.33333 3.06667V5.6C9.33333 5.97337 9.33333 6.16005 9.406 6.30266C9.46991 6.4281 9.5719 6.53009 9.69734 6.594C9.83995 6.66667 10.0266 6.66667 10.4 6.66667H12.9333C13.3067 6.66667 13.4934 6.66667 13.636 6.594C13.7614 6.53009 13.8634 6.4281 13.9273 6.30266C14 6.16005 14 5.97337 14 5.6V3.06667C14 2.6933 14 2.50661 13.9273 2.36401C13.8634 2.23856 13.7614 2.13658 13.636 2.07266C13.4934 2 13.3067 2 12.9333 2Z"
+      fill={color}
+    />
+    <Path
+      d="M12.9333 9.33333H10.4C10.0266 9.33333 9.83995 9.33333 9.69734 9.406C9.5719 9.46991 9.46991 9.5719 9.406 9.69734C9.33333 9.83995 9.33333 10.0266 9.33333 10.4V12.9333C9.33333 13.3067 9.33333 13.4934 9.406 13.636C9.46991 13.7614 9.5719 13.8634 9.69734 13.9273C9.83995 14 10.0266 14 10.4 14H12.9333C13.3067 14 13.4934 14 13.636 13.9273C13.7614 13.8634 13.8634 13.7614 13.9273 13.636C14 13.4934 14 13.3067 14 12.9333V10.4C14 10.0266 14 9.83995 13.9273 9.69734C13.8634 9.5719 13.7614 9.46991 13.636 9.406C13.4934 9.33333 13.3067 9.33333 12.9333 9.33333Z"
+      fill={color}
+    />
+    <Path
+      d="M5.6 9.33333H3.06667C2.6933 9.33333 2.50661 9.33333 2.36401 9.406C2.23856 9.46991 2.13658 9.5719 2.07266 9.69734C2 9.83995 2 10.0266 2 10.4V12.9333C2 13.3067 2 13.4934 2.07266 13.636C2.13658 13.7614 2.23856 13.8634 2.36401 13.9273C2.50661 14 2.6933 14 3.06667 14H5.6C5.97337 14 6.16005 14 6.30266 13.9273C6.4281 13.8634 6.53009 13.7614 6.594 13.636C6.66667 13.4934 6.66667 13.3067 6.66667 12.9333V10.4C6.66667 10.0266 6.66667 9.83995 6.594 9.69734C6.53009 9.5719 6.4281 9.46991 6.30266 9.406C6.16005 9.33333 5.97337 9.33333 5.6 9.33333Z"
+      fill={color}
+    />
+    <Path
+      d="M5.6 2H3.06667C2.6933 2 2.50661 2 2.36401 2.07266C2.23856 2.13658 2.13658 2.23856 2.07266 2.36401C2 2.50661 2 2.6933 2 3.06667V5.6C2 5.97337 2 6.16005 2.07266 6.30266C2.13658 6.4281 2.23856 6.53009 2.36401 6.594C2.50661 6.66667 2.6933 6.66667 3.06667 6.66667H5.6C5.97337 6.66667 6.16005 6.66667 6.30266 6.594C6.4281 6.53009 6.53009 6.4281 6.594 6.30266C6.66667 6.16005 6.66667 5.97337 6.66667 5.6V3.06667C6.66667 2.6933 6.66667 2.50661 6.594 2.36401C6.53009 2.23856 6.4281 2.13658 6.30266 2.07266C6.16005 2 5.97337 2 5.6 2Z"
+      stroke={color}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M12.9333 2H10.4C10.0266 2 9.83995 2 9.69734 2.07266C9.5719 2.13658 9.46991 2.23856 9.406 2.36401C9.33333 2.50661 9.33333 2.6933 9.33333 3.06667V5.6C9.33333 5.97337 9.33333 6.16005 9.406 6.30266C9.46991 6.4281 9.5719 6.53009 9.69734 6.594C9.83995 6.66667 10.0266 6.66667 10.4 6.66667H12.9333C13.3067 6.66667 13.4934 6.66667 13.636 6.594C13.7614 6.53009 13.8634 6.4281 13.9273 6.30266C14 6.16005 14 5.97337 14 5.6V3.06667C14 2.6933 14 2.50661 13.9273 2.36401C13.8634 2.23856 13.7614 2.13658 13.636 2.07266C13.4934 2 13.3067 2 12.9333 2Z"
+      stroke={color}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export default GridIcon;

package/src/icons/navigation/GridIcon.web.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { SVGProps } from "react";
+
+interface GridIconProps extends SVGProps<SVGSVGElement> {
+  /** Icon size in pixels (both width and height) */
+  size?: number;
+  /** Fill/stroke color */
+  color?: string;
+}
+
+export const GridIcon: React.FC<GridIconProps> = ({
+  size = 16,
+  color = "currentColor",
+  className,
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...props}
+  >
+    <path
+      d="M5.6 2H3.06667C2.6933 2 2.50661 2 2.36401 2.07266C2.23856 2.13658 2.13658 2.23856 2.07266 2.36401C2 2.50661 2 2.6933 2 3.06667V5.6C2 5.97337 2 6.16005 2.07266 6.30266C2.13658 6.4281 2.23856 6.53009 2.36401 6.594C2.50661 6.66667 2.6933 6.66667 3.06667 6.66667H5.6C5.97337 6.66667 6.16005 6.66667 6.30266 6.594C6.4281 6.53009 6.53009 6.4281 6.594 6.30266C6.66667 6.16005 6.66667 5.97337 6.66667 5.6V3.06667C6.66667 2.6933 6.66667 2.50661 6.594 2.36401C6.53009 2.23856 6.4281 2.13658 6.30266 2.07266C6.16005 2 5.97337 2 5.6 2Z"
+      fill={color}
+    />
+    <path
+      d="M12.9333 2H10.4C10.0266 2 9.83995 2 9.69734 2.07266C9.5719 2.13658 9.46991 2.23856 9.406 2.36401C9.33333 2.50661 9.33333 2.6933 9.33333 3.06667V5.6C9.33333 5.97337 9.33333 6.16005 9.406 6.30266C9.46991 6.4281 9.5719 6.53009 9.69734 6.594C9.83995 6.66667 10.0266 6.66667 10.4 6.66667H12.9333C13.3067 6.66667 13.4934 6.66667 13.636 6.594C13.7614 6.53009 13.8634 6.4281 13.9273 6.30266C14 6.16005 14 5.97337 14 5.6V3.06667C14 2.6933 14 2.50661 13.9273 2.36401C13.8634 2.23856 13.7614 2.13658 13.636 2.07266C13.4934 2 13.3067 2 12.9333 2Z"
+      fill={color}
+    />
+    <path
+      d="M12.9333 9.33333H10.4C10.0266 9.33333 9.83995 9.33333 9.69734 9.406C9.5719 9.46991 9.46991 9.5719 9.406 9.69734C9.33333 9.83995 9.33333 10.0266 9.33333 10.4V12.9333C9.33333 13.3067 9.33333 13.4934 9.406 13.636C9.46991 13.7614 9.5719 13.8634 9.69734 13.9273C9.83995 14 10.0266 14 10.4 14H12.9333C13.3067 14 13.4934 14 13.636 13.9273C13.7614 13.8634 13.8634 13.7614 13.9273 13.636C14 13.4934 14 13.3067 14 12.9333V10.4C14 10.0266 14 9.83995 13.9273 9.69734C13.8634 9.5719 13.7614 9.46991 13.636 9.406C13.4934 9.33333 13.3067 9.33333 12.9333 9.33333Z"
+      fill={color}
+    />
+    <path
+      d="M5.6 9.33333H3.06667C2.6933 9.33333 2.50661 9.33333 2.36401 9.406C2.23856 9.46991 2.13658 9.5719 2.07266 9.69734C2 9.83995 2 10.0266 2 10.4V12.9333C2 13.3067 2 13.4934 2.07266 13.636C2.13658 13.7614 2.23856 13.8634 2.36401 13.9273C2.50661 14 2.6933 14 3.06667 14H5.6C5.97337 14 6.16005 14 6.30266 13.9273C6.4281 13.8634 6.53009 13.7614 6.594 13.636C6.66667 13.4934 6.66667 13.3067 6.66667 12.9333V10.4C6.66667 10.0266 6.66667 9.83995 6.594 9.69734C6.53009 9.5719 6.4281 9.46991 6.30266 9.406C6.16005 9.33333 5.97337 9.33333 5.6 9.33333Z"
+      fill={color}
+    />
+    <path
+      d="M5.6 2H3.06667C2.6933 2 2.50661 2 2.36401 2.07266C2.23856 2.13658 2.13658 2.23856 2.07266 2.36401C2 2.50661 2 2.6933 2 3.06667V5.6C2 5.97337 2 6.16005 2.07266 6.30266C2.13658 6.4281 2.23856 6.53009 2.36401 6.594C2.50661 6.66667 2.6933 6.66667 3.06667 6.66667H5.6C5.97337 6.66667 6.16005 6.66667 6.30266 6.594C6.4281 6.53009 6.53009 6.4281 6.594 6.30266C6.66667 6.16005 6.66667 5.97337 6.66667 5.6V3.06667C6.66667 2.6933 6.66667 2.50661 6.594 2.36401C6.53009 2.23856 6.4281 2.13658 6.30266 2.07266C6.16005 2 5.97337 2 5.6 2Z"
+      stroke={color}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12.9333 2H10.4C10.0266 2 9.83995 2 9.69734 2.07266C9.5719 2.13658 9.46991 2.23856 9.406 2.36401C9.33333 2.50661 9.33333 2.6933 9.33333 3.06667V5.6C9.33333 5.97337 9.33333 6.16005 9.406 6.30266C9.46991 6.4281 9.5719 6.53009 9.69734 6.594C9.83995 6.66667 10.0266 6.66667 10.4 6.66667H12.9333C13.3067 6.66667 13.4934 6.66667 13.636 6.594C13.7614 6.53009 13.8634 6.4281 13.9273 6.30266C14 6.16005 14 5.97337 14 5.6V3.06667C14 2.6933 14 2.50661 13.9273 2.36401C13.8634 2.23856 13.7614 2.13658 13.636 2.07266C13.4934 2 13.3067 2 12.9333 2Z"
+      stroke={color}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    {/* repeat for the remaining two grid cells */}
+  </svg>
+);

package/src/icons/navigation/HomeIcon.native.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type HomeIconProps = {
+  size?: number;
+  strokeWidth?: number;
+  color?: string;
+};
+
+export const HomeIcon = ({
+  size = 18,
+  strokeWidth = 1.67,
+  color = '#000000',
+}: HomeIconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+      <Path
+        d="M9.73673 2.07306C9.47324 1.86812 9.34149 1.76565 9.19601 1.72626C9.06765 1.69151 8.93235 1.69151 8.80399 1.72626C8.65851 1.76565 8.52677 1.86812 8.26327 2.07306L3.17654 6.0294C2.83652 6.29387 2.6665 6.4261 2.54402 6.5917C2.43552 6.73839 2.3547 6.90365 2.30552 7.07935C2.25 7.2777 2.25 7.49308 2.25 7.92385V13.35C2.25 14.1901 2.25 14.6102 2.41349 14.931C2.5573 15.2133 2.78677 15.4427 3.06901 15.5866C3.38988 15.75 3.80992 15.75 4.65 15.75H6.15C6.36002 15.75 6.46503 15.75 6.54525 15.7092C6.61581 15.6732 6.67317 15.6159 6.70913 15.5453C6.75 15.4651 6.75 15.3601 6.75 15.15V10.2C6.75 9.78001 6.75 9.56999 6.83175 9.40956C6.90365 9.26843 7.01839 9.1537 7.15951 9.08179C7.31994 9.00005 7.52996 9.00005 7.95 9.00005H10.05C10.47 9.00005 10.6801 9.00005 10.8405 9.08179C10.9816 9.1537 11.0963 9.26843 11.1683 9.40956C11.25 9.56999 11.25 9.78001 11.25 10.2V15.15C11.25 15.3601 11.25 15.4651 11.2909 15.5453C11.3268 15.6159 11.3842 15.6732 11.4548 15.7092C11.535 15.75 11.64 15.75 11.85 15.75H13.35C14.1901 15.75 14.6101 15.75 14.931 15.5866C15.2132 15.4427 15.4427 15.2133 15.5865 14.931C15.75 14.6102 15.75 14.1901 15.75 13.35V7.92385C15.75 7.49308 15.75 7.2777 15.6945 7.07935C15.6453 6.90365 15.5645 6.73839 15.456 6.5917C15.3335 6.4261 15.1635 6.29387 14.8235 6.02941L9.73673 2.07306Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+HomeIcon.displayName = 'HomeIcon';
+
+export default HomeIcon;

package/src/icons/navigation/HomeIcon.web.tsx

@@ -0,0 +1,54 @@
+// components/icons/HomeIcon.tsx
+import * as React from "react";
+import { cn } from "../../utils/cn";
+
+type HomeIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number;
+  strokeWidth?: number;
+  title?: string;
+  className?: string;
+  "aria-label"?: string;
+};
+
+export const HomeIcon = React.forwardRef<SVGSVGElement, HomeIconProps>(
+  (
+    {
+      size = 18,
+      strokeWidth = 1.67,
+      title,
+      className,
+      "aria-label": ariaLabel,
+      ...rest
+    },
+    ref
+  ) => {
+    const labelled = Boolean(title || ariaLabel);
+
+    return (
+      <svg
+        ref={ref}
+        width={size}
+        height={size}
+        viewBox="0 0 18 18"
+        fill="none"
+        role="img"
+        aria-hidden={labelled ? undefined : true}
+        aria-label={ariaLabel}
+        xmlns="http://www.w3.org/2000/svg"
+        className={cn("inline-block align-middle", className)}
+        {...rest}
+      >
+        {title ? <title>{title}</title> : null}
+        <path
+          d="M9.73673 2.07306C9.47324 1.86812 9.34149 1.76565 9.19601 1.72626C9.06765 1.69151 8.93235 1.69151 8.80399 1.72626C8.65851 1.76565 8.52677 1.86812 8.26327 2.07306L3.17654 6.0294C2.83652 6.29387 2.6665 6.4261 2.54402 6.5917C2.43552 6.73839 2.3547 6.90365 2.30552 7.07935C2.25 7.2777 2.25 7.49308 2.25 7.92385V13.35C2.25 14.1901 2.25 14.6102 2.41349 14.931C2.5573 15.2133 2.78677 15.4427 3.06901 15.5866C3.38988 15.75 3.80992 15.75 4.65 15.75H6.15C6.36002 15.75 6.46503 15.75 6.54525 15.7092C6.61581 15.6732 6.67317 15.6159 6.70913 15.5453C6.75 15.4651 6.75 15.3601 6.75 15.15V10.2C6.75 9.78001 6.75 9.56999 6.83175 9.40956C6.90365 9.26843 7.01839 9.1537 7.15951 9.08179C7.31994 9.00005 7.52996 9.00005 7.95 9.00005H10.05C10.47 9.00005 10.6801 9.00005 10.8405 9.08179C10.9816 9.1537 11.0963 9.26843 11.1683 9.40956C11.25 9.56999 11.25 9.78001 11.25 10.2V15.15C11.25 15.3601 11.25 15.4651 11.2909 15.5453C11.3268 15.6159 11.3842 15.6732 11.4548 15.7092C11.535 15.75 11.64 15.75 11.85 15.75H13.35C14.1901 15.75 14.6101 15.75 14.931 15.5866C15.2132 15.4427 15.4427 15.2133 15.5865 14.931C15.75 14.6102 15.75 14.1901 15.75 13.35V7.92385C15.75 7.49308 15.75 7.2777 15.6945 7.07935C15.6453 6.90365 15.5645 6.73839 15.456 6.5917C15.3335 6.4261 15.1635 6.29387 14.8235 6.02941L9.73673 2.07306Z"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+);
+
+HomeIcon.displayName = "HomeIcon";

package/src/icons/navigation/ListIcon.native.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface ListIconProps {
+  size?: number;
+  color?: string;
+}
+
+export const ListIcon: React.FC<ListIconProps> = ({ size = 18, color = '#000000' }) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M3 9.75C3.41421 9.75 3.75 9.41421 3.75 9C3.75 8.58579 3.41421 8.25 3 8.25C2.58579 8.25 2.25 8.58579 2.25 9C2.25 9.41421 2.58579 9.75 3 9.75ZM3 5.25C3.41421 5.25 3.75 4.91421 3.75 4.5C3.75 4.08579 3.41421 3.75 3 3.75C2.58579 3.75 2.25 4.08579 2.25 4.5C2.25 4.91421 2.58579 5.25 3 5.25ZM3 14.25C3.41421 14.25 3.75 13.9142 3.75 13.5C3.75 13.0858 3.41421 12.75 3 12.75C2.58579 12.75 2.25 13.0858 2.25 13.5C2.25 13.9142 2.58579 14.25 3 14.25Z"
+      fill={color}
+    />
+    <Path
+      d="M15.75 9L6.75 9M15.75 4.5L6.75 4.5M15.75 13.5L6.75 13.5M3.75 9C3.75 9.41421 3.41421 9.75 3 9.75C2.58579 9.75 2.25 9.41421 2.25 9C2.25 8.58579 2.58579 8.25 3 8.25C3.41421 8.25 3.75 8.58579 3.75 9ZM3.75 4.5C3.75 4.91421 3.41421 5.25 3 5.25C2.58579 5.25 2.25 4.91421 2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75C3.41421 3.75 3.75 4.08579 3.75 4.5ZM3.75 13.5C3.75 13.9142 3.41421 14.25 3 14.25C2.58579 14.25 2.25 13.9142 2.25 13.5C2.25 13.0858 2.58579 12.75 3 12.75C3.41421 12.75 3.75 13.0858 3.75 13.5Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export default ListIcon;