@postal-music/icons 0.1.0

package/src/icons/social/TiktokIcon.web.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+/**
+ * TiktokIcon component renders the TikTok logo as an SVG.
+ *
+ * @param {React.SVGProps<SVGSVGElement>} props - Standard SVG props, including className for Tailwind styling.
+ * @returns {JSX.Element}
+ */
+const TiktokIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({ className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 18 18"
+    width="18"
+    height="18"
+    className={className}
+    role="img"
+    aria-label="TikTok Logo"
+    {...props}
+  >
+    <path
+      d="M0 9.00008C0 4.02951 4.02944 0 9 0C13.9706 0 18 4.02951 18 9.00008C18 13.9706 13.9706 18.0002 9 18.0002C4.02944 18.0002 0 13.9706 0 9.00008Z"
+      fill="black"
+    />
+    <path
+      d="M4.16016 13.2726L4.19857 13.3831C4.19331 13.371 4.1791 13.3326 4.16016 13.2726ZM5.7183 10.7541C5.78775 10.1563 6.02298 9.8227 6.465 9.47908C7.09857 9.01548 7.88895 9.27753 7.88895 9.27753V7.7194C8.08102 7.71466 8.2731 7.72677 8.46253 7.75518V9.76008C8.46253 9.76008 7.67268 9.49855 7.03858 9.96162C6.59656 10.3047 6.36133 10.6389 6.29187 11.2366C6.28924 11.5608 6.34713 11.986 6.61603 12.3507C6.54867 12.3149 6.48132 12.2738 6.41185 12.2281C5.82354 11.815 5.71566 11.1935 5.7183 10.7541ZM11.7298 4.83834C11.2952 4.34158 11.1294 3.83694 11.0694 3.48438H11.6167C11.6167 3.48438 11.5088 4.41105 12.3034 5.32089L12.3155 5.33298C12.0998 5.19354 11.903 5.02567 11.7298 4.83834ZM14.3683 6.25018V8.21404C14.3683 8.21404 13.6695 8.18511 13.1512 8.04828C12.4287 7.85622 11.9651 7.561 11.9651 7.561C11.9651 7.561 11.6435 7.34998 11.6193 7.33525V11.3929C11.6193 11.6187 11.5593 12.1828 11.3794 12.6532C11.1442 13.2679 10.779 13.6736 10.7121 13.7551C10.7121 13.7551 10.268 14.3024 9.48762 14.6697C8.78406 15.0012 8.16469 14.9939 7.97998 15.0012C7.97998 15.0012 6.91176 15.0444 5.94877 14.394C5.73987 14.2498 5.54569 14.0867 5.36784 13.9067L5.37256 13.9114C6.33555 14.5645 7.40377 14.5187 7.40377 14.5187C7.58848 14.5113 8.20785 14.5187 8.91141 14.1872C9.69178 13.8199 10.1359 13.2726 10.1359 13.2726C10.2033 13.191 10.5679 12.7853 10.8032 12.1707C10.9831 11.7003 11.0431 11.1361 11.0431 10.9104V6.85534C11.0694 6.86955 11.3889 7.08109 11.3889 7.08109C11.3889 7.08109 11.8524 7.37629 12.5749 7.56837C13.0933 7.70518 13.7921 7.73413 13.7921 7.73413V6.19494C14.0326 6.25018 14.2362 6.26439 14.3683 6.25018Z"
+      fill="#EE1D52"
+    />
+    <path
+      d="M13.7924 6.1923V7.73149C13.7924 7.73149 13.0936 7.70256 12.5753 7.56574C11.8528 7.37367 11.3892 7.07845 11.3892 7.07845C11.3892 7.07845 11.0676 6.86745 11.0434 6.85272V10.9104C11.0434 11.1361 10.9834 11.7003 10.8035 12.1707C10.5683 12.7853 10.2031 13.191 10.1362 13.2726C10.1362 13.2726 9.69209 13.8199 8.91172 14.1872C8.20816 14.5187 7.58879 14.5113 7.40408 14.5187C7.40408 14.5187 6.33586 14.5618 5.37287 13.9114L5.36815 13.9067C5.26711 13.8036 5.17133 13.6952 5.0824 13.5825C4.77509 13.191 4.58776 12.7301 4.53986 12.598V12.5954C4.46305 12.3675 4.30465 11.815 4.32622 11.2845C4.36463 10.3458 4.68142 9.76744 4.76561 9.62326C4.98664 9.22965 5.27711 8.87655 5.61809 8.58135C5.92067 8.32665 6.26377 8.12301 6.63107 7.98093C7.02941 7.81306 7.4567 7.72413 7.88926 7.71676V9.2749C7.88926 9.2749 7.0994 9.01338 6.46531 9.47644C6.02381 9.81954 5.78806 10.1537 5.71861 10.7515C5.71597 11.1909 5.82437 11.8129 6.41479 12.2281C6.48425 12.2738 6.55162 12.3144 6.61897 12.3507C6.72211 12.4901 6.84682 12.6122 6.99101 12.7132C7.56985 13.0947 8.0524 13.1216 8.67175 12.8743C9.08483 12.7085 9.39425 12.3365 9.53843 11.9213C9.62948 11.6618 9.62737 11.4024 9.62737 11.1335V3.48438H11.0682C11.1281 3.83746 11.2913 4.34158 11.7286 4.83834C11.9038 5.02567 12.1006 5.19354 12.3143 5.33298C12.3769 5.40244 12.701 5.7387 13.1183 5.94762C13.3314 6.05548 13.5598 6.13705 13.7924 6.1923Z"
+      fill="#FFFFFF"
+    />
+    <path
+      d="M3.96875 12.1211L4.00452 12.2242C3.9998 12.2127 3.98558 12.1764 3.96875 12.1211Z"
+      fill="#69C9D0"
+    />
+    <path
+      d="M6.6314 7.98073C6.26147 8.12228 5.92048 8.32646 5.61842 8.58115C5.27533 8.87636 4.98695 9.23156 4.76594 9.62571C4.68175 9.76988 4.36496 10.3461 4.32655 11.287C4.30498 11.82 4.466 12.3699 4.54019 12.5978V12.6004C4.58809 12.7299 4.77542 13.1935 5.08273 13.585C5.17166 13.6976 5.26744 13.806 5.36846 13.9091C5.04169 13.6834 4.75384 13.4124 4.50652 13.1024C4.20184 12.7157 4.0145 12.2573 3.9661 12.1226V12.1179C3.88927 11.89 3.72824 11.3375 3.75245 10.8044C3.79087 9.86566 4.10764 9.28733 4.19183 9.14315C4.41286 8.74954 4.70069 8.39381 5.04431 8.09861C5.34689 7.84391 5.68999 7.64027 6.05729 7.49819C6.28778 7.40242 6.52774 7.33243 6.77296 7.28717C7.14289 7.22245 7.51966 7.21771 7.8917 7.27033V7.7171C7.45757 7.72394 7.03027 7.81234 6.6314 7.98073Z"
+      fill="#69C9D0"
+    />
+    <path
+      d="M11.0703 3.48255H9.62949V11.1317C9.62949 11.4006 9.62949 11.66 9.54057 11.9194C9.39428 12.3325 9.08433 12.7067 8.67389 12.8724C8.05452 13.1218 7.56935 13.0934 6.99314 12.7114C6.84894 12.613 6.72423 12.4904 6.62109 12.3515C7.11311 12.613 7.5525 12.6083 8.09768 12.3899C8.51075 12.2241 8.82017 11.8494 8.96436 11.4369C9.0554 11.1775 9.05328 10.918 9.05328 10.6491V3H11.0435C11.0419 3 11.0203 3.18943 11.0703 3.48255ZM13.793 5.76582V6.19099C13.5598 6.13575 13.332 6.05418 13.1183 5.94632C12.7032 5.74004 12.379 5.40114 12.3143 5.33169C12.3885 5.37957 12.4632 5.42272 12.5421 5.46376C13.051 5.7153 13.5483 5.79213 13.793 5.76582Z"
+      fill="#69C9D0"
+    />
+  </svg>
+);
+
+export default TiktokIcon;

package/src/icons/social/YoutubeIcon.native.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+const YoutubeIcon: React.FC = () => (
+  <Svg
+    viewBox="0 0 18 19"
+    width="18"
+    height="19"
+  >
+    <Path
+      d="M0 9.06353C0 4.05788 4.02944 0 9 0C13.9706 0 18 4.05788 18 9.06353C18 14.0692 13.9706 18.1271 9 18.1271C4.02944 18.1271 0 14.0692 0 9.06353Z"
+      fill="#ED1D24"
+    />
+    <Path
+      d="M15.0124 5.98278C14.8718 5.45171 14.4147 5.02686 13.8874 4.88524C12.6921 4.5666 5.48504 4.53121 4.11395 4.88524C3.58659 5.02686 3.12957 5.45171 2.98895 5.98278C2.67254 7.32815 2.63738 10.7624 2.98895 12.1432C3.12957 12.6742 3.58659 13.0991 4.11395 13.2407C5.37957 13.5947 12.5866 13.5947 13.8874 13.2407C14.4147 13.0991 14.8718 12.6742 15.0124 12.1432C15.3287 10.8686 15.3287 7.29274 15.0124 5.98278Z"
+      fill="#FFFFFF"
+    />
+    <Path
+      d="M7.73438 7.1875V10.9404L11.0039 9.06394"
+      fill="#ED1D24"
+    />
+  </Svg>
+);
+
+export { YoutubeIcon };
+export default YoutubeIcon;

package/src/icons/social/YoutubeIcon.web.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+/**
+ * YouTubeIcon component renders the YouTube logo as an SVG.
+ *
+ * @param {React.SVGProps<SVGSVGElement>} props - Standard SVG props, including className for sizing and Tailwind styling.
+ * @returns {JSX.Element}
+ */
+const YouTubeIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({ className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 18 19"
+    width="18"
+    height="19"
+    className={className}
+    role="img"
+    aria-label="YouTube Logo"
+    {...props}
+  >
+    <path
+      d="M0 9.06353C0 4.05788 4.02944 0 9 0C13.9706 0 18 4.05788 18 9.06353C18 14.0692 13.9706 18.1271 9 18.1271C4.02944 18.1271 0 14.0692 0 9.06353Z"
+      fill="#ED1D24"
+    />
+    <path
+      d="M15.0124 5.98278C14.8718 5.45171 14.4147 5.02686 13.8874 4.88524C12.6921 4.5666 5.48504 4.53121 4.11395 4.88524C3.58659 5.02686 3.12957 5.45171 2.98895 5.98278C2.67254 7.32815 2.63738 10.7624 2.98895 12.1432C3.12957 12.6742 3.58659 13.0991 4.11395 13.2407C5.37957 13.5947 12.5866 13.5947 13.8874 13.2407C14.4147 13.0991 14.8718 12.6742 15.0124 12.1432C15.3287 10.8686 15.3287 7.29274 15.0124 5.98278Z"
+      fill="#FFFFFF"
+    />
+    <path
+      d="M7.73438 7.1875V10.9404L11.0039 9.06394"
+      fill="#ED1D24"
+    />
+  </svg>
+);
+
+export default YouTubeIcon;

package/src/icons/social/YoutubeReelsIcon.native.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+const YoutubeReelsIcon: React.FC = () => (
+  <Svg
+    viewBox="0 0 18 18"
+    width="18"
+    height="18"
+    fill="none"
+  >
+    <Path
+      d="M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z"
+      fill="#FE0000"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.4562 3.26453C11.5983 2.67467 13.0124 3.10437 13.6136 4.22451C14.2147 5.34465 13.7762 6.73043 12.634 7.32027L11.6949 7.80954C12.504 7.83885 13.2756 8.27928 13.6796 9.03224C14.2807 10.1524 13.8432 11.5381 12.7001 12.128L7.69203 14.7355C6.5499 15.3254 5.13578 14.8956 4.53466 13.7755C3.93353 12.6554 4.37206 11.2696 5.51421 10.6797L6.45333 10.1905C5.64427 10.1612 4.87267 9.72072 4.46864 8.96778C3.86752 7.84764 4.30604 6.46187 5.44818 5.87201L10.4562 3.26453ZM7.75313 7.15328L10.7844 9.00782L7.75313 10.8536V7.15328Z"
+      fill="#FFFFFF"
+    />
+  </Svg>
+);
+
+export { YoutubeReelsIcon };
+export default YoutubeReelsIcon;

package/src/icons/social/YoutubeReelsIcon.web.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+/**
+ * YoutubeReelsIcon component renders the YouTube Reels (Shorts) logo as an SVG.
+ *
+ * @param {React.SVGProps<SVGSVGElement>} props - Standard SVG props, including className for Tailwind styling.
+ * @returns {JSX.Element}
+ */
+const YoutubeReelsIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({ className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 18 18"
+    width="18"
+    height="18"
+    className={className}
+    role="img"
+    aria-label="YouTube Reels Logo"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z"
+      fill="#FE0000"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.4562 3.26453C11.5983 2.67467 13.0124 3.10437 13.6136 4.22451C14.2147 5.34465 13.7762 6.73043 12.634 7.32027L11.6949 7.80954C12.504 7.83885 13.2756 8.27928 13.6796 9.03224C14.2807 10.1524 13.8432 11.5381 12.7001 12.128L7.69203 14.7355C6.5499 15.3254 5.13578 14.8956 4.53466 13.7755C3.93353 12.6554 4.37206 11.2696 5.51421 10.6797L6.45333 10.1905C5.64427 10.1612 4.87267 9.72072 4.46864 8.96778C3.86752 7.84764 4.30604 6.46187 5.44818 5.87201L10.4562 3.26453ZM7.75313 7.15328L10.7844 9.00782L7.75313 10.8536V7.15328Z"
+      fill="#FFFFFF"
+    />
+  </svg>
+);
+
+export default YoutubeReelsIcon;

package/src/icons/social/index.ts

@@ -0,0 +1,9 @@
+export { default as AppleMusicIcon } from './AppleMusicIcon';
+export { default as AudiomackIcon } from './AudiomackIcon';
+export { default as InstagramShortsIcon } from './InstagramShortsIcon';
+export { default as ShazamIcon } from './ShazamIcon';
+export { default as SoundCloudIcon } from './SoundCloudIcon';
+export { default as SpotifyIcon } from './SpotifyIcon';
+export { default as TiktokIcon } from './TiktokIcon';
+export { default as YoutubeIcon } from './YoutubeIcon';
+export { default as YoutubeReelsIcon } from './YoutubeReelsIcon';

package/src/icons/time/CalendarIcon.native.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface CalendarIconProps {
+  width?: number;
+  height?: number;
+  stroke?: string;
+}
+
+const CalendarIcon = ({
+  width = 18,
+  height = 18,
+  stroke = '#000000',
+}: CalendarIconProps) => {
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox="0 0 18 18"
+      fill="none"
+      stroke={stroke}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <Path d="M15.75 7.5H2.25M12 1.5V4.5M6 1.5V4.5M5.85 16.5H12.15C13.4101 16.5 14.0402 16.5 14.5215 16.2548C14.9448 16.039 15.289 15.6948 15.5048 15.2715C15.75 14.7902 15.75 14.1601 15.75 12.9V6.6C15.75 5.33988 15.75 4.70982 15.5048 4.22852C15.289 3.80516 14.9448 3.46095 14.5215 3.24524C14.0402 3 13.4101 3 12.15 3H5.85C4.58988 3 3.95982 3 3.47852 3.24524C3.05516 3.46095 2.71095 3.80516 2.49524 4.22852C2.25 4.70982 2.25 5.33988 2.25 6.6V12.9C2.25 14.1601 2.25 14.7902 2.49524 15.2715C2.71095 15.6948 3.05516 16.039 3.47852 16.2548C3.95982 16.5 4.58988 16.5 5.85 16.5Z" />
+    </Svg>
+  );
+};
+
+export { CalendarIcon };
+export default CalendarIcon;

package/src/icons/time/CalendarIcon.web.tsx

@@ -0,0 +1,35 @@
+// components/icons/CalendarIcon.tsx
+import React from "react";
+
+interface CalendarIconProps extends React.SVGProps<SVGSVGElement> {
+  /** Icon width in pixels (defaults to 18) */
+  width?: number;
+  /** Icon height in pixels (defaults to 18) */
+  height?: number;
+  /** Stroke color (defaults to currentColor) */
+  stroke?: string;
+}
+
+export default function CalendarIcon({
+  width = 18,
+  height = 18,
+  stroke = "currentColor",
+  ...rest
+}: CalendarIconProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke={stroke}
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...rest}
+    >
+      <path d="M15.75 7.5H2.25M12 1.5V4.5M6 1.5V4.5M5.85 16.5H12.15C13.4101 16.5 14.0402 16.5 14.5215 16.2548C14.9448 16.039 15.289 15.6948 15.5048 15.2715C15.75 14.7902 15.75 14.1601 15.75 12.9V6.6C15.75 5.33988 15.75 4.70982 15.5048 4.22852C15.289 3.80516 14.9448 3.46095 14.5215 3.24524C14.0402 3 13.4101 3 12.15 3H5.85C4.58988 3 3.95982 3 3.47852 3.24524C3.05516 3.46095 2.71095 3.80516 2.49524 4.22852C2.25 4.70982 2.25 5.33988 2.25 6.6V12.9C2.25 14.1601 2.25 14.7902 2.49524 15.2715C2.71095 15.6948 3.05516 16.039 3.47852 16.2548C3.95982 16.5 4.58988 16.5 5.85 16.5Z" />
+    </svg>
+  );
+}

