Gentleface › Money & finance › contactless

contactless icon

Contactless: contactless payment, tap to pay, tap and pay. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.122 1.125C11.993 1.893 12.677 2.801 13.176 3.849C13.725 5.004 14 6.221 14 7.5C14 8.779 13.725 9.996 13.176 11.151C12.677 12.199 11.993 13.107 11.122 13.875C11.017 13.968 10.896 14.011 10.76 14.002C10.624 13.994 10.51 13.936 10.417 13.831C10.323 13.725 10.281 13.604 10.289 13.468C10.298 13.333 10.355 13.218 10.461 13.125C11.229 12.448 11.833 11.646 12.273 10.722C12.758 9.702 13 8.629 13 7.5C13 6.371 12.758 5.298 12.273 4.278C11.833 3.354 11.229 2.552 10.461 1.875C10.355 1.782 10.298 1.667 10.289 1.531C10.281 1.396 10.323 1.275 10.416 1.169C10.51 1.064 10.624 1.006 10.76 0.998C10.896 0.989 11.017 1.032 11.122 1.125ZM10.77 5.787C10.923 6.347 11 6.919 11 7.5C11 8.081 10.923 8.653 10.77 9.213C10.622 9.755 10.408 10.268 10.127 10.754C9.618 11.634 8.94 12.355 8.093 12.917C7.978 12.993 7.853 13.017 7.717 12.99C7.582 12.963 7.476 12.891 7.4 12.776C7.322 12.659 7.297 12.534 7.324 12.4C7.351 12.267 7.423 12.161 7.54 12.083C8.257 11.608 8.831 10.998 9.261 10.253C9.754 9.402 10 8.484 10 7.5C10 6.516 9.754 5.598 9.261 4.747C8.831 4.002 8.257 3.392 7.54 2.917C7.423 2.839 7.351 2.733 7.324 2.6C7.297 2.466 7.322 2.341 7.4 2.224C7.476 2.109 7.582 2.037 7.717 2.01C7.853 1.983 7.978 2.007 8.093 2.083C8.94 2.645 9.618 3.366 10.127 4.246C10.408 4.732 10.622 5.245 10.77 5.787ZM5.679 3.562C6.395 3.959 6.961 4.509 7.376 5.215C7.792 5.92 8 6.681 8 7.5C8 8.319 7.792 9.08 7.376 9.785C6.961 10.491 6.395 11.041 5.679 11.438C5.555 11.506 5.428 11.521 5.297 11.483C5.167 11.446 5.067 11.365 4.999 11.242C4.932 11.121 4.918 10.994 4.956 10.862C4.994 10.729 5.074 10.629 5.194 10.563C5.751 10.254 6.192 9.826 6.515 9.278C6.838 8.729 7 8.137 7 7.5C7 6.863 6.838 6.271 6.515 5.722C6.192 5.174 5.751 4.746 5.194 4.438C5.071 4.369 4.991 4.27 4.953 4.139C4.915 4.008 4.931 3.881 4.999 3.758C5.067 3.635 5.167 3.554 5.297 3.517C5.428 3.479 5.555 3.494 5.679 3.562ZM4.476 5.969C4.651 6.194 4.783 6.442 4.873 6.713C4.958 6.968 5 7.231 5 7.5C5 7.769 4.958 8.032 4.873 8.287C4.783 8.558 4.651 8.806 4.476 9.031C4.302 9.256 4.095 9.446 3.855 9.601C3.629 9.747 3.386 9.853 3.125 9.921C2.989 9.956 2.862 9.939 2.745 9.87C2.627 9.801 2.551 9.698 2.516 9.561C2.481 9.428 2.499 9.301 2.569 9.183C2.639 9.064 2.741 8.987 2.875 8.952C3.206 8.867 3.476 8.689 3.686 8.419C3.895 8.148 4 7.842 4 7.5C4 7.158 3.895 6.852 3.686 6.581C3.476 6.311 3.206 6.133 2.875 6.048C2.741 6.013 2.639 5.936 2.569 5.817C2.499 5.699 2.481 5.572 2.516 5.439C2.55 5.305 2.627 5.203 2.746 5.133C2.865 5.063 2.991 5.045 3.125 5.079C3.386 5.147 3.629 5.253 3.855 5.399C4.095 5.554 4.302 5.744 4.476 5.969Z"/></svg>

React

// Gentleface "contactless" (line-round), MIT. https://gentleface.com/icons/contactless
import type { SVGProps } from 'react';

