@postal-music/icons 0.1.7 → 0.1.9

package/dist/types/icons/arrows/ArrowUpIcon.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-export declare function ArrowUpIcon({ className, size, stroke, color, fill, ...props }: React.SVGProps<SVGSVGElement> & {
-    stroke?: string;
+export declare function ArrowUpIcon({ className, size, color, fill, ...props }: React.SVGProps<SVGSVGElement> & {
     size?: number;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/icons/arrows/ChevronUpIcon.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export declare function ChevronUpIcon({ className, size, stroke, color, fill, ...props }: React.SVGProps<SVGSVGElement> & {
+    stroke?: string;
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/icons/arrows/index.d.ts

@@ -5,6 +5,7 @@ export { ArrowUpIcon01 } from './ArrowUp01Icon';
 export { ArrowUpIcon } from './ArrowUpIcon';
 export { default as ChevronLeftIcon } from './ChevronLeftIcon';
 export { default as ChevronSelectorIcon } from './ChevronSelectorIcon';
+export { ChevronUpIcon } from './ChevronUpIcon';
 export { NarrowUpRightIcon } from './NarrowUpRightIcon';
 export { default as SwitchHorizontal02Icon } from './SwitchHorizontal02Icon';
 export { UTurnIcon } from './UTurnIcon';

package/dist/types/icons/general/MusicNotePlusIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type MusicNotePlusIconProps = React.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+};
+export default function MusicNotePlusIcon({ size, className, ...props }: MusicNotePlusIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/icons/general/Star04Icon.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+type Star04IconProps = React.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+    color?: string;
+    title?: string;
+};
+declare const Star04Icon: React.FC<Star04IconProps>;
+export default Star04Icon;

package/dist/types/icons/general/Star05Icon.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+type Star05IconProps = React.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+    color?: string;
+    title?: string;
+};
+declare const Star05Icon: React.FC<Star05IconProps>;
+export default Star05Icon;

package/dist/types/icons/general/index.d.ts

@@ -27,6 +27,7 @@ export { default as LayersThree01Icon } from './LayersThree01Icon';
 export { default as LyricsIcon } from './LyricsIcon';
 export { default as MoonIcon } from './MoonIcon';
 export { default as MusicNoteIcon } from './MusicNoteIcon';
+export { default as MusicNotePlusIcon } from './MusicNotePlusIcon';
 export { default as PinIcon } from './PinIcon';
 export { default as QuestionCircleIcon } from './QuestionCircleIcon';
 export { default as Recording01Icon } from './Recordering01';
@@ -34,6 +35,8 @@ export { default as Recording02Icon } from './Recording02';
 export { Share01Icon } from './Share01Icon';
 export { default as ShareIcon } from './ShareIcon';
 export { default as StarIcon } from './StarIcon';
+export { default as Star04Icon } from './Star04Icon';
+export { default as Star05Icon } from './Star05Icon';
 export { default as Stars01Icon } from './Stars01Icon';
 export { default as Stars02Icon } from './Stars02Icon';
 export { default as Stars04Icon } from './Stars04Icon';

package/dist/types/icons/navigation/AlignLeft01Icon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type AlignLeft01IconProps = React.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+};
+export default function AlignLeft01Icon({ size, className, ...props }: AlignLeft01IconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/icons/navigation/FlexAlignBottomIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type FlexAlignBottomIconProps = React.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+};
+export default function FlexAlignBottomIcon({ size, className, ...props }: FlexAlignBottomIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/icons/navigation/FlexAlignLeftIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type FlexAlignLeftIconProps = React.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+};
+export default function FlexAlignLeftIcon({ size, className, ...props }: FlexAlignLeftIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/icons/navigation/FlexAlignRightIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type FlexAlignRightIconProps = React.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+};
+export default function FlexAlignRightIcon({ size, className, ...props }: FlexAlignRightIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/icons/navigation/FlexAlignTopIcon.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type FlexAlignTopIconProps = React.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+};
+export default function FlexAlignTopIcon({ size, className, ...props }: FlexAlignTopIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/icons/navigation/Menu03Icon.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+interface Menu03IconProps extends React.SVGProps<SVGSVGElement> {
+}
+declare const Menu03Icon: React.ForwardRefExoticComponent<Omit<Menu03IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default Menu03Icon;

package/dist/types/icons/navigation/index.d.ts

@@ -1,10 +1,16 @@
+export { default as AlignLeft01Icon } from './AlignLeft01Icon';
 export { default as AlignLeftIcon } from './AlignLeftIcon';
 export { default as DotgridIcon } from './DotgridIcon';
 export { default as FilterIcon } from './FilterIcon';
+export { default as FlexAlignBottomIcon } from './FlexAlignBottomIcon';
+export { default as FlexAlignLeftIcon } from './FlexAlignLeftIcon';
+export { default as FlexAlignRightIcon } from './FlexAlignRightIcon';
+export { default as FlexAlignTopIcon } from './FlexAlignTopIcon';
 export { default as Grid01Icon } from './Grid01Icon';
 export { GridIcon } from './GridIcon';
 export { HomeIcon } from './HomeIcon';
 export { ListIcon } from './ListIcon';
+export { default as Menu03Icon } from './Menu03Icon';
 export { default as MenuIcon } from './MenuIcon';
 export { default as Rows01Icon } from './Rows01Icon';
 export { default as Rows03Icon } from './Rows03Icon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postal-music/icons",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Shared design system for Postal — icons and tokens for React and React Native",
   "publishConfig": {
     "access": "public"

package/src/icons/arrows/ArrowUpIcon.native.tsx

@@ -16,13 +16,14 @@ export function ArrowUpIcon({
     <Svg
       width={size}
       height={size}
-      viewBox="0 0 16 16"
+      viewBox="0 0 24 24"
       fill={fill}
     >
       <Path
-        d="M12 10L8 6L4 10"
+        d="M12 19V5M19 12L12 5L5 12"
         stroke={color}
-        strokeWidth={1.5}
+        strokeWidth="2"
+        strokeLinecap="round"
         strokeLinejoin="round"
       />
     </Svg>

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

@@ -3,25 +3,25 @@ import * as React from "react";
 export function ArrowUpIcon({
   className,
   size = 16,
-  stroke = "#8F8F8F",
   color = "currentColor",
   fill = "none",
   ...props
-}: React.SVGProps<SVGSVGElement> & { stroke?: string; size?: number }) {
+}: React.SVGProps<SVGSVGElement> & { size?: number }) {
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 16 16"
+      viewBox="0 0 24 24"
       fill={fill}
       xmlns="http://www.w3.org/2000/svg"
       className={className}
       {...props}
     >
       <path
-        d="M12 10L8 6L4 10"
+        d="M12 19V5M19 12L12 5L5 12"
         stroke={color}
-        strokeWidth={1.5}
+        strokeWidth="2"
+        strokeLinecap="round"
         strokeLinejoin="round"
       />
     </svg>

package/src/icons/arrows/ChevronUpIcon.native.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type ChevronUpIconProps = {
+  size?: number;
+  color?: string;
+  fill?: string;
+};
+
+export function ChevronUpIcon({
+  size = 16,
+  color = '#000000',
+  fill = "none",
+}: ChevronUpIconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill={fill}
+    >
+      <Path
+        d="M12 10L8 6L4 10"
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export default ChevronUpIcon;

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+export function ChevronUpIcon({
+  className,
+  size = 16,
+  stroke = "#8F8F8F",
+  color = "currentColor",
+  fill = "none",
+  ...props
+}: React.SVGProps<SVGSVGElement> & { stroke?: string; size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill={fill}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M12 10L8 6L4 10"
+        stroke={color}
+        strokeWidth={1.5}
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/arrows/index.ts

@@ -5,6 +5,7 @@ export { ArrowUpIcon01 } from './ArrowUp01Icon';
 export { ArrowUpIcon } from './ArrowUpIcon';
 export { default as ChevronLeftIcon } from './ChevronLeftIcon';
 export { default as ChevronSelectorIcon } from './ChevronSelectorIcon';
+export { ChevronUpIcon } from './ChevronUpIcon';
 export { NarrowUpRightIcon } from './NarrowUpRightIcon';
 export { default as SwitchHorizontal02Icon } from './SwitchHorizontal02Icon';
 export { UTurnIcon } from './UTurnIcon';

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type MusicNotePlusIconProps = {
+  size?: number | string;
+};
+
+const MusicNotePlusIcon: React.FC<MusicNotePlusIconProps> = ({ size = 16 }) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <Path
+        d="M9.66683 11.9994V3.72527C9.66683 3.15379 9.66683 2.86805 9.78719 2.69596C9.89229 2.54569 10.0546 2.44535 10.2361 2.41855C10.4438 2.38786 10.6994 2.51564 11.2105 2.77121L13.6668 3.99937M9.66683 11.9994C9.66683 13.1039 8.7714 13.9994 7.66683 13.9994C6.56226 13.9994 5.66683 13.1039 5.66683 11.9994C5.66683 10.8948 6.56226 9.99937 7.66683 9.99937C8.7714 9.99937 9.66683 10.8948 9.66683 11.9994ZM4.3335 6.66603V2.66603M2.3335 4.66603H6.3335"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { MusicNotePlusIcon };
+export default MusicNotePlusIcon;

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type MusicNotePlusIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export default function MusicNotePlusIcon({
+  size = 16,
+  className,
+  ...props
+}: MusicNotePlusIconProps) {
+  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="M9.66683 11.9994V3.72527C9.66683 3.15379 9.66683 2.86805 9.78719 2.69596C9.89229 2.54569 10.0546 2.44535 10.2361 2.41855C10.4438 2.38786 10.6994 2.51564 11.2105 2.77121L13.6668 3.99937M9.66683 11.9994C9.66683 13.1039 8.7714 13.9994 7.66683 13.9994C6.56226 13.9994 5.66683 13.1039 5.66683 11.9994C5.66683 10.8948 6.56226 9.99937 7.66683 9.99937C8.7714 9.99937 9.66683 10.8948 9.66683 11.9994ZM4.3335 6.66603V2.66603M2.3335 4.66603H6.3335"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type Star04IconProps = {
+  size?: number | string;
+  color?: string;
+};
+
+const Star04Icon: React.FC<Star04IconProps> = ({
+  size = 16,
+  color = '#000000',
+}) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <Path
+        d="M7.99992 1.33398L9.34122 4.82137C9.52923 5.31019 9.62323 5.5546 9.76942 5.76019C9.89898 5.9424 10.0582 6.10159 10.2404 6.23115C10.446 6.37734 10.6904 6.47134 11.1792 6.65935L14.6666 8.00065L11.1792 9.34195C10.6904 9.52996 10.446 9.62397 10.2404 9.77015C10.0582 9.89971 9.89898 10.0589 9.76942 10.2411C9.62323 10.4467 9.52923 10.6911 9.34122 11.1799L7.99992 14.6673L6.65861 11.1799C6.47061 10.6911 6.3766 10.4467 6.23042 10.2411C6.10086 10.0589 5.94167 9.89971 5.75946 9.77015C5.55387 9.62397 5.30946 9.52996 4.82064 9.34196L1.33325 8.00065L4.82064 6.65935C5.30946 6.47134 5.55387 6.37734 5.75946 6.23115C5.94166 6.10159 6.10086 5.9424 6.23042 5.76019C6.3766 5.5546 6.47061 5.31019 6.65861 4.82137L7.99992 1.33398Z"
+        fill={color}
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { Star04Icon };
+export default Star04Icon;

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+
+type Star04IconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+  color?: string;
+  title?: string;
+};
+
+const Star04Icon: React.FC<Star04IconProps> = ({
+  size = 16,
+  color = "currentColor",
+  title,
+  className,
+  ...props
+}) => {
+  const ariaProps = title
+    ? { role: "img", "aria-label": title }
+    : { "aria-hidden": true };
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...ariaProps}
+      {...props}
+    >
+      {title ? <title>{title}</title> : null}
+      <path
+        d="M7.99992 1.33398L9.34122 4.82137C9.52923 5.31019 9.62323 5.5546 9.76942 5.76019C9.89898 5.9424 10.0582 6.10159 10.2404 6.23115C10.446 6.37734 10.6904 6.47134 11.1792 6.65935L14.6666 8.00065L11.1792 9.34195C10.6904 9.52996 10.446 9.62397 10.2404 9.77015C10.0582 9.89971 9.89898 10.0589 9.76942 10.2411C9.62323 10.4467 9.52923 10.6911 9.34122 11.1799L7.99992 14.6673L6.65861 11.1799C6.47061 10.6911 6.3766 10.4467 6.23042 10.2411C6.10086 10.0589 5.94167 9.89971 5.75946 9.77015C5.55387 9.62397 5.30946 9.52996 4.82064 9.34196L1.33325 8.00065L4.82064 6.65935C5.30946 6.47134 5.55387 6.37734 5.75946 6.23115C5.94166 6.10159 6.10086 5.9424 6.23042 5.76019C6.3766 5.5546 6.47061 5.31019 6.65861 4.82137L7.99992 1.33398Z"
+        fill={color}
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Star04Icon;

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

@@ -0,0 +1,32 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+type Star05IconProps = {
+  size?: number | string;
+  color?: string;
+};
+
+const Star05Icon: React.FC<Star05IconProps> = ({
+  size = 18,
+  color = '#000000',
+}) => {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <Path
+        d="M9 1.5L8.02388 5.40449C7.8334 6.16639 7.73817 6.54733 7.53981 6.85732C7.36436 7.13151 7.13151 7.36436 6.85732 7.53981C6.54733 7.73817 6.16639 7.8334 5.40449 8.02388L1.5 9L5.40449 9.97612C6.16639 10.1666 6.54733 10.2618 6.85732 10.4602C7.13151 10.6356 7.36436 10.8685 7.53981 11.1427C7.73817 11.4527 7.8334 11.8336 8.02388 12.5955L9 16.5L9.97612 12.5955C10.1666 11.8336 10.2618 11.4527 10.4602 11.1427C10.6356 10.8685 10.8685 10.6356 11.1427 10.4602C11.4527 10.2618 11.8336 10.1666 12.5955 9.97612L16.5 9L12.5955 8.02388C11.8336 7.8334 11.4527 7.73817 11.1427 7.53981C10.8685 7.36436 10.6356 7.13151 10.4602 6.85732C10.2618 6.54733 10.1666 6.16639 9.97612 5.40449L9 1.5Z"
+        stroke={color}
+        strokeWidth="1.67"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
+export { Star05Icon };
+export default Star05Icon;

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

@@ -0,0 +1,43 @@
+import * as React from "react";
+
+type Star05IconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+  color?: string;
+  title?: string;
+};
+
+const Star05Icon: React.FC<Star05IconProps> = ({
+  size = 18,
+  color = "currentColor",
+  title,
+  className,
+  ...props
+}) => {
+  const ariaProps = title
+    ? { role: "img", "aria-label": title }
+    : { "aria-hidden": true };
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...ariaProps}
+      {...props}
+    >
+      {title ? <title>{title}</title> : null}
+      <path
+        d="M9 1.5L8.02388 5.40449C7.8334 6.16639 7.73817 6.54733 7.53981 6.85732C7.36436 7.13151 7.13151 7.36436 6.85732 7.53981C6.54733 7.73817 6.16639 7.8334 5.40449 8.02388L1.5 9L5.40449 9.97612C6.16639 10.1666 6.54733 10.2618 6.85732 10.4602C7.13151 10.6356 7.36436 10.8685 7.53981 11.1427C7.73817 11.4527 7.8334 11.8336 8.02388 12.5955L9 16.5L9.97612 12.5955C10.1666 11.8336 10.2618 11.4527 10.4602 11.1427C10.6356 10.8685 10.8685 10.6356 11.1427 10.4602C11.4527 10.2618 11.8336 10.1666 12.5955 9.97612L16.5 9L12.5955 8.02388C11.8336 7.8334 11.4527 7.73817 11.1427 7.53981C10.8685 7.36436 10.6356 7.13151 10.4602 6.85732C10.2618 6.54733 10.1666 6.16639 9.97612 5.40449L9 1.5Z"
+        stroke={color}
+        strokeWidth="1.67"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Star05Icon;

package/src/icons/general/index.ts

@@ -27,6 +27,7 @@ export { default as LayersThree01Icon } from './LayersThree01Icon';
 export { default as LyricsIcon } from './LyricsIcon';
 export { default as MoonIcon } from './MoonIcon';
 export { default as MusicNoteIcon } from './MusicNoteIcon';
+export { default as MusicNotePlusIcon } from './MusicNotePlusIcon';
 export { default as PinIcon } from './PinIcon';
 export { default as QuestionCircleIcon } from './QuestionCircleIcon';
 export { default as Recording01Icon } from './Recordering01';
@@ -34,6 +35,8 @@ export { default as Recording02Icon } from './Recording02';
 export { Share01Icon } from './Share01Icon';
 export { default as ShareIcon } from './ShareIcon';
 export { default as StarIcon } from './StarIcon';
+export { default as Star04Icon } from './Star04Icon';
+export { default as Star05Icon } from './Star05Icon';
 export { default as Stars01Icon } from './Stars01Icon';
 export { default as Stars02Icon } from './Stars02Icon';
 export { default as Stars04Icon } from './Stars04Icon';

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type AlignLeft01IconProps = {
+  size?: number | string;
+};
+
+const AlignLeft01Icon = ({ size = 16 }: AlignLeft01IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M3 3V21M21 12H7M14 5L7 12L14 19"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { AlignLeft01Icon };
+export default AlignLeft01Icon;

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type AlignLeft01IconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export default function AlignLeft01Icon({
+  size = 16,
+  className,
+  ...props
+}: AlignLeft01IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M3 3V21M21 12H7M14 5L7 12L14 19"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type FlexAlignBottomIconProps = {
+  size?: number | string;
+};
+
+const FlexAlignBottomIcon = ({ size = 16 }: FlexAlignBottomIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M17.5 17.6L6.5 17.6M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { FlexAlignBottomIcon };
+export default FlexAlignBottomIcon;

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

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type FlexAlignBottomIconProps = React.SVGProps<SVGSVGElement> & {
+  size?: number | string;
+};
+
+export default function FlexAlignBottomIcon({
+  size = 16,
+  className,
+  ...props
+}: FlexAlignBottomIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M17.5 17.6L6.5 17.6M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+type FlexAlignLeftIconProps = {
+  size?: number | string;
+};
+
+const FlexAlignLeftIcon = ({ size = 16 }: FlexAlignLeftIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M6.5 17.5L6.5 6.5M7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export { FlexAlignLeftIcon };
+export default FlexAlignLeftIcon;