@postal-music/icons 0.1.0

package/src/icons/arrows/UTurnIcon.web.tsx

@@ -0,0 +1,32 @@
+// components/icons/UTurnIcon.tsx
+import * as React from "react";
+
+interface UTurnIconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  strokeWidth?: number;
+}
+
+export const UTurnIcon = React.forwardRef<SVGSVGElement, UTurnIconProps>(
+  ({ className, size = 17, strokeWidth, ...props }, ref) => (
+    <svg
+      ref={ref}
+      width={size}
+      height={size}
+      viewBox="0 0 17 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M2.83203 4.95833H9.91536C12.2626 4.95833 14.1654 6.86112 14.1654 9.20833C14.1654 11.5555 12.2626 13.4583 9.91536 13.4583H2.83203M2.83203 4.95833L5.66536 2.125M2.83203 4.95833L5.66536 7.79167"
+        stroke="currentColor"
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
+);
+
+UTurnIcon.displayName = "UTurnIcon";

package/src/icons/arrows/index.ts

@@ -0,0 +1,10 @@
+export { default as ArrowDownIcon } from './ArrowDownIcon';
+export { default as ArrowLeftIcon } from './ArrowLeftIcon';
+export { default as ArrowRightIcon } from './ArrowRightIcon';
+export { default as ArrowUpIcon01 } from './ArrowUp01Icon';
+export { default as ArrowUpIcon } from './ArrowUpIcon';
+export { default as ChevronLeftIcon } from './ChevronLeftIcon';
+export { default as ChevronSelectorIcon } from './ChevronSelectorIcon';
+export { default as NarrowUpRightIcon } from './NarrowUpRightIcon';
+export { default as SwitchHorizontal02Icon } from './SwitchHorizontal02Icon';
+export { default as UTurnIcon } from './UTurnIcon';

package/src/icons/brand/InstagramWhiteIcon.native.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import Svg, { Path, G, Defs, ClipPath, Rect } from "react-native-svg";
+
+type InstagramWhiteIconProps = {
+  size?: number | string;
+  strokeWidth?: number;
+};
+
+const InstagramWhiteIcon: React.FC<InstagramWhiteIconProps> = ({
+  size = 18,
+  strokeWidth = 1.5,
+}) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <G clipPath="url(#instagram-white-clip)">
+        <Path
+          d="M13.125 4.875H13.1325M5.25 1.5H12.75C14.8211 1.5 16.5 3.17893 16.5 5.25V12.75C16.5 14.8211 14.8211 16.5 12.75 16.5H5.25C3.17893 16.5 1.5 14.8211 1.5 12.75V5.25C1.5 3.17893 3.17893 1.5 5.25 1.5ZM12 8.5275C12.0926 9.15168 11.9859 9.78916 11.6953 10.3493C11.4047 10.9094 10.9449 11.3636 10.3812 11.6473C9.81758 11.931 9.17884 12.0297 8.55584 11.9294C7.93284 11.8292 7.35732 11.5351 6.91113 11.0889C6.46494 10.6427 6.1708 10.0672 6.07055 9.44416C5.9703 8.82116 6.06905 8.18242 6.35274 7.61878C6.63644 7.05514 7.09064 6.59531 7.65074 6.30468C8.21084 6.01406 8.84832 5.90744 9.4725 6C10.1092 6.09441 10.6986 6.3911 11.1538 6.84623C11.6089 7.30136 11.9056 7.89081 12 8.5275Z"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </G>
+      <Defs>
+        <ClipPath id="instagram-white-clip">
+          <Rect width="18" height="18" fill="white" />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+};
+
+export { InstagramWhiteIcon };
+export default InstagramWhiteIcon;

