Add icons to this collection by clicking the heart icon.
Credit Card icon - also known as bank, payment, debit card, payment method, credit card, online payment, and business and finance. Created in a clean gradient 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 64 64"
>
<linearGradient
id="a"
x1="4.625"
x2="62.398"
y1="62.375"
y2="4.603"
gradientUnits="userSpaceOnUse"
>
<stop offset=".014" stop-color="#4279bd" />
<stop offset=".184" stop-color="#3f83ba" />
<stop offset=".476" stop-color="#389fb0" />
<stop offset=".852" stop-color="#2ccba2" />
<stop offset=".913" stop-color="#2ad39f" />
</linearGradient>
<linearGradient
id="b"
x1="1.875"
x2="59.648"
y1="59.625"
y2="1.853"
href="#a"
/>
<linearGradient
id="c"
x1="-6.875"
x2="50.898"
y1="50.875"
y2="-6.898"
href="#a"
/>
<linearGradient
id="d"
x1="-3.375"
x2="54.398"
y1="54.375"
y2="-3.398"
href="#a"
/>
<linearGradient
id="e"
x1="1.625"
x2="59.398"
y1="59.375"
y2="1.603"
href="#a"
/>
<linearGradient
id="f"
x1="6.625"
x2="64.397"
y1="64.375"
y2="6.603"
href="#a"
/>
<linearGradient
id="g"
x1="11.625"
x2="69.398"
y1="69.375"
y2="11.603"
href="#a"
/>
<linearGradient
id="h"
x1="1.125"
x2="58.898"
y1="58.875"
y2="1.103"
href="#a"
/>
<linearGradient
id="i"
x1="2.125"
x2="59.898"
y1="59.875"
y2="2.103"
href="#a"
/>
<linearGradient
id="j"
x1="7.625"
x2="65.397"
y1="65.375"
y2="7.603"
href="#a"
/>
<linearGradient
id="k"
x1="9.625"
x2="67.398"
y1="67.375"
y2="9.603"
href="#a"
/>
<linearGradient
id="l"
x1="-7.875"
x2="49.898"
y1="49.875"
y2="-7.898"
href="#a"
/>
<linearGradient
id="m"
x1="-5.625"
x2="52.148"
y1="52.125"
y2="-5.648"
href="#a"
/>
<linearGradient
id="n"
x1="-8.875"
x2="48.898"
y1="48.875"
y2="-8.898"
href="#a"
/>
<linearGradient
id="o"
x1="-4.875"
x2="52.898"
y1="52.875"
y2="-4.898"
href="#a"
/>
<g>
<path
fill="url(#a)"
d="M54 54H4a2.002 2.002 0 0 1-2-2V24a2.002 2.002 0 0 1 2-2h50a2.002 2.002 0 0 1 2 2v28a2.002 2.002 0 0 1-2 2zM4 24v28h50.002L54 24z"
/>
<path
fill="url(#b)"
d="M59 45h-4a1 1 0 0 1 0-2h4V12H9v11a1 1 0 0 1-2 0V12a2.002 2.002 0 0 1 2-2h50a2.002 2.002 0 0 1 2 2v31a2.002 2.002 0 0 1-2 2z"
/>
<path
fill="url(#c)"
d="M19 36H7a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zM8 34h10v-6H8z"
/>
<path
fill="url(#d)"
d="M60 20H8a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h52a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1zM9 18h50v-2H9zM13 42H7a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2z"
/>
<path fill="url(#e)" d="M23 42h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2z" />
<path fill="url(#f)" d="M33 42h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2z" />
<path fill="url(#g)" d="M43 42h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2z" />
<path fill="url(#h)" d="M23 46H7a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2z" />
<path fill="url(#i)" d="M19 50H7a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2z" />
<path fill="url(#j)" d="M51 28H41a1 1 0 0 1 0-2h10a1 1 0 0 1 0 2z" />
<path fill="url(#k)" d="M51 32H41a1 1 0 0 1 0-2h10a1 1 0 0 1 0 2z" />
<path
fill="url(#l)"
d="M11 36a1 1 0 0 1-1-1v-8a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1z"
/>
<path
fill="url(#m)"
d="M15 36a1 1 0 0 1-1-1v-7a1 1 0 0 1 2 0v7a1 1 0 0 1-1 1z"
/>
<path fill="url(#n)" d="M11 32H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z" />
<path fill="url(#o)" d="M19 32h-4a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z" />
</g>
</svg>
More icons in the same style and category