@transferwise/icons 3.6.0 → 3.8.0

package/build/components/sunglasses.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface SunglassesIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Sunglasses: React.FunctionComponent<SunglassesIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Sunglasses filled /> is now deprecated, please use <SunglassesFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-sunglasses ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'sunglasses-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M2.572 12.429c0 2.31 2.008 3.857 4.317 3.857 2.25 0 4.153-1.468 4.25-3.679.232-.075.532-.141.861-.141.333 0 .636.068.87.144.168 2.07 2.038 3.676 4.24 3.676 2.31 0 4.318-1.766 4.318-3.98v-.343h.061c.206 0 .385-.14.434-.339l.224-.894a.447.447 0 0 0-.434-.556h-.285v-.299c0-.247-.2-.446-.447-.446h-6.335a1.79 1.79 0 0 0-1.733 1.344 4.485 4.485 0 0 0-.913-.096c-.333 0-.641.04-.913.096a1.79 1.79 0 0 0-1.733-1.344H3.02c-.247 0-.447.2-.447.446v.299h-.237a.485.485 0 0 0-.47.603l.205.819a.485.485 0 0 0 .47.367h.032v.466Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/switch.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface SwitchIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Switch: React.FunctionComponent<SwitchIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Switch filled /> is now deprecated, please use <SwitchFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-switch ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'switch-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="m16.629 11.999-1.2-1.2 3.085-3.086H2.572V5.999h15.942L15.43 2.913l1.2-1.2 4.543 4.543a.829.829 0 0 1 0 1.2l-4.543 4.543Zm-9.257-.001 1.2 1.2-3.086 3.086h15.943v1.714H5.486l3.086 3.086-1.2 1.2-4.543-4.543a.829.829 0 0 1 0-1.2l4.543-4.543Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/target.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface TargetIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Target: React.FunctionComponent<TargetIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Target filled /> is now deprecated, please use <TargetFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-target ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'target-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path d="M22.286 5.999V2.57a.86.86 0 0 0-.857-.857H18a.847.847 0 0 0-.771.514l-.3.729C15.386 2.14 13.757 1.713 12 1.713c-5.657 0-10.286 4.628-10.286 10.286 0 5.657 4.629 10.285 10.286 10.285S22.286 17.656 22.286 12c0-1.758-.429-3.386-1.243-4.886l.729-.3c.3-.172.514-.472.514-.814ZM20.57 3.427v2.014l-3.514 1.5 1.5-3.514h2.015Zm0 8.572c0 4.714-3.857 8.571-8.57 8.571-4.715 0-8.572-3.857-8.572-8.571 0-4.715 3.857-8.572 8.571-8.572 1.5 0 2.957.386 4.243 1.114l-1.371 3.172c-.815-.557-1.8-.857-2.872-.857-2.829 0-5.143 2.314-5.143 5.143 0 2.828 2.314 5.143 5.143 5.143 2.829 0 5.143-2.315 5.143-5.143 0-1.072-.3-2.058-.857-2.872l3.171-1.371a8.592 8.592 0 0 1 1.114 4.243Zm-5.142 0A3.439 3.439 0 0 1 12 15.427 3.439 3.439 0 0 1 8.572 12 3.439 3.439 0 0 1 12 8.57c.643 0 1.243.171 1.757.471L11.4 11.4l1.2 1.2 2.357-2.357c.3.514.472 1.114.472 1.757Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/tax.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface TaxIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Tax: React.FunctionComponent<TaxIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Tax filled /> is now deprecated, please use <TaxFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-tax ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'tax-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M1.714 11.999C1.714 6.299 6.3 1.713 12 1.713c5.7 0 10.286 4.586 10.286 10.286 0 5.7-4.586 10.285-10.286 10.285C6.3 22.284 1.714 17.7 1.714 12Zm1.715 0c0 4.714 3.857 8.571 8.571 8.571 4.714 0 8.572-3.857 8.572-8.571 0-4.715-3.858-8.572-8.572-8.572C7.286 3.427 3.43 7.284 3.43 12Zm6.857-3a1.286 1.286 0 1 1-2.572 0 1.286 1.286 0 0 1 2.572 0ZM15 16.284a1.286 1.286 0 1 0 0-2.571 1.286 1.286 0 0 0 0 2.571Zm-7.879-.618 8.576-8.576 1.212 1.212-8.576 8.576-1.212-1.212Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/team.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface TeamIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Team: React.FunctionComponent<TeamIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Team filled /> is now deprecated, please use <TeamFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-team ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'team-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M9.429 5.141c0 .943-.386 1.8-1.029 2.443 1.114.772 1.886 2.1 1.886 3.558H8.572A2.579 2.579 0 0 0 6 8.57a2.579 2.579 0 0 0-2.571 2.572H1.714c0-1.458.772-2.786 1.886-3.558-.643-.6-1.029-1.5-1.029-2.443a3.439 3.439 0 0 1 3.43-3.428A3.439 3.439 0 0 1 9.428 5.14ZM6 3.427a1.72 1.72 0 0 0-1.714 1.714A1.72 1.72 0 0 0 6 6.856 1.72 1.72 0 0 0 7.714 5.14 1.72 1.72 0 0 0 6 3.427Zm9.428 7.715h-1.714c0-1.458.772-2.786 1.886-3.558-.643-.6-1.029-1.5-1.029-2.443A3.439 3.439 0 0 1 18 1.713a3.439 3.439 0 0 1 3.428 3.428c0 .943-.385 1.8-1.028 2.443 1.114.772 1.886 2.1 1.886 3.558H20.57A2.579 2.579 0 0 0 18 8.57a2.58 2.58 0 0 0-2.572 2.572ZM18 3.427a1.72 1.72 0 0 0-1.714 1.714A1.72 1.72 0 0 0 18 6.856a1.72 1.72 0 0 0 1.714-1.715A1.72 1.72 0 0 0 18 3.427ZM8.4 18.725a3.436 3.436 0 0 0 1.029-2.443A3.439 3.439 0 0 0 6 12.854a3.439 3.439 0 0 0-3.429 3.428c0 .943.386 1.843 1.03 2.443-1.115.771-1.887 2.1-1.887 3.557H3.43A2.579 2.579 0 0 1 6 19.711a2.579 2.579 0 0 1 2.572 2.571h1.714c0-1.457-.772-2.786-1.886-3.557Zm-4.114-2.443A1.72 1.72 0 0 1 6 14.568a1.72 1.72 0 0 1 1.714 1.714A1.72 1.72 0 0 1 6 17.996a1.72 1.72 0 0 1-1.714-1.714Zm17.143 0c0 .943-.386 1.8-1.029 2.443 1.114.771 1.886 2.1 1.886 3.557H20.57a2.579 2.579 0 0 0-2.57-2.571 2.579 2.579 0 0 0-2.572 2.571h-1.715c0-1.457.772-2.786 1.886-3.557-.643-.6-1.028-1.5-1.028-2.443A3.439 3.439 0 0 1 18 12.854a3.439 3.439 0 0 1 3.429 3.428ZM18 14.568a1.72 1.72 0 0 0-1.714 1.714A1.72 1.72 0 0 0 18 17.996a1.72 1.72 0 0 0 1.714-1.714A1.72 1.72 0 0 0 18 14.568Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/theme.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface ThemeIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Theme: React.FunctionComponent<ThemeIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Theme filled /> is now deprecated, please use <ThemeFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-theme ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'theme-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M12 20.57V3.427a8.571 8.571 0 1 0 0 17.143Zm0-18.857c2.815 0 5.366 1.13 7.223 2.963l.05.05.05.05a10.252 10.252 0 0 1 2.963 7.182v.081a10.253 10.253 0 0 1-2.969 7.188l-.044.045-.044.044A10.253 10.253 0 0 1 12 22.284C6.32 22.284 1.714 17.68 1.714 12 1.714 6.318 6.32 1.713 12 1.713Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/transfer.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface TransferIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Transfer: React.FunctionComponent<TransferIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Transfer filled /> is now deprecated, please use <TransferFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-transfer ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'transfer-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M14.314 3v6H12.6V5.057l-8.828 8.828-1.2-1.2L11.4 3.857H7.457V2.143h6a.86.86 0 0 1 .857.857Zm0 6.857h6a.86.86 0 0 1 .857.858v6h-1.714v-3.943L10.628 21.6l-1.2-1.2 8.829-8.828h-3.943V9.857Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/transport.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface TransportIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Transport: React.FunctionComponent<TransportIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Transport filled /> is now deprecated, please use <TransportFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-transport ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'transport-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M6.214 1.715h11.572c1.543 0 2.786 1.157 2.786 2.571v13.715a.86.86 0 0 1-.858.857v2.571a.86.86 0 0 1-.857.857h-2.571a.86.86 0 0 1-.857-.857v-2.571H8.572v2.571a.86.86 0 0 1-.858.857H5.143a.86.86 0 0 1-.857-.857v-2.571A.86.86 0 0 1 3.429 18V4.286c0-1.414 1.243-2.571 2.785-2.571Zm11.572 1.714H6.214c-.6 0-1.071.386-1.071.857v1.715h13.714V4.286c0-.471-.471-.857-1.071-.857ZM5.143 12.001h13.714V7.715H5.143V12ZM6 20.572h.857v-1.714H6v1.714Zm-.857-6.857v3.428h13.714v-3.428H5.143Zm12 6.857H18v-1.714h-.857v1.714ZM6.857 16.285a.857.857 0 1 0 0-1.715.857.857 0 0 0 0 1.715Zm10.286 0a.857.857 0 1 0 0-1.715.857.857 0 0 0 0 1.715Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/travel.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface TravelIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Travel: React.FunctionComponent<TravelIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Travel filled /> is now deprecated, please use <TravelFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-travel ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'travel-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M14.567 1.713c.476 0 .862.386.862.861v4.282h.857a2.571 2.571 0 0 1 2.571 2.571v9A2.571 2.571 0 0 1 16.286 21h-.429v.428a.857.857 0 1 1-1.714 0V21H9.857v.428a.857.857 0 1 1-1.714 0V21h-.429a2.571 2.571 0 0 1-2.571-2.572v-9a2.571 2.571 0 0 1 2.571-2.571h.858V2.574c0-.475.385-.861.861-.861h5.134Zm0 6.857H16.286c.473 0 .857.384.857.857v1.286H6.857V9.427c0-.473.384-.857.857-.857h6.853Zm-7.71 3.857v6c0 .474.384.857.857.857h8.572a.857.857 0 0 0 .857-.857v-6H6.857Zm6.857-9v3.429h-3.428V3.427h3.428Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/trustly.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface TrustlyIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Trustly: React.FunctionComponent<TrustlyIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Trustly filled /> is now deprecated, please use <TrustlyFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-trustly ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'trustly-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path d="M1.714 11.057h7.2V5.314l5.743 5.743-5.743 5.742v2.915H15.9v-8.657h6.386V4.285H1.714v6.772Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/twitter.tsx

