tea bag icon

tea-bag-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.

Name: tea-bag-thin
Set: Phosphor
Style: Thin
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

tea-bag tea-bag-bold tea-bag-duotone tea-bag-fill tea-bag-light

Use the tea bag icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M224 164a20 20 0 0 1-20-20V64a52 52 0 0 0-104 0v12H76.53a12.06 12.06 0 0 0-10.29 5.83L45.71 116a12 12 0 0 0-1.71 6.22V216a12 12 0 0 0 12 12h96a12 12 0 0 0 12-12v-93.78a12 12 0 0 0-1.71-6.18l-20.53-34.21A12.06 12.06 0 0 0 131.47 76H108V64a44 44 0 0 1 88 0v80a28 28 0 0 0 28 28a4 4 0 0 0 0-8m-92.53-80a4 4 0 0 1 3.43 1.94l20.53 34.22a4 4 0 0 1 .57 2.06V216a4 4 0 0 1-4 4H56a4 4 0 0 1-4-4v-93.78a4 4 0 0 1 .57-2.06L73.1 85.94A4 4 0 0 1 76.53 84H100v52a4 4 0 0 0 8 0V84Z"/></svg>

React

import type { SVGProps } from "react";

export function PhTeaBagThin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M224 164a20 20 0 0 1-20-20V64a52 52 0 0 0-104 0v12H76.53a12.06 12.06 0 0 0-10.29 5.83L45.71 116a12 12 0 0 0-1.71 6.22V216a12 12 0 0 0 12 12h96a12 12 0 0 0 12-12v-93.78a12 12 0 0 0-1.71-6.18l-20.53-34.21A12.06 12.06 0 0 0 131.47 76H108V64a44 44 0 0 1 88 0v80a28 28 0 0 0 28 28a4 4 0 0 0 0-8m-92.53-80a4 4 0 0 1 3.43 1.94l20.53 34.22a4 4 0 0 1 .57 2.06V216a4 4 0 0 1-4 4H56a4 4 0 0 1-4-4v-93.78a4 4 0 0 1 .57-2.06L73.1 85.94A4 4 0 0 1 76.53 84H100v52a4 4 0 0 0 8 0V84Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M224 164a20 20 0 0 1-20-20V64a52 52 0 0 0-104 0v12H76.53a12.06 12.06 0 0 0-10.29 5.83L45.71 116a12 12 0 0 0-1.71 6.22V216a12 12 0 0 0 12 12h96a12 12 0 0 0 12-12v-93.78a12 12 0 0 0-1.71-6.18l-20.53-34.21A12.06 12.06 0 0 0 131.47 76H108V64a44 44 0 0 1 88 0v80a28 28 0 0 0 28 28a4 4 0 0 0 0-8m-92.53-80a4 4 0 0 1 3.43 1.94l20.53 34.22a4 4 0 0 1 .57 2.06V216a4 4 0 0 1-4 4H56a4 4 0 0 1-4-4v-93.78a4 4 0 0 1 .57-2.06L73.1 85.94A4 4 0 0 1 76.53 84H100v52a4 4 0 0 0 8 0V84Z"/></svg>
</template>

CSS

.icon-tea-bag-thin {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M224%20164a20%2020%200%200%201-20-20V64a52%2052%200%200%200-104%200v12H76.53a12.06%2012.06%200%200%200-10.29%205.83L45.71%20116a12%2012%200%200%200-1.71%206.22V216a12%2012%200%200%200%2012%2012h96a12%2012%200%200%200%2012-12v-93.78a12%2012%200%200%200-1.71-6.18l-20.53-34.21A12.06%2012.06%200%200%200%20131.47%2076H108V64a44%2044%200%200%201%2088%200v80a28%2028%200%200%200%2028%2028a4%204%200%200%200%200-8m-92.53-80a4%204%200%200%201%203.43%201.94l20.53%2034.22a4%204%200%200%201%20.57%202.06V216a4%204%200%200%201-4%204H56a4%204%200%200%201-4-4v-93.78a4%204%200%200%201%20.57-2.06L73.1%2085.94A4%204%200%200%201%2076.53%2084H100v52a4%204%200%200%200%208%200V84Z%22%2F%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M224%20164a20%2020%200%200%201-20-20V64a52%2052%200%200%200-104%200v12H76.53a12.06%2012.06%200%200%200-10.29%205.83L45.71%20116a12%2012%200%200%200-1.71%206.22V216a12%2012%200%200%200%2012%2012h96a12%2012%200%200%200%2012-12v-93.78a12%2012%200%200%200-1.71-6.18l-20.53-34.21A12.06%2012.06%200%200%200%20131.47%2076H108V64a44%2044%200%200%201%2088%200v80a28%2028%200%200%200%2028%2028a4%204%200%200%200%200-8m-92.53-80a4%204%200%200%201%203.43%201.94l20.53%2034.22a4%204%200%200%201%20.57%202.06V216a4%204%200%200%201-4%204H56a4%204%200%200%201-4-4v-93.78a4%204%200%200%201%20.57-2.06L73.1%2085.94A4%204%200%200%201%2076.53%2084H100v52a4%204%200%200%200%208%200V84Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/tea-bag-thin.svg?color=%231a73e8&size=48