Buy Me A Coffee icon

thesvg-color:buy-me-a-coffee

The Buy Me A Coffee icon (thesvg-color:buy-me-a-coffee) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 884 × 1279 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: 884 × 1279
Tags: buyme, mea, acoffee, buymeacoffee

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="884" height="1279" viewBox="0 0 884 1279"><g fill="none"><path fill="#0d0c22" d="m791.109 297.518l-.878-.516l-2.03-.619a4.83 4.83 0 0 0 2.908 1.135m12.787 91.373l-.98.275zm-12.412-91.514a2 2 0 0 1-.366-.087a1.4 1.4 0 0 0 0 .244a.74.74 0 0 0 .366-.157"/><path fill="#0d0c22" d="M791.113 297.529h.131v-.082zm11.998 91.197l1.48-.843l.551-.31l.499-.533a8.5 8.5 0 0 0-2.53 1.686m-9.442-89.211l-1.446-1.377l-.98-.533a4.08 4.08 0 0 0 2.426 1.91m-363.65 886.665a7.55 7.55 0 0 0-2.943 2.27l.912-.58c.62-.57 1.497-1.24 2.031-1.69m211.168-41.55c0-1.3-.636-1.06-.482 3.58c0-.37.155-.75.224-1.11c.086-.83.155-1.64.258-2.47m-21.903 41.55a7.55 7.55 0 0 0-2.942 2.27l.912-.58c.619-.57 1.497-1.24 2.03-1.69m-337.98 9.88a6.3 6.3 0 0 0-3.097-1.45c.929.45 1.858.9 2.477 1.24zm-33.463-32.05a9.9 9.9 0 0 0-1.222-3.85c.474 1.23.87 2.5 1.187 3.78z"/><path fill="#fd0" d="M472.623 590.836c-45.941 19.667-98.077 41.966-165.647 41.966a313.6 313.6 0 0 1-83.623-11.528l46.733 479.806a80.17 80.17 0 0 0 25.593 52.38a80.18 80.18 0 0 0 54.313 21.19s66.262 3.44 88.373 3.44c23.796 0 95.151-3.44 95.151-3.44c20.12 0 39.503-7.57 54.303-21.2a80.15 80.15 0 0 0 25.587-52.37l50.053-530.204c-22.368-7.639-44.943-12.715-70.391-12.715c-44.014-.017-79.477 15.142-120.445 32.675"/><path fill="#0d0c22" d="m78.689 386.132l.79.74l.517.31a8 8 0 0 0-1.307-1.05"/><path fill="#0d0c22" d="m879.567 341.849l-7.037-35.497c-6.315-31.849-20.648-61.943-53.34-73.454c-10.479-3.683-22.369-5.265-30.404-12.888c-8.035-7.622-10.41-19.46-12.268-30.438c-3.442-20.149-6.676-40.315-10.204-60.429c-3.045-17.293-5.454-36.719-13.386-52.583c-10.324-21.302-31.746-33.76-53.048-42.001a306 306 0 0 0-33.363-10.324C613.297 10.195 557.342 5.033 502.591 2.09a1376 1376 0 0 0-197.169 3.27c-48.797 4.439-100.193 9.807-146.564 26.687c-16.948 6.177-34.413 13.593-47.3 26.687c-15.813 16.088-20.975 40.969-9.43 61.031c8.208 14.247 22.111 24.313 36.857 30.972a299 299 0 0 0 59.844 19.478c57.297 12.664 116.642 17.636 175.178 19.753a1334 1334 0 0 0 194.433-6.35a1107 1107 0 0 0 47.817-6.314c18.738-2.874 30.765-27.376 25.242-44.445c-6.608-20.406-24.365-28.321-44.444-25.241c-2.96.464-5.902.894-8.862 1.324l-2.133.31q-10.204 1.29-20.407 2.409a1083 1083 0 0 1-42.259 3.717c-31.626 2.202-63.337 3.217-95.031 3.269c-31.144 0-62.305-.878-93.38-2.925a1187 1187 0 0 1-42.431-3.545a1020 1020 0 0 1-19.219-2.168l-6.092-.774l-1.324-.189l-6.315-.912c-12.905-1.945-25.81-4.181-38.577-6.883a5.8 5.8 0 0 1 0-11.322h.241c11.064-2.357 22.213-4.37 33.397-6.125q5.593-.878 11.219-1.72h.103c7.003-.465 14.041-1.722 21.009-2.547A1336 1336 0 0 1 469.538 73.1c29.577.86 59.138 2.599 88.578 5.593a979 979 0 0 1 18.927 2.116c2.409.293 4.835.636 7.262.93l4.886.705a678 678 0 0 1 42.517 7.725c20.889 4.543 47.714 6.022 57.005 28.907c2.96 7.261 4.302 15.331 5.936 22.953l2.082 9.722q.082.262.121.533q7.382 34.413 14.78 68.826a12.6 12.6 0 0 1-2.006 9.871a12.6 12.6 0 0 1-8.593 5.254h-.138l-3.011.413l-2.976.395q-14.144 1.842-28.322 3.442a1829 1829 0 0 1-55.938 5.506a1957 1957 0 0 1-111.55 6.074q-28.476.757-56.936.705a1976 1976 0 0 1-225.989-13.146c-8.122-.963-16.243-1.996-24.365-3.045c6.298.809-4.577-.62-6.779-.929a1447 1447 0 0 1-15.486-2.254c-17.327-2.599-34.55-5.799-51.843-8.604c-20.906-3.441-40.9-1.72-59.81 8.604a87 87 0 0 0-36.012 37.338c-8.156 16.862-10.582 35.221-14.23 53.34s-9.326 37.614-7.175 56.214C5.1 420.431 33.165 453.054 73.53 460.35c37.975 6.882 76.156 12.457 114.44 17.206a2114.8 2114.8 0 0 0 489.988 2.822a25.81 25.81 0 0 1 21.003 7.339a25.8 25.8 0 0 1 7.491 20.948l-3.82 37.132l-23.091 225.077a178841 178841 0 0 1-31.126 302.866c-2.203 21.84-2.512 44.36-6.659 65.94c-6.539 33.93-29.509 54.77-63.027 62.39a439 439 0 0 1-93.569 10.94c-34.912.19-69.806-1.36-104.718-1.17c-37.27.21-82.918-3.23-111.687-30.97c-25.277-24.36-28.77-62.51-32.211-95.5q-6.882-65.504-13.645-130.989l-25.293-242.766l-16.363-157.077c-.276-2.598-.551-5.162-.809-7.778c-1.962-18.737-15.228-37.079-36.134-36.133c-17.894.791-38.232 16.002-36.133 36.133l12.13 116.454l25.087 240.89a378681 378681 0 0 1 21.388 205.306c1.377 13.11 2.667 26.26 4.112 39.37c7.864 71.65 62.58 110.26 130.339 121.13c39.575 6.37 80.113 7.68 120.273 8.33c51.482.83 103.48 2.81 154.118-6.52c75.038-13.77 131.337-63.87 139.372-141.59c2.295-22.44 4.589-44.88 6.883-67.33q11.442-111.361 22.85-222.739l24.881-242.61l11.408-111.188a25.81 25.81 0 0 1 20.785-22.696c21.456-4.181 41.967-11.322 57.229-27.651c24.295-25.998 29.13-59.895 20.544-94.067M72.43 365.835c.327-.155-.275 2.649-.533 3.957c-.052-1.979.051-3.734.533-3.957m2.082 16.105c.172-.121.688.568 1.222 1.394c-.809-.758-1.325-1.325-1.24-1.394zm2.048 2.701c.74 1.256 1.135 2.048 0 0m4.112 3.338h.103c0 .121.19.241.258.362a2.7 2.7 0 0 0-.378-.362zm720.124-4.99c-7.708 7.33-19.323 10.737-30.8 12.441c-128.704 19.099-259.283 28.769-389.399 24.502c-93.121-3.183-185.261-13.525-277.453-26.55c-9.034-1.273-18.824-2.925-25.036-9.584c-11.7-12.561-5.953-37.854-2.908-53.03c2.788-13.903 8.122-32.434 24.657-34.413c25.81-3.028 55.783 7.863 81.318 11.735a1540 1540 0 0 0 92.57 11.27c132.18 12.045 266.58 10.169 398.175-7.45a1661 1661 0 0 0 71.699-11.236c21.216-3.803 44.737-10.943 57.556 11.029c8.792 14.97 9.962 34.998 8.603 51.912a28.94 28.94 0 0 1-8.999 19.374z"/></g></svg>

How to use the Buy Me A Coffee icon

React

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

<Icon icon="thesvg-color:buy-me-a-coffee" width="24" />

Vue

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

<template>
  <Icon icon="thesvg-color:buy-me-a-coffee" width="24" />
</template>

Svelte

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

<Icon icon="thesvg-color:buy-me-a-coffee" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--buy-me-a-coffee]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:buy-me-a-coffee"></div>

Web component

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

<iconify-icon icon="thesvg-color:buy-me-a-coffee"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/thesvg-color/buy-me-a-coffee.svg" alt="Buy Me A Coffee icon" width="24" height="24">

Related icons in theSVG Color

Buy Me A Coffee icon in other icon sets

Buy Me A Coffee icon FAQ

Is the Buy Me A Coffee 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 Buy Me A Coffee icon in React?

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

How do I add the Buy Me A Coffee icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/buy-me-a-coffee.svg" alt="Buy Me A Coffee icon">, or paste the SVG code inline to style it with CSS.

Browse all theSVG Color icons →