@@ -0,0 +1,48 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface TwitterIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Twitter: React.FunctionComponent<TwitterIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Twitter filled /> is now deprecated, please use <TwitterFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-twitter ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'twitter-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path d="M20.186 7.995v.557c0 5.572-4.243 12-12 12-2.315 0-4.543-.643-6.472-1.886.343.043.686.043.986.043a8.585 8.585 0 0 0 5.229-1.8 4.238 4.238 0 0 1-3.943-2.914 3.992 3.992 0 0 0 1.885-.086c-1.971-.385-3.385-2.143-3.385-4.157V9.71c.6.343 1.243.515 1.928.515C2.571 8.98 1.971 6.538 3.13 4.609a11.937 11.937 0 0 0 8.7 4.415c-.343-1.458.128-3 1.2-4.029 1.714-1.586 4.37-1.5 5.957.171a7.996 7.996 0 0 0 2.7-1.028c-.3.986-.986 1.8-1.843 2.314.857-.086 1.671-.343 2.443-.643-.558.857-1.286 1.586-2.1 2.186Z" />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/two-step.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface TwoStepIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const TwoStep: React.FunctionComponent<TwoStepIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<TwoStep filled /> is now deprecated, please use <TwoStepFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-two-step ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'two-step-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M9 4.284a2.571 2.571 0 0 1 2.571-2.571h6.858A2.571 2.571 0 0 1 21 4.284v15.429a2.571 2.571 0 0 1-2.571 2.571h-6.764a2.649 2.649 0 0 1-.094.002h-6A2.571 2.571 0 0 1 3 19.715v-6.853c0-.476.386-.862.861-.862h1.282v-1.285A3.429 3.429 0 0 1 9 7.313V4.284Zm1.714 3.754A3.429 3.429 0 0 1 12 10.714V12h1.281c.476 0 .862.386.862.862v6.853c0 .3-.052.587-.146.855h4.432a.857.857 0 0 0 .857-.857V4.284a.857.857 0 0 0-.857-.857h-1.83a.857.857 0 0 1-.742 1.286h-1.714a.857.857 0 0 1-.743-1.286h-1.829a.857.857 0 0 0-.857.857v3.754Zm.911 12.532a.857.857 0 0 0 .804-.855v-6H4.714v6c0 .473.384.857.857.857h5.143v-.002h.911ZM7.36 9.502a1.714 1.714 0 0 1 2.927 1.213V12H6.857v-1.285c0-.455.18-.891.502-1.213Zm.355 6.355H9.43v2.572H7.714v-2.572Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};

