@transferwise/icons 3.10.0 → 3.11.0-beta.1

package/lib/index.js

@@ -14,7 +14,7 @@ const AlertCircleFill = ({
     console.warn('<AlertCircleFill filled /> is now deprecated, please use <AlertCircleFillFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-alert-circle-fill ${className ? className : ''}`,
+    className: `tw-icon tw-icon-alert-circle-fill tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'alert-circle-fill-icon',
@@ -50,7 +50,7 @@ const AlertCircle = ({
     console.warn('<AlertCircle filled /> is now deprecated, please use <AlertCircleFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-alert-circle ${className ? className : ''}`,
+    className: `tw-icon tw-icon-alert-circle tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'alert-circle-icon',
@@ -86,7 +86,7 @@ const Alert = ({
     console.warn('<Alert filled /> is now deprecated, please use <AlertFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-alert ${className ? className : ''}`,
+    className: `tw-icon tw-icon-alert tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'alert-icon',
@@ -124,7 +124,7 @@ const ArrowDiagonalDown = ({
     console.warn('<ArrowDiagonalDown filled /> is now deprecated, please use <ArrowDiagonalDownFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-arrow-diagonal-down ${className ? className : ''}`,
+    className: `tw-icon tw-icon-arrow-diagonal-down tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'arrow-diagonal-down-icon',
@@ -159,7 +159,7 @@ const ArrowDiagonalUp = ({
     console.warn('<ArrowDiagonalUp filled /> is now deprecated, please use <ArrowDiagonalUpFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-arrow-diagonal-up ${className ? className : ''}`,
+    className: `tw-icon tw-icon-arrow-diagonal-up tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'arrow-diagonal-up-icon',
@@ -194,7 +194,7 @@ const ArrowDown = ({
     console.warn('<ArrowDown filled /> is now deprecated, please use <ArrowDownFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-arrow-down ${className ? className : ''}`,
+    className: `tw-icon tw-icon-arrow-down tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'arrow-down-icon',
@@ -228,7 +228,7 @@ const ArrowLeft = ({
     console.warn('<ArrowLeft filled /> is now deprecated, please use <ArrowLeftFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-arrow-left ${className ? className : ''}`,
+    className: `tw-icon tw-icon-arrow-left tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'arrow-left-icon',
@@ -262,7 +262,7 @@ const ArrowRight = ({
     console.warn('<ArrowRight filled /> is now deprecated, please use <ArrowRightFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-arrow-right ${className ? className : ''}`,
+    className: `tw-icon tw-icon-arrow-right tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'arrow-right-icon',
@@ -296,7 +296,7 @@ const ArrowUp = ({
     console.warn('<ArrowUp filled /> is now deprecated, please use <ArrowUpFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-arrow-up ${className ? className : ''}`,
+    className: `tw-icon tw-icon-arrow-up tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'arrow-up-icon',
@@ -330,7 +330,7 @@ const AutoConvert = ({
     console.warn('<AutoConvert filled /> is now deprecated, please use <AutoConvertFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-auto-convert ${className ? className : ''}`,
+    className: `tw-icon tw-icon-auto-convert tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'auto-convert-icon',
@@ -366,7 +366,7 @@ const BankStrikethrough = ({
     console.warn('<BankStrikethrough filled /> is now deprecated, please use <BankStrikethroughFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-bank-strikethrough ${className ? className : ''}`,
+    className: `tw-icon tw-icon-bank-strikethrough tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'bank-strikethrough-icon',
@@ -403,7 +403,7 @@ const BankTransfer = ({
     console.warn('<BankTransfer filled /> is now deprecated, please use <BankTransferFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-bank-transfer ${className ? className : ''}`,
+    className: `tw-icon tw-icon-bank-transfer tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'bank-transfer-icon',
@@ -439,7 +439,7 @@ const Ach = ({
     console.warn('<Ach filled /> is now deprecated, please use <AchFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-ach ${className ? className : ''}`,
+    className: `tw-icon tw-icon-ach tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'ach-icon',
@@ -475,7 +475,7 @@ const Bank = ({
     console.warn('<Bank filled /> is now deprecated, please use <BankFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-bank ${className ? className : ''}`,
+    className: `tw-icon tw-icon-bank tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'bank-icon',
@@ -511,7 +511,7 @@ const BarChart = ({
     console.warn('<BarChart filled /> is now deprecated, please use <BarChartFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-bar-chart ${className ? className : ''}`,
+    className: `tw-icon tw-icon-bar-chart tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'bar-chart-icon',
@@ -545,7 +545,7 @@ const Balance = ({
     console.warn('<Balance filled /> is now deprecated, please use <BalanceFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-balance ${className ? className : ''}`,
+    className: `tw-icon tw-icon-balance tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'balance-icon',
@@ -579,7 +579,7 @@ const Investments = ({
     console.warn('<Investments filled /> is now deprecated, please use <InvestmentsFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-investments ${className ? className : ''}`,
+    className: `tw-icon tw-icon-investments tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'investments-icon',
@@ -613,7 +613,7 @@ const Barcode = ({
     console.warn('<Barcode filled /> is now deprecated, please use <BarcodeFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-barcode ${className ? className : ''}`,
+    className: `tw-icon tw-icon-barcode tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'barcode-icon',
@@ -649,7 +649,7 @@ const Batch = ({
     console.warn('<Batch filled /> is now deprecated, please use <BatchFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-batch ${className ? className : ''}`,
+    className: `tw-icon tw-icon-batch tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'batch-icon',
@@ -683,7 +683,7 @@ const Beach = ({
     console.warn('<Beach filled /> is now deprecated, please use <BeachFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-beach ${className ? className : ''}`,
+    className: `tw-icon tw-icon-beach tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'beach-icon',
@@ -717,7 +717,7 @@ const Holidays = ({
     console.warn('<Holidays filled /> is now deprecated, please use <HolidaysFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-holidays ${className ? className : ''}`,
+    className: `tw-icon tw-icon-holidays tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'holidays-icon',
@@ -751,7 +751,7 @@ const BillSplit = ({
     console.warn('<BillSplit filled /> is now deprecated, please use <BillSplitFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-bill-split ${className ? className : ''}`,
+    className: `tw-icon tw-icon-bill-split tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'bill-split-icon',
@@ -787,7 +787,7 @@ const Bills = ({
     console.warn('<Bills filled /> is now deprecated, please use <BillsFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-bills ${className ? className : ''}`,
+    className: `tw-icon tw-icon-bills tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'bills-icon',
@@ -823,7 +823,7 @@ const Bin = ({
     console.warn('<Bin filled /> is now deprecated, please use <BinFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-bin ${className ? className : ''}`,
+    className: `tw-icon tw-icon-bin tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'bin-icon',
@@ -857,7 +857,7 @@ const Book = ({
     console.warn('<Book filled /> is now deprecated, please use <BookFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-book ${className ? className : ''}`,
+    className: `tw-icon tw-icon-book tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'book-icon',
@@ -891,7 +891,7 @@ const Boxes = ({
     console.warn('<Boxes filled /> is now deprecated, please use <BoxesFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-boxes ${className ? className : ''}`,
+    className: `tw-icon tw-icon-boxes tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'boxes-icon',
@@ -927,7 +927,7 @@ const CostOfGoodsSold = ({
     console.warn('<CostOfGoodsSold filled /> is now deprecated, please use <CostOfGoodsSoldFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-cost-of-goods-sold ${className ? className : ''}`,
+    className: `tw-icon tw-icon-cost-of-goods-sold tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'cost-of-goods-sold-icon',
@@ -963,7 +963,7 @@ const Briefcase = ({
     console.warn('<Briefcase filled /> is now deprecated, please use <BriefcaseFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-briefcase ${className ? className : ''}`,
+    className: `tw-icon tw-icon-briefcase tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'briefcase-icon',
@@ -997,7 +997,7 @@ const Building = ({
     console.warn('<Building filled /> is now deprecated, please use <BuildingFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-building ${className ? className : ''}`,
+    className: `tw-icon tw-icon-building tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'building-icon',
@@ -1033,7 +1033,7 @@ const Rent = ({
     console.warn('<Rent filled /> is now deprecated, please use <RentFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-rent ${className ? className : ''}`,
+    className: `tw-icon tw-icon-rent tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'rent-icon',
@@ -1069,7 +1069,7 @@ const Bulb = ({
     console.warn('<Bulb filled /> is now deprecated, please use <BulbFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-bulb ${className ? className : ''}`,
+    className: `tw-icon tw-icon-bulb tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'bulb-icon',
@@ -1105,7 +1105,7 @@ const Insights = ({
     console.warn('<Insights filled /> is now deprecated, please use <InsightsFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-insights ${className ? className : ''}`,
+    className: `tw-icon tw-icon-insights tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'insights-icon',
@@ -1141,7 +1141,7 @@ const CalendarCheck = ({
     console.warn('<CalendarCheck filled /> is now deprecated, please use <CalendarCheckFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-calendar-check ${className ? className : ''}`,
+    className: `tw-icon tw-icon-calendar-check tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'calendar-check-icon',
@@ -1177,7 +1177,7 @@ const CalendarSuccess = ({
     console.warn('<CalendarSuccess filled /> is now deprecated, please use <CalendarSuccessFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-calendar-success ${className ? className : ''}`,
+    className: `tw-icon tw-icon-calendar-success tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'calendar-success-icon',
@@ -1213,7 +1213,7 @@ const Calendar = ({
     console.warn('<Calendar filled /> is now deprecated, please use <CalendarFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-calendar ${className ? className : ''}`,
+    className: `tw-icon tw-icon-calendar tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'calendar-icon',
@@ -1249,7 +1249,7 @@ const Camera = ({
     console.warn('<Camera filled /> is now deprecated, please use <CameraFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-camera ${className ? className : ''}`,
+    className: `tw-icon tw-icon-camera tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'camera-icon',
@@ -1285,7 +1285,7 @@ const Car = ({
     console.warn('<Car filled /> is now deprecated, please use <CarFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-car ${className ? className : ''}`,
+    className: `tw-icon tw-icon-car tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'car-icon',
@@ -1329,7 +1329,7 @@ const DriversLicense = ({
     console.warn('<DriversLicense filled /> is now deprecated, please use <DriversLicenseFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-drivers-license ${className ? className : ''}`,
+    className: `tw-icon tw-icon-drivers-license tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'drivers-license-icon',
@@ -1373,7 +1373,7 @@ const CardCvc = ({
     console.warn('<CardCvc filled /> is now deprecated, please use <CardCvcFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-card-cvc ${className ? className : ''}`,
+    className: `tw-icon tw-icon-card-cvc tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'card-cvc-icon',
@@ -1409,7 +1409,7 @@ const CardDetail = ({
     console.warn('<CardDetail filled /> is now deprecated, please use <CardDetailFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-card-detail ${className ? className : ''}`,
+    className: `tw-icon tw-icon-card-detail tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'card-detail-icon',
@@ -1445,7 +1445,7 @@ const CardNumber = ({
     console.warn('<CardNumber filled /> is now deprecated, please use <CardNumberFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-card-number ${className ? className : ''}`,
+    className: `tw-icon tw-icon-card-number tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'card-number-icon',
@@ -1481,7 +1481,7 @@ const CardWise = ({
     console.warn('<CardWise filled /> is now deprecated, please use <CardWiseFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-card-wise ${className ? className : ''}`,
+    className: `tw-icon tw-icon-card-wise tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'card-wise-icon',
@@ -1517,7 +1517,7 @@ const CardTransferwise = ({
     console.warn('<CardTransferwise filled /> is now deprecated, please use <CardTransferwiseFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-card-transferwise ${className ? className : ''}`,
+    className: `tw-icon tw-icon-card-transferwise tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'card-transferwise-icon',
@@ -1553,7 +1553,7 @@ const Card = ({
     console.warn('<Card filled /> is now deprecated, please use <CardFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-card ${className ? className : ''}`,
+    className: `tw-icon tw-icon-card tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'card-icon',
@@ -1589,7 +1589,7 @@ const CashApp = ({
     console.warn('<CashApp filled /> is now deprecated, please use <CashAppFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-cash-app ${className ? className : ''}`,
+    className: `tw-icon tw-icon-cash-app tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'cash-app-icon',
@@ -1623,7 +1623,7 @@ const CashRegister = ({
     console.warn('<CashRegister filled /> is now deprecated, please use <CashRegisterFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-cash-register ${className ? className : ''}`,
+    className: `tw-icon tw-icon-cash-register tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'cash-register-icon',
@@ -1659,7 +1659,7 @@ const SalesAndRoyalties = ({
     console.warn('<SalesAndRoyalties filled /> is now deprecated, please use <SalesAndRoyaltiesFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-sales-and-royalties ${className ? className : ''}`,
+    className: `tw-icon tw-icon-sales-and-royalties tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'sales-and-royalties-icon',
@@ -1695,7 +1695,7 @@ const Charity = ({
     console.warn('<Charity filled /> is now deprecated, please use <CharityFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-charity ${className ? className : ''}`,
+    className: `tw-icon tw-icon-charity tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'charity-icon',
@@ -1731,7 +1731,7 @@ const CheckCircleFill = ({
     console.warn('<CheckCircleFill filled /> is now deprecated, please use <CheckCircleFillFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-check-circle-fill ${className ? className : ''}`,
+    className: `tw-icon tw-icon-check-circle-fill tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'check-circle-fill-icon',
@@ -1767,7 +1767,7 @@ const CheckCircle = ({
     console.warn('<CheckCircle filled /> is now deprecated, please use <CheckCircleFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-check-circle ${className ? className : ''}`,
+    className: `tw-icon tw-icon-check-circle tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'check-circle-icon',
@@ -1803,7 +1803,7 @@ const Check = ({
     console.warn('<Check filled /> is now deprecated, please use <CheckFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-check ${className ? className : ''}`,
+    className: `tw-icon tw-icon-check tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'check-icon',
@@ -1837,7 +1837,7 @@ const Verified = ({
     console.warn('<Verified filled /> is now deprecated, please use <VerifiedFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-verified ${className ? className : ''}`,
+    className: `tw-icon tw-icon-verified tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'verified-icon',
@@ -1871,7 +1871,7 @@ const ChevronDown = ({
     console.warn('<ChevronDown filled /> is now deprecated, please use <ChevronDownFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-chevron-down ${className ? className : ''}`,
+    className: `tw-icon tw-icon-chevron-down tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'chevron-down-icon',
@@ -1905,7 +1905,7 @@ const ChevronLeft = ({
     console.warn('<ChevronLeft filled /> is now deprecated, please use <ChevronLeftFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-chevron-left ${className ? className : ''}`,
+    className: `tw-icon tw-icon-chevron-left tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'chevron-left-icon',
@@ -1939,7 +1939,7 @@ const ChevronRight = ({
     console.warn('<ChevronRight filled /> is now deprecated, please use <ChevronRightFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-chevron-right ${className ? className : ''}`,
+    className: `tw-icon tw-icon-chevron-right tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'chevron-right-icon',
@@ -1973,7 +1973,7 @@ const ChevronUp = ({
     console.warn('<ChevronUp filled /> is now deprecated, please use <ChevronUpFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-chevron-up ${className ? className : ''}`,
+    className: `tw-icon tw-icon-chevron-up tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'chevron-up-icon',
@@ -2007,7 +2007,7 @@ const Chip = ({
     console.warn('<Chip filled /> is now deprecated, please use <ChipFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-chip ${className ? className : ''}`,
+    className: `tw-icon tw-icon-chip tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'chip-icon',
@@ -2043,7 +2043,7 @@ const ChipPin = ({
     console.warn('<ChipPin filled /> is now deprecated, please use <ChipPinFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-chip-pin ${className ? className : ''}`,
+    className: `tw-icon tw-icon-chip-pin tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'chip-pin-icon',
@@ -2079,7 +2079,7 @@ const ClickToPay = ({
     console.warn('<ClickToPay filled /> is now deprecated, please use <ClickToPayFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-click-to-pay ${className ? className : ''}`,
+    className: `tw-icon tw-icon-click-to-pay tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'click-to-pay-icon',
@@ -2113,7 +2113,7 @@ const ClockBorderless = ({
     console.warn('<ClockBorderless filled /> is now deprecated, please use <ClockBorderlessFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-clock-borderless ${className ? className : ''}`,
+    className: `tw-icon tw-icon-clock-borderless tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'clock-borderless-icon',
@@ -2149,7 +2149,7 @@ const ClockFill = ({
     console.warn('<ClockFill filled /> is now deprecated, please use <ClockFillFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-clock-fill ${className ? className : ''}`,
+    className: `tw-icon tw-icon-clock-fill tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'clock-fill-icon',
@@ -2185,7 +2185,7 @@ const Clock = ({
     console.warn('<Clock filled /> is now deprecated, please use <ClockFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-clock ${className ? className : ''}`,
+    className: `tw-icon tw-icon-clock tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'clock-icon',
@@ -2221,7 +2221,7 @@ const PendingCircle = ({
     console.warn('<PendingCircle filled /> is now deprecated, please use <PendingCircleFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-pending-circle ${className ? className : ''}`,
+    className: `tw-icon tw-icon-pending-circle tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'pending-circle-icon',
@@ -2257,7 +2257,7 @@ const Cog = ({
     console.warn('<Cog filled /> is now deprecated, please use <CogFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-cog ${className ? className : ''}`,
+    className: `tw-icon tw-icon-cog tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'cog-icon',
@@ -2293,7 +2293,7 @@ const Settings = ({
     console.warn('<Settings filled /> is now deprecated, please use <SettingsFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-settings ${className ? className : ''}`,
+    className: `tw-icon tw-icon-settings tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'settings-icon',
@@ -2329,7 +2329,7 @@ const Coins = ({
     console.warn('<Coins filled /> is now deprecated, please use <CoinsFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-coins ${className ? className : ''}`,
+    className: `tw-icon tw-icon-coins tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'coins-icon',
@@ -2365,7 +2365,7 @@ const Collapse = ({
     console.warn('<Collapse filled /> is now deprecated, please use <CollapseFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-collapse ${className ? className : ''}`,
+    className: `tw-icon tw-icon-collapse tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'collapse-icon',
@@ -2399,7 +2399,7 @@ const Confetti = ({
     console.warn('<Confetti filled /> is now deprecated, please use <ConfettiFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-confetti ${className ? className : ''}`,
+    className: `tw-icon tw-icon-confetti tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'confetti-icon',
@@ -2435,7 +2435,7 @@ const Contactless = ({
     console.warn('<Contactless filled /> is now deprecated, please use <ContactlessFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-contactless ${className ? className : ''}`,
+    className: `tw-icon tw-icon-contactless tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'contactless-icon',
@@ -2471,7 +2471,7 @@ const Convert = ({
     console.warn('<Convert filled /> is now deprecated, please use <ConvertFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-convert ${className ? className : ''}`,
+    className: `tw-icon tw-icon-convert tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'convert-icon',
@@ -2505,7 +2505,7 @@ const CrossCircleFill = ({
     console.warn('<CrossCircleFill filled /> is now deprecated, please use <CrossCircleFillFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-cross-circle-fill ${className ? className : ''}`,
+    className: `tw-icon tw-icon-cross-circle-fill tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'cross-circle-fill-icon',
@@ -2541,7 +2541,7 @@ const CrossCircle = ({
     console.warn('<CrossCircle filled /> is now deprecated, please use <CrossCircleFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-cross-circle ${className ? className : ''}`,
+    className: `tw-icon tw-icon-cross-circle tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'cross-circle-icon',
@@ -2577,7 +2577,7 @@ const Cross = ({
     console.warn('<Cross filled /> is now deprecated, please use <CrossFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-cross ${className ? className : ''}`,
+    className: `tw-icon tw-icon-cross tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'cross-icon',
@@ -2611,7 +2611,7 @@ const CrystalBall = ({
     console.warn('<CrystalBall filled /> is now deprecated, please use <CrystalBallFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-crystal-ball ${className ? className : ''}`,
+    className: `tw-icon tw-icon-crystal-ball tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'crystal-ball-icon',
@@ -2647,7 +2647,7 @@ const Defrost = ({
     console.warn('<Defrost filled /> is now deprecated, please use <DefrostFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-defrost ${className ? className : ''}`,
+    className: `tw-icon tw-icon-defrost tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'defrost-icon',
@@ -2683,7 +2683,7 @@ const Delivery = ({
     console.warn('<Delivery filled /> is now deprecated, please use <DeliveryFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-delivery ${className ? className : ''}`,
+    className: `tw-icon tw-icon-delivery tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'delivery-icon',
@@ -2717,7 +2717,7 @@ const Dial = ({
     console.warn('<Dial filled /> is now deprecated, please use <DialFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-dial ${className ? className : ''}`,
+    className: `tw-icon tw-icon-dial tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'dial-icon',
@@ -2753,7 +2753,7 @@ const PinCode = ({
     console.warn('<PinCode filled /> is now deprecated, please use <PinCodeFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-pin-code ${className ? className : ''}`,
+    className: `tw-icon tw-icon-pin-code tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'pin-code-icon',
@@ -2789,7 +2789,7 @@ const DirectDebits = ({
     console.warn('<DirectDebits filled /> is now deprecated, please use <DirectDebitsFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-direct-debits ${className ? className : ''}`,
+    className: `tw-icon tw-icon-direct-debits tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'direct-debits-icon',
@@ -2825,7 +2825,7 @@ const DiscoBall = ({
     console.warn('<DiscoBall filled /> is now deprecated, please use <DiscoBallFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-disco-ball ${className ? className : ''}`,
+    className: `tw-icon tw-icon-disco-ball tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'disco-ball-icon',
@@ -2865,7 +2865,7 @@ const Document = ({
     console.warn('<Document filled /> is now deprecated, please use <DocumentFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-document ${className ? className : ''}`,
+    className: `tw-icon tw-icon-document tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'document-icon',
@@ -2899,7 +2899,7 @@ const Documents = ({
     console.warn('<Documents filled /> is now deprecated, please use <DocumentsFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-documents ${className ? className : ''}`,
+    className: `tw-icon tw-icon-documents tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'documents-icon',
@@ -2935,7 +2935,7 @@ const Download = ({
     console.warn('<Download filled /> is now deprecated, please use <DownloadFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-download ${className ? className : ''}`,
+    className: `tw-icon tw-icon-download tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'download-icon',
@@ -2971,7 +2971,7 @@ const EatingOut = ({
     console.warn('<EatingOut filled /> is now deprecated, please use <EatingOutFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-eating-out ${className ? className : ''}`,
+    className: `tw-icon tw-icon-eating-out tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'eating-out-icon',
@@ -3007,7 +3007,7 @@ const Edit = ({
     console.warn('<Edit filled /> is now deprecated, please use <EditFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-edit ${className ? className : ''}`,
+    className: `tw-icon tw-icon-edit tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'edit-icon',
@@ -3043,7 +3043,7 @@ const EmailAndMobile = ({
     console.warn('<EmailAndMobile filled /> is now deprecated, please use <EmailAndMobileFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-email-and-mobile ${className ? className : ''}`,
+    className: `tw-icon tw-icon-email-and-mobile tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'email-and-mobile-icon',
@@ -3079,7 +3079,7 @@ const EmailAndPhone = ({
     console.warn('<EmailAndPhone filled /> is now deprecated, please use <EmailAndPhoneFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-email-and-phone ${className ? className : ''}`,
+    className: `tw-icon tw-icon-email-and-phone tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'email-and-phone-icon',
@@ -3115,7 +3115,7 @@ const Email = ({
     console.warn('<Email filled /> is now deprecated, please use <EmailFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-email ${className ? className : ''}`,
+    className: `tw-icon tw-icon-email tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'email-icon',
@@ -3149,7 +3149,7 @@ const Entertainment = ({
     console.warn('<Entertainment filled /> is now deprecated, please use <EntertainmentFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-entertainment ${className ? className : ''}`,
+    className: `tw-icon tw-icon-entertainment tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'entertainment-icon',
@@ -3185,7 +3185,7 @@ const Expand = ({
     console.warn('<Expand filled /> is now deprecated, please use <ExpandFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-expand ${className ? className : ''}`,
+    className: `tw-icon tw-icon-expand tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'expand-icon',
@@ -3221,7 +3221,7 @@ const EyeShut = ({
     console.warn('<EyeShut filled /> is now deprecated, please use <EyeShutFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-eye-shut ${className ? className : ''}`,
+    className: `tw-icon tw-icon-eye-shut tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'eye-shut-icon',
@@ -3255,7 +3255,7 @@ const Eye = ({
     console.warn('<Eye filled /> is now deprecated, please use <EyeFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-eye ${className ? className : ''}`,
+    className: `tw-icon tw-icon-eye tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'eye-icon',
@@ -3291,7 +3291,7 @@ const FaceId = ({
     console.warn('<FaceId filled /> is now deprecated, please use <FaceIdFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-face-id ${className ? className : ''}`,
+    className: `tw-icon tw-icon-face-id tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'face-id-icon',
@@ -3327,7 +3327,7 @@ const Facebook = ({
     console.warn('<Facebook filled /> is now deprecated, please use <FacebookFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-facebook ${className ? className : ''}`,
+    className: `tw-icon tw-icon-facebook tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'facebook-icon',
@@ -3361,7 +3361,7 @@ const FacebookSquare = ({
     console.warn('<FacebookSquare filled /> is now deprecated, please use <FacebookSquareFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-facebook-square ${className ? className : ''}`,
+    className: `tw-icon tw-icon-facebook-square tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'facebook-square-icon',
@@ -3395,7 +3395,7 @@ const FastFlag = ({
     console.warn('<FastFlag filled /> is now deprecated, please use <FastFlagFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-fast-flag ${className ? className : ''}`,
+    className: `tw-icon tw-icon-fast-flag tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'fast-flag-icon',
@@ -3429,7 +3429,7 @@ const Fingerprint = ({
     console.warn('<Fingerprint filled /> is now deprecated, please use <FingerprintFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-fingerprint ${className ? className : ''}`,
+    className: `tw-icon tw-icon-fingerprint tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'fingerprint-icon',
@@ -3465,7 +3465,7 @@ const Fpx = ({
     console.warn('<Fpx filled /> is now deprecated, please use <FpxFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-fpx ${className ? className : ''}`,
+    className: `tw-icon tw-icon-fpx tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'fpx-icon',
@@ -3501,7 +3501,7 @@ const Freeze = ({
     console.warn('<Freeze filled /> is now deprecated, please use <FreezeFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-freeze ${className ? className : ''}`,
+    className: `tw-icon tw-icon-freeze tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'freeze-icon',
@@ -3535,7 +3535,7 @@ const Gambling = ({
     console.warn('<Gambling filled /> is now deprecated, please use <GamblingFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-gambling ${className ? className : ''}`,
+    className: `tw-icon tw-icon-gambling tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'gambling-icon',
@@ -3571,7 +3571,7 @@ const GeneralFill = ({
     console.warn('<GeneralFill filled /> is now deprecated, please use <GeneralFillFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-general-fill ${className ? className : ''}`,
+    className: `tw-icon tw-icon-general-fill tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'general-fill-icon',
@@ -3607,7 +3607,7 @@ const GeneralFilled = ({
     console.warn('<GeneralFilled filled /> is now deprecated, please use <GeneralFilledFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-general-filled ${className ? className : ''}`,
+    className: `tw-icon tw-icon-general-filled tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'general-filled-icon',
@@ -3643,7 +3643,7 @@ const General = ({
     console.warn('<General filled /> is now deprecated, please use <GeneralFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-general ${className ? className : ''}`,
+    className: `tw-icon tw-icon-general tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'general-icon',
@@ -3679,7 +3679,7 @@ const GiftBox = ({
     console.warn('<GiftBox filled /> is now deprecated, please use <GiftBoxFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-gift-box ${className ? className : ''}`,
+    className: `tw-icon tw-icon-gift-box tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'gift-box-icon',
@@ -3715,7 +3715,7 @@ const Invite = ({
     console.warn('<Invite filled /> is now deprecated, please use <InviteFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-invite ${className ? className : ''}`,
+    className: `tw-icon tw-icon-invite tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'invite-icon',
@@ -3751,7 +3751,7 @@ const Globe = ({
     console.warn('<Globe filled /> is now deprecated, please use <GlobeFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-globe ${className ? className : ''}`,
+    className: `tw-icon tw-icon-globe tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'globe-icon',
@@ -3785,7 +3785,7 @@ const GraduationCap = ({
     console.warn('<GraduationCap filled /> is now deprecated, please use <GraduationCapFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-graduation-cap ${className ? className : ''}`,
+    className: `tw-icon tw-icon-graduation-cap tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'graduation-cap-icon',
@@ -3821,7 +3821,7 @@ const Graph = ({
     console.warn('<Graph filled /> is now deprecated, please use <GraphFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-graph ${className ? className : ''}`,
+    className: `tw-icon tw-icon-graph tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'graph-icon',
@@ -3857,7 +3857,7 @@ const Groceries = ({
     console.warn('<Groceries filled /> is now deprecated, please use <GroceriesFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-groceries ${className ? className : ''}`,
+    className: `tw-icon tw-icon-groceries tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'groceries-icon',
@@ -3891,7 +3891,7 @@ const Handshake = ({
     console.warn('<Handshake filled /> is now deprecated, please use <HandshakeFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-handshake ${className ? className : ''}`,
+    className: `tw-icon tw-icon-handshake tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'handshake-icon',
@@ -3925,7 +3925,7 @@ const ContractServices = ({
     console.warn('<ContractServices filled /> is now deprecated, please use <ContractServicesFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-contract-services ${className ? className : ''}`,
+    className: `tw-icon tw-icon-contract-services tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'contract-services-icon',
@@ -3959,7 +3959,7 @@ const HappyEmoji = ({
     console.warn('<HappyEmoji filled /> is now deprecated, please use <HappyEmojiFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-happy-emoji ${className ? className : ''}`,
+    className: `tw-icon tw-icon-happy-emoji tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'happy-emoji-icon',
@@ -3995,7 +3995,7 @@ const Do = ({
     console.warn('<Do filled /> is now deprecated, please use <DoFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-do ${className ? className : ''}`,
+    className: `tw-icon tw-icon-do tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'do-icon',
@@ -4031,7 +4031,7 @@ const Emoji = ({
     console.warn('<Emoji filled /> is now deprecated, please use <EmojiFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-emoji ${className ? className : ''}`,
+    className: `tw-icon tw-icon-emoji tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'emoji-icon',
@@ -4067,7 +4067,7 @@ const Headset = ({
     console.warn('<Headset filled /> is now deprecated, please use <HeadsetFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-headset ${className ? className : ''}`,
+    className: `tw-icon tw-icon-headset tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'headset-icon',
@@ -4101,7 +4101,7 @@ const Cs = ({
     console.warn('<Cs filled /> is now deprecated, please use <CsFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-cs ${className ? className : ''}`,
+    className: `tw-icon tw-icon-cs tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'cs-icon',
@@ -4135,7 +4135,7 @@ const Heart = ({
     console.warn('<Heart filled /> is now deprecated, please use <HeartFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-heart ${className ? className : ''}`,
+    className: `tw-icon tw-icon-heart tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'heart-icon',
@@ -4169,7 +4169,7 @@ const Family = ({
     console.warn('<Family filled /> is now deprecated, please use <FamilyFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-family ${className ? className : ''}`,
+    className: `tw-icon tw-icon-family tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'family-icon',
@@ -4203,7 +4203,7 @@ const House = ({
     console.warn('<House filled /> is now deprecated, please use <HouseFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-house ${className ? className : ''}`,
+    className: `tw-icon tw-icon-house tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'house-icon',
@@ -4237,7 +4237,7 @@ const Home = ({
     console.warn('<Home filled /> is now deprecated, please use <HomeFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-home ${className ? className : ''}`,
+    className: `tw-icon tw-icon-home tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'home-icon',
@@ -4271,7 +4271,7 @@ const Id = ({
     console.warn('<Id filled /> is now deprecated, please use <IdFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-id ${className ? className : ''}`,
+    className: `tw-icon tw-icon-id tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'id-icon',
@@ -4307,7 +4307,7 @@ const Ideal = ({
     console.warn('<Ideal filled /> is now deprecated, please use <IdealFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-ideal ${className ? className : ''}`,
+    className: `tw-icon tw-icon-ideal tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'ideal-icon',
@@ -4341,7 +4341,7 @@ const Image = ({
     console.warn('<Image filled /> is now deprecated, please use <ImageFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-image ${className ? className : ''}`,
+    className: `tw-icon tw-icon-image tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'image-icon',
@@ -4377,7 +4377,7 @@ const Picture = ({
     console.warn('<Picture filled /> is now deprecated, please use <PictureFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-picture ${className ? className : ''}`,
+    className: `tw-icon tw-icon-picture tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'picture-icon',
@@ -4413,7 +4413,7 @@ const InfoCircleFill = ({
     console.warn('<InfoCircleFill filled /> is now deprecated, please use <InfoCircleFillFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-info-circle-fill ${className ? className : ''}`,
+    className: `tw-icon tw-icon-info-circle-fill tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'info-circle-fill-icon',
@@ -4449,7 +4449,7 @@ const InfoCircle = ({
     console.warn('<InfoCircle filled /> is now deprecated, please use <InfoCircleFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-info-circle ${className ? className : ''}`,
+    className: `tw-icon tw-icon-info-circle tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'info-circle-icon',
@@ -4485,7 +4485,7 @@ const Info = ({
     console.warn('<Info filled /> is now deprecated, please use <InfoFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-info ${className ? className : ''}`,
+    className: `tw-icon tw-icon-info tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'info-icon',
@@ -4523,7 +4523,7 @@ const InsertCard = ({
     console.warn('<InsertCard filled /> is now deprecated, please use <InsertCardFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-insert-card ${className ? className : ''}`,
+    className: `tw-icon tw-icon-insert-card tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'insert-card-icon',
@@ -4559,7 +4559,7 @@ const Atm = ({
     console.warn('<Atm filled /> is now deprecated, please use <AtmFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-atm ${className ? className : ''}`,
+    className: `tw-icon tw-icon-atm tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'atm-icon',
@@ -4595,7 +4595,7 @@ const Instagram = ({
     console.warn('<Instagram filled /> is now deprecated, please use <InstagramFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-instagram ${className ? className : ''}`,
+    className: `tw-icon tw-icon-instagram tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'instagram-icon',
@@ -4631,7 +4631,7 @@ const Insurance = ({
     console.warn('<Insurance filled /> is now deprecated, please use <InsuranceFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-insurance ${className ? className : ''}`,
+    className: `tw-icon tw-icon-insurance tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'insurance-icon',
@@ -4667,7 +4667,7 @@ const Interac = ({
     console.warn('<Interac filled /> is now deprecated, please use <InteracFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-interac ${className ? className : ''}`,
+    className: `tw-icon tw-icon-interac tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'interac-icon',
@@ -4703,7 +4703,7 @@ const Jar = ({
     console.warn('<Jar filled /> is now deprecated, please use <JarFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-jar ${className ? className : ''}`,
+    className: `tw-icon tw-icon-jar tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'jar-icon',
@@ -4739,7 +4739,7 @@ const Keep = ({
     console.warn('<Keep filled /> is now deprecated, please use <KeepFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-keep ${className ? className : ''}`,
+    className: `tw-icon tw-icon-keep tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'keep-icon',
@@ -4773,7 +4773,7 @@ const Klarna = ({
     console.warn('<Klarna filled /> is now deprecated, please use <KlarnaFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-klarna ${className ? className : ''}`,
+    className: `tw-icon tw-icon-klarna tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'klarna-icon',
@@ -4809,7 +4809,7 @@ const Laptop = ({
     console.warn('<Laptop filled /> is now deprecated, please use <LaptopFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-laptop ${className ? className : ''}`,
+    className: `tw-icon tw-icon-laptop tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'laptop-icon',
@@ -4845,7 +4845,7 @@ const Leaf = ({
     console.warn('<Leaf filled /> is now deprecated, please use <LeafFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-leaf ${className ? className : ''}`,
+    className: `tw-icon tw-icon-leaf tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'leaf-icon',
@@ -4879,7 +4879,7 @@ const LightningBolt = ({
     console.warn('<LightningBolt filled /> is now deprecated, please use <LightningBoltFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-lightning-bolt ${className ? className : ''}`,
+    className: `tw-icon tw-icon-lightning-bolt tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'lightning-bolt-icon',
@@ -4913,7 +4913,7 @@ const Lightning = ({
     console.warn('<Lightning filled /> is now deprecated, please use <LightningFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-lightning ${className ? className : ''}`,
+    className: `tw-icon tw-icon-lightning tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'lightning-icon',
@@ -4947,7 +4947,7 @@ const Limit = ({
     console.warn('<Limit filled /> is now deprecated, please use <LimitFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-limit ${className ? className : ''}`,
+    className: `tw-icon tw-icon-limit tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'limit-icon',
@@ -4981,7 +4981,7 @@ const Link = ({
     console.warn('<Link filled /> is now deprecated, please use <LinkFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-link ${className ? className : ''}`,
+    className: `tw-icon tw-icon-link tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'link-icon',
@@ -5017,7 +5017,7 @@ const Linkedin = ({
     console.warn('<Linkedin filled /> is now deprecated, please use <LinkedinFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-linkedin ${className ? className : ''}`,
+    className: `tw-icon tw-icon-linkedin tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'linkedin-icon',
@@ -5051,7 +5051,7 @@ const List = ({
     console.warn('<List filled /> is now deprecated, please use <ListFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-list ${className ? className : ''}`,
+    className: `tw-icon tw-icon-list tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'list-icon',
@@ -5087,7 +5087,7 @@ const Activity = ({
     console.warn('<Activity filled /> is now deprecated, please use <ActivityFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-activity ${className ? className : ''}`,
+    className: `tw-icon tw-icon-activity tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'activity-icon',
@@ -5123,7 +5123,7 @@ const LocationMarker = ({
     console.warn('<LocationMarker filled /> is now deprecated, please use <LocationMarkerFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-location-marker ${className ? className : ''}`,
+    className: `tw-icon tw-icon-location-marker tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'location-marker-icon',
@@ -5159,7 +5159,7 @@ const LogIn = ({
     console.warn('<LogIn filled /> is now deprecated, please use <LogInFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-log-in ${className ? className : ''}`,
+    className: `tw-icon tw-icon-log-in tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'log-in-icon',
@@ -5195,7 +5195,7 @@ const LogOut = ({
     console.warn('<LogOut filled /> is now deprecated, please use <LogOutFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-log-out ${className ? className : ''}`,
+    className: `tw-icon tw-icon-log-out tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'log-out-icon',
@@ -5231,7 +5231,7 @@ const MassPayout = ({
     console.warn('<MassPayout filled /> is now deprecated, please use <MassPayoutFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-mass-payout ${className ? className : ''}`,
+    className: `tw-icon tw-icon-mass-payout tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'mass-payout-icon',
@@ -5267,7 +5267,7 @@ const Menu = ({
     console.warn('<Menu filled /> is now deprecated, please use <MenuFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-menu ${className ? className : ''}`,
+    className: `tw-icon tw-icon-menu tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'menu-icon',
@@ -5303,7 +5303,7 @@ const Messenger = ({
     console.warn('<Messenger filled /> is now deprecated, please use <MessengerFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-messenger ${className ? className : ''}`,
+    className: `tw-icon tw-icon-messenger tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'messenger-icon',
@@ -5337,7 +5337,7 @@ const MinusCircleFill = ({
     console.warn('<MinusCircleFill filled /> is now deprecated, please use <MinusCircleFillFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-minus-circle-fill ${className ? className : ''}`,
+    className: `tw-icon tw-icon-minus-circle-fill tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'minus-circle-fill-icon',
@@ -5373,7 +5373,7 @@ const MinusCircle = ({
     console.warn('<MinusCircle filled /> is now deprecated, please use <MinusCircleFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-minus-circle ${className ? className : ''}`,
+    className: `tw-icon tw-icon-minus-circle tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'minus-circle-icon',
@@ -5409,7 +5409,7 @@ const Minus = ({
     console.warn('<Minus filled /> is now deprecated, please use <MinusFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-minus ${className ? className : ''}`,
+    className: `tw-icon tw-icon-minus tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'minus-icon',
@@ -5443,7 +5443,7 @@ const MobileLock = ({
     console.warn('<MobileLock filled /> is now deprecated, please use <MobileLockFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-mobile-lock ${className ? className : ''}`,
+    className: `tw-icon tw-icon-mobile-lock tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'mobile-lock-icon',
@@ -5479,7 +5479,7 @@ const TwoStep = ({
     console.warn('<TwoStep filled /> is now deprecated, please use <TwoStepFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-two-step ${className ? className : ''}`,
+    className: `tw-icon tw-icon-two-step tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'two-step-icon',
@@ -5515,7 +5515,7 @@ const Mobile = ({
     console.warn('<Mobile filled /> is now deprecated, please use <MobileFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-mobile ${className ? className : ''}`,
+    className: `tw-icon tw-icon-mobile tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'mobile-icon',
@@ -5551,7 +5551,7 @@ const MoneyBag = ({
     console.warn('<MoneyBag filled /> is now deprecated, please use <MoneyBagFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-money-bag ${className ? className : ''}`,
+    className: `tw-icon tw-icon-money-bag tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'money-bag-icon',
@@ -5587,7 +5587,7 @@ const Money = ({
     console.warn('<Money filled /> is now deprecated, please use <MoneyFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-money ${className ? className : ''}`,
+    className: `tw-icon tw-icon-money tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'money-icon',
@@ -5623,7 +5623,7 @@ const More = ({
     console.warn('<More filled /> is now deprecated, please use <MoreFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-more ${className ? className : ''}`,
+    className: `tw-icon tw-icon-more tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'more-icon',
@@ -5659,7 +5659,7 @@ const MultiCurrency = ({
     console.warn('<MultiCurrency filled /> is now deprecated, please use <MultiCurrencyFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-multi-currency ${className ? className : ''}`,
+    className: `tw-icon tw-icon-multi-currency tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'multi-currency-icon',
@@ -5695,7 +5695,7 @@ const NavigateAway = ({
     console.warn('<NavigateAway filled /> is now deprecated, please use <NavigateAwayFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-navigate-away ${className ? className : ''}`,
+    className: `tw-icon tw-icon-navigate-away tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'navigate-away-icon',
@@ -5731,7 +5731,7 @@ const Nearby = ({
     console.warn('<Nearby filled /> is now deprecated, please use <NearbyFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-nearby ${className ? className : ''}`,
+    className: `tw-icon tw-icon-nearby tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'nearby-icon',
@@ -5767,7 +5767,7 @@ const New = ({
     console.warn('<New filled /> is now deprecated, please use <NewFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-new ${className ? className : ''}`,
+    className: `tw-icon tw-icon-new tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'new-icon',
@@ -5801,7 +5801,7 @@ const NotificationActive = ({
     console.warn('<NotificationActive filled /> is now deprecated, please use <NotificationActiveFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-notification-active ${className ? className : ''}`,
+    className: `tw-icon tw-icon-notification-active tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'notification-active-icon',
@@ -5837,7 +5837,7 @@ const Notification = ({
     console.warn('<Notification filled /> is now deprecated, please use <NotificationFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-notification ${className ? className : ''}`,
+    className: `tw-icon tw-icon-notification tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'notification-icon',
@@ -5871,7 +5871,7 @@ const PadlockUnlocked = ({
     console.warn('<PadlockUnlocked filled /> is now deprecated, please use <PadlockUnlockedFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-padlock-unlocked ${className ? className : ''}`,
+    className: `tw-icon tw-icon-padlock-unlocked tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'padlock-unlocked-icon',
@@ -5907,7 +5907,7 @@ const Unlock = ({
     console.warn('<Unlock filled /> is now deprecated, please use <UnlockFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-unlock ${className ? className : ''}`,
+    className: `tw-icon tw-icon-unlock tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'unlock-icon',
@@ -5943,7 +5943,7 @@ const Padlock = ({
     console.warn('<Padlock filled /> is now deprecated, please use <PadlockFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-padlock ${className ? className : ''}`,
+    className: `tw-icon tw-icon-padlock tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'padlock-icon',
@@ -5979,7 +5979,7 @@ const Lock = ({
     console.warn('<Lock filled /> is now deprecated, please use <LockFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-lock ${className ? className : ''}`,
+    className: `tw-icon tw-icon-lock tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'lock-icon',
@@ -6015,7 +6015,7 @@ const Paperclip = ({
     console.warn('<Paperclip filled /> is now deprecated, please use <PaperclipFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-paperclip ${className ? className : ''}`,
+    className: `tw-icon tw-icon-paperclip tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'paperclip-icon',
@@ -6051,7 +6051,7 @@ const Passport = ({
     console.warn('<Passport filled /> is now deprecated, please use <PassportFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-passport ${className ? className : ''}`,
+    className: `tw-icon tw-icon-passport tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'passport-icon',
@@ -6087,7 +6087,7 @@ const Pause = ({
     console.warn('<Pause filled /> is now deprecated, please use <PauseFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-pause ${className ? className : ''}`,
+    className: `tw-icon tw-icon-pause tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'pause-icon',
@@ -6123,7 +6123,7 @@ const PayIn = ({
     console.warn('<PayIn filled /> is now deprecated, please use <PayInFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-pay-in ${className ? className : ''}`,
+    className: `tw-icon tw-icon-pay-in tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'pay-in-icon',
@@ -6157,7 +6157,7 @@ const Salary = ({
     console.warn('<Salary filled /> is now deprecated, please use <SalaryFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-salary ${className ? className : ''}`,
+    className: `tw-icon tw-icon-salary tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'salary-icon',
@@ -6191,7 +6191,7 @@ const Payments = ({
     console.warn('<Payments filled /> is now deprecated, please use <PaymentsFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-payments ${className ? className : ''}`,
+    className: `tw-icon tw-icon-payments tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'payments-icon',
@@ -6227,7 +6227,7 @@ const Paypal = ({
     console.warn('<Paypal filled /> is now deprecated, please use <PaypalFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-paypal ${className ? className : ''}`,
+    className: `tw-icon tw-icon-paypal tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'paypal-icon',
@@ -6265,7 +6265,7 @@ const People = ({
     console.warn('<People filled /> is now deprecated, please use <PeopleFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-people ${className ? className : ''}`,
+    className: `tw-icon tw-icon-people tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'people-icon',
@@ -6299,7 +6299,7 @@ const Recipients = ({
     console.warn('<Recipients filled /> is now deprecated, please use <RecipientsFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-recipients ${className ? className : ''}`,
+    className: `tw-icon tw-icon-recipients tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'recipients-icon',
@@ -6333,7 +6333,7 @@ const PercentageCircle = ({
     console.warn('<PercentageCircle filled /> is now deprecated, please use <PercentageCircleFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-percentage-circle ${className ? className : ''}`,
+    className: `tw-icon tw-icon-percentage-circle tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'percentage-circle-icon',
@@ -6369,7 +6369,7 @@ const Tax = ({
     console.warn('<Tax filled /> is now deprecated, please use <TaxFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-tax ${className ? className : ''}`,
+    className: `tw-icon tw-icon-tax tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'tax-icon',
@@ -6405,7 +6405,7 @@ const Person = ({
     console.warn('<Person filled /> is now deprecated, please use <PersonFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-person ${className ? className : ''}`,
+    className: `tw-icon tw-icon-person tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'person-icon',
@@ -6439,7 +6439,7 @@ const Profile = ({
     console.warn('<Profile filled /> is now deprecated, please use <ProfileFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-profile ${className ? className : ''}`,
+    className: `tw-icon tw-icon-profile tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'profile-icon',
@@ -6473,7 +6473,7 @@ const PersonalCare = ({
     console.warn('<PersonalCare filled /> is now deprecated, please use <PersonalCareFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-personal-care ${className ? className : ''}`,
+    className: `tw-icon tw-icon-personal-care tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'personal-care-icon',
@@ -6513,7 +6513,7 @@ const Pets = ({
     console.warn('<Pets filled /> is now deprecated, please use <PetsFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-pets ${className ? className : ''}`,
+    className: `tw-icon tw-icon-pets tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'pets-icon',
@@ -6549,7 +6549,7 @@ const Phone = ({
     console.warn('<Phone filled /> is now deprecated, please use <PhoneFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-phone ${className ? className : ''}`,
+    className: `tw-icon tw-icon-phone tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'phone-icon',
@@ -6583,7 +6583,7 @@ const PieChart = ({
     console.warn('<PieChart filled /> is now deprecated, please use <PieChartFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-pie-chart ${className ? className : ''}`,
+    className: `tw-icon tw-icon-pie-chart tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'pie-chart-icon',
@@ -6617,7 +6617,7 @@ const Expenses = ({
     console.warn('<Expenses filled /> is now deprecated, please use <ExpensesFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-expenses ${className ? className : ''}`,
+    className: `tw-icon tw-icon-expenses tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'expenses-icon',
@@ -6651,7 +6651,7 @@ const PiggyBank = ({
     console.warn('<PiggyBank filled /> is now deprecated, please use <PiggyBankFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-piggy-bank ${className ? className : ''}`,
+    className: `tw-icon tw-icon-piggy-bank tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'piggy-bank-icon',
@@ -6687,7 +6687,7 @@ const Savings = ({
     console.warn('<Savings filled /> is now deprecated, please use <SavingsFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-savings ${className ? className : ''}`,
+    className: `tw-icon tw-icon-savings tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'savings-icon',
@@ -6723,7 +6723,7 @@ const Pix = ({
     console.warn('<Pix filled /> is now deprecated, please use <PixFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-pix ${className ? className : ''}`,
+    className: `tw-icon tw-icon-pix tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'pix-icon',
@@ -6759,7 +6759,7 @@ const Plane = ({
     console.warn('<Plane filled /> is now deprecated, please use <PlaneFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-plane ${className ? className : ''}`,
+    className: `tw-icon tw-icon-plane tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'plane-icon',
@@ -6795,7 +6795,7 @@ const Play = ({
     console.warn('<Play filled /> is now deprecated, please use <PlayFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-play ${className ? className : ''}`,
+    className: `tw-icon tw-icon-play tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'play-icon',
@@ -6831,7 +6831,7 @@ const PlusCircle = ({
     console.warn('<PlusCircle filled /> is now deprecated, please use <PlusCircleFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-plus-circle ${className ? className : ''}`,
+    className: `tw-icon tw-icon-plus-circle tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'plus-circle-icon',
@@ -6867,7 +6867,7 @@ const Plus = ({
     console.warn('<Plus filled /> is now deprecated, please use <PlusFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-plus ${className ? className : ''}`,
+    className: `tw-icon tw-icon-plus tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'plus-icon',
@@ -6901,7 +6901,7 @@ const QrCode = ({
     console.warn('<QrCode filled /> is now deprecated, please use <QrCodeFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-qr-code ${className ? className : ''}`,
+    className: `tw-icon tw-icon-qr-code tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'qr-code-icon',
@@ -6937,7 +6937,7 @@ const QuestionMarkCircle = ({
     console.warn('<QuestionMarkCircle filled /> is now deprecated, please use <QuestionMarkCircleFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-question-mark-circle ${className ? className : ''}`,
+    className: `tw-icon tw-icon-question-mark-circle tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'question-mark-circle-icon',
@@ -6973,7 +6973,7 @@ const HelpCircle = ({
     console.warn('<HelpCircle filled /> is now deprecated, please use <HelpCircleFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-help-circle ${className ? className : ''}`,
+    className: `tw-icon tw-icon-help-circle tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'help-circle-icon',
@@ -7009,7 +7009,7 @@ const QuestionMark = ({
     console.warn('<QuestionMark filled /> is now deprecated, please use <QuestionMarkFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-question-mark ${className ? className : ''}`,
+    className: `tw-icon tw-icon-question-mark tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'question-mark-icon',
@@ -7045,7 +7045,7 @@ const Help = ({
     console.warn('<Help filled /> is now deprecated, please use <HelpFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-help ${className ? className : ''}`,
+    className: `tw-icon tw-icon-help tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'help-icon',
@@ -7081,7 +7081,7 @@ const Rain = ({
     console.warn('<Rain filled /> is now deprecated, please use <RainFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-rain ${className ? className : ''}`,
+    className: `tw-icon tw-icon-rain tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'rain-icon',
@@ -7117,7 +7117,7 @@ const Rainbow = ({
     console.warn('<Rainbow filled /> is now deprecated, please use <RainbowFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-rainbow ${className ? className : ''}`,
+    className: `tw-icon tw-icon-rainbow tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'rainbow-icon',
@@ -7153,7 +7153,7 @@ const Receipt = ({
     console.warn('<Receipt filled /> is now deprecated, please use <ReceiptFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-receipt ${className ? className : ''}`,
+    className: `tw-icon tw-icon-receipt tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'receipt-icon',
@@ -7189,7 +7189,7 @@ const Receive = ({
     console.warn('<Receive filled /> is now deprecated, please use <ReceiveFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-receive ${className ? className : ''}`,
+    className: `tw-icon tw-icon-receive tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'receive-icon',
@@ -7223,7 +7223,7 @@ const RefundReceive = ({
     console.warn('<RefundReceive filled /> is now deprecated, please use <RefundReceiveFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-refund-receive ${className ? className : ''}`,
+    className: `tw-icon tw-icon-refund-receive tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'refund-receive-icon',
@@ -7259,7 +7259,7 @@ const RefundSent = ({
     console.warn('<RefundSent filled /> is now deprecated, please use <RefundSentFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-refund-sent ${className ? className : ''}`,
+    className: `tw-icon tw-icon-refund-sent tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'refund-sent-icon',
@@ -7295,7 +7295,7 @@ const Reload = ({
     console.warn('<Reload filled /> is now deprecated, please use <ReloadFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-reload ${className ? className : ''}`,
+    className: `tw-icon tw-icon-reload tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'reload-icon',
@@ -7329,7 +7329,7 @@ const Refresh = ({
     console.warn('<Refresh filled /> is now deprecated, please use <RefreshFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-refresh ${className ? className : ''}`,
+    className: `tw-icon tw-icon-refresh tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'refresh-icon',
@@ -7363,7 +7363,7 @@ const RequestReceive = ({
     console.warn('<RequestReceive filled /> is now deprecated, please use <RequestReceiveFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-request-receive ${className ? className : ''}`,
+    className: `tw-icon tw-icon-request-receive tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'request-receive-icon',
@@ -7399,7 +7399,7 @@ const RequestSend = ({
     console.warn('<RequestSend filled /> is now deprecated, please use <RequestSendFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-request-send ${className ? className : ''}`,
+    className: `tw-icon tw-icon-request-send tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'request-send-icon',
@@ -7435,7 +7435,7 @@ const Rewards = ({
     console.warn('<Rewards filled /> is now deprecated, please use <RewardsFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-rewards ${className ? className : ''}`,
+    className: `tw-icon tw-icon-rewards tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'rewards-icon',
@@ -7477,7 +7477,7 @@ const SadEmoji = ({
     console.warn('<SadEmoji filled /> is now deprecated, please use <SadEmojiFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-sad-emoji ${className ? className : ''}`,
+    className: `tw-icon tw-icon-sad-emoji tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'sad-emoji-icon',
@@ -7513,7 +7513,7 @@ const Dont = ({
     console.warn('<Dont filled /> is now deprecated, please use <DontFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-dont ${className ? className : ''}`,
+    className: `tw-icon tw-icon-dont tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'dont-icon',
@@ -7549,7 +7549,7 @@ const ScanQrCode = ({
     console.warn('<ScanQrCode filled /> is now deprecated, please use <ScanQrCodeFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-scan-qr-code ${className ? className : ''}`,
+    className: `tw-icon tw-icon-scan-qr-code tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'scan-qr-code-icon',
@@ -7585,7 +7585,7 @@ const Search = ({
     console.warn('<Search filled /> is now deprecated, please use <SearchFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-search ${className ? className : ''}`,
+    className: `tw-icon tw-icon-search tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'search-icon',
@@ -7619,7 +7619,7 @@ const Send = ({
     console.warn('<Send filled /> is now deprecated, please use <SendFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-send ${className ? className : ''}`,
+    className: `tw-icon tw-icon-send tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'send-icon',
@@ -7653,7 +7653,7 @@ const ShareAndroid = ({
     console.warn('<ShareAndroid filled /> is now deprecated, please use <ShareAndroidFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-share-android ${className ? className : ''}`,
+    className: `tw-icon tw-icon-share-android tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'share-android-icon',
@@ -7687,7 +7687,7 @@ const ShareIos = ({
     console.warn('<ShareIos filled /> is now deprecated, please use <ShareIosFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-share-ios ${className ? className : ''}`,
+    className: `tw-icon tw-icon-share-ios tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'share-ios-icon',
@@ -7723,7 +7723,7 @@ const Shield = ({
     console.warn('<Shield filled /> is now deprecated, please use <ShieldFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-shield ${className ? className : ''}`,
+    className: `tw-icon tw-icon-shield tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'shield-icon',
@@ -7757,7 +7757,7 @@ const ShoppingBag = ({
     console.warn('<ShoppingBag filled /> is now deprecated, please use <ShoppingBagFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-shopping-bag ${className ? className : ''}`,
+    className: `tw-icon tw-icon-shopping-bag tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'shopping-bag-icon',
@@ -7793,7 +7793,7 @@ const ECommerce = ({
     console.warn('<ECommerce filled /> is now deprecated, please use <ECommerceFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-e-commerce ${className ? className : ''}`,
+    className: `tw-icon tw-icon-e-commerce tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'e-commerce-icon',
@@ -7829,7 +7829,7 @@ const Slider = ({
     console.warn('<Slider filled /> is now deprecated, please use <SliderFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-slider ${className ? className : ''}`,
+    className: `tw-icon tw-icon-slider tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'slider-icon',
@@ -7865,7 +7865,7 @@ const Sofort = ({
     console.warn('<Sofort filled /> is now deprecated, please use <SofortFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-sofort ${className ? className : ''}`,
+    className: `tw-icon tw-icon-sofort tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'sofort-icon',
@@ -7901,7 +7901,7 @@ const SoftwareAndHosting = ({
     console.warn('<SoftwareAndHosting filled /> is now deprecated, please use <SoftwareAndHostingFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-software-and-hosting ${className ? className : ''}`,
+    className: `tw-icon tw-icon-software-and-hosting tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'software-and-hosting-icon',
@@ -7937,7 +7937,7 @@ const SoftwareAndWebHosting = ({
     console.warn('<SoftwareAndWebHosting filled /> is now deprecated, please use <SoftwareAndWebHostingFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-software-and-web-hosting ${className ? className : ''}`,
+    className: `tw-icon tw-icon-software-and-web-hosting tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'software-and-web-hosting-icon',
@@ -7973,7 +7973,7 @@ const SpeechBubbleExclamation = ({
     console.warn('<SpeechBubbleExclamation filled /> is now deprecated, please use <SpeechBubbleExclamationFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-speech-bubble-exclamation ${className ? className : ''}`,
+    className: `tw-icon tw-icon-speech-bubble-exclamation tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'speech-bubble-exclamation-icon',
@@ -8010,7 +8010,7 @@ const SpeechBubbleMessage = ({
     console.warn('<SpeechBubbleMessage filled /> is now deprecated, please use <SpeechBubbleMessageFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-speech-bubble-message ${className ? className : ''}`,
+    className: `tw-icon tw-icon-speech-bubble-message tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'speech-bubble-message-icon',
@@ -8046,7 +8046,7 @@ const Feedback = ({
     console.warn('<Feedback filled /> is now deprecated, please use <FeedbackFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-feedback ${className ? className : ''}`,
+    className: `tw-icon tw-icon-feedback tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'feedback-icon',
@@ -8082,7 +8082,7 @@ const SpeechBubblePending = ({
     console.warn('<SpeechBubblePending filled /> is now deprecated, please use <SpeechBubblePendingFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-speech-bubble-pending ${className ? className : ''}`,
+    className: `tw-icon tw-icon-speech-bubble-pending tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'speech-bubble-pending-icon',
@@ -8118,7 +8118,7 @@ const Pending = ({
     console.warn('<Pending filled /> is now deprecated, please use <PendingFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-pending ${className ? className : ''}`,
+    className: `tw-icon tw-icon-pending tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'pending-icon',
@@ -8154,7 +8154,7 @@ const SpeechBubble = ({
     console.warn('<SpeechBubble filled /> is now deprecated, please use <SpeechBubbleFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-speech-bubble ${className ? className : ''}`,
+    className: `tw-icon tw-icon-speech-bubble tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'speech-bubble-icon',
@@ -8188,7 +8188,7 @@ const Chat = ({
     console.warn('<Chat filled /> is now deprecated, please use <ChatFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-chat ${className ? className : ''}`,
+    className: `tw-icon tw-icon-chat tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'chat-icon',
@@ -8222,7 +8222,7 @@ const SpeechBubbles = ({
     console.warn('<SpeechBubbles filled /> is now deprecated, please use <SpeechBubblesFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-speech-bubbles ${className ? className : ''}`,
+    className: `tw-icon tw-icon-speech-bubbles tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'speech-bubbles-icon',
@@ -8256,7 +8256,7 @@ const Comments = ({
     console.warn('<Comments filled /> is now deprecated, please use <CommentsFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-comments ${className ? className : ''}`,
+    className: `tw-icon tw-icon-comments tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'comments-icon',
@@ -8290,7 +8290,7 @@ const SpendDirham = ({
     console.warn('<SpendDirham filled /> is now deprecated, please use <SpendDirhamFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-dirham ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-dirham tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-dirham-icon',
@@ -8326,7 +8326,7 @@ const SpendDollar = ({
     console.warn('<SpendDollar filled /> is now deprecated, please use <SpendDollarFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-dollar ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-dollar tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-dollar-icon',
@@ -8362,7 +8362,7 @@ const SpendEuro = ({
     console.warn('<SpendEuro filled /> is now deprecated, please use <SpendEuroFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-euro ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-euro tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-euro-icon',
@@ -8398,7 +8398,7 @@ const SpendForint = ({
     console.warn('<SpendForint filled /> is now deprecated, please use <SpendForintFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-forint ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-forint tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-forint-icon',
@@ -8434,7 +8434,7 @@ const SpendFranc = ({
     console.warn('<SpendFranc filled /> is now deprecated, please use <SpendFrancFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-franc ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-franc tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-franc-icon',
@@ -8470,7 +8470,7 @@ const SpendHryvnia = ({
     console.warn('<SpendHryvnia filled /> is now deprecated, please use <SpendHryvniaFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-hryvnia ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-hryvnia tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-hryvnia-icon',
@@ -8506,7 +8506,7 @@ const SpendKoruna = ({
     console.warn('<SpendKoruna filled /> is now deprecated, please use <SpendKorunaFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-koruna ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-koruna tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-koruna-icon',
@@ -8542,7 +8542,7 @@ const SpendKrone = ({
     console.warn('<SpendKrone filled /> is now deprecated, please use <SpendKroneFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-krone ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-krone tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-krone-icon',
@@ -8578,7 +8578,7 @@ const SpendKuna = ({
     console.warn('<SpendKuna filled /> is now deprecated, please use <SpendKunaFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-kuna ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-kuna tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-kuna-icon',
@@ -8614,7 +8614,7 @@ const SpendLeuLei = ({
     console.warn('<SpendLeuLei filled /> is now deprecated, please use <SpendLeuLeiFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-leu-lei ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-leu-lei tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-leu-lei-icon',
@@ -8650,7 +8650,7 @@ const SpendLev = ({
     console.warn('<SpendLev filled /> is now deprecated, please use <SpendLevFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-lev ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-lev tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-lev-icon',
@@ -8686,7 +8686,7 @@ const SpendLira = ({
     console.warn('<SpendLira filled /> is now deprecated, please use <SpendLiraFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-lira ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-lira tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-lira-icon',
@@ -8722,7 +8722,7 @@ const SpendPound = ({
     console.warn('<SpendPound filled /> is now deprecated, please use <SpendPoundFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-pound ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-pound tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-pound-icon',
@@ -8758,7 +8758,7 @@ const SpendReal = ({
     console.warn('<SpendReal filled /> is now deprecated, please use <SpendRealFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-real ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-real tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-real-icon',
@@ -8794,7 +8794,7 @@ const SpendRinggit = ({
     console.warn('<SpendRinggit filled /> is now deprecated, please use <SpendRinggitFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-ringgit ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-ringgit tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-ringgit-icon',
@@ -8830,7 +8830,7 @@ const SpendRupee = ({
     console.warn('<SpendRupee filled /> is now deprecated, please use <SpendRupeeFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-rupee ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-rupee tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-rupee-icon',
@@ -8866,7 +8866,7 @@ const SpendRupiah = ({
     console.warn('<SpendRupiah filled /> is now deprecated, please use <SpendRupiahFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-rupiah ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-rupiah tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-rupiah-icon',
@@ -8902,7 +8902,7 @@ const SpendYen = ({
     console.warn('<SpendYen filled /> is now deprecated, please use <SpendYenFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-yen ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-yen tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-yen-icon',
@@ -8938,7 +8938,7 @@ const SpendZloty = ({
     console.warn('<SpendZloty filled /> is now deprecated, please use <SpendZlotyFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-spend-zloty ${className ? className : ''}`,
+    className: `tw-icon tw-icon-spend-zloty tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'spend-zloty-icon',
@@ -8974,7 +8974,7 @@ const SplitMoney = ({
     console.warn('<SplitMoney filled /> is now deprecated, please use <SplitMoneyFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-split-money ${className ? className : ''}`,
+    className: `tw-icon tw-icon-split-money tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'split-money-icon',
@@ -9010,7 +9010,7 @@ const StarFill = ({
     console.warn('<StarFill filled /> is now deprecated, please use <StarFillFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-star-fill ${className ? className : ''}`,
+    className: `tw-icon tw-icon-star-fill tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'star-fill-icon',
@@ -9044,7 +9044,7 @@ const Star = ({
     console.warn('<Star filled /> is now deprecated, please use <StarFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-star ${className ? className : ''}`,
+    className: `tw-icon tw-icon-star tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'star-icon',
@@ -9078,7 +9078,7 @@ const Stationery = ({
     console.warn('<Stationery filled /> is now deprecated, please use <StationeryFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-stationery ${className ? className : ''}`,
+    className: `tw-icon tw-icon-stationery tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'stationery-icon',
@@ -9112,7 +9112,7 @@ const OfficeExpenses = ({
     console.warn('<OfficeExpenses filled /> is now deprecated, please use <OfficeExpensesFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-office-expenses ${className ? className : ''}`,
+    className: `tw-icon tw-icon-office-expenses tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'office-expenses-icon',
@@ -9146,7 +9146,7 @@ const Stop = ({
     console.warn('<Stop filled /> is now deprecated, please use <StopFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-stop ${className ? className : ''}`,
+    className: `tw-icon tw-icon-stop tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'stop-icon',
@@ -9182,7 +9182,7 @@ const Suitcase = ({
     console.warn('<Suitcase filled /> is now deprecated, please use <SuitcaseFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-suitcase ${className ? className : ''}`,
+    className: `tw-icon tw-icon-suitcase tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'suitcase-icon',
@@ -9218,7 +9218,7 @@ const Travel = ({
     console.warn('<Travel filled /> is now deprecated, please use <TravelFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-travel ${className ? className : ''}`,
+    className: `tw-icon tw-icon-travel tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'travel-icon',
@@ -9254,7 +9254,7 @@ const Sunglasses = ({
     console.warn('<Sunglasses filled /> is now deprecated, please use <SunglassesFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-sunglasses ${className ? className : ''}`,
+    className: `tw-icon tw-icon-sunglasses tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'sunglasses-icon',
@@ -9290,7 +9290,7 @@ const Switch = ({
     console.warn('<Switch filled /> is now deprecated, please use <SwitchFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-switch ${className ? className : ''}`,
+    className: `tw-icon tw-icon-switch tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'switch-icon',
@@ -9326,7 +9326,7 @@ const Takeaway = ({
     console.warn('<Takeaway filled /> is now deprecated, please use <TakeawayFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-takeaway ${className ? className : ''}`,
+    className: `tw-icon tw-icon-takeaway tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'takeaway-icon',
@@ -9362,7 +9362,7 @@ const Target = ({
     console.warn('<Target filled /> is now deprecated, please use <TargetFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-target ${className ? className : ''}`,
+    className: `tw-icon tw-icon-target tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'target-icon',
@@ -9396,7 +9396,7 @@ const Marketing = ({
     console.warn('<Marketing filled /> is now deprecated, please use <MarketingFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-marketing ${className ? className : ''}`,
+    className: `tw-icon tw-icon-marketing tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'marketing-icon',
@@ -9430,7 +9430,7 @@ const Taxi = ({
     console.warn('<Taxi filled /> is now deprecated, please use <TaxiFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-taxi ${className ? className : ''}`,
+    className: `tw-icon tw-icon-taxi tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'taxi-icon',
@@ -9466,7 +9466,7 @@ const Team = ({
     console.warn('<Team filled /> is now deprecated, please use <TeamFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-team ${className ? className : ''}`,
+    className: `tw-icon tw-icon-team tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'team-icon',
@@ -9502,7 +9502,7 @@ const Theme = ({
     console.warn('<Theme filled /> is now deprecated, please use <ThemeFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-theme ${className ? className : ''}`,
+    className: `tw-icon tw-icon-theme tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'theme-icon',
@@ -9538,7 +9538,7 @@ const Transfer = ({
     console.warn('<Transfer filled /> is now deprecated, please use <TransferFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-transfer ${className ? className : ''}`,
+    className: `tw-icon tw-icon-transfer tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'transfer-icon',
@@ -9574,7 +9574,7 @@ const Transport = ({
     console.warn('<Transport filled /> is now deprecated, please use <TransportFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-transport ${className ? className : ''}`,
+    className: `tw-icon tw-icon-transport tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'transport-icon',
@@ -9610,7 +9610,7 @@ const Trustly = ({
     console.warn('<Trustly filled /> is now deprecated, please use <TrustlyFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-trustly ${className ? className : ''}`,
+    className: `tw-icon tw-icon-trustly tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'trustly-icon',
@@ -9644,7 +9644,7 @@ const Twitter = ({
     console.warn('<Twitter filled /> is now deprecated, please use <TwitterFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-twitter ${className ? className : ''}`,
+    className: `tw-icon tw-icon-twitter tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'twitter-icon',
@@ -9678,7 +9678,7 @@ const Upload = ({
     console.warn('<Upload filled /> is now deprecated, please use <UploadFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-upload ${className ? className : ''}`,
+    className: `tw-icon tw-icon-upload tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'upload-icon',
@@ -9714,7 +9714,7 @@ const UpwardGraph = ({
     console.warn('<UpwardGraph filled /> is now deprecated, please use <UpwardGraphFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-upward-graph ${className ? className : ''}`,
+    className: `tw-icon tw-icon-upward-graph tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'upward-graph-icon',
@@ -9750,7 +9750,7 @@ const ExchangeRate = ({
     console.warn('<ExchangeRate filled /> is now deprecated, please use <ExchangeRateFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-exchange-rate ${className ? className : ''}`,
+    className: `tw-icon tw-icon-exchange-rate tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'exchange-rate-icon',
@@ -9786,7 +9786,7 @@ const Venmo = ({
     console.warn('<Venmo filled /> is now deprecated, please use <VenmoFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-venmo ${className ? className : ''}`,
+    className: `tw-icon tw-icon-venmo tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'venmo-icon',
@@ -9822,7 +9822,7 @@ const Wallet = ({
     console.warn('<Wallet filled /> is now deprecated, please use <WalletFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-wallet ${className ? className : ''}`,
+    className: `tw-icon tw-icon-wallet tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'wallet-icon',
@@ -9858,7 +9858,7 @@ const Warning = ({
     console.warn('<Warning filled /> is now deprecated, please use <WarningFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-warning ${className ? className : ''}`,
+    className: `tw-icon tw-icon-warning tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'warning-icon',
@@ -9894,7 +9894,7 @@ const Whatsapp = ({
     console.warn('<Whatsapp filled /> is now deprecated, please use <WhatsappFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-whatsapp ${className ? className : ''}`,
+    className: `tw-icon tw-icon-whatsapp tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'whatsapp-icon',
@@ -9930,7 +9930,7 @@ const Withdrawal = ({
     console.warn('<Withdrawal filled /> is now deprecated, please use <WithdrawalFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-withdrawal ${className ? className : ''}`,
+    className: `tw-icon tw-icon-withdrawal tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'withdrawal-icon',
@@ -9966,7 +9966,7 @@ const OwnersWithdrawal = ({
     console.warn('<OwnersWithdrawal filled /> is now deprecated, please use <OwnersWithdrawalFill /> or refer to https://transferwise.github.io/icons/ for more info.');
   }
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
-    className: `tw-icon tw-icon-owners-withdrawal ${className ? className : ''}`,
+    className: `tw-icon tw-icon-owners-withdrawal tw-icon-${size} ${className ? className : ''}`,
     "aria-hidden": !title ? 'true' : undefined,
     role: role ?? (title ? undefined : 'none'),
     "data-testid": restProps['data-testid'] || 'owners-withdrawal-icon',