@transferwise/icons 3.10.0 → 3.11.0-beta.1

package/build/components/paypal.tsx

@@ -26,7 +26,7 @@ export const Paypal: React.FunctionComponent<PaypalIconProps> = ({
 
   return (
     <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'}

package/build/components/pending-circle.tsx

@@ -26,7 +26,7 @@ export const PendingCircle: React.FunctionComponent<PendingCircleIconProps> = ({
 
   return (
     <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'}

package/build/components/pending.tsx

@@ -26,7 +26,7 @@ export const Pending: React.FunctionComponent<PendingIconProps> = ({
 
   return (
     <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'}

package/build/components/people.tsx

@@ -26,7 +26,7 @@ export const People: React.FunctionComponent<PeopleIconProps> = ({
 
   return (
     <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'}

package/build/components/percentage-circle.tsx

@@ -26,7 +26,7 @@ export const PercentageCircle: React.FunctionComponent<PercentageCircleIconProps
 
   return (
     <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'}

package/build/components/person.tsx

@@ -26,7 +26,7 @@ export const Person: React.FunctionComponent<PersonIconProps> = ({
 
   return (
     <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'}

package/build/components/personal-care.tsx

@@ -26,7 +26,7 @@ export const PersonalCare: React.FunctionComponent<PersonalCareIconProps> = ({
 
   return (
     <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'}

package/build/components/pets.tsx

@@ -26,7 +26,7 @@ export const Pets: React.FunctionComponent<PetsIconProps> = ({
 
   return (
     <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'}

package/build/components/phone.tsx

@@ -26,7 +26,7 @@ export const Phone: React.FunctionComponent<PhoneIconProps> = ({
 
   return (
     <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'}

package/build/components/picture.tsx

@@ -26,7 +26,7 @@ export const Picture: React.FunctionComponent<PictureIconProps> = ({
 
   return (
     <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'}

package/build/components/pie-chart.tsx

@@ -26,7 +26,7 @@ export const PieChart: React.FunctionComponent<PieChartIconProps> = ({
 
   return (
     <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'}

package/build/components/piggy-bank.tsx

@@ -26,7 +26,7 @@ export const PiggyBank: React.FunctionComponent<PiggyBankIconProps> = ({
 
   return (
     <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'}

package/build/components/pin-code.tsx

@@ -26,7 +26,7 @@ export const PinCode: React.FunctionComponent<PinCodeIconProps> = ({
 
   return (
     <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'}

package/build/components/pix.tsx

@@ -26,7 +26,7 @@ export const Pix: React.FunctionComponent<PixIconProps> = ({
 
   return (
     <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'}

package/build/components/plane.tsx

@@ -26,7 +26,7 @@ export const Plane: React.FunctionComponent<PlaneIconProps> = ({
 
   return (
     <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'}

package/build/components/play.tsx

@@ -26,7 +26,7 @@ export const Play: React.FunctionComponent<PlayIconProps> = ({
 
   return (
     <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'}

package/build/components/plus-circle.tsx

@@ -26,7 +26,7 @@ export const PlusCircle: React.FunctionComponent<PlusCircleIconProps> = ({
 
   return (
     <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'}

package/build/components/plus.tsx

@@ -26,7 +26,7 @@ export const Plus: React.FunctionComponent<PlusIconProps> = ({
 
   return (
     <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'}

package/build/components/profile.tsx

@@ -26,7 +26,7 @@ export const Profile: React.FunctionComponent<ProfileIconProps> = ({
 
   return (
     <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'}

package/build/components/qr-code.tsx

@@ -26,7 +26,7 @@ export const QrCode: React.FunctionComponent<QrCodeIconProps> = ({
 
   return (
     <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'}

package/build/components/question-mark-circle.tsx

@@ -26,7 +26,9 @@ export const QuestionMarkCircle: React.FunctionComponent<QuestionMarkCircleIconP
 
   return (
     <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'}

package/build/components/question-mark.tsx

@@ -26,7 +26,7 @@ export const QuestionMark: React.FunctionComponent<QuestionMarkIconProps> = ({
 
   return (
     <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'}

package/build/components/rain.tsx

@@ -26,7 +26,7 @@ export const Rain: React.FunctionComponent<RainIconProps> = ({
 
   return (
     <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'}

package/build/components/rainbow.tsx

@@ -26,7 +26,7 @@ export const Rainbow: React.FunctionComponent<RainbowIconProps> = ({
 
   return (
     <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'}

package/build/components/receipt.tsx

@@ -26,7 +26,7 @@ export const Receipt: React.FunctionComponent<ReceiptIconProps> = ({
 
   return (
     <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'}

package/build/components/receive.tsx

@@ -26,7 +26,7 @@ export const Receive: React.FunctionComponent<ReceiveIconProps> = ({
 
   return (
     <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'}

package/build/components/recipients.tsx

@@ -26,7 +26,7 @@ export const Recipients: React.FunctionComponent<RecipientsIconProps> = ({
 
   return (
     <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'}

package/build/components/refresh.tsx

@@ -26,7 +26,7 @@ export const Refresh: React.FunctionComponent<RefreshIconProps> = ({
 
   return (
     <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'}

package/build/components/refund-receive.tsx

@@ -26,7 +26,7 @@ export const RefundReceive: React.FunctionComponent<RefundReceiveIconProps> = ({
 
   return (
     <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'}

package/build/components/refund-sent.tsx

@@ -26,7 +26,7 @@ export const RefundSent: React.FunctionComponent<RefundSentIconProps> = ({
 
   return (
     <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'}

package/build/components/reload.tsx

@@ -26,7 +26,7 @@ export const Reload: React.FunctionComponent<ReloadIconProps> = ({
 
   return (
     <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'}

package/build/components/rent.tsx

@@ -26,7 +26,7 @@ export const Rent: React.FunctionComponent<RentIconProps> = ({
 
   return (
     <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'}

package/build/components/request-receive.tsx

@@ -26,7 +26,7 @@ export const RequestReceive: React.FunctionComponent<RequestReceiveIconProps> =
 
   return (
     <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'}

package/build/components/request-send.tsx

@@ -26,7 +26,7 @@ export const RequestSend: React.FunctionComponent<RequestSendIconProps> = ({
 
   return (
     <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'}

package/build/components/rewards.tsx

@@ -26,7 +26,7 @@ export const Rewards: React.FunctionComponent<RewardsIconProps> = ({
 
   return (
     <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'}

package/build/components/sad-emoji.tsx

@@ -26,7 +26,7 @@ export const SadEmoji: React.FunctionComponent<SadEmojiIconProps> = ({
 
   return (
     <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'}

package/build/components/salary.tsx

@@ -26,7 +26,7 @@ export const Salary: React.FunctionComponent<SalaryIconProps> = ({
 
   return (
     <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'}

package/build/components/sales-and-royalties.tsx

@@ -26,7 +26,9 @@ export const SalesAndRoyalties: React.FunctionComponent<SalesAndRoyaltiesIconPro
 
   return (
     <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'}

package/build/components/savings.tsx

@@ -26,7 +26,7 @@ export const Savings: React.FunctionComponent<SavingsIconProps> = ({
 
   return (
     <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'}

package/build/components/scan-qr-code.tsx

@@ -26,7 +26,7 @@ export const ScanQrCode: React.FunctionComponent<ScanQrCodeIconProps> = ({
 
   return (
     <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'}

package/build/components/search.tsx

@@ -26,7 +26,7 @@ export const Search: React.FunctionComponent<SearchIconProps> = ({
 
   return (
     <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'}

package/build/components/send.tsx

@@ -26,7 +26,7 @@ export const Send: React.FunctionComponent<SendIconProps> = ({
 
   return (
     <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'}

package/build/components/settings.tsx

@@ -26,7 +26,7 @@ export const Settings: React.FunctionComponent<SettingsIconProps> = ({
 
   return (
     <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'}

package/build/components/share-android.tsx

@@ -26,7 +26,7 @@ export const ShareAndroid: React.FunctionComponent<ShareAndroidIconProps> = ({
 
   return (
     <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'}

package/build/components/share-ios.tsx

@@ -26,7 +26,7 @@ export const ShareIos: React.FunctionComponent<ShareIosIconProps> = ({
 
   return (
     <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'}

package/build/components/shield.tsx

@@ -26,7 +26,7 @@ export const Shield: React.FunctionComponent<ShieldIconProps> = ({
 
   return (
     <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'}

package/build/components/shopping-bag.tsx

@@ -26,7 +26,7 @@ export const ShoppingBag: React.FunctionComponent<ShoppingBagIconProps> = ({
 
   return (
     <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'}

package/build/components/slider.tsx

@@ -26,7 +26,7 @@ export const Slider: React.FunctionComponent<SliderIconProps> = ({
 
   return (
     <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'}

package/build/components/sofort.tsx

@@ -26,7 +26,7 @@ export const Sofort: React.FunctionComponent<SofortIconProps> = ({
 
   return (
     <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'}

package/build/components/software-and-hosting.tsx

@@ -26,7 +26,9 @@ export const SoftwareAndHosting: React.FunctionComponent<SoftwareAndHostingIconP
 
   return (
     <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'}

package/build/components/software-and-web-hosting.tsx

@@ -26,7 +26,9 @@ export const SoftwareAndWebHosting: React.FunctionComponent<SoftwareAndWebHostin
 
   return (
     <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'}

package/build/components/speech-bubble-exclamation.tsx

@@ -26,7 +26,9 @@ export const SpeechBubbleExclamation: React.FunctionComponent<SpeechBubbleExclam
 
   return (
     <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'}

package/build/components/speech-bubble-message.tsx

@@ -26,7 +26,9 @@ export const SpeechBubbleMessage: React.FunctionComponent<SpeechBubbleMessageIco
 
   return (
     <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'}

package/build/components/speech-bubble-pending.tsx

@@ -26,7 +26,9 @@ export const SpeechBubblePending: React.FunctionComponent<SpeechBubblePendingIco
 
   return (
     <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'}

package/build/components/speech-bubble.tsx

@@ -26,7 +26,7 @@ export const SpeechBubble: React.FunctionComponent<SpeechBubbleIconProps> = ({
 
   return (
     <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'}

package/build/components/speech-bubbles.tsx

@@ -26,7 +26,7 @@ export const SpeechBubbles: React.FunctionComponent<SpeechBubblesIconProps> = ({
 
   return (
     <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'}

package/build/components/spend-dirham.tsx

@@ -26,7 +26,7 @@ export const SpendDirham: React.FunctionComponent<SpendDirhamIconProps> = ({
 
   return (
     <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'}

package/build/components/spend-dollar.tsx

@@ -26,7 +26,7 @@ export const SpendDollar: React.FunctionComponent<SpendDollarIconProps> = ({
 
   return (
     <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'}