Skip to content
Cuelark UI

Hover the icon or press Play. Suggested motion: drive. Pick another to preview it and update the animated code:

Remix Icon · RiMastercardLine

Mastercard Line icon

A free mastercard line icon from Remix Icon, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License
Apache License Version 2.0
Project
github.com
Download SVG
Install with shadcn
npx shadcn@latest add https://ui.cuelark.com/r/icons/remix/mastercard-line.json
components/icons/remix-mastercard-line.tsx
import * as React from "react";

/**
 * Mastercard Line from Remix Icon (https://github.com/Remix-Design/RemixIcon), Apache License Version 2.0.
 * Via Cuelark UI: ui.cuelark.com/icons/remix/mastercard-line. Sized in em, colored by currentColor.
 */
export function RiMastercardLineIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 24 24"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M12.001 18.2942C10.916 18.9333 9.65132 19.3 8.30098 19.3C4.2693 19.3 1.00098 16.0316 1.00098 12C1.00098 7.96827 4.2693 4.69995 8.30098 4.69995C9.65132 4.69995 10.916 5.06659 12.001 5.70575C13.0859 5.06659 14.3506 4.69995 15.701 4.69995C19.7327 4.69995 23.001 7.96827 23.001 12C23.001 16.0316 19.7327 19.3 15.701 19.3C14.3506 19.3 13.0859 18.9333 12.001 18.2942ZM13.7027 16.9103C14.3194 17.1615 14.994 17.3 15.701 17.3C18.6281 17.3 21.001 14.9271 21.001 12C21.001 9.07284 18.6281 6.69995 15.701 6.69995C14.994 6.69995 14.3194 6.83837 13.7027 7.08957C14.8821 8.38619 15.601 10.1091 15.601 12C15.601 13.8908 14.8821 15.6137 13.7027 16.9103ZM10.2992 7.08957C9.68255 6.83837 9.00793 6.69995 8.30098 6.69995C5.37387 6.69995 3.00098 9.07284 3.00098 12C3.00098 14.9271 5.37387 17.3 8.30098 17.3C9.00793 17.3 9.68255 17.1615 10.2992 16.9103C9.11986 15.6137 8.40098 13.8908 8.40098 12C8.40098 10.1091 9.11986 8.38619 10.2992 7.08957ZM12.001 8.20521C11.0139 9.16781 10.401 10.5123 10.401 12C10.401 13.4876 11.0139 14.8321 12.001 15.7947C12.9881 14.8321 13.601 13.4876 13.601 12C13.601 10.5123 12.9881 9.16781 12.001 8.20521Z"
      />
    </svg>
  );
}
With react-icons
import { RiMastercardLine } from "react-icons/ri";

export function Example() {
  return <RiMastercardLine className="size-5" />;
}
mastercard-line.svg
<svg
  viewBox="0 0 24 24"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M12.001 18.2942C10.916 18.9333 9.65132 19.3 8.30098 19.3C4.2693 19.3 1.00098 16.0316 1.00098 12C1.00098 7.96827 4.2693 4.69995 8.30098 4.69995C9.65132 4.69995 10.916 5.06659 12.001 5.70575C13.0859 5.06659 14.3506 4.69995 15.701 4.69995C19.7327 4.69995 23.001 7.96827 23.001 12C23.001 16.0316 19.7327 19.3 15.701 19.3C14.3506 19.3 13.0859 18.9333 12.001 18.2942ZM13.7027 16.9103C14.3194 17.1615 14.994 17.3 15.701 17.3C18.6281 17.3 21.001 14.9271 21.001 12C21.001 9.07284 18.6281 6.69995 15.701 6.69995C14.994 6.69995 14.3194 6.83837 13.7027 7.08957C14.8821 8.38619 15.601 10.1091 15.601 12C15.601 13.8908 14.8821 15.6137 13.7027 16.9103ZM10.2992 7.08957C9.68255 6.83837 9.00793 6.69995 8.30098 6.69995C5.37387 6.69995 3.00098 9.07284 3.00098 12C3.00098 14.9271 5.37387 17.3 8.30098 17.3C9.00793 17.3 9.68255 17.1615 10.2992 16.9103C9.11986 15.6137 8.40098 13.8908 8.40098 12C8.40098 10.1091 9.11986 8.38619 10.2992 7.08957ZM12.001 8.20521C11.0139 9.16781 10.401 10.5123 10.401 12C10.401 13.4876 11.0139 14.8321 12.001 15.7947C12.9881 14.8321 13.601 13.4876 13.601 12C13.601 10.5123 12.9881 9.16781 12.001 8.20521Z"
  />
</svg>
Attribution
"Mastercard Line" icon from Remix Icon (https://github.com/Remix-Design/RemixIcon), licensed under Apache License Version 2.0.

Related icons: