buy me a coffee twotone icon
buy-me-a-coffee-twotone from Material Line Icons by Vjacheslav Trushkin · Line · Social · MIT Free for personal and commercial use.
- Name
- buy-me-a-coffee-twotone
- Set
- Material Line Icons
- Style
- Line
- Category
- Social
- Viewbox
- 24×24
- License
- MIT
More social icons from Material Line Icons
atblueskybluesky-filledbluesky-twotonebuy-me-a-coffeebuy-me-a-coffee-filleddiscorddiscord-twotoneemailemail-alertemail-alert-filledemail-alert-twotoneemail-alt-filledemail-alt-twotoneemail-arrow-downemail-arrow-down-filledemail-arrow-down-twotoneemail-arrow-leftemail-arrow-left-filledemail-arrow-left-twotoneemail-arrow-rightemail-arrow-right-filledemail-arrow-right-twotoneemail-arrow-up
Use the buy me a coffee twotone icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><defs><mask id="SVGbM9xrexz"><path fill="#fff" d="M5 6c0 -2 2 0 6.5 0c4.5 0 7.5 -2 7.5 0l0 1c0 1.5 -2 2 -6.5 2c-4.5 0 -7.5 0 -7.5 -2l0 -1Z"/><path d="M4 4h16v5h-16Z"><animate fill="freeze" attributeName="d" begin="0.4s" dur="0.4s" to="M4 4h0v5h0Z"/></path></mask><mask id="SVG7b0ZLcJT"><path fill="#fff" fill-opacity=".3" d="M10.13 18.15c-0.09 -0.86 -0.72 -6.17 -0.72 -6.17c0 0 1.94 0.33 3.1 -0.25c1.16 -0.57 2.48 -0.73 2.48 -0.73c0 0 -0.58 6.96 -0.63 7.46c-0.05 0.5 -0.9 0.84 -1.4 0.84l-1.72 0c-0.5 0 -1.02 -0.3 -1.11 -1.15Z"/><path d="M8 10h8v10h-8Z"><animate fill="freeze" attributeName="d" begin="1s" dur="0.4s" to="M8 10h8v0h-8Z"/></path></mask></defs><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="32" d="M7.5 10.5c0 0 0.83 6.93 1 8.5c0.17 1.57 1.5 2 2.5 2l2 0c1.5 0 2.88 -1.14 3 -2c0.13 -0.86 1 -12 1 -12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="32;0"/></path><path stroke-dasharray="14" stroke-dashoffset="14" d="M8 4c1.1 -0.57 2 -1 4 -1c2 0 4.5 0.5 4.5 3"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.8s" dur="0.2s" to="0"/></path></g><g fill="currentColor"><path d="M0 0h24v24H0z" mask="url(#SVGbM9xrexz)"/><path d="M0 0h24v24H0z" mask="url(#SVG7b0ZLcJT)"/></g></svg>
React
import type { SVGProps } from "react";
export function LineMdBuyMeACoffeeTwotone(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><defs><mask id="SVGbM9xrexz"><path fill="#fff" d="M5 6c0 -2 2 0 6.5 0c4.5 0 7.5 -2 7.5 0l0 1c0 1.5 -2 2 -6.5 2c-4.5 0 -7.5 0 -7.5 -2l0 -1Z"/><path d="M4 4h16v5h-16Z"><animate fill="freeze" attributeName="d" begin="0.4s" dur="0.4s" to="M4 4h0v5h0Z"/></path></mask><mask id="SVG7b0ZLcJT"><path fill="#fff" fillOpacity=".3" d="M10.13 18.15c-0.09 -0.86 -0.72 -6.17 -0.72 -6.17c0 0 1.94 0.33 3.1 -0.25c1.16 -0.57 2.48 -0.73 2.48 -0.73c0 0 -0.58 6.96 -0.63 7.46c-0.05 0.5 -0.9 0.84 -1.4 0.84l-1.72 0c-0.5 0 -1.02 -0.3 -1.11 -1.15Z"/><path d="M8 10h8v10h-8Z"><animate fill="freeze" attributeName="d" begin="1s" dur="0.4s" to="M8 10h8v0h-8Z"/></path></mask></defs><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"><path strokeDasharray="32" d="M7.5 10.5c0 0 0.83 6.93 1 8.5c0.17 1.57 1.5 2 2.5 2l2 0c1.5 0 2.88 -1.14 3 -2c0.13 -0.86 1 -12 1 -12"><animate fill="freeze" attributeName="strokeDashoffset" dur="0.4s" values="32;0"/></path><path strokeDasharray="14" strokeDashoffset="14" d="M8 4c1.1 -0.57 2 -1 4 -1c2 0 4.5 0.5 4.5 3"><animate fill="freeze" attributeName="strokeDashoffset" begin="0.8s" dur="0.2s" to="0"/></path></g><g fill="currentColor"><path d="M0 0h24v24H0z" mask="url(#SVGbM9xrexz)"/><path d="M0 0h24v24H0z" mask="url(#SVG7b0ZLcJT)"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><defs><mask id="SVGbM9xrexz"><path fill="#fff" d="M5 6c0 -2 2 0 6.5 0c4.5 0 7.5 -2 7.5 0l0 1c0 1.5 -2 2 -6.5 2c-4.5 0 -7.5 0 -7.5 -2l0 -1Z"/><path d="M4 4h16v5h-16Z"><animate fill="freeze" attributeName="d" begin="0.4s" dur="0.4s" to="M4 4h0v5h0Z"/></path></mask><mask id="SVG7b0ZLcJT"><path fill="#fff" fill-opacity=".3" d="M10.13 18.15c-0.09 -0.86 -0.72 -6.17 -0.72 -6.17c0 0 1.94 0.33 3.1 -0.25c1.16 -0.57 2.48 -0.73 2.48 -0.73c0 0 -0.58 6.96 -0.63 7.46c-0.05 0.5 -0.9 0.84 -1.4 0.84l-1.72 0c-0.5 0 -1.02 -0.3 -1.11 -1.15Z"/><path d="M8 10h8v10h-8Z"><animate fill="freeze" attributeName="d" begin="1s" dur="0.4s" to="M8 10h8v0h-8Z"/></path></mask></defs><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="32" d="M7.5 10.5c0 0 0.83 6.93 1 8.5c0.17 1.57 1.5 2 2.5 2l2 0c1.5 0 2.88 -1.14 3 -2c0.13 -0.86 1 -12 1 -12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="32;0"/></path><path stroke-dasharray="14" stroke-dashoffset="14" d="M8 4c1.1 -0.57 2 -1 4 -1c2 0 4.5 0.5 4.5 3"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.8s" dur="0.2s" to="0"/></path></g><g fill="currentColor"><path d="M0 0h24v24H0z" mask="url(#SVGbM9xrexz)"/><path d="M0 0h24v24H0z" mask="url(#SVG7b0ZLcJT)"/></g></svg> </template>
CSS
.icon-buy-me-a-coffee-twotone {
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%2024%2024%22%3E%3Cdefs%3E%3Cmask%20id%3D%22SVGbM9xrexz%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M5%206c0%20-2%202%200%206.5%200c4.5%200%207.5%20-2%207.5%200l0%201c0%201.5%20-2%202%20-6.5%202c-4.5%200%20-7.5%200%20-7.5%20-2l0%20-1Z%22%2F%3E%3Cpath%20d%3D%22M4%204h16v5h-16Z%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20begin%3D%220.4s%22%20dur%3D%220.4s%22%20to%3D%22M4%204h0v5h0Z%22%2F%3E%3C%2Fpath%3E%3C%2Fmask%3E%3Cmask%20id%3D%22SVG7b0ZLcJT%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.3%22%20d%3D%22M10.13%2018.15c-0.09%20-0.86%20-0.72%20-6.17%20-0.72%20-6.17c0%200%201.94%200.33%203.1%20-0.25c1.16%20-0.57%202.48%20-0.73%202.48%20-0.73c0%200%20-0.58%206.96%20-0.63%207.46c-0.05%200.5%20-0.9%200.84%20-1.4%200.84l-1.72%200c-0.5%200%20-1.02%20-0.3%20-1.11%20-1.15Z%22%2F%3E%3Cpath%20d%3D%22M8%2010h8v10h-8Z%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20begin%3D%221s%22%20dur%3D%220.4s%22%20to%3D%22M8%2010h8v0h-8Z%22%2F%3E%3C%2Fpath%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20stroke-dasharray%3D%2232%22%20d%3D%22M7.5%2010.5c0%200%200.83%206.93%201%208.5c0.17%201.57%201.5%202%202.5%202l2%200c1.5%200%202.88%20-1.14%203%20-2c0.13%20-0.86%201%20-12%201%20-12%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22stroke-dashoffset%22%20dur%3D%220.4s%22%20values%3D%2232%3B0%22%2F%3E%3C%2Fpath%3E%3Cpath%20stroke-dasharray%3D%2214%22%20stroke-dashoffset%3D%2214%22%20d%3D%22M8%204c1.1%20-0.57%202%20-1%204%20-1c2%200%204.5%200.5%204.5%203%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22stroke-dashoffset%22%20begin%3D%220.8s%22%20dur%3D%220.2s%22%20to%3D%220%22%2F%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20mask%3D%22url(%23SVGbM9xrexz)%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20mask%3D%22url(%23SVG7b0ZLcJT)%22%2F%3E%3C%2Fg%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%2024%2024%22%3E%3Cdefs%3E%3Cmask%20id%3D%22SVGbM9xrexz%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M5%206c0%20-2%202%200%206.5%200c4.5%200%207.5%20-2%207.5%200l0%201c0%201.5%20-2%202%20-6.5%202c-4.5%200%20-7.5%200%20-7.5%20-2l0%20-1Z%22%2F%3E%3Cpath%20d%3D%22M4%204h16v5h-16Z%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20begin%3D%220.4s%22%20dur%3D%220.4s%22%20to%3D%22M4%204h0v5h0Z%22%2F%3E%3C%2Fpath%3E%3C%2Fmask%3E%3Cmask%20id%3D%22SVG7b0ZLcJT%22%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.3%22%20d%3D%22M10.13%2018.15c-0.09%20-0.86%20-0.72%20-6.17%20-0.72%20-6.17c0%200%201.94%200.33%203.1%20-0.25c1.16%20-0.57%202.48%20-0.73%202.48%20-0.73c0%200%20-0.58%206.96%20-0.63%207.46c-0.05%200.5%20-0.9%200.84%20-1.4%200.84l-1.72%200c-0.5%200%20-1.02%20-0.3%20-1.11%20-1.15Z%22%2F%3E%3Cpath%20d%3D%22M8%2010h8v10h-8Z%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22d%22%20begin%3D%221s%22%20dur%3D%220.4s%22%20to%3D%22M8%2010h8v0h-8Z%22%2F%3E%3C%2Fpath%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20stroke-dasharray%3D%2232%22%20d%3D%22M7.5%2010.5c0%200%200.83%206.93%201%208.5c0.17%201.57%201.5%202%202.5%202l2%200c1.5%200%202.88%20-1.14%203%20-2c0.13%20-0.86%201%20-12%201%20-12%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22stroke-dashoffset%22%20dur%3D%220.4s%22%20values%3D%2232%3B0%22%2F%3E%3C%2Fpath%3E%3Cpath%20stroke-dasharray%3D%2214%22%20stroke-dashoffset%3D%2214%22%20d%3D%22M8%204c1.1%20-0.57%202%20-1%204%20-1c2%200%204.5%200.5%204.5%203%22%3E%3Canimate%20fill%3D%22freeze%22%20attributeName%3D%22stroke-dashoffset%22%20begin%3D%220.8s%22%20dur%3D%220.2s%22%20to%3D%220%22%2F%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20mask%3D%22url(%23SVGbM9xrexz)%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20mask%3D%22url(%23SVG7b0ZLcJT)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/line-md/buy-me-a-coffee-twotone.svg?color=%231a73e8&size=48