package/src/icons/time/ClockIcon.native.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type ClockIconProps = {
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number | string;
+};
+
+export const ClockIcon = ({
+  size = 18,
+  color = '#000000',
+  strokeWidth = 1.5,
+}: ClockIconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+      <Path
+        d="M9 4.5V9L12 10.5M16.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={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+ClockIcon.displayName = 'ClockIcon';
+
+export default ClockIcon;

package/src/icons/time/ClockIcon.web.tsx

@@ -0,0 +1,49 @@
+// components/icons/clock-icon.tsx
+"use client";
+
+import * as React from "react";
+import { cn } from "../../utils/cn";
+
+type IconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number | string;
+};
+
+export const ClockIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      size = 18,
+      color = "currentColor",
+      strokeWidth = 1.5,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 18 18"
+        fill="none"
+        role="img"
+        aria-label={(props as any)["aria-label"] ?? "Clock icon"}
+        className={cn("inline-block", className)}
+        {...props}
+      >
+        <path
+          d="M9 4.5V9L12 10.5M16.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={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+);
+
+ClockIcon.displayName = "ClockIcon";

package/src/icons/time/index.ts

@@ -0,0 +1,2 @@
+export { default as CalendarIcon } from './CalendarIcon';
+export { ClockIcon } from './ClockIcon';

