Line Pay icon

thesvg-color:line-pay

The Line Pay icon (thesvg-color:line-pay) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 522 × 152 grid. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: theSVG Color
Author: thesvg.org
License: MIT
Size: 522 × 152
Tags: linepay

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="522" height="152" viewBox="0 0 522 152"><defs><clipPath id="SVGX17ocb2Y"><path d="M-561.664 251.862h800v-1800h-800z"/></clipPath><clipPath id="SVGFNS5deey"><path d="M-512.704 269.733h800v-1800h-800z"/></clipPath><clipPath id="SVGeDpUecPa"><path d="M-467.142 253.895h800v-1800h-800z"/></clipPath><clipPath id="SVGEclc7dJL"><path d="M-588.991 323.551h800v-1800h-800z"/></clipPath><clipPath id="SVGyZK6o2vw"><path d="M-332.801 234.155h800v-1800h-800z"/></clipPath><clipPath id="SVGtFzTQbJX"><path d="M-386.035 248.986h800v-1800h-800z"/></clipPath><clipPath id="SVGMtSbieRw"><path d="M-244.344 283.945h800v-1800h-800z"/></clipPath><clipPath id="SVGIthq5btX"><path d="M-267.385 234.155h800v-1800h-800z"/></clipPath></defs><g clip-path="url(#SVGIthq5btX)" transform="matrix(1.33333 0 0 -1.33333 84.752 33.054)"><path d="M0 0h-9.534a2.65 2.65 0 0 1-2.649-2.648v-59.325a2.65 2.65 0 0 1 2.649-2.649H0a2.65 2.65 0 0 1 2.648 2.649v59.325A2.65 2.65 0 0 1 0 0"/></g><g clip-path="url(#SVGMtSbieRw)" transform="matrix(1.33333 0 0 -1.33333 54.03 99.44)"><path d="M0 0h-25.69v47.142a2.65 2.65 0 0 1-2.648 2.648h-9.535a2.65 2.65 0 0 1-2.648-2.648v-59.325a2.65 2.65 0 0 1 2.648-2.649H0a2.65 2.65 0 0 1 2.648 2.649v9.535A2.65 2.65 0 0 1 0 0"/></g><g clip-path="url(#SVGtFzTQbJX)" transform="matrix(1.33333 0 0 -1.33333 242.951 52.829)"><path d="M0 0a2.65 2.65 0 0 1 2.648 2.648v9.535A2.65 2.65 0 0 1 0 14.831h-37.873a2.65 2.65 0 0 1-2.648-2.648v-59.325a2.65 2.65 0 0 1 2.648-2.649H0a2.65 2.65 0 0 1 2.648 2.649v9.535A2.65 2.65 0 0 1 0-34.959h-25.69v10.064H0a2.65 2.65 0 0 1 2.648 2.648v9.535A2.65 2.65 0 0 1 0-10.064h-25.69V0z"/></g><g clip-path="url(#SVGyZK6o2vw)" transform="matrix(1.33333 0 0 -1.33333 171.973 33.054)"><path d="M0 0h-9.534a2.65 2.65 0 0 1-2.649-2.648v-34.327L-37.134-1.3C-37.841-.288-38.896 0-40.067 0c-.148.025-.299 0-.454 0h-9.534a2.65 2.65 0 0 1-2.648-2.648v-59.325a2.65 2.65 0 0 1 2.648-2.649h9.534a2.65 2.65 0 0 1 2.649 2.649v35.852l26.014-37.195q.141-.2.305-.369a2.66 2.66 0 0 1 1.832-.937H0a2.65 2.65 0 0 1 2.648 2.649v59.325A2.65 2.65 0 0 1 0 0"/></g><g clip-path="url(#SVGEclc7dJL)" transform="matrix(1.33333 0 0 -1.33333 513.559 152.249)"><path fill="#08bf5b" d="M0 0h-168.792a6.62 6.62 0 0 0-6.62 6.62v100.944a6.62 6.62 0 0 0 6.62 6.619H0a6.62 6.62 0 0 0 6.62-6.619V6.62A6.62 6.62 0 0 0 0 0"/></g><g clip-path="url(#SVGeDpUecPa)" transform="matrix(1.33333 0 0 -1.33333 351.094 59.374)"><path fill="#fff" d="M0 0c0 3.847-2.715 6.788-6.411 6.788h-7.919V-6.788h7.919C-2.715-6.788 0-3.847 0 0m12.067 0c0-10.031-8.07-18.101-18.478-18.101h-7.919v-14.816c0-.981-.795-1.776-1.776-1.776h-8.514c-.982 0-1.777.795-1.777 1.776v49.241c0 .982.795 1.777 1.777 1.777h18.209c10.408 0 18.478-8.07 18.478-18.101"/></g><g clip-path="url(#SVGFNS5deey)" transform="matrix(1.33333 0 0 -1.33333 411.843 80.493)"><path fill="#fff" d="M0 0c0 5.656-3.771 9.201-8.975 9.201S-17.95 5.656-17.95 0s3.771-9.201 8.975-9.201S0-5.657 0 0m11.313 17.92v-35.84a.934.934 0 0 0-.935-.935H.935A.935.935 0 0 0 0-17.92v2.609c-2.489-2.865-6.185-4.6-11.237-4.6c-9.881 0-18.026 8.673-18.026 19.911s8.145 19.911 18.026 19.911c5.052 0 8.748-1.735 11.237-4.601v2.61c0 .517.419.935.935.935h9.443a.934.934 0 0 0 .935-.935"/></g><g clip-path="url(#SVGX17ocb2Y)" transform="matrix(1.33333 0 0 -1.33333 477.123 56.664)"><path fill="#fff" d="m0 0l-8.682-21.87L-17.659.017a1.56 1.56 0 0 1-1.442.966h-9.628a.935.935 0 0 1-.865-1.29l14.978-36.513l-5.459-13.75a.936.936 0 0 1 .869-1.281h9.633a1.56 1.56 0 0 1 1.448.984L11.95-.296a.935.935 0 0 1-.869 1.279H1.449A1.56 1.56 0 0 1 0 0"/></g></svg>

How to use the Line Pay icon

React

import { Icon } from "@iconify/react";

<Icon icon="thesvg-color:line-pay" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="thesvg-color:line-pay" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="thesvg-color:line-pay" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--line-pay]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:line-pay"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="thesvg-color:line-pay"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/thesvg-color/line-pay.svg" alt="Line Pay icon" width="24" height="24">

Related icons in theSVG Color

Line Pay icon FAQ

Is the Line Pay icon free for commercial use?

Yes. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects.

How do I use the Line Pay icon in React?

Install @iconify/react and render <Icon icon="thesvg-color:line-pay" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Line Pay icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/line-pay.svg" alt="Line Pay icon">, or paste the SVG code inline to style it with CSS.

Browse all theSVG Color icons →