package/src/icons/brand/InstagramWhiteIcon.web.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+
+type InstagramWhiteIconProps = {
+  size?: number | string;
+  strokeWidth?: number;
+  className?: string;
+  label?: string; // if omitted, icon will be aria-hidden
+  tabIndex?: number;
+  onClick?: React.MouseEventHandler<SVGSVGElement>;
+  onKeyDown?: React.KeyboardEventHandler<SVGSVGElement>;
+};
+
+const InstagramWhiteIcon = React.forwardRef<
+  SVGSVGElement,
+  InstagramWhiteIconProps
+>(
+  (
+    {
+      size = 18,
+      strokeWidth = 1.5,
+      className = "",
+      label,
+      tabIndex,
+      onClick,
+      onKeyDown,
+      ...rest
+    },
+    ref
+  ) => {
+    const isInteractive = Boolean(onClick || onKeyDown);
+    const computedTabIndex = tabIndex ?? (isInteractive ? 0 : undefined);
+
+    const classes = [
+      "inline-block align-middle",
+      isInteractive
+        ? "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-white/50 rounded"
+        : "",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <svg
+        ref={ref}
+        role="img"
+        aria-label={label}
+        aria-hidden={label ? undefined : true}
+        tabIndex={computedTabIndex}
+        onClick={onClick}
+        width={size}
+        height={size}
+        viewBox="0 0 18 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={classes}
+        {...rest}
+      >
+        <g clipPath="url(#clip0_8382_6976)">
+          <path
+            d="M13.125 4.875H13.1325M5.25 1.5H12.75C14.8211 1.5 16.5 3.17893 16.5 5.25V12.75C16.5 14.8211 14.8211 16.5 12.75 16.5H5.25C3.17893 16.5 1.5 14.8211 1.5 12.75V5.25C1.5 3.17893 3.17893 1.5 5.25 1.5ZM12 8.5275C12.0926 9.15168 11.9859 9.78916 11.6953 10.3493C11.4047 10.9094 10.9449 11.3636 10.3812 11.6473C9.81758 11.931 9.17884 12.0297 8.55584 11.9294C7.93284 11.8292 7.35732 11.5351 6.91113 11.0889C6.46494 10.6427 6.1708 10.0672 6.07055 9.44416C5.9703 8.82116 6.06905 8.18242 6.35274 7.61878C6.63644 7.05514 7.09064 6.59531 7.65074 6.30468C8.21084 6.01406 8.84832 5.90744 9.4725 6C10.1092 6.09441 10.6986 6.3911 11.1538 6.84623C11.6089 7.30136 11.9056 7.89081 12 8.5275Z"
+            stroke="currentColor"
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_8382_6976">
+            <rect width="18" height="18" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    );
+  }
+);
+
+InstagramWhiteIcon.displayName = "InstagramWhiteIcon";
+export default InstagramWhiteIcon;

package/src/icons/brand/PostalIcon.native.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Svg, { Circle } from "react-native-svg";
+
+interface PostalIconProps {
+  size?: number;
+  color?: string;
+}
+
+const PostalIcon: React.FC<PostalIconProps> = ({
+  size = 400,
+  color = '#000000',
+}) => (
+  <Svg
+    width={size}
+    height={size}
+    fill="none"
+    viewBox="0 0 236.46 236.32"
+  >
+    <Circle cx="54.08" cy="182.24" r="54.08" fill={color} />
+    <Circle cx="54.22" cy="54.08" r="54.08" fill={color} />
+    <Circle cx="182.38" cy="54.08" r="54.08" fill={color} />
+  </Svg>
+);
+
+export { PostalIcon };
+export default PostalIcon;

package/src/icons/brand/PostalIcon.web.tsx

@@ -0,0 +1,29 @@
+// Save the embedded PNG from the SVG's base64 to `public/pattern.png` and reference it below.
+import React from "react";
+
+interface PatternIconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+}
+
+const PostalIcon: React.FC<PatternIconProps> = ({
+  className,
+  size = 400,
+  ...props
+}) => (
+  <svg
+    width={size}
+    height={size}
+    className={className}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 236.46 236.32"
+  >
+    <circle cx="54.08" cy="182.24" r="54.08" fill="currentColor" />
+
+    <circle cx="54.22" cy="54.08" r="54.08" fill="currentColor" />
+
+    <circle cx="182.38" cy="54.08" r="54.08" fill="currentColor" />
+  </svg>
+);
+
+export default PostalIcon;

package/src/icons/brand/index.ts

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