package/build/components/unlock.tsx

@@ -0,0 +1,52 @@
+// This is an automatically generated file, please don't edit it
+import { IconSize } from '../types';
+
+export interface UnlockIconProps {
+  size?: IconSize;
+  filled?: boolean;
+  className?: string;
+  title?: string;
+  ['data-testid']?: string;
+}
+
+export const Unlock: React.FunctionComponent<UnlockIconProps> = ({
+  size = 16,
+  className = undefined,
+  title = undefined,
+  filled = undefined,
+  ...restProps
+}) => {
+  if (filled) {
+    console.warn(
+      '<Unlock filled /> is now deprecated, please use <UnlockFill /> or refer to https://transferwise.github.io/icons/ for more info.',
+    );
+  }
+
+  return (
+    <span
+      className={`tw-icon tw-icon-unlock ${className ? className : ''}`}
+      aria-hidden={!title ? 'true' : undefined}
+      role={!title ? 'presentation' : undefined}
+      data-testid={restProps['data-testid'] || 'unlock-icon'}
+    >
+      <svg
+        width={String(size)}
+        height={String(size)}
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        {(Number(size) === 16 || Number(size) === 24 || Number(size) === 32) && (
+          <>
+            <path
+              fillRule="evenodd"
+              d="M9.814 8.838h9.9a.86.86 0 0 1 .857.857v10.286A2.579 2.579 0 0 1 18 22.552H6a2.579 2.579 0 0 1-2.572-2.571V9.695a.86.86 0 0 1 .858-.857H7.8a5.053 5.053 0 0 1-.386-1.972c0-1.371.514-2.657 1.5-3.642a5.147 5.147 0 0 1 7.286 0l-1.2 1.2a3.44 3.44 0 0 0-4.843 0 3.546 3.546 0 0 0-.986 2.442c0 .729.257 1.415.643 1.972Zm8.186 12a.86.86 0 0 0 .857-.857v-9.429H5.143v9.429a.86.86 0 0 0 .857.857h12Zm-6.857-1.715v-2.829c-.515-.257-.858-.814-.858-1.457A1.72 1.72 0 0 1 12 13.123a1.72 1.72 0 0 1 1.714 1.714c0 .6-.343 1.158-.857 1.457v2.829h-1.714Z"
+              clipRule="evenodd"
+            />
+          </>
+        )}
+      </svg>
+      {title && <span className="sr-only">{title}</span>}
+    </span>
+  );
+};