credit card icon
credit-card from Element Plus by Element Plus · Outline · MIT Free for personal and commercial use.
- Name
- credit-card
- Set
- Element Plus
- Style
- Outline
- Viewbox
- 1024×1024
- License
- MIT
The same icon in other sets
credit-cardAkar Iconscredit-card-filledAnt Design Iconscredit-cardBootstrap Iconscredit-cardBoxIcons v2credit-cardBoxIcons v2 Solidcredit-cardCodiconscredit-cardEmoji One (Colored)credit-card-fillEva Iconscredit-cardFont Awesome 6 Regularcredit-cardFont Awesome 6 Solidcredit-cardFont Awesome Regularcredit-cardFont Awesome Solidcredit-cardFeather Iconscredit-card-outlineFlowbite Iconscredit-cardFluent Emojicredit-cardFluent Emoji Flatcredit-cardFluent Emoji High Contrastcredit-cardcss.ggcredit-cardHealth Iconscredit-cardHeroIconscredit-cardHuge Iconscredit-cardHumbleiconscredit-cardIconoircredit-cardJam Icons
Use the credit card icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M896 324.1c0-42.4-2.5-55.3-9.5-68.5a52 52 0 0 0-22.2-22c-13.1-7.1-26-9.6-68.4-9.6H228.1c-42.4 0-55.3 2.5-68.5 9.5a52 52 0 0 0-22 22.2c-7.1 13.1-9.6 26-9.6 68.4v375.8c0 42.4 2.5 55.3 9.5 68.5a52 52 0 0 0 22.2 22c13.1 7.1 26 9.6 68.4 9.6h567.8c42.4 0 55.3-2.5 68.5-9.5a52 52 0 0 0 22-22.2c7.1-13.1 9.6-26 9.6-68.4zm64 0v375.8c0 57-6 77.8-17 98.6q-17 31.5-48.5 48.4C863 864 853 864 796 864H228c-57 0-77.7-6-98.5-17A116 116 0 0 1 81 798.4C70 777.7 64 757 64 700V324c0-57 5.9-77.7 17-98.5q17-31.6 48.4-48.5c31.4-16.9 41.6-17 98.6-17h567.8c57.1 0 77.8 5.9 98.6 17q31.6 17 48.4 48.4C959.6 256.8 960 267 960 324z"/><path fill="currentColor" d="M64 320h896v64H64zm0 128h896v64H64zm128 192h256v64H192z"/></svg>
React
import type { SVGProps } from "react";
export function EpCreditCard(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M896 324.1c0-42.4-2.5-55.3-9.5-68.5a52 52 0 0 0-22.2-22c-13.1-7.1-26-9.6-68.4-9.6H228.1c-42.4 0-55.3 2.5-68.5 9.5a52 52 0 0 0-22 22.2c-7.1 13.1-9.6 26-9.6 68.4v375.8c0 42.4 2.5 55.3 9.5 68.5a52 52 0 0 0 22.2 22c13.1 7.1 26 9.6 68.4 9.6h567.8c42.4 0 55.3-2.5 68.5-9.5a52 52 0 0 0 22-22.2c7.1-13.1 9.6-26 9.6-68.4zm64 0v375.8c0 57-6 77.8-17 98.6q-17 31.5-48.5 48.4C863 864 853 864 796 864H228c-57 0-77.7-6-98.5-17A116 116 0 0 1 81 798.4C70 777.7 64 757 64 700V324c0-57 5.9-77.7 17-98.5q17-31.6 48.4-48.5c31.4-16.9 41.6-17 98.6-17h567.8c57.1 0 77.8 5.9 98.6 17q31.6 17 48.4 48.4C959.6 256.8 960 267 960 324z"/><path fill="currentColor" d="M64 320h896v64H64zm0 128h896v64H64zm128 192h256v64H192z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M896 324.1c0-42.4-2.5-55.3-9.5-68.5a52 52 0 0 0-22.2-22c-13.1-7.1-26-9.6-68.4-9.6H228.1c-42.4 0-55.3 2.5-68.5 9.5a52 52 0 0 0-22 22.2c-7.1 13.1-9.6 26-9.6 68.4v375.8c0 42.4 2.5 55.3 9.5 68.5a52 52 0 0 0 22.2 22c13.1 7.1 26 9.6 68.4 9.6h567.8c42.4 0 55.3-2.5 68.5-9.5a52 52 0 0 0 22-22.2c7.1-13.1 9.6-26 9.6-68.4zm64 0v375.8c0 57-6 77.8-17 98.6q-17 31.5-48.5 48.4C863 864 853 864 796 864H228c-57 0-77.7-6-98.5-17A116 116 0 0 1 81 798.4C70 777.7 64 757 64 700V324c0-57 5.9-77.7 17-98.5q17-31.6 48.4-48.5c31.4-16.9 41.6-17 98.6-17h567.8c57.1 0 77.8 5.9 98.6 17q31.6 17 48.4 48.4C959.6 256.8 960 267 960 324z"/><path fill="currentColor" d="M64 320h896v64H64zm0 128h896v64H64zm128 192h256v64H192z"/></svg> </template>
CSS
.icon-credit-card {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M896%20324.1c0-42.4-2.5-55.3-9.5-68.5a52%2052%200%200%200-22.2-22c-13.1-7.1-26-9.6-68.4-9.6H228.1c-42.4%200-55.3%202.5-68.5%209.5a52%2052%200%200%200-22%2022.2c-7.1%2013.1-9.6%2026-9.6%2068.4v375.8c0%2042.4%202.5%2055.3%209.5%2068.5a52%2052%200%200%200%2022.2%2022c13.1%207.1%2026%209.6%2068.4%209.6h567.8c42.4%200%2055.3-2.5%2068.5-9.5a52%2052%200%200%200%2022-22.2c7.1-13.1%209.6-26%209.6-68.4zm64%200v375.8c0%2057-6%2077.8-17%2098.6q-17%2031.5-48.5%2048.4C863%20864%20853%20864%20796%20864H228c-57%200-77.7-6-98.5-17A116%20116%200%200%201%2081%20798.4C70%20777.7%2064%20757%2064%20700V324c0-57%205.9-77.7%2017-98.5q17-31.6%2048.4-48.5c31.4-16.9%2041.6-17%2098.6-17h567.8c57.1%200%2077.8%205.9%2098.6%2017q31.6%2017%2048.4%2048.4C959.6%20256.8%20960%20267%20960%20324z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M64%20320h896v64H64zm0%20128h896v64H64zm128%20192h256v64H192z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M896%20324.1c0-42.4-2.5-55.3-9.5-68.5a52%2052%200%200%200-22.2-22c-13.1-7.1-26-9.6-68.4-9.6H228.1c-42.4%200-55.3%202.5-68.5%209.5a52%2052%200%200%200-22%2022.2c-7.1%2013.1-9.6%2026-9.6%2068.4v375.8c0%2042.4%202.5%2055.3%209.5%2068.5a52%2052%200%200%200%2022.2%2022c13.1%207.1%2026%209.6%2068.4%209.6h567.8c42.4%200%2055.3-2.5%2068.5-9.5a52%2052%200%200%200%2022-22.2c7.1-13.1%209.6-26%209.6-68.4zm64%200v375.8c0%2057-6%2077.8-17%2098.6q-17%2031.5-48.5%2048.4C863%20864%20853%20864%20796%20864H228c-57%200-77.7-6-98.5-17A116%20116%200%200%201%2081%20798.4C70%20777.7%2064%20757%2064%20700V324c0-57%205.9-77.7%2017-98.5q17-31.6%2048.4-48.5c31.4-16.9%2041.6-17%2098.6-17h567.8c57.1%200%2077.8%205.9%2098.6%2017q31.6%2017%2048.4%2048.4C959.6%20256.8%20960%20267%20960%20324z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M64%20320h896v64H64zm0%20128h896v64H64zm128%20192h256v64H192z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ep/credit-card.svg?color=%231a73e8&size=48
