ko fi icon

ko-fi from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.

Name: ko-fi
Set: Huge Icons
Style: Stroke
Viewbox: 24×24
License: MIT

The same icon in other sets

ko-fiCoreUI Brands ko-fiFont Awesome Brands

Use the ko fi icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.5"><path d="M17 5.5H4c-.943 0-1.414 0-1.707.293S2 6.557 2 7.5v7c0 1.886 0 2.828.586 3.414S4.114 18.5 6 18.5h7c.932 0 1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083C16 16.898 16 16.432 16 15.5h1a5 5 0 0 0 0-10Z"/><path d="M17 13h-1V8h1a2.5 2.5 0 0 1 0 5Z"/><path stroke-linecap="round" d="M5.586 9.1c.78-.8 2.047-.8 2.828 0L9 9.702l.586-.6a1.964 1.964 0 0 1 2.828 0c.781.8.781 2.098 0 2.899L9 15.5L5.586 12a2.087 2.087 0 0 1 0-2.9" clip-rule="evenodd"/></g></svg>

React

import type { SVGProps } from "react";

export function HugeiconsKoFi(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.5"><path d="M17 5.5H4c-.943 0-1.414 0-1.707.293S2 6.557 2 7.5v7c0 1.886 0 2.828.586 3.414S4.114 18.5 6 18.5h7c.932 0 1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083C16 16.898 16 16.432 16 15.5h1a5 5 0 0 0 0-10Z"/><path d="M17 13h-1V8h1a2.5 2.5 0 0 1 0 5Z"/><path strokeLinecap="round" d="M5.586 9.1c.78-.8 2.047-.8 2.828 0L9 9.702l.586-.6a1.964 1.964 0 0 1 2.828 0c.781.8.781 2.098 0 2.899L9 15.5L5.586 12a2.087 2.087 0 0 1 0-2.9" clipRule="evenodd"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.5"><path d="M17 5.5H4c-.943 0-1.414 0-1.707.293S2 6.557 2 7.5v7c0 1.886 0 2.828.586 3.414S4.114 18.5 6 18.5h7c.932 0 1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083C16 16.898 16 16.432 16 15.5h1a5 5 0 0 0 0-10Z"/><path d="M17 13h-1V8h1a2.5 2.5 0 0 1 0 5Z"/><path stroke-linecap="round" d="M5.586 9.1c.78-.8 2.047-.8 2.828 0L9 9.702l.586-.6a1.964 1.964 0 0 1 2.828 0c.781.8.781 2.098 0 2.899L9 15.5L5.586 12a2.087 2.087 0 0 1 0-2.9" clip-rule="evenodd"/></g></svg>
</template>

CSS

.icon-ko-fi {
  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%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M17%205.5H4c-.943%200-1.414%200-1.707.293S2%206.557%202%207.5v7c0%201.886%200%202.828.586%203.414S4.114%2018.5%206%2018.5h7c.932%200%201.398%200%201.765-.152a2%202%200%200%200%201.083-1.083C16%2016.898%2016%2016.432%2016%2015.5h1a5%205%200%200%200%200-10Z%22%2F%3E%3Cpath%20d%3D%22M17%2013h-1V8h1a2.5%202.5%200%200%201%200%205Z%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M5.586%209.1c.78-.8%202.047-.8%202.828%200L9%209.702l.586-.6a1.964%201.964%200%200%201%202.828%200c.781.8.781%202.098%200%202.899L9%2015.5L5.586%2012a2.087%202.087%200%200%201%200-2.9%22%20clip-rule%3D%22evenodd%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%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M17%205.5H4c-.943%200-1.414%200-1.707.293S2%206.557%202%207.5v7c0%201.886%200%202.828.586%203.414S4.114%2018.5%206%2018.5h7c.932%200%201.398%200%201.765-.152a2%202%200%200%200%201.083-1.083C16%2016.898%2016%2016.432%2016%2015.5h1a5%205%200%200%200%200-10Z%22%2F%3E%3Cpath%20d%3D%22M17%2013h-1V8h1a2.5%202.5%200%200%201%200%205Z%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M5.586%209.1c.78-.8%202.047-.8%202.828%200L9%209.702l.586-.6a1.964%201.964%200%200%201%202.828%200c.781.8.781%202.098%200%202.899L9%2015.5L5.586%2012a2.087%202.087%200%200%201%200-2.9%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/hugeicons/ko-fi.svg?color=%231a73e8&size=48