@transferwise/icons 3.10.0 → 3.11.0-beta.2

package/lib/index.esm.js

@@ -12,7 +12,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__*/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',
@@ -48,7 +48,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__*/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',
@@ -84,7 +84,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__*/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',
@@ -122,7 +122,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__*/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',
@@ -157,7 +157,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__*/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',
@@ -192,7 +192,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__*/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',
@@ -226,7 +226,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__*/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',
@@ -260,7 +260,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__*/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',
@@ -294,7 +294,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__*/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',
@@ -328,7 +328,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__*/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',
@@ -364,7 +364,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__*/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',
@@ -401,7 +401,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__*/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',
@@ -437,7 +437,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__*/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',
@@ -473,7 +473,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__*/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',
@@ -509,7 +509,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__*/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',
@@ -543,7 +543,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__*/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',
@@ -577,7 +577,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__*/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',
@@ -611,7 +611,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__*/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',
@@ -647,7 +647,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__*/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',
@@ -681,7 +681,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__*/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',
@@ -715,7 +715,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__*/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',
@@ -749,7 +749,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__*/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',
@@ -785,7 +785,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__*/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',
@@ -821,7 +821,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__*/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',
@@ -855,7 +855,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__*/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',
@@ -889,7 +889,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__*/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',
@@ -925,7 +925,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__*/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',
@@ -961,7 +961,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__*/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',
@@ -995,7 +995,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__*/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',
@@ -1031,7 +1031,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__*/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',
@@ -1067,7 +1067,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__*/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',
@@ -1103,7 +1103,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__*/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',
@@ -1139,7 +1139,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__*/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',
@@ -1175,7 +1175,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__*/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',
@@ -1211,7 +1211,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__*/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',
@@ -1247,7 +1247,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__*/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',
@@ -1283,7 +1283,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__*/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',
@@ -1327,7 +1327,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__*/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',
@@ -1371,7 +1371,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__*/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',
@@ -1407,7 +1407,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__*/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',
@@ -1443,7 +1443,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__*/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',
@@ -1479,7 +1479,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__*/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',
@@ -1515,7 +1515,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__*/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',
@@ -1551,7 +1551,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__*/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',
@@ -1587,7 +1587,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__*/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',
@@ -1621,7 +1621,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__*/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',
@@ -1657,7 +1657,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__*/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',
@@ -1693,7 +1693,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__*/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',
@@ -1729,7 +1729,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__*/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',
@@ -1765,7 +1765,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__*/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',
@@ -1801,7 +1801,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__*/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',
@@ -1835,7 +1835,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__*/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',
@@ -1869,7 +1869,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__*/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',
@@ -1903,7 +1903,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__*/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',
@@ -1937,7 +1937,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__*/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',
@@ -1971,7 +1971,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__*/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',
@@ -2005,7 +2005,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__*/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',
@@ -2041,7 +2041,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__*/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',
@@ -2077,7 +2077,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__*/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',
@@ -2111,7 +2111,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__*/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',
@@ -2147,7 +2147,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__*/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',
@@ -2183,7 +2183,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__*/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',
@@ -2219,7 +2219,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__*/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',
@@ -2255,7 +2255,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__*/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',
@@ -2291,7 +2291,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__*/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',
@@ -2327,7 +2327,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__*/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',
@@ -2363,7 +2363,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__*/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',
@@ -2397,7 +2397,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__*/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',
@@ -2433,7 +2433,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__*/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',
@@ -2469,7 +2469,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__*/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',
@@ -2503,7 +2503,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__*/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',
@@ -2539,7 +2539,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__*/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',
@@ -2575,7 +2575,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__*/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',
@@ -2609,7 +2609,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__*/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',
@@ -2645,7 +2645,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__*/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',
@@ -2681,7 +2681,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__*/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',
@@ -2715,7 +2715,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__*/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',
@@ -2751,7 +2751,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__*/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',
@@ -2787,7 +2787,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__*/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',
@@ -2823,7 +2823,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__*/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',
@@ -2863,7 +2863,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__*/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',
@@ -2897,7 +2897,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__*/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',
@@ -2933,7 +2933,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__*/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',
@@ -2969,7 +2969,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__*/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',
@@ -3005,7 +3005,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__*/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',
@@ -3041,7 +3041,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__*/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',
@@ -3077,7 +3077,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__*/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',
@@ -3113,7 +3113,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__*/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',
@@ -3147,7 +3147,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__*/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',
@@ -3183,7 +3183,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__*/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',
@@ -3219,7 +3219,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__*/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',
@@ -3253,7 +3253,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__*/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',
@@ -3289,7 +3289,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__*/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',
@@ -3325,7 +3325,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__*/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',
@@ -3359,7 +3359,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__*/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',
@@ -3393,7 +3393,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__*/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',
@@ -3427,7 +3427,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__*/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',
@@ -3463,7 +3463,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__*/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',
@@ -3499,7 +3499,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__*/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',
@@ -3533,7 +3533,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__*/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',
@@ -3569,7 +3569,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__*/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',
@@ -3605,7 +3605,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__*/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',
@@ -3641,7 +3641,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__*/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',
@@ -3677,7 +3677,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__*/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',
@@ -3713,7 +3713,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__*/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',
@@ -3749,7 +3749,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__*/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',
@@ -3783,7 +3783,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__*/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',
@@ -3819,7 +3819,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__*/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',
@@ -3855,7 +3855,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__*/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',
@@ -3889,7 +3889,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__*/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',
@@ -3923,7 +3923,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__*/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',
@@ -3957,7 +3957,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__*/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',
@@ -3993,7 +3993,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__*/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',
@@ -4029,7 +4029,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__*/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',
@@ -4065,7 +4065,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__*/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',
@@ -4099,7 +4099,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__*/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',
@@ -4133,7 +4133,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__*/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',
@@ -4167,7 +4167,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__*/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',
@@ -4201,7 +4201,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__*/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',
@@ -4235,7 +4235,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__*/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',
@@ -4269,7 +4269,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__*/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',
@@ -4305,7 +4305,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__*/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',
@@ -4339,7 +4339,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__*/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',
@@ -4375,7 +4375,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__*/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',
@@ -4411,7 +4411,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__*/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',
@@ -4447,7 +4447,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__*/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',
@@ -4483,7 +4483,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__*/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',
@@ -4521,7 +4521,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__*/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',
@@ -4557,7 +4557,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__*/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',
@@ -4593,7 +4593,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__*/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',
@@ -4629,7 +4629,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__*/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',
@@ -4665,7 +4665,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__*/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',
@@ -4701,7 +4701,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__*/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',
@@ -4737,7 +4737,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__*/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',
@@ -4771,7 +4771,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__*/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',
@@ -4807,7 +4807,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__*/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',
@@ -4843,7 +4843,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__*/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',
@@ -4877,7 +4877,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__*/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',
@@ -4911,7 +4911,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__*/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',
@@ -4945,7 +4945,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__*/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',
@@ -4979,7 +4979,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__*/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',
@@ -5015,7 +5015,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__*/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',
@@ -5049,7 +5049,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__*/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',
@@ -5085,7 +5085,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__*/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',
@@ -5121,7 +5121,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__*/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',
@@ -5157,7 +5157,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__*/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',
@@ -5193,7 +5193,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__*/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',
@@ -5229,7 +5229,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__*/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',
@@ -5265,7 +5265,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__*/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',
@@ -5301,7 +5301,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__*/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',
@@ -5335,7 +5335,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__*/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',
@@ -5371,7 +5371,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__*/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',
@@ -5407,7 +5407,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__*/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',
@@ -5441,7 +5441,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__*/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',
@@ -5477,7 +5477,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__*/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',
@@ -5513,7 +5513,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__*/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',
@@ -5549,7 +5549,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__*/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',
@@ -5585,7 +5585,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__*/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',
@@ -5621,7 +5621,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__*/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',
@@ -5657,7 +5657,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__*/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',
@@ -5693,7 +5693,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__*/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',
@@ -5729,7 +5729,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__*/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',
@@ -5765,7 +5765,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__*/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',
@@ -5799,7 +5799,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__*/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',
@@ -5835,7 +5835,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__*/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',
@@ -5869,7 +5869,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__*/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',
@@ -5905,7 +5905,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__*/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',
@@ -5941,7 +5941,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__*/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',
@@ -5977,7 +5977,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__*/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',
@@ -6013,7 +6013,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__*/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',
@@ -6049,7 +6049,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__*/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',
@@ -6085,7 +6085,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__*/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',
@@ -6121,7 +6121,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__*/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',
@@ -6155,7 +6155,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__*/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',
@@ -6189,7 +6189,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__*/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',
@@ -6225,7 +6225,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__*/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',
@@ -6263,7 +6263,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__*/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',
@@ -6297,7 +6297,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__*/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',
@@ -6331,7 +6331,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__*/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',
@@ -6367,7 +6367,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__*/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',
@@ -6403,7 +6403,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__*/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',
@@ -6437,7 +6437,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__*/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',
@@ -6471,7 +6471,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__*/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',
@@ -6511,7 +6511,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__*/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',
@@ -6547,7 +6547,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__*/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',
@@ -6581,7 +6581,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__*/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',
@@ -6615,7 +6615,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__*/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',
@@ -6649,7 +6649,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__*/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',
@@ -6685,7 +6685,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__*/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',
@@ -6721,7 +6721,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__*/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',
@@ -6757,7 +6757,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__*/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',
@@ -6793,7 +6793,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__*/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',
@@ -6829,7 +6829,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__*/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',
@@ -6865,7 +6865,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__*/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',
@@ -6899,7 +6899,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__*/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',
@@ -6935,7 +6935,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__*/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',
@@ -6971,7 +6971,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__*/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',
@@ -7007,7 +7007,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__*/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',
@@ -7043,7 +7043,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__*/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',
@@ -7079,7 +7079,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__*/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',
@@ -7115,7 +7115,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__*/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',
@@ -7151,7 +7151,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__*/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',
@@ -7187,7 +7187,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__*/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',
@@ -7221,7 +7221,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__*/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',
@@ -7257,7 +7257,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__*/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',
@@ -7293,7 +7293,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__*/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',
@@ -7327,7 +7327,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__*/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',
@@ -7361,7 +7361,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__*/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',
@@ -7397,7 +7397,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__*/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',
@@ -7433,7 +7433,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__*/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',
@@ -7475,7 +7475,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__*/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',
@@ -7511,7 +7511,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__*/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',
@@ -7547,7 +7547,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__*/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',
@@ -7583,7 +7583,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__*/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',
@@ -7617,7 +7617,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__*/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',
@@ -7651,7 +7651,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__*/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',
@@ -7685,7 +7685,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__*/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',
@@ -7721,7 +7721,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__*/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',
@@ -7755,7 +7755,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__*/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',
@@ -7791,7 +7791,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__*/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',
@@ -7827,7 +7827,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__*/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',
@@ -7863,7 +7863,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__*/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',
@@ -7899,7 +7899,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__*/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',
@@ -7935,7 +7935,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__*/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',
@@ -7971,7 +7971,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__*/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',
@@ -8008,7 +8008,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__*/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',
@@ -8044,7 +8044,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__*/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',
@@ -8080,7 +8080,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__*/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',
@@ -8116,7 +8116,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__*/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',
@@ -8152,7 +8152,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__*/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',
@@ -8186,7 +8186,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__*/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',
@@ -8220,7 +8220,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__*/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',
@@ -8254,7 +8254,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__*/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',
@@ -8288,7 +8288,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__*/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',
@@ -8324,7 +8324,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__*/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',
@@ -8360,7 +8360,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__*/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',
@@ -8396,7 +8396,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__*/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',
@@ -8432,7 +8432,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__*/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',
@@ -8468,7 +8468,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__*/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',
@@ -8504,7 +8504,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__*/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',
@@ -8540,7 +8540,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__*/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',
@@ -8576,7 +8576,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__*/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',
@@ -8612,7 +8612,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__*/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',
@@ -8648,7 +8648,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__*/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',
@@ -8684,7 +8684,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__*/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',
@@ -8720,7 +8720,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__*/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',
@@ -8756,7 +8756,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__*/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',
@@ -8792,7 +8792,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__*/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',
@@ -8828,7 +8828,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__*/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',
@@ -8864,7 +8864,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__*/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',
@@ -8900,7 +8900,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__*/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',
@@ -8936,7 +8936,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__*/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',
@@ -8972,7 +8972,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__*/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',
@@ -9008,7 +9008,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__*/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',
@@ -9042,7 +9042,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__*/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',
@@ -9076,7 +9076,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__*/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',
@@ -9110,7 +9110,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__*/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',
@@ -9144,7 +9144,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__*/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',
@@ -9180,7 +9180,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__*/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',
@@ -9216,7 +9216,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__*/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',
@@ -9252,7 +9252,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__*/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',
@@ -9288,7 +9288,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__*/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',
@@ -9324,7 +9324,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__*/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',
@@ -9360,7 +9360,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__*/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',
@@ -9394,7 +9394,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__*/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',
@@ -9428,7 +9428,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__*/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',
@@ -9464,7 +9464,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__*/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',
@@ -9500,7 +9500,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__*/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',
@@ -9536,7 +9536,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__*/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',
@@ -9572,7 +9572,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__*/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',
@@ -9608,7 +9608,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__*/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',
@@ -9642,7 +9642,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__*/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',
@@ -9676,7 +9676,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__*/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',
@@ -9712,7 +9712,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__*/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',
@@ -9748,7 +9748,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__*/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',
@@ -9784,7 +9784,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__*/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',
@@ -9820,7 +9820,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__*/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',
@@ -9856,7 +9856,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__*/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',
@@ -9892,7 +9892,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__*/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',
@@ -9928,7 +9928,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__*/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',
@@ -9964,7 +9964,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__*/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',