teapot icon

Teapot: tea, teapot, tea time, herbal tea. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M14.447 8.805C14.816 9.248 15 9.813 15 10.5C15 11.187 14.816 11.752 14.447 12.195C13.999 12.732 13.351 13 12.5 13L11.5 13C11.367 13 11.253 12.954 11.156 12.863C11.075 12.954 10.988 13.041 10.895 13.124C10.57 13.412 10.195 13.632 9.769 13.784C9.363 13.928 8.94 14 8.5 14L6.5 14C6.06 14 5.637 13.928 5.231 13.784C4.805 13.632 4.43 13.412 4.105 13.124C3.757 12.814 3.488 12.444 3.3 12.013C3.144 11.657 3.049 11.272 3.015 10.858L1.288 7.979C1.198 7.83 1.15 7.668 1.143 7.494C1.14 7.405 1.148 7.317 1.167 7.231C1.222 6.989 1.463 6.837 1.705 6.891C1.802 6.913 1.888 6.966 1.952 7.042L3.308 8.67C3.345 8.577 3.385 8.488 3.428 8.401C3.686 7.885 4.055 7.48 4.536 7.186C4.577 7.01 4.653 6.838 4.764 6.672C4.922 6.434 5.14 6.226 5.417 6.048C5.601 5.93 5.802 5.831 6.021 5.75C6.082 5.389 6.252 5.09 6.532 4.854C6.811 4.618 7.134 4.5 7.5 4.5C7.866 4.5 8.189 4.618 8.468 4.854C8.748 5.09 8.918 5.389 8.979 5.75C9.198 5.831 9.399 5.93 9.583 6.048C9.86 6.226 10.078 6.434 10.236 6.672C10.345 6.835 10.42 7.002 10.461 7.174C10.522 7.206 10.573 7.233 10.614 7.256C10.77 7.345 10.901 7.434 11.008 7.522C11.181 7.667 11.309 7.826 11.391 8L12.5 8C13.351 8 13.999 8.268 14.447 8.805ZM8.393 6.612C8.117 6.537 7.819 6.5 7.5 6.5C7.181 6.5 6.883 6.537 6.607 6.612C6.358 6.679 6.142 6.771 5.958 6.889C5.902 6.925 5.851 6.962 5.805 7L9.195 7C9.149 6.962 9.098 6.925 9.042 6.889C8.858 6.771 8.642 6.679 8.393 6.612ZM10.23 12.376C10.743 11.92 11 11.295 11 10.5C11 9.7 10.87 9.138 10.61 8.812C10.537 8.721 10.5 8.617 10.5 8.5C10.5 8.434 10.456 8.364 10.367 8.29C10.284 8.221 10.121 8.124 9.881 8L5.124 8C4.773 8.199 4.506 8.482 4.322 8.849C4.107 9.278 4 9.829 4 10.5C4 11.295 4.257 11.92 4.77 12.376C4.997 12.578 5.263 12.734 5.566 12.841C5.863 12.947 6.175 13 6.5 13L8.5 13C8.825 13 9.137 12.947 9.434 12.841C9.737 12.734 10.003 12.578 10.23 12.376ZM13.678 11.555C13.893 11.298 14 10.946 14 10.5C14 10.054 13.893 9.702 13.678 9.445C13.431 9.148 13.038 9 12.5 9L11.809 9C11.839 9.096 11.866 9.196 11.889 9.3C11.963 9.64 12 10.04 12 10.5C12 11.047 11.902 11.547 11.706 12L12.5 12C13.038 12 13.431 11.852 13.678 11.555Z"/></svg>

React

// Gentleface "teapot" (line-round), MIT. https://gentleface.com/icons/teapot
import type { SVGProps } from 'react';