package/src/icons/users/AccountIcon.native.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import Svg, { Path, G, Defs, ClipPath, Rect } from 'react-native-svg';
+
+type AccountIconProps = {
+  size?: number | string;
+};
+
+export default function AccountIcon({ size = 16 }: AccountIconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <G clipPath="url(#clip0)">
+        <Path
+          d="M3.544 12.96c.406-.956 1.353-1.626 2.456-1.626h4c1.104 0 2.051.67 2.456 1.626M10.667 6.334c0 1.473-1.194 2.667-2.667 2.667-1.473 0-2.667-1.194-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667ZM14.667 8c0 3.683-2.985 6.667-6.667 6.667C4.318 14.667 1.333 11.683 1.333 8c0-3.681 2.985-6.666 6.667-6.666 3.682 0 6.667 2.985 6.667 6.666Z"
+          stroke="currentColor"
+          strokeWidth={1.25}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </G>
+      <Defs>
+        <ClipPath id="clip0">
+          <Rect width={16} height={16} fill="white" />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+}
+
+export { AccountIcon };

package/src/icons/users/AccountIcon.web.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+type AccountIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export default function AccountIcon({ size = 16, ...props }: AccountIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0)">
+        <path
+          d="M3.544 12.96c.406-.956 1.353-1.626 2.456-1.626h4c1.104 0 2.051.67 2.456 1.626M10.667 6.334c0 1.473-1.194 2.667-2.667 2.667-1.473 0-2.667-1.194-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667ZM14.667 8c0 3.683-2.985 6.667-6.667 6.667C4.318 14.667 1.333 11.683 1.333 8c0-3.681 2.985-6.666 6.667-6.666 3.682 0 6.667 2.985 6.667 6.666Z"
+          stroke="currentColor"
+          strokeWidth={1.25}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0">
+          <rect width={16} height={16} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/src/icons/users/UserApproveIcon.native.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const UserApproveIcon: React.FC<IconProps> = ({ size = 18, color = '#000000' }) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <Path
+      d="M9 11.625H5.625C4.57833 11.625 4.05499 11.625 3.62914 11.7542C2.67034 12.045 1.92003 12.7953 1.62918 13.7541C1.5 14.18 1.5 14.7033 1.5 15.75M12 13.5L13.5 15L16.5 12M10.875 5.625C10.875 7.48896 9.36396 9 7.5 9C5.63604 9 4.125 7.48896 4.125 5.625C4.125 3.76104 5.63604 2.25 7.5 2.25C9.36396 2.25 10.875 3.76104 10.875 5.625Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { UserApproveIcon };
+export default UserApproveIcon;

