+ {methods.map((m) => (
+
+ ))}
+
+ ),
+ args: {
+ paymentMethod: PaymentMethodEnum.visa,
+ },
+}
diff --git a/packages/design-system/lib/components/Payment/PaymentMethodIcon.tsx b/packages/design-system/lib/components/Payment/PaymentMethodIcon.tsx
new file mode 100644
index 000000000..d4285463b
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/PaymentMethodIcon.tsx
@@ -0,0 +1,61 @@
+import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
+import { GenericCardIcon } from './Icons/GenericCardIcon'
+import { SwishIcon } from './Icons/SwishIcon'
+import { VippsIcon } from './Icons/VippsIcon'
+import { MobilePayIcon } from './Icons/MobilePayIcon'
+import { ApplePayIcon } from './Icons/ApplePayIcon'
+import { GooglePayIcon } from './Icons/GooglePayIcon'
+import { PayPalIcon } from './Icons/PayPalIcon'
+import { KlarnaIcon } from './Icons/KlarnaIcon'
+import { AmericanExpressIcon } from './Icons/AmericanExpressIcon'
+import { DanKortIcon } from './Icons/DanKortIcon'
+import { DinersClubIcon } from './Icons/DinersClubIcon'
+import { JcbIcon } from './Icons/JcbIcon'
+import { MasterCardIcon } from './Icons/MasterCardIcon'
+import { VisaIcon } from './Icons/VisaIcon'
+import { MaestroIcon } from './Icons/MaestroIcon'
+import { ChinaUnionPayIcon } from './Icons/ChinaUnionPayIcon'
+import { DiscoverIcon } from './Icons/DiscoverIcon'
+import { PaymentIconProps } from './Icons/IconProps'
+
+const paymentMethods: Partial<
+ Record<
+ keyof typeof PaymentMethodEnum,
+ (props: PaymentIconProps) => React.ReactNode
+ >
+> = {
+ swish: (props) =>