export function ContactlessIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M11.122 1.125C11.993 1.893 12.677 2.801 13.176 3.849C13.725 5.004 14 6.221 14 7.5C14 8.779 13.725 9.996 13.176 11.151C12.677 12.199 11.993 13.107 11.122 13.875C11.017 13.968 10.896 14.011 10.76 14.002C10.624 13.994 10.51 13.936 10.417 13.831C10.323 13.725 10.281 13.604 10.289 13.468C10.298 13.333 10.355 13.218 10.461 13.125C11.229 12.448 11.833 11.646 12.273 10.722C12.758 9.702 13 8.629 13 7.5C13 6.371 12.758 5.298 12.273 4.278C11.833 3.354 11.229 2.552 10.461 1.875C10.355 1.782 10.298 1.667 10.289 1.531C10.281 1.396 10.323 1.275 10.416 1.169C10.51 1.064 10.624 1.006 10.76 0.998C10.896 0.989 11.017 1.032 11.122 1.125ZM10.77 5.787C10.923 6.347 11 6.919 11 7.5C11 8.081 10.923 8.653 10.77 9.213C10.622 9.755 10.408 10.268 10.127 10.754C9.618 11.634 8.94 12.355 8.093 12.917C7.978 12.993 7.853 13.017 7.717 12.99C7.582 12.963 7.476 12.891 7.4 12.776C7.322 12.659 7.297 12.534 7.324 12.4C7.351 12.267 7.423 12.161 7.54 12.083C8.257 11.608 8.831 10.998 9.261 10.253C9.754 9.402 10 8.484 10 7.5C10 6.516 9.754 5.598 9.261 4.747C8.831 4.002 8.257 3.392 7.54 2.917C7.423 2.839 7.351 2.733 7.324 2.6C7.297 2.466 7.322 2.341 7.4 2.224C7.476 2.109 7.582 2.037 7.717 2.01C7.853 1.983 7.978 2.007 8.093 2.083C8.94 2.645 9.618 3.366 10.127 4.246C10.408 4.732 10.622 5.245 10.77 5.787ZM5.679 3.562C6.395 3.959 6.961 4.509 7.376 5.215C7.792 5.92 8 6.681 8 7.5C8 8.319 7.792 9.08 7.376 9.785C6.961 10.491 6.395 11.041 5.679 11.438C5.555 11.506 5.428 11.521 5.297 11.483C5.167 11.446 5.067 11.365 4.999 11.242C4.932 11.121 4.918 10.994 4.956 10.862C4.994 10.729 5.074 10.629 5.194 10.563C5.751 10.254 6.192 9.826 6.515 9.278C6.838 8.729 7 8.137 7 7.5C7 6.863 6.838 6.271 6.515 5.722C6.192 5.174 5.751 4.746 5.194 4.438C5.071 4.369 4.991 4.27 4.953 4.139C4.915 4.008 4.931 3.881 4.999 3.758C5.067 3.635 5.167 3.554 5.297 3.517C5.428 3.479 5.555 3.494 5.679 3.562ZM4.476 5.969C4.651 6.194 4.783 6.442 4.873 6.713C4.958 6.968 5 7.231 5 7.5C5 7.769 4.958 8.032 4.873 8.287C4.783 8.558 4.651 8.806 4.476 9.031C4.302 9.256 4.095 9.446 3.855 9.601C3.629 9.747 3.386 9.853 3.125 9.921C2.989 9.956 2.862 9.939 2.745 9.87C2.627 9.801 2.551 9.698 2.516 9.561C2.481 9.428 2.499 9.301 2.569 9.183C2.639 9.064 2.741 8.987 2.875 8.952C3.206 8.867 3.476 8.689 3.686 8.419C3.895 8.148 4 7.842 4 7.5C4 7.158 3.895 6.852 3.686 6.581C3.476 6.311 3.206 6.133 2.875 6.048C2.741 6.013 2.639 5.936 2.569 5.817C2.499 5.699 2.481 5.572 2.516 5.439C2.55 5.305 2.627 5.203 2.746 5.133C2.865 5.063 2.991 5.045 3.125 5.079C3.386 5.147 3.629 5.253 3.855 5.399C4.095 5.554 4.302 5.744 4.476 5.969Z" />
    </svg>
  );
}

Vue

Vue: see /icons/contactless.md

Svelte

Svelte: see /icons/contactless.md

HTML img

HTML img: see /icons/contactless.md

CSS

CSS: see /icons/contactless.md

Data URL

Data URL: see /icons/contactless.md

Sprite

Sprite: see /icons/contactless.md

SwiftUI

SwiftUI: see /icons/contactless.md

Compose

Compose: see /icons/contactless.md

Android XML

Android XML: see /icons/contactless.md

Flutter

Flutter: see /icons/contactless.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { ContactlessIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

contactless payment, tap to pay, tap and pay

Alternatives

nfc: the NFC radio itself or its setting
payment-terminal: a card reader at the counter

Also fits

contactless: contactless card payment, tap to pay (contactless-payment); nfc is the radio technology
card payment: tap to pay
card terminal: tap to pay

Tags

contactless, contactless-payment, tap-to-pay, tap, wireless-payment, nfc-payment, card, payment, pay, emv

Category

Money & finance

Component name

ContactlessIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

More money & finance icons

atm banknote banknote-arrow-down banknote-arrow-up banknote-check banknote-off banknote-x coin coins coins-swap coins-swap-badge credit-card credit-card-alert credit-card-check credit-card-clock credit-card-gear · all money & finance icons

For agents

Metadata: /icons/contactless.json · Markdown: /icons/contactless.md · SVG: https://gentleface.com/svg/{style}/16/contactless.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/contactless.png

contactless icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More money & finance icons

For agents

contactless icon