package/src/icons/users/UserApproveIcon.web.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const UserApproveIcon: 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="M9 11.625H5.625C4.57833 11.625 4.05499 11.625 3.62914 11.7542C2.67034 12.045 1.92003 12.7953 1.62918 13.7541C1.5 14.18 1.5 14.7033 1.5 15.75M12 13.5L13.5 15L16.5 12M10.875 5.625C10.875 7.48896 9.36396 9 7.5 9C5.63604 9 4.125 7.48896 4.125 5.625C4.125 3.76104 5.63604 2.25 7.5 2.25C9.36396 2.25 10.875 3.76104 10.875 5.625Z"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default UserApproveIcon;

package/src/icons/users/UserIcon.native.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+interface IconProps {
+  width?: number;
+  height?: number;
+  color?: string;
+  strokeWidth?: number;
+  size?: number;
+}
+
+const UserIcon: React.FC<IconProps> = ({
+  size = 18,
+  color = '#000000',
+  strokeWidth = 1.5,
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <Path
+      d="M15 15.75C15 14.7033 15 14.18 14.8708 13.7541C14.58 12.7953 13.8297 12.045 12.8709 11.7542C12.445 11.625 11.9217 11.625 10.875 11.625H7.125C6.07833 11.625 5.55499 11.625 5.12914 11.7542C4.17034 12.045 3.42003 12.7953 3.12918 13.7541C3 14.18 3 14.7033 3 15.75M12.375 5.625C12.375 7.48896 10.864 9 9 9C7.13604 9 5.625 7.48896 5.625 5.625C5.625 3.76104 7.13604 2.25 9 2.25C10.864 2.25 12.375 3.76104 12.375 5.625Z"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { UserIcon };
+export default UserIcon;

package/src/icons/users/UserIcon.web.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+interface IconProps {
+  width?: number;
+  height?: number;
+  color?: string;
+  strokeWidth?: number;
+  size?: number;
+}
+
+const UserIcon: React.FC<IconProps> = ({
+  size = 18,
+  color = "currentColor",
+  strokeWidth = 1.5,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M15 15.75C15 14.7033 15 14.18 14.8708 13.7541C14.58 12.7953 13.8297 12.045 12.8709 11.7542C12.445 11.625 11.9217 11.625 10.875 11.625H7.125C6.07833 11.625 5.55499 11.625 5.12914 11.7542C4.17034 12.045 3.42003 12.7953 3.12918 13.7541C3 14.18 3 14.7033 3 15.75M12.375 5.625C12.375 7.48896 10.864 9 9 9C7.13604 9 5.625 7.48896 5.625 5.625C5.625 3.76104 7.13604 2.25 9 2.25C10.864 2.25 12.375 3.76104 12.375 5.625Z"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default UserIcon;

package/src/icons/users/UserPlusIcon.native.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+interface UserPlusIconProps {
+  size?: number;
+  width?: number;
+  height?: number;
+  strokeWidth?: number;
+}
+
+export const UserPlusIcon: React.FC<UserPlusIconProps> = ({
+  size = 18,
+  width,
+  height,
+  strokeWidth = 1.5,
+}) => {
+  const iconWidth = width || size;
+  const iconHeight = height || size;
+
+  return (
+    <Svg
+      width={iconWidth}
+      height={iconHeight}
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <Path
+        d="M14.25 7.5V3M12 5.25H16.5M12 15.75V14.85C12 13.5899 12 12.9598 11.7548 12.4785C11.539 12.0552 11.1948 11.711 10.7715 11.4952C10.2902 11.25 9.66012 11.25 8.4 11.25H5.1C3.83988 11.25 3.20982 11.25 2.72852 11.4952C2.30516 11.711 1.96095 12.0552 1.74524 12.4785C1.5 12.9598 1.5 13.5899 1.5 14.85V15.75M9.375 5.625C9.375 7.07475 8.19975 8.25 6.75 8.25C5.30025 8.25 4.125 7.07475 4.125 5.625C4.125 4.17525 5.30025 3 6.75 3C8.19975 3 9.375 4.17525 9.375 5.625Z"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export default UserPlusIcon;

package/src/icons/users/UserPlusIcon.web.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+interface UserPlusIconProps {
+  size?: number;
+  width?: number;
+  height?: number;
+  strokeWidth?: number;
+  className?: string;
+}
+
+export const UserPlusIcon: React.FC<UserPlusIconProps> = ({
+  size = 18,
+  width,
+  height,
+  strokeWidth = 1.5,
+  className,
+  ...props
+}) => {
+  const iconWidth = width || size;
+  const iconHeight = height || size;
+
+  return (
+    <svg
+      width={iconWidth}
+      height={iconHeight}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M14.25 7.5V3M12 5.25H16.5M12 15.75V14.85C12 13.5899 12 12.9598 11.7548 12.4785C11.539 12.0552 11.1948 11.711 10.7715 11.4952C10.2902 11.25 9.66012 11.25 8.4 11.25H5.1C3.83988 11.25 3.20982 11.25 2.72852 11.4952C2.30516 11.711 1.96095 12.0552 1.74524 12.4785C1.5 12.9598 1.5 13.5899 1.5 14.85V15.75M9.375 5.625C9.375 7.07475 8.19975 8.25 6.75 8.25C5.30025 8.25 4.125 7.07475 4.125 5.625C4.125 4.17525 5.30025 3 6.75 3C8.19975 3 9.375 4.17525 9.375 5.625Z"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+

package/src/icons/users/UserXIcon.native.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+type UserXIconProps = {
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number | string;
+};
+
+export default function UserXIcon({
+  size = 16,
+  color = '#000000',
+  strokeWidth = 1.25,
+}: UserXIconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <Path
+        d="M11.0002 10.6667L14.3335 14M14.3335 10.6667L11.0002 14M8.00016 10.3333H5.00017C4.06979 10.3333 3.6046 10.3333 3.22607 10.4482C2.3738 10.7067 1.70686 11.3736 1.44832 12.2259C1.3335 12.6044 1.3335 13.0696 1.3335 14M9.66683 5C9.66683 6.65685 8.32368 8 6.66683 8C5.00998 8 3.66683 6.65685 3.66683 5C3.66683 3.34315 5.00998 2 6.66683 2C8.32368 2 9.66683 3.34315 9.66683 5Z"
+      />
+    </Svg>
+  );
+}
+
+export { UserXIcon };