Add icons to this collection by clicking the heart icon.
Credit Card icon - also known as money, card, payment, credit, credit card, chip, and business and finance. Created in a clean outline color style, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 48 48"
>
<g>
<rect width="42" height="28" x="3" y="10" fill="#8b97ff" rx="4" />
<path
fill="#6384ff"
d="M41 35H7a4 4 0 0 1-4-4v3a4 4 0 0 0 4 4h34a4 4 0 0 0 4-4v-3a4 4 0 0 1-4 4z"
/>
<g fill="#f2e0ff">
<path
d="M41 10H7a4 4 0 0 0-4 4v3a4 4 0 0 1 4-4h34a4 4 0 0 1 4 4v-3a4 4 0 0 0-4-4z"
/>
<rect
width="2"
height="4"
x="43"
y="12"
rx="1"
transform="rotate(180 44 14)"
/>
<rect
width="2"
height="4"
x="35"
y="11"
rx="1"
transform="rotate(180 36 13)"
/>
<rect
width="2"
height="4"
x="31"
y="10"
rx="1"
transform="rotate(180 32 12)"
/>
<rect
width="2"
height="4"
x="21"
y="10"
rx="1"
transform="rotate(180 22 12)"
/>
<rect
width="2"
height="4"
x="18"
y="11"
rx="1"
transform="rotate(180 19 13)"
/>
<rect
width="2"
height="4"
x="13"
y="10"
rx="1"
transform="rotate(180 14 12)"
/>
</g>
<rect
width="2"
height="4"
x="5"
y="33"
fill="#6384ff"
rx="1"
transform="rotate(180 6 35)"
/>
<rect
width="2"
height="4"
x="12"
y="34"
fill="#6384ff"
rx="1"
transform="rotate(180 13 36)"
/>
<rect
width="2"
height="4"
x="18"
y="33"
fill="#6384ff"
rx="1"
transform="rotate(180 19 35)"
/>
<rect
width="2"
height="4"
x="29"
y="34"
fill="#6384ff"
rx="1"
transform="rotate(180 30 36)"
/>
<rect
width="2"
height="4"
x="33"
y="33"
fill="#6384ff"
rx="1"
transform="rotate(180 34 35)"
/>
<rect
width="2"
height="4"
x="41"
y="33"
fill="#6384ff"
rx="1"
transform="rotate(180 42 35)"
/>
<rect
width="2"
height="4"
x="5"
y="11"
fill="#f2e0ff"
rx="1"
transform="rotate(180 6 13)"
/>
<path
fill="#583ea0"
d="M41 39H7a5 5 0 0 1-5-5V14a5 5 0 0 1 5-5h34a5 5 0 0 1 5 5v20a5 5 0 0 1-5 5zM7 11a3 3 0 0 0-3 3v20a3 3 0 0 0 3 3h34a3 3 0 0 0 3-3V14a3 3 0 0 0-3-3z"
/>
<rect width="9" height="4" x="7" y="29" fill="#96e099" rx="2" />
<rect width="8" height="4" x="20" y="29" fill="#96e099" rx="2" />
<rect width="9" height="4" x="32" y="29" fill="#96e099" rx="2" />
<path
fill="#7dc97d"
d="M9 31h5a2 2 0 0 0 1.72-1A2 2 0 0 1 14 33H9a2 2 0 0 1-1.72-3A2 2 0 0 0 9 31z"
/>
<rect width="9" height="7" x="8" y="15" fill="#ff54a6" rx="2" />
<path
fill="#ffcfff"
d="M15 15h-5a2 2 0 0 0-2 2v2a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2v-2a2 2 0 0 0-2-2z"
/>
<path
fill="#ff3b98"
d="M15 20h-5a2 2 0 0 1-2-2v2a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2v-2a2 2 0 0 1-2 2z"
/>
<rect
width="2"
height="4"
x="8"
y="15"
fill="#ffcfff"
rx="1"
transform="rotate(180 9 17)"
/>
<rect
width="2"
height="4"
x="12"
y="14"
fill="#ffcfff"
rx="1"
transform="rotate(180 13 16)"
/>
<rect
width="2"
height="4"
x="15"
y="18"
fill="#ff3b98"
rx="1"
transform="rotate(180 16 20)"
/>
<rect
width="2"
height="4"
x="11"
y="19"
fill="#ff3b98"
rx="1"
transform="rotate(180 12 21)"
/>
<path
fill="#7dc97d"
d="M22 31h4a2 2 0 0 0 1.72-1A2 2 0 0 1 26 33h-4a2 2 0 0 1-1.72-3A2 2 0 0 0 22 31z"
/>
<path
fill="#583ea0"
d="M15 23h-5a3 3 0 0 1-3-3v-3a3 3 0 0 1 3-3h5a3 3 0 0 1 3 3v3a3 3 0 0 1-3 3zm-5-7a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1zM14 34H9a3 3 0 0 1 0-6h5a3 3 0 0 1 0 6zm-5-4a1 1 0 0 0 0 2h5a1 1 0 0 0 0-2z"
/>
<path
fill="#7dc97d"
d="M34 31h5a2 2 0 0 0 1.72-1A2 2 0 0 1 39 33h-5a2 2 0 0 1-1.72-3A2 2 0 0 0 34 31z"
/>
<path
fill="#583ea0"
d="M26 34h-4a3 3 0 0 1 0-6h4a3 3 0 0 1 0 6zm-4-4a1 1 0 0 0 0 2h4a1 1 0 0 0 0-2zM39 34h-5a3 3 0 0 1 0-6h5a3 3 0 0 1 0 6zm-5-4a1 1 0 0 0 0 2h5a1 1 0 0 0 0-2z"
/>
</g>
</svg>
More icons in the same style and category