mastercard logo

mastercard from CoreUI Brands by creativeLabs Łukasz Holeczek · Brand · CC0-1.0 Free for personal and commercial use.

Name
mastercard
Set
CoreUI Brands
Style
Brand
Viewbox
32×32
License
CC0 1.0

The same logo in other sets

mastercardBoxicons Brandsmastercard-solidFlowbite IconsmastercardSVG Logosmastercard-fillMingCute Iconmastercard-fillRemix IconmastercardSimple Icons

Use the mastercard logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="m15.125 24.041l.239.193a9.8 9.8 0 0 1-5.473 1.651C4.427 25.885 0 21.464 0 16c0-5.459 4.427-9.885 9.885-9.885c2.027 0 3.912.604 5.475 1.645a3 3 0 0 0-.22.204c-2.337 2.02-3.681 4.953-3.681 8.036s1.339 6.016 3.667 8.041zm6.99-17.926A9.83 9.83 0 0 0 16.64 7.76c.079.068.157.136.22.204A10.63 10.63 0 0 1 20.541 16c0 3.079-1.339 6.011-3.667 8.041l-.239.193a9.8 9.8 0 0 0 5.473 1.651c5.464 0 9.891-4.421 9.891-9.885c0-5.459-4.427-9.885-9.885-9.885zM16 8.235a9.86 9.86 0 0 0-3.776 7.766A9.86 9.86 0 0 0 16 23.772c.131-.099.251-.203.375-.312a9.86 9.86 0 0 0 3.401-7.459A9.86 9.86 0 0 0 16 8.235"/></svg>

React

import type { SVGProps } from "react";

export function CibMastercard(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="m15.125 24.041l.239.193a9.8 9.8 0 0 1-5.473 1.651C4.427 25.885 0 21.464 0 16c0-5.459 4.427-9.885 9.885-9.885c2.027 0 3.912.604 5.475 1.645a3 3 0 0 0-.22.204c-2.337 2.02-3.681 4.953-3.681 8.036s1.339 6.016 3.667 8.041zm6.99-17.926A9.83 9.83 0 0 0 16.64 7.76c.079.068.157.136.22.204A10.63 10.63 0 0 1 20.541 16c0 3.079-1.339 6.011-3.667 8.041l-.239.193a9.8 9.8 0 0 0 5.473 1.651c5.464 0 9.891-4.421 9.891-9.885c0-5.459-4.427-9.885-9.885-9.885zM16 8.235a9.86 9.86 0 0 0-3.776 7.766A9.86 9.86 0 0 0 16 23.772c.131-.099.251-.203.375-.312a9.86 9.86 0 0 0 3.401-7.459A9.86 9.86 0 0 0 16 8.235"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="m15.125 24.041l.239.193a9.8 9.8 0 0 1-5.473 1.651C4.427 25.885 0 21.464 0 16c0-5.459 4.427-9.885 9.885-9.885c2.027 0 3.912.604 5.475 1.645a3 3 0 0 0-.22.204c-2.337 2.02-3.681 4.953-3.681 8.036s1.339 6.016 3.667 8.041zm6.99-17.926A9.83 9.83 0 0 0 16.64 7.76c.079.068.157.136.22.204A10.63 10.63 0 0 1 20.541 16c0 3.079-1.339 6.011-3.667 8.041l-.239.193a9.8 9.8 0 0 0 5.473 1.651c5.464 0 9.891-4.421 9.891-9.885c0-5.459-4.427-9.885-9.885-9.885zM16 8.235a9.86 9.86 0 0 0-3.776 7.766A9.86 9.86 0 0 0 16 23.772c.131-.099.251-.203.375-.312a9.86 9.86 0 0 0 3.401-7.459A9.86 9.86 0 0 0 16 8.235"/></svg>
</template>

CSS

.icon-mastercard {
  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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m15.125%2024.041l.239.193a9.8%209.8%200%200%201-5.473%201.651C4.427%2025.885%200%2021.464%200%2016c0-5.459%204.427-9.885%209.885-9.885c2.027%200%203.912.604%205.475%201.645a3%203%200%200%200-.22.204c-2.337%202.02-3.681%204.953-3.681%208.036s1.339%206.016%203.667%208.041zm6.99-17.926A9.83%209.83%200%200%200%2016.64%207.76c.079.068.157.136.22.204A10.63%2010.63%200%200%201%2020.541%2016c0%203.079-1.339%206.011-3.667%208.041l-.239.193a9.8%209.8%200%200%200%205.473%201.651c5.464%200%209.891-4.421%209.891-9.885c0-5.459-4.427-9.885-9.885-9.885zM16%208.235a9.86%209.86%200%200%200-3.776%207.766A9.86%209.86%200%200%200%2016%2023.772c.131-.099.251-.203.375-.312a9.86%209.86%200%200%200%203.401-7.459A9.86%209.86%200%200%200%2016%208.235%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m15.125%2024.041l.239.193a9.8%209.8%200%200%201-5.473%201.651C4.427%2025.885%200%2021.464%200%2016c0-5.459%204.427-9.885%209.885-9.885c2.027%200%203.912.604%205.475%201.645a3%203%200%200%200-.22.204c-2.337%202.02-3.681%204.953-3.681%208.036s1.339%206.016%203.667%208.041zm6.99-17.926A9.83%209.83%200%200%200%2016.64%207.76c.079.068.157.136.22.204A10.63%2010.63%200%200%201%2020.541%2016c0%203.079-1.339%206.011-3.667%208.041l-.239.193a9.8%209.8%200%200%200%205.473%201.651c5.464%200%209.891-4.421%209.891-9.885c0-5.459-4.427-9.885-9.885-9.885zM16%208.235a9.86%209.86%200%200%200-3.776%207.766A9.86%209.86%200%200%200%2016%2023.772c.131-.099.251-.203.375-.312a9.86%209.86%200%200%200%203.401-7.459A9.86%209.86%200%200%200%2016%208.235%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/cib/mastercard.svg?color=%231a73e8&size=48