package/src/icons/charts/BarChart01Icon.native.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type BarChart01IconProps = {
+  size?: number;
+  color?: string;
+};
+
+const BarChart01Icon: React.FC<BarChart01IconProps> = ({
+  size = 18,
+  color = '#000000',
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 18 18" fill="none">
+    <Path
+      d="M13.5 15V7.5M9 15V3M4.5 15V10.5"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { BarChart01Icon };
+export default BarChart01Icon;

package/src/icons/charts/BarChart01Icon.web.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+type IconProps = {
+  size?: number;
+  color?: string;
+  className?: string;
+};
+
+const BarChart01Icon: 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="M13.5 15V7.5M9 15V3M4.5 15V10.5"
+      stroke={color}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default BarChart01Icon;

package/src/icons/charts/BarChart10Icon.native.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type BarChart10IconProps = {
+  size?: number | string;
+};
+
+const BarChart10Icon = ({ size = 15 }: BarChart10IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 15 15" fill="none">
+      <Path
+        d="M5.625 4.375H2.875C2.52497 4.375 2.34995 4.375 2.21626 4.44312C2.09865 4.50304 2.00304 4.59865 1.94312 4.71626C1.875 4.84995 1.875 5.02497 1.875 5.375V12.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.625M5.625 13.125H9.375M5.625 13.125L5.625 2.875C5.625 2.52497 5.625 2.34995 5.69312 2.21626C5.75304 2.09865 5.84865 2.00304 5.96626 1.94312C6.09995 1.875 6.27497 1.875 6.625 1.875L8.375 1.875C8.72503 1.875 8.90005 1.875 9.03374 1.94312C9.15135 2.00304 9.24696 2.09865 9.30688 2.21626C9.375 2.34995 9.375 2.52497 9.375 2.875V13.125M9.375 6.875H12.125C12.475 6.875 12.65 6.875 12.7837 6.94312C12.9013 7.00304 12.997 7.09865 13.0569 7.21626C13.125 7.34995 13.125 7.52497 13.125 7.875V12.125C13.125 12.475 13.125 12.65 13.0569 12.7837C12.997 12.9013 12.9013 12.997 12.7837 13.0569C12.65 13.125 12.475 13.125 12.125 13.125H9.375"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { BarChart10Icon };
+export default BarChart10Icon;

package/src/icons/charts/BarChart10Icon.web.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type BarChart10IconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export default function BarChart10Icon({
+  size = 15,
+  className,
+  ...props
+}: BarChart10IconProps) {
+  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.625 4.375H2.875C2.52497 4.375 2.34995 4.375 2.21626 4.44312C2.09865 4.50304 2.00304 4.59865 1.94312 4.71626C1.875 4.84995 1.875 5.02497 1.875 5.375V12.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.625M5.625 13.125H9.375M5.625 13.125L5.625 2.875C5.625 2.52497 5.625 2.34995 5.69312 2.21626C5.75304 2.09865 5.84865 2.00304 5.96626 1.94312C6.09995 1.875 6.27497 1.875 6.625 1.875L8.375 1.875C8.72503 1.875 8.90005 1.875 9.03374 1.94312C9.15135 2.00304 9.24696 2.09865 9.30688 2.21626C9.375 2.34995 9.375 2.52497 9.375 2.875V13.125M9.375 6.875H12.125C12.475 6.875 12.65 6.875 12.7837 6.94312C12.9013 7.00304 12.997 7.09865 13.0569 7.21626C13.125 7.34995 13.125 7.52497 13.125 7.875V12.125C13.125 12.475 13.125 12.65 13.0569 12.7837C12.997 12.9013 12.9013 12.997 12.7837 13.0569C12.65 13.125 12.475 13.125 12.125 13.125H9.375"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/charts/LineChart03UpIcon.native.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type LineChart03UpIconProps = {
+  size?: number | string;
+};
+
+const LineChart03UpIcon = ({ size = 16 }: LineChart03UpIconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d="M11.3333 6L7.71046 9.62288C7.57845 9.75488 7.51245 9.82088 7.43634 9.84561C7.36939 9.86737 7.29728 9.86737 7.23033 9.84561C7.15422 9.82088 7.08822 9.75488 6.95621 9.62288L5.71046 8.37712C5.57845 8.24512 5.51245 8.17912 5.43634 8.15439C5.36939 8.13263 5.29728 8.13263 5.23033 8.15439C5.15422 8.17912 5.08822 8.24512 4.95621 8.37712L2 11.3333M11.3333 6H8.66667M11.3333 6V8.66667M5.2 14H10.8C11.9201 14 12.4802 14 12.908 13.782C13.2843 13.5903 13.5903 13.2843 13.782 12.908C14 12.4802 14 11.9201 14 10.8V5.2C14 4.0799 14 3.51984 13.782 3.09202C13.5903 2.71569 13.2843 2.40973 12.908 2.21799C12.4802 2 11.9201 2 10.8 2H5.2C4.0799 2 3.51984 2 3.09202 2.21799C2.71569 2.40973 2.40973 2.71569 2.21799 3.09202C2 3.51984 2 4.0799 2 5.2V10.8C2 11.9201 2 12.4802 2.21799 12.908C2.40973 13.2843 2.71569 13.5903 3.09202 13.782C3.51984 14 4.0799 14 5.2 14Z"
+        stroke="currentColor"
+        strokeWidth={1.25}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { LineChart03UpIcon };
+export default LineChart03UpIcon;

package/src/icons/charts/LineChart03UpIcon.web.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type LineChart03UpIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export default function LineChart03UpIcon({
+  size = 16,
+  className,
+  ...props
+}: LineChart03UpIconProps) {
+  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="M11.3333 6L7.71046 9.62288C7.57845 9.75488 7.51245 9.82088 7.43634 9.84561C7.36939 9.86737 7.29728 9.86737 7.23033 9.84561C7.15422 9.82088 7.08822 9.75488 6.95621 9.62288L5.71046 8.37712C5.57845 8.24512 5.51245 8.17912 5.43634 8.15439C5.36939 8.13263 5.29728 8.13263 5.23033 8.15439C5.15422 8.17912 5.08822 8.24512 4.95621 8.37712L2 11.3333M11.3333 6H8.66667M11.3333 6V8.66667M5.2 14H10.8C11.9201 14 12.4802 14 12.908 13.782C13.2843 13.5903 13.5903 13.2843 13.782 12.908C14 12.4802 14 11.9201 14 10.8V5.2C14 4.0799 14 3.51984 13.782 3.09202C13.5903 2.71569 13.2843 2.40973 12.908 2.21799C12.4802 2 11.9201 2 10.8 2H5.2C4.0799 2 3.51984 2 3.09202 2.21799C2.71569 2.40973 2.40973 2.71569 2.21799 3.09202C2 3.51984 2 4.0799 2 5.2V10.8C2 11.9201 2 12.4802 2.21799 12.908C2.40973 13.2843 2.71569 13.5903 3.09202 13.782C3.51984 14 4.0799 14 5.2 14Z"
+        stroke="currentColor"
+        strokeWidth={1.25}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/charts/index.ts

@@ -0,0 +1,3 @@
+export { default as BarChart01Icon } from './BarChart01Icon';
+export { default as BarChart10Icon } from './BarChart10Icon';
+export { default as LineChart03UpIcon } from './LineChart03UpIcon';

package/src/icons/communication/AnnotationInfoIcon.native.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+type AnnotationInfoIconProps = {
+  size?: string | number;
+};
+
+const AnnotationInfoIcon = ({
+  size = 24,
+}: AnnotationInfoIconProps) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <Path
+        d="M12 14V10.5M12 7H12.01M9.9 19.2L11.36 21.1467C11.5771 21.4362 11.6857 21.5809 11.8188 21.6327C11.9353 21.678 12.0647 21.678 12.1812 21.6327C12.3143 21.5809 12.4229 21.4362 12.64 21.1467L14.1 19.2C14.3931 18.8091 14.5397 18.6137 14.7185 18.4645C14.9569 18.2656 15.2383 18.1248 15.5405 18.0535C15.7671 18 16.0114 18 16.5 18C17.8978 18 18.5967 18 19.1481 17.7716C19.8831 17.4672 20.4672 16.8831 20.7716 16.1481C21 15.5967 21 14.8978 21 13.5V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V13.5C3 14.8978 3 15.5967 3.22836 16.1481C3.53284 16.8831 4.11687 17.4672 4.85195 17.7716C5.40326 18 6.10218 18 7.5 18C7.98858 18 8.23287 18 8.45951 18.0535C8.76169 18.1248 9.04312 18.2656 9.2815 18.4645C9.46028 18.6137 9.60685 18.8091 9.9 19.2Z"
+        stroke="black"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { AnnotationInfoIcon };
+export default AnnotationInfoIcon;

package/src/icons/communication/AnnotationInfoIcon.web.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+
+type AnnotationInfoIconProps = React.SVGProps<SVGSVGElement> & {
+  title?: string;
+  size?: string | number;
+};
+
+const AnnotationInfoIcon = ({
+  title = "Annotation info",
+  size = 24,
+  className,
+  ...props
+}: AnnotationInfoIconProps) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label={title}
+      className={className}
+      {...props}
+    >
+      {title ? <title>{title}</title> : null}
+      <path
+        d="M12 14V10.5M12 7H12.01M9.9 19.2L11.36 21.1467C11.5771 21.4362 11.6857 21.5809 11.8188 21.6327C11.9353 21.678 12.0647 21.678 12.1812 21.6327C12.3143 21.5809 12.4229 21.4362 12.64 21.1467L14.1 19.2C14.3931 18.8091 14.5397 18.6137 14.7185 18.4645C14.9569 18.2656 15.2383 18.1248 15.5405 18.0535C15.7671 18 16.0114 18 16.5 18C17.8978 18 18.5967 18 19.1481 17.7716C19.8831 17.4672 20.4672 16.8831 20.7716 16.1481C21 15.5967 21 14.8978 21 13.5V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V13.5C3 14.8978 3 15.5967 3.22836 16.1481C3.53284 16.8831 4.11687 17.4672 4.85195 17.7716C5.40326 18 6.10218 18 7.5 18C7.98858 18 8.23287 18 8.45951 18.0535C8.76169 18.1248 9.04312 18.2656 9.2815 18.4645C9.46028 18.6137 9.60685 18.8091 9.9 19.2Z"
+        stroke="black"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default AnnotationInfoIcon;

package/src/icons/communication/ChatBubbleDotIcon.native.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+export function ChatBubbleDotIcon() {
+  return (
+    <Svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <Path
+        d="M20.1208 3.87868C21.2924 5.05025 21.2924 6.94975 20.1208 8.12132C18.9493 9.29289 17.0498 9.29289 15.8782 8.12132C14.7066 6.94975 14.7066 5.05025 15.8782 3.87868C17.0498 2.70711 18.9493 2.70711 20.1208 3.87868Z"
+        stroke="#007EFF"
+        strokeWidth={2}
+        fill={"#007EFF"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M11.707 3.03638C7.38421 3.43612 3.99962 7.07276 3.99962 11.4999C3.99962 12.4499 4.15547 13.3635 4.44299 14.2165C4.55119 14.5375 4.60529 14.698 4.61505 14.8213C4.62469 14.9431 4.6174 15.0285 4.58728 15.1469C4.55677 15.2667 4.48942 15.3914 4.35472 15.6407L2.71906 18.6683C2.48575 19.1001 2.36909 19.316 2.3952 19.4827C2.41794 19.6278 2.50337 19.7556 2.6288 19.8321C2.7728 19.92 3.01692 19.8948 3.50517 19.8443L8.62619 19.3149C8.78121 19.2989 8.85882 19.2909 8.92949 19.2936C8.999 19.2962 9.04807 19.3028 9.11586 19.3184C9.18478 19.3343 9.27145 19.3677 9.44478 19.4344C10.3928 19.7997 11.4228 19.9999 12.4996 19.9999C16.9304 19.9999 20.5694 16.6097 20.9641 12.2818"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export default ChatBubbleDotIcon;

package/src/icons/communication/ChatBubbleDotIcon.web.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+export function ChatBubbleDotIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        d="M20.1208 3.87868C21.2924 5.05025 21.2924 6.94975 20.1208 8.12132C18.9493 9.29289 17.0498 9.29289 15.8782 8.12132C14.7066 6.94975 14.7066 5.05025 15.8782 3.87868C17.0498 2.70711 18.9493 2.70711 20.1208 3.87868Z"
+        stroke="#007EFF"
+        strokeWidth={2}
+        fill={"#007EFF"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.707 3.03638C7.38421 3.43612 3.99962 7.07276 3.99962 11.4999C3.99962 12.4499 4.15547 13.3635 4.44299 14.2165C4.55119 14.5375 4.60529 14.698 4.61505 14.8213C4.62469 14.9431 4.6174 15.0285 4.58728 15.1469C4.55677 15.2667 4.48942 15.3914 4.35472 15.6407L2.71906 18.6683C2.48575 19.1001 2.36909 19.316 2.3952 19.4827C2.41794 19.6278 2.50337 19.7556 2.6288 19.8321C2.7728 19.92 3.01692 19.8948 3.50517 19.8443L8.62619 19.3149C8.78121 19.2989 8.85882 19.2909 8.92949 19.2936C8.999 19.2962 9.04807 19.3028 9.11586 19.3184C9.18478 19.3343 9.27145 19.3677 9.44478 19.4344C10.3928 19.7997 11.4228 19.9999 12.4996 19.9999C16.9304 19.9999 20.5694 16.6097 20.9641 12.2818"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/communication/ChatBubbleIcon.native.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import Svg, { Path } from 'react-native-svg';
+
+type ChatBubbleIconProps = {
+  size?: number | string;
+};
+
+const ChatBubbleIcon = ({
+  size = 18,
+}: ChatBubbleIconProps) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <Path
+        d="M15.749 8.625C15.749 12.1458 12.8948 15 9.37399 15C8.5664 15 7.79389 14.8498 7.08285 14.5759C6.95285 14.5258 6.88785 14.5008 6.83616 14.4889C6.78532 14.4771 6.74852 14.4722 6.69638 14.4703C6.64337 14.4682 6.58522 14.4742 6.46891 14.4863L2.62814 14.8833C2.26196 14.9211 2.07887 14.9401 1.97087 14.8742C1.8768 14.8168 1.81273 14.7209 1.79567 14.6121C1.77609 14.4871 1.86358 14.3252 2.03856 14.0013L3.26531 11.7306C3.36633 11.5436 3.41685 11.4501 3.43973 11.3602C3.46232 11.2714 3.46778 11.2074 3.46056 11.1161C3.45324 11.0236 3.41266 10.9032 3.33151 10.6625C3.11587 10.0227 2.99899 9.3375 2.99899 8.625C2.99899 5.10418 5.85317 2.25 9.37399 2.25C12.8948 2.25 15.749 5.10418 15.749 8.625Z"
+        stroke="currentColor"
+        strokeWidth={1.67}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { ChatBubbleIcon };
+export default ChatBubbleIcon;

package/src/icons/communication/ChatBubbleIcon.web.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+type ChatBubbleIconProps = React.SVGProps<SVGSVGElement> & {
+  title?: string;
+};
+
+const ChatBubbleIcon = ({
+  title = "Chat",
+  className,
+  ...props
+}: ChatBubbleIconProps) => {
+  const ariaLabel = props["aria-label"] ?? title;
+
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label={ariaLabel}
+      className={className}
+      {...props}
+    >
+      <path
+        d="M15.749 8.625C15.749 12.1458 12.8948 15 9.37399 15C8.5664 15 7.79389 14.8498 7.08285 14.5759C6.95285 14.5258 6.88785 14.5008 6.83616 14.4889C6.78532 14.4771 6.74852 14.4722 6.69638 14.4703C6.64337 14.4682 6.58522 14.4742 6.46891 14.4863L2.62814 14.8833C2.26196 14.9211 2.07887 14.9401 1.97087 14.8742C1.8768 14.8168 1.81273 14.7209 1.79567 14.6121C1.77609 14.4871 1.86358 14.3252 2.03856 14.0013L3.26531 11.7306C3.36633 11.5436 3.41685 11.4501 3.43973 11.3602C3.46232 11.2714 3.46778 11.2074 3.46056 11.1161C3.45324 11.0236 3.41266 10.9032 3.33151 10.6625C3.11587 10.0227 2.99899 9.3375 2.99899 8.625C2.99899 5.10418 5.85317 2.25 9.37399 2.25C12.8948 2.25 15.749 5.10418 15.749 8.625Z"
+        stroke="currentColor"
+        strokeWidth={1.67}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ChatBubbleIcon;

package/src/icons/communication/MailIcon.native.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface MailIconProps {
+  width?: number;
+  height?: number;
+  stroke?: string;
+  strokeWidth?: number;
+}
+
+const MailIcon: React.FC<MailIconProps> = ({
+  width = 18,
+  height = 18,
+  stroke = '#000000',
+  strokeWidth = 1.5,
+}) => {
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <Path
+        d="M1.5 5.25L7.62369 9.53658C8.11957 9.8837 8.36751 10.0573 8.6372 10.1245C8.87542 10.1839 9.12458 10.1839 9.3628 10.1245C9.63249 10.0573 9.88043 9.8837 10.3763 9.53658L16.5 5.25M5.1 15H12.9C14.1601 15 14.7902 15 15.2715 14.7548C15.6948 14.539 16.039 14.1948 16.2548 13.7715C16.5 13.2902 16.5 12.6601 16.5 11.4V6.6C16.5 5.33988 16.5 4.70982 16.2548 4.22852C16.039 3.80516 15.6948 3.46095 15.2715 3.24524C14.7902 3 14.1601 3 12.9 3H5.1C3.83988 3 3.20982 3 2.72852 3.24524C2.30516 3.46095 1.96095 3.80516 1.74524 4.22852C1.5 4.70982 1.5 5.33988 1.5 6.6V11.4C1.5 12.6601 1.5 13.2902 1.74524 13.7715C1.96095 14.1948 2.30516 14.539 2.72852 14.7548C3.20982 15 3.83988 15 5.1 15Z"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { MailIcon };
+export default MailIcon;