export function TeapotIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M14.447 8.805C14.816 9.248 15 9.813 15 10.5C15 11.187 14.816 11.752 14.447 12.195C13.999 12.732 13.351 13 12.5 13L11.5 13C11.367 13 11.253 12.954 11.156 12.863C11.075 12.954 10.988 13.041 10.895 13.124C10.57 13.412 10.195 13.632 9.769 13.784C9.363 13.928 8.94 14 8.5 14L6.5 14C6.06 14 5.637 13.928 5.231 13.784C4.805 13.632 4.43 13.412 4.105 13.124C3.757 12.814 3.488 12.444 3.3 12.013C3.144 11.657 3.049 11.272 3.015 10.858L1.288 7.979C1.198 7.83 1.15 7.668 1.143 7.494C1.14 7.405 1.148 7.317 1.167 7.231C1.222 6.989 1.463 6.837 1.705 6.891C1.802 6.913 1.888 6.966 1.952 7.042L3.308 8.67C3.345 8.577 3.385 8.488 3.428 8.401C3.686 7.885 4.055 7.48 4.536 7.186C4.577 7.01 4.653 6.838 4.764 6.672C4.922 6.434 5.14 6.226 5.417 6.048C5.601 5.93 5.802 5.831 6.021 5.75C6.082 5.389 6.252 5.09 6.532 4.854C6.811 4.618 7.134 4.5 7.5 4.5C7.866 4.5 8.189 4.618 8.468 4.854C8.748 5.09 8.918 5.389 8.979 5.75C9.198 5.831 9.399 5.93 9.583 6.048C9.86 6.226 10.078 6.434 10.236 6.672C10.345 6.835 10.42 7.002 10.461 7.174C10.522 7.206 10.573 7.233 10.614 7.256C10.77 7.345 10.901 7.434 11.008 7.522C11.181 7.667 11.309 7.826 11.391 8L12.5 8C13.351 8 13.999 8.268 14.447 8.805ZM8.393 6.612C8.117 6.537 7.819 6.5 7.5 6.5C7.181 6.5 6.883 6.537 6.607 6.612C6.358 6.679 6.142 6.771 5.958 6.889C5.902 6.925 5.851 6.962 5.805 7L9.195 7C9.149 6.962 9.098 6.925 9.042 6.889C8.858 6.771 8.642 6.679 8.393 6.612ZM10.23 12.376C10.743 11.92 11 11.295 11 10.5C11 9.7 10.87 9.138 10.61 8.812C10.537 8.721 10.5 8.617 10.5 8.5C10.5 8.434 10.456 8.364 10.367 8.29C10.284 8.221 10.121 8.124 9.881 8L5.124 8C4.773 8.199 4.506 8.482 4.322 8.849C4.107 9.278 4 9.829 4 10.5C4 11.295 4.257 11.92 4.77 12.376C4.997 12.578 5.263 12.734 5.566 12.841C5.863 12.947 6.175 13 6.5 13L8.5 13C8.825 13 9.137 12.947 9.434 12.841C9.737 12.734 10.003 12.578 10.23 12.376ZM13.678 11.555C13.893 11.298 14 10.946 14 10.5C14 10.054 13.893 9.702 13.678 9.445C13.431 9.148 13.038 9 12.5 9L11.809 9C11.839 9.096 11.866 9.196 11.889 9.3C11.963 9.64 12 10.04 12 10.5C12 11.047 11.902 11.547 11.706 12L12.5 12C13.038 12 13.431 11.852 13.678 11.555Z" />
    </svg>
  );
}

Vue

Vue: see /icons/teapot.md

Svelte

Svelte: see /icons/teapot.md

HTML img

HTML img: see /icons/teapot.md

CSS

CSS: see /icons/teapot.md

Data URL

Data URL: see /icons/teapot.md

Sprite

Sprite: see /icons/teapot.md

SwiftUI

SwiftUI: see /icons/teapot.md

Compose

Compose: see /icons/teapot.md

Android XML

Android XML: see /icons/teapot.md

Flutter

Flutter: see /icons/teapot.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { TeapotIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

tea, teapot, tea time, herbal tea, chai

Alternatives

coffee: coffee or a hot drink
kettle: the kettle appliance

Also fits

coffee: tea
kettle: tea or a teapot

Tags

teapot, tea, tea-time, afternoon-tea, pot, brew, infusion, chai, cafe, hot-drink, beverage, food

Category

Food & drink

Component name

TeapotIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

More food & drink icons

apple avocado banana barrel bean bean-off beef beer bottle bowl bowl-chopsticks bread broccoli burger cake cake-slice · all food & drink icons

For agents

Metadata: /icons/teapot.json · Markdown: /icons/teapot.md · SVG: https://gentleface.com/svg/{style}/16/teapot.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/teapot.png

teapot icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More food & drink icons

For agents

teapot icon