Home/Libraries/Freehand free icons (Iconify)/credit-card-mastercard

Freehand free icons (Iconify)

CreditCardMastercard

License: CC-BY-4.0

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"><g fill="#818cf8" fill-rule="evenodd" clip-rule="evenodd"><path d="M23.7 9.066c-.07-.93-.12-1.85-.2-2.779c-.05-.62-.1-1.24-.18-1.859c0-.13-.07-1-.14-1.37a.7.7 0 0 0-.36-.499a11.7 11.7 0 0 0-3.617-.61c-1.83-.05-3.728.16-5.318.24c-.999.05-1.998.15-2.918.26c-2.229.26-4.448.63-6.696.83a.32.32 0 0 0 0 .64c2.258-.15 4.487-.48 6.736-.71c1-.09 1.999-.19 2.908-.19c1.58-.05 3.449-.22 5.248-.13c1 .027 1.991.188 2.948.48c-.11.28.19 1.079.2 1.179l.31 4.597c.05.74.29 1.77.29 2.7a1.9 1.9 0 0 1-.36 1.348a2.86 2.86 0 0 1-1.48.85c-.99.173-1.993.257-2.998.25c-2.239.16-4.447.42-6.676.58c-.94.07-1.88.12-2.839.14c-.973.044-1.95.014-2.918-.09a2.76 2.76 0 0 1-1.59-.61a1.2 1.2 0 0 1-.22-.57c-.07-.44-.06-.92-.1-1.24c-.1-1.059-.219-2.488-.289-3.857s-.13-2.819-.1-3.858a.3.3 0 0 0-.28-.3a.29.29 0 0 0-.29.28v3.908c0 1.429.14 2.838.23 3.888q.015.768.12 1.529a1.7 1.7 0 0 0 .35.74c.418.408.946.686 1.52.799c1.18.231 2.384.325 3.587.28c1 0 1.93 0 2.899-.07c2.228-.12 4.437-.36 6.676-.48a17 17 0 0 0 3.168-.28a3.9 3.9 0 0 0 2-1.17c.397-.434.637-.99.679-1.578a20.6 20.6 0 0 0-.3-3.268"/><path d="M21.002 16.881a.32.32 0 0 0-.336.118a.3.3 0 0 0-.054.112a25 25 0 0 1-.89 2.749c-.196.51-.487.978-.86 1.379c-.07-.12-.499 0-.909-.06c-1.13-.18-2.998-.62-5.047-1.13c-1.62-.4-3.368-.859-4.997-1.309c-2.39-.63-4.568-1.239-5.897-1.729a8 8 0 0 1-.94-.4a1 1 0 0 1-.21-.13a.93.93 0 0 1 0-.5c.06-.409.21-.839.27-1.138c.13-.65.3-1.28.46-1.83c.32-1.049.62-1.789.62-1.789a.28.28 0 0 0-.2-.38a.27.27 0 0 0-.37.14s-.34.75-.71 1.82c-.2.56-.4 1.199-.57 1.869a9.6 9.6 0 0 0-.35 1.389c-.033.27.001.545.1.8a4.5 4.5 0 0 0 1.9 1.149c.79.31 1.799.68 2.998 1c1.36.419 2.919.859 4.478 1.259c2.803.74 5.646 1.32 8.515 1.739c.427.09.872.056 1.28-.1a4.9 4.9 0 0 0 1.109-1.81q.503-1.401.82-2.858a.32.32 0 0 0-.21-.36M18.923 6.767a4.09 4.09 0 0 0-4.868-1.75a4.6 4.6 0 0 0-1.05.61a3.9 3.9 0 0 0-1.598-.61a4.35 4.35 0 0 0-3.998 1.52a4.08 4.08 0 0 0-.71 4.138a3.24 3.24 0 0 0 1.36 1.579a4.44 4.44 0 0 0 1.899.65a.29.29 0 0 0 .263-.464a.28.28 0 0 0-.194-.106a3.86 3.86 0 0 1-1.599-.64a2.6 2.6 0 0 1-1-1.29a3.25 3.25 0 0 1 .75-3.187a3.36 3.36 0 0 1 3.049-1.12c.31.046.611.144.89.29q-.33.355-.58.77a3 3 0 0 0-.34 2.268c.164.517.44.992.81 1.39q.5.56 1.109 1v.049a2.46 2.46 0 0 1-1.83.49a.32.32 0 0 0-.369.27a.32.32 0 0 0 .27.37a3.17 3.17 0 0 0 2.369-.52l.28-.25c.51.257 1.077.38 1.649.36c4.057-.06 4.827-3.628 3.438-5.817m-6.717 2.388a2.17 2.17 0 0 1 .53-1.829q.122-.166.27-.31q.196.233.36.49c.485.831.708 1.79.64 2.749c-.03.314-.13.618-.29.89a5 5 0 0 1-.74-.68a3 3 0 0 1-.77-1.31m3.269 2.719a2.8 2.8 0 0 1-1.12-.29c.25-.372.41-.796.47-1.24a5.5 5.5 0 0 0-.59-3.327a4.4 4.4 0 0 0-.43-.63q.3-.185.63-.31a3.12 3.12 0 0 1 3.748 1.18c.97 1.389 1.12 4.807-2.708 4.617"/></g></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. CreditCardMastercardIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **CC-BY-4.0** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.