feat: list credit card according to design

components/Icons/CreditCard.tsx

@@ -0,0 +1,40 @@
+import * as variants from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function CreditCardIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = variants.iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        id="mask0_7561_16317"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <svg mask="url(#mask0_7561_16317)">
+        <path
+          d="M21.75 6.1001V17.9001C21.75 18.4157 21.5664 18.8571 21.1992 19.2243C20.832 19.5915 20.3906 19.7751 19.875 19.7751H4.125C3.60937 19.7751 3.16796 19.5915 2.80077 19.2243C2.43359 18.8571 2.25 18.4157 2.25 17.9001V6.1001C2.25 5.58446 2.43359 5.14306 2.80077 4.77587C3.16796 4.40869 3.60937 4.2251 4.125 4.2251H19.875C20.3906 4.2251 20.832 4.40869 21.1992 4.77587C21.5664 5.14306 21.75 5.58446 21.75 6.1001ZM4.125 8.1251H19.875V6.1001H4.125V8.1251ZM4.125 11.9251V17.9001H19.875V11.9251H4.125Z"
+          fill="#26201E"
+        />
+      </svg>
+    </svg>
+  )
+}