# potion icon

Potion. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/potion

- Category: Games & sports
- Use it for: potion, health potion, elixir
- Tags: potion, health-potion, elixir, flask, vial, bottle, magic, alchemy, rpg, game, item, consumable, cork
- Component name: PotionIcon
- Added: 2026-11-07
- Since: version 0.6.0
- npm: `import { PotionIcon } from '@gentleface/react';` (@gentleface/react 0.6.0)

## Files

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too.

- line-round: https://gentleface.com/svg/line-round/16/potion.svg · PNG https://gentleface.com/png/line-round/16/potion.png · https://gentleface.com/png/line-round/32/potion.png · https://gentleface.com/png/line-round/48/potion.png
- line-soft: https://gentleface.com/svg/line-soft/16/potion.svg · PNG https://gentleface.com/png/line-soft/16/potion.png · https://gentleface.com/png/line-soft/32/potion.png · https://gentleface.com/png/line-soft/48/potion.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/potion.svg · PNG https://gentleface.com/png/line-sharp/16/potion.png · https://gentleface.com/png/line-sharp/32/potion.png · https://gentleface.com/png/line-sharp/48/potion.png
- solid-round: https://gentleface.com/svg/solid-round/16/potion.svg · PNG https://gentleface.com/png/solid-round/16/potion.png · https://gentleface.com/png/solid-round/32/potion.png · https://gentleface.com/png/solid-round/48/potion.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/potion.svg · PNG https://gentleface.com/png/solid-soft/16/potion.png · https://gentleface.com/png/solid-soft/32/potion.png · https://gentleface.com/png/solid-soft/48/potion.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/potion.svg · PNG https://gentleface.com/png/solid-sharp/16/potion.png · https://gentleface.com/png/solid-sharp/32/potion.png · https://gentleface.com/png/solid-sharp/48/potion.png

The SVG of every style: https://gentleface.com/icons/potion.json (`svg`).

## Code (line-round)

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. For another style, take its SVG from the JSON and swap the path `d`.

### SVG

```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="M10.228 3.316C10.18 3.459 10.104 3.585 10 3.693L10 5.417C10.566 5.663 11.071 6.005 11.516 6.445C12.113 7.036 12.535 7.733 12.781 8.537C13.027 9.34 13.068 10.154 12.903 10.978C12.758 11.709 12.463 12.374 12.02 12.973C11.576 13.573 11.027 14.049 10.37 14.403C9.63 14.801 8.84 15 8 15C7.16 15 6.37 14.801 5.63 14.403C4.973 14.049 4.424 13.573 3.98 12.973C3.537 12.374 3.242 11.709 3.097 10.978C2.932 10.154 2.973 9.34 3.219 8.537C3.465 7.733 3.887 7.036 4.484 6.445C4.929 6.005 5.434 5.663 6 5.417L6 3.693C5.896 3.585 5.82 3.459 5.772 3.316L5.439 2.316C5.331 1.992 5.377 1.692 5.576 1.415C5.776 1.138 6.046 1 6.387 1L9.613 1C9.954 1 10.224 1.138 10.424 1.415C10.623 1.692 10.669 1.992 10.561 2.316L10.228 3.316ZM7 5.757C7 5.864 6.97 5.961 6.909 6.047C6.848 6.132 6.768 6.193 6.667 6.229C6.104 6.428 5.611 6.737 5.187 7.156C4.709 7.629 4.372 8.186 4.175 8.829C4.118 9.016 4.075 9.204 4.045 9.392L4.057 9.385C4.48 9.128 4.961 9 5.5 9C6.041 9 6.585 9.118 7.134 9.353C7.631 9.566 8.037 9.83 8.354 10.146C8.579 10.372 8.881 10.566 9.259 10.728C9.683 10.909 10.096 11 10.5 11C10.853 11 11.161 10.92 11.425 10.76C11.577 10.667 11.766 10.507 11.991 10.278C12.027 9.791 11.971 9.308 11.825 8.829C11.628 8.186 11.291 7.629 10.813 7.156C10.389 6.737 9.896 6.428 9.333 6.229C9.232 6.193 9.152 6.132 9.091 6.047C9.03 5.961 9 5.864 9 5.757L9 4L7 4L7 5.757ZM4.784 12.379C5.139 12.858 5.579 13.239 6.104 13.522C6.696 13.841 7.328 14 8 14C8.672 14 9.304 13.841 9.896 13.522C10.421 13.239 10.861 12.858 11.216 12.379C11.352 12.194 11.471 12.001 11.573 11.801C11.245 11.934 10.888 12 10.5 12C9.959 12 9.415 11.882 8.866 11.647C8.369 11.434 7.963 11.17 7.646 10.854C7.421 10.628 7.119 10.434 6.741 10.272C6.317 10.091 5.904 10 5.5 10C5.147 10 4.839 10.08 4.575 10.24C4.434 10.326 4.261 10.47 4.057 10.673C4.063 10.709 4.07 10.746 4.077 10.782C4.194 11.367 4.43 11.899 4.784 12.379Z"/></svg>
```

### React

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

export function PotionIcon(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="M10.228 3.316C10.18 3.459 10.104 3.585 10 3.693L10 5.417C10.566 5.663 11.071 6.005 11.516 6.445C12.113 7.036 12.535 7.733 12.781 8.537C13.027 9.34 13.068 10.154 12.903 10.978C12.758 11.709 12.463 12.374 12.02 12.973C11.576 13.573 11.027 14.049 10.37 14.403C9.63 14.801 8.84 15 8 15C7.16 15 6.37 14.801 5.63 14.403C4.973 14.049 4.424 13.573 3.98 12.973C3.537 12.374 3.242 11.709 3.097 10.978C2.932 10.154 2.973 9.34 3.219 8.537C3.465 7.733 3.887 7.036 4.484 6.445C4.929 6.005 5.434 5.663 6 5.417L6 3.693C5.896 3.585 5.82 3.459 5.772 3.316L5.439 2.316C5.331 1.992 5.377 1.692 5.576 1.415C5.776 1.138 6.046 1 6.387 1L9.613 1C9.954 1 10.224 1.138 10.424 1.415C10.623 1.692 10.669 1.992 10.561 2.316L10.228 3.316ZM7 5.757C7 5.864 6.97 5.961 6.909 6.047C6.848 6.132 6.768 6.193 6.667 6.229C6.104 6.428 5.611 6.737 5.187 7.156C4.709 7.629 4.372 8.186 4.175 8.829C4.118 9.016 4.075 9.204 4.045 9.392L4.057 9.385C4.48 9.128 4.961 9 5.5 9C6.041 9 6.585 9.118 7.134 9.353C7.631 9.566 8.037 9.83 8.354 10.146C8.579 10.372 8.881 10.566 9.259 10.728C9.683 10.909 10.096 11 10.5 11C10.853 11 11.161 10.92 11.425 10.76C11.577 10.667 11.766 10.507 11.991 10.278C12.027 9.791 11.971 9.308 11.825 8.829C11.628 8.186 11.291 7.629 10.813 7.156C10.389 6.737 9.896 6.428 9.333 6.229C9.232 6.193 9.152 6.132 9.091 6.047C9.03 5.961 9 5.864 9 5.757L9 4L7 4L7 5.757ZM4.784 12.379C5.139 12.858 5.579 13.239 6.104 13.522C6.696 13.841 7.328 14 8 14C8.672 14 9.304 13.841 9.896 13.522C10.421 13.239 10.861 12.858 11.216 12.379C11.352 12.194 11.471 12.001 11.573 11.801C11.245 11.934 10.888 12 10.5 12C9.959 12 9.415 11.882 8.866 11.647C8.369 11.434 7.963 11.17 7.646 10.854C7.421 10.628 7.119 10.434 6.741 10.272C6.317 10.091 5.904 10 5.5 10C5.147 10 4.839 10.08 4.575 10.24C4.434 10.326 4.261 10.47 4.057 10.673C4.063 10.709 4.07 10.746 4.077 10.782C4.194 11.367 4.43 11.899 4.784 12.379Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "potion" (line-round), MIT. https://gentleface.com/icons/potion -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
    <path d="M10.228 3.316C10.18 3.459 10.104 3.585 10 3.693L10 5.417C10.566 5.663 11.071 6.005 11.516 6.445C12.113 7.036 12.535 7.733 12.781 8.537C13.027 9.34 13.068 10.154 12.903 10.978C12.758 11.709 12.463 12.374 12.02 12.973C11.576 13.573 11.027 14.049 10.37 14.403C9.63 14.801 8.84 15 8 15C7.16 15 6.37 14.801 5.63 14.403C4.973 14.049 4.424 13.573 3.98 12.973C3.537 12.374 3.242 11.709 3.097 10.978C2.932 10.154 2.973 9.34 3.219 8.537C3.465 7.733 3.887 7.036 4.484 6.445C4.929 6.005 5.434 5.663 6 5.417L6 3.693C5.896 3.585 5.82 3.459 5.772 3.316L5.439 2.316C5.331 1.992 5.377 1.692 5.576 1.415C5.776 1.138 6.046 1 6.387 1L9.613 1C9.954 1 10.224 1.138 10.424 1.415C10.623 1.692 10.669 1.992 10.561 2.316L10.228 3.316ZM7 5.757C7 5.864 6.97 5.961 6.909 6.047C6.848 6.132 6.768 6.193 6.667 6.229C6.104 6.428 5.611 6.737 5.187 7.156C4.709 7.629 4.372 8.186 4.175 8.829C4.118 9.016 4.075 9.204 4.045 9.392L4.057 9.385C4.48 9.128 4.961 9 5.5 9C6.041 9 6.585 9.118 7.134 9.353C7.631 9.566 8.037 9.83 8.354 10.146C8.579 10.372 8.881 10.566 9.259 10.728C9.683 10.909 10.096 11 10.5 11C10.853 11 11.161 10.92 11.425 10.76C11.577 10.667 11.766 10.507 11.991 10.278C12.027 9.791 11.971 9.308 11.825 8.829C11.628 8.186 11.291 7.629 10.813 7.156C10.389 6.737 9.896 6.428 9.333 6.229C9.232 6.193 9.152 6.132 9.091 6.047C9.03 5.961 9 5.864 9 5.757L9 4L7 4L7 5.757ZM4.784 12.379C5.139 12.858 5.579 13.239 6.104 13.522C6.696 13.841 7.328 14 8 14C8.672 14 9.304 13.841 9.896 13.522C10.421 13.239 10.861 12.858 11.216 12.379C11.352 12.194 11.471 12.001 11.573 11.801C11.245 11.934 10.888 12 10.5 12C9.959 12 9.415 11.882 8.866 11.647C8.369 11.434 7.963 11.17 7.646 10.854C7.421 10.628 7.119 10.434 6.741 10.272C6.317 10.091 5.904 10 5.5 10C5.147 10 4.839 10.08 4.575 10.24C4.434 10.326 4.261 10.47 4.057 10.673C4.063 10.709 4.07 10.746 4.077 10.782C4.194 11.367 4.43 11.899 4.784 12.379Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "potion" (line-round), MIT. https://gentleface.com/icons/potion -->
<script>
  let props = $props();
</script>

<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="M10.228 3.316C10.18 3.459 10.104 3.585 10 3.693L10 5.417C10.566 5.663 11.071 6.005 11.516 6.445C12.113 7.036 12.535 7.733 12.781 8.537C13.027 9.34 13.068 10.154 12.903 10.978C12.758 11.709 12.463 12.374 12.02 12.973C11.576 13.573 11.027 14.049 10.37 14.403C9.63 14.801 8.84 15 8 15C7.16 15 6.37 14.801 5.63 14.403C4.973 14.049 4.424 13.573 3.98 12.973C3.537 12.374 3.242 11.709 3.097 10.978C2.932 10.154 2.973 9.34 3.219 8.537C3.465 7.733 3.887 7.036 4.484 6.445C4.929 6.005 5.434 5.663 6 5.417L6 3.693C5.896 3.585 5.82 3.459 5.772 3.316L5.439 2.316C5.331 1.992 5.377 1.692 5.576 1.415C5.776 1.138 6.046 1 6.387 1L9.613 1C9.954 1 10.224 1.138 10.424 1.415C10.623 1.692 10.669 1.992 10.561 2.316L10.228 3.316ZM7 5.757C7 5.864 6.97 5.961 6.909 6.047C6.848 6.132 6.768 6.193 6.667 6.229C6.104 6.428 5.611 6.737 5.187 7.156C4.709 7.629 4.372 8.186 4.175 8.829C4.118 9.016 4.075 9.204 4.045 9.392L4.057 9.385C4.48 9.128 4.961 9 5.5 9C6.041 9 6.585 9.118 7.134 9.353C7.631 9.566 8.037 9.83 8.354 10.146C8.579 10.372 8.881 10.566 9.259 10.728C9.683 10.909 10.096 11 10.5 11C10.853 11 11.161 10.92 11.425 10.76C11.577 10.667 11.766 10.507 11.991 10.278C12.027 9.791 11.971 9.308 11.825 8.829C11.628 8.186 11.291 7.629 10.813 7.156C10.389 6.737 9.896 6.428 9.333 6.229C9.232 6.193 9.152 6.132 9.091 6.047C9.03 5.961 9 5.864 9 5.757L9 4L7 4L7 5.757ZM4.784 12.379C5.139 12.858 5.579 13.239 6.104 13.522C6.696 13.841 7.328 14 8 14C8.672 14 9.304 13.841 9.896 13.522C10.421 13.239 10.861 12.858 11.216 12.379C11.352 12.194 11.471 12.001 11.573 11.801C11.245 11.934 10.888 12 10.5 12C9.959 12 9.415 11.882 8.866 11.647C8.369 11.434 7.963 11.17 7.646 10.854C7.421 10.628 7.119 10.434 6.741 10.272C6.317 10.091 5.904 10 5.5 10C5.147 10 4.839 10.08 4.575 10.24C4.434 10.326 4.261 10.47 4.057 10.673C4.063 10.709 4.07 10.746 4.077 10.782C4.194 11.367 4.43 11.899 4.784 12.379Z" />
</svg>
```

### HTML img

```html
<!-- Gentleface "potion" (line-round), MIT. https://gentleface.com/icons/potion. An <img> can't take currentColor: it draws black. Inline the SVG or use the CSS mask to color it. -->
<img src="https://gentleface.com/svg/line-round/16/potion.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "potion" (line-round), MIT. https://gentleface.com/icons/potion. Takes the text color. */
.icon-potion {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M10.228 3.316C10.18 3.459 10.104 3.585 10 3.693L10 5.417C10.566 5.663 11.071 6.005 11.516 6.445C12.113 7.036 12.535 7.733 12.781 8.537C13.027 9.34 13.068 10.154 12.903 10.978C12.758 11.709 12.463 12.374 12.02 12.973C11.576 13.573 11.027 14.049 10.37 14.403C9.63 14.801 8.84 15 8 15C7.16 15 6.37 14.801 5.63 14.403C4.973 14.049 4.424 13.573 3.98 12.973C3.537 12.374 3.242 11.709 3.097 10.978C2.932 10.154 2.973 9.34 3.219 8.537C3.465 7.733 3.887 7.036 4.484 6.445C4.929 6.005 5.434 5.663 6 5.417L6 3.693C5.896 3.585 5.82 3.459 5.772 3.316L5.439 2.316C5.331 1.992 5.377 1.692 5.576 1.415C5.776 1.138 6.046 1 6.387 1L9.613 1C9.954 1 10.224 1.138 10.424 1.415C10.623 1.692 10.669 1.992 10.561 2.316L10.228 3.316ZM7 5.757C7 5.864 6.97 5.961 6.909 6.047C6.848 6.132 6.768 6.193 6.667 6.229C6.104 6.428 5.611 6.737 5.187 7.156C4.709 7.629 4.372 8.186 4.175 8.829C4.118 9.016 4.075 9.204 4.045 9.392L4.057 9.385C4.48 9.128 4.961 9 5.5 9C6.041 9 6.585 9.118 7.134 9.353C7.631 9.566 8.037 9.83 8.354 10.146C8.579 10.372 8.881 10.566 9.259 10.728C9.683 10.909 10.096 11 10.5 11C10.853 11 11.161 10.92 11.425 10.76C11.577 10.667 11.766 10.507 11.991 10.278C12.027 9.791 11.971 9.308 11.825 8.829C11.628 8.186 11.291 7.629 10.813 7.156C10.389 6.737 9.896 6.428 9.333 6.229C9.232 6.193 9.152 6.132 9.091 6.047C9.03 5.961 9 5.864 9 5.757L9 4L7 4L7 5.757ZM4.784 12.379C5.139 12.858 5.579 13.239 6.104 13.522C6.696 13.841 7.328 14 8 14C8.672 14 9.304 13.841 9.896 13.522C10.421 13.239 10.861 12.858 11.216 12.379C11.352 12.194 11.471 12.001 11.573 11.801C11.245 11.934 10.888 12 10.5 12C9.959 12 9.415 11.882 8.866 11.647C8.369 11.434 7.963 11.17 7.646 10.854C7.421 10.628 7.119 10.434 6.741 10.272C6.317 10.091 5.904 10 5.5 10C5.147 10 4.839 10.08 4.575 10.24C4.434 10.326 4.261 10.47 4.057 10.673C4.063 10.709 4.07 10.746 4.077 10.782C4.194 11.367 4.43 11.899 4.784 12.379Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M10.228 3.316C10.18 3.459 10.104 3.585 10 3.693L10 5.417C10.566 5.663 11.071 6.005 11.516 6.445C12.113 7.036 12.535 7.733 12.781 8.537C13.027 9.34 13.068 10.154 12.903 10.978C12.758 11.709 12.463 12.374 12.02 12.973C11.576 13.573 11.027 14.049 10.37 14.403C9.63 14.801 8.84 15 8 15C7.16 15 6.37 14.801 5.63 14.403C4.973 14.049 4.424 13.573 3.98 12.973C3.537 12.374 3.242 11.709 3.097 10.978C2.932 10.154 2.973 9.34 3.219 8.537C3.465 7.733 3.887 7.036 4.484 6.445C4.929 6.005 5.434 5.663 6 5.417L6 3.693C5.896 3.585 5.82 3.459 5.772 3.316L5.439 2.316C5.331 1.992 5.377 1.692 5.576 1.415C5.776 1.138 6.046 1 6.387 1L9.613 1C9.954 1 10.224 1.138 10.424 1.415C10.623 1.692 10.669 1.992 10.561 2.316L10.228 3.316ZM7 5.757C7 5.864 6.97 5.961 6.909 6.047C6.848 6.132 6.768 6.193 6.667 6.229C6.104 6.428 5.611 6.737 5.187 7.156C4.709 7.629 4.372 8.186 4.175 8.829C4.118 9.016 4.075 9.204 4.045 9.392L4.057 9.385C4.48 9.128 4.961 9 5.5 9C6.041 9 6.585 9.118 7.134 9.353C7.631 9.566 8.037 9.83 8.354 10.146C8.579 10.372 8.881 10.566 9.259 10.728C9.683 10.909 10.096 11 10.5 11C10.853 11 11.161 10.92 11.425 10.76C11.577 10.667 11.766 10.507 11.991 10.278C12.027 9.791 11.971 9.308 11.825 8.829C11.628 8.186 11.291 7.629 10.813 7.156C10.389 6.737 9.896 6.428 9.333 6.229C9.232 6.193 9.152 6.132 9.091 6.047C9.03 5.961 9 5.864 9 5.757L9 4L7 4L7 5.757ZM4.784 12.379C5.139 12.858 5.579 13.239 6.104 13.522C6.696 13.841 7.328 14 8 14C8.672 14 9.304 13.841 9.896 13.522C10.421 13.239 10.861 12.858 11.216 12.379C11.352 12.194 11.471 12.001 11.573 11.801C11.245 11.934 10.888 12 10.5 12C9.959 12 9.415 11.882 8.866 11.647C8.369 11.434 7.963 11.17 7.646 10.854C7.421 10.628 7.119 10.434 6.741 10.272C6.317 10.091 5.904 10 5.5 10C5.147 10 4.839 10.08 4.575 10.24C4.434 10.326 4.261 10.47 4.057 10.673C4.063 10.709 4.07 10.746 4.077 10.782C4.194 11.367 4.43 11.899 4.784 12.379Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
```

### Data URL

```text
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M10.228 3.316C10.18 3.459 10.104 3.585 10 3.693L10 5.417C10.566 5.663 11.071 6.005 11.516 6.445C12.113 7.036 12.535 7.733 12.781 8.537C13.027 9.34 13.068 10.154 12.903 10.978C12.758 11.709 12.463 12.374 12.02 12.973C11.576 13.573 11.027 14.049 10.37 14.403C9.63 14.801 8.84 15 8 15C7.16 15 6.37 14.801 5.63 14.403C4.973 14.049 4.424 13.573 3.98 12.973C3.537 12.374 3.242 11.709 3.097 10.978C2.932 10.154 2.973 9.34 3.219 8.537C3.465 7.733 3.887 7.036 4.484 6.445C4.929 6.005 5.434 5.663 6 5.417L6 3.693C5.896 3.585 5.82 3.459 5.772 3.316L5.439 2.316C5.331 1.992 5.377 1.692 5.576 1.415C5.776 1.138 6.046 1 6.387 1L9.613 1C9.954 1 10.224 1.138 10.424 1.415C10.623 1.692 10.669 1.992 10.561 2.316L10.228 3.316ZM7 5.757C7 5.864 6.97 5.961 6.909 6.047C6.848 6.132 6.768 6.193 6.667 6.229C6.104 6.428 5.611 6.737 5.187 7.156C4.709 7.629 4.372 8.186 4.175 8.829C4.118 9.016 4.075 9.204 4.045 9.392L4.057 9.385C4.48 9.128 4.961 9 5.5 9C6.041 9 6.585 9.118 7.134 9.353C7.631 9.566 8.037 9.83 8.354 10.146C8.579 10.372 8.881 10.566 9.259 10.728C9.683 10.909 10.096 11 10.5 11C10.853 11 11.161 10.92 11.425 10.76C11.577 10.667 11.766 10.507 11.991 10.278C12.027 9.791 11.971 9.308 11.825 8.829C11.628 8.186 11.291 7.629 10.813 7.156C10.389 6.737 9.896 6.428 9.333 6.229C9.232 6.193 9.152 6.132 9.091 6.047C9.03 5.961 9 5.864 9 5.757L9 4L7 4L7 5.757ZM4.784 12.379C5.139 12.858 5.579 13.239 6.104 13.522C6.696 13.841 7.328 14 8 14C8.672 14 9.304 13.841 9.896 13.522C10.421 13.239 10.861 12.858 11.216 12.379C11.352 12.194 11.471 12.001 11.573 11.801C11.245 11.934 10.888 12 10.5 12C9.959 12 9.415 11.882 8.866 11.647C8.369 11.434 7.963 11.17 7.646 10.854C7.421 10.628 7.119 10.434 6.741 10.272C6.317 10.091 5.904 10 5.5 10C5.147 10 4.839 10.08 4.575 10.24C4.434 10.326 4.261 10.47 4.057 10.673C4.063 10.709 4.07 10.746 4.077 10.782C4.194 11.367 4.43 11.899 4.784 12.379Z'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "potion" (line-round), MIT. https://gentleface.com/icons/potion
     Every icon of this style in one file: https://gentleface.com/sprite/line-round.svg
     Serve it from your own origin: <use> does not load from another origin. -->
<svg width="16" height="16" aria-hidden="true"><use href="/sprite/line-round.svg#potion"/></svg>
```

### SwiftUI

```swift
// Gentleface "potion" (line-round), MIT. https://gentleface.com/icons/potion
import SwiftUI

struct PotionIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 10.228, y: 3.316))
        p.addCurve(to: CGPoint(x: 10, y: 3.693), control1: CGPoint(x: 10.18, y: 3.459), control2: CGPoint(x: 10.104, y: 3.585))
        p.addLine(to: CGPoint(x: 10, y: 5.417))
        p.addCurve(to: CGPoint(x: 11.516, y: 6.445), control1: CGPoint(x: 10.566, y: 5.663), control2: CGPoint(x: 11.071, y: 6.005))
        p.addCurve(to: CGPoint(x: 12.781, y: 8.537), control1: CGPoint(x: 12.113, y: 7.036), control2: CGPoint(x: 12.535, y: 7.733))
        p.addCurve(to: CGPoint(x: 12.903, y: 10.978), control1: CGPoint(x: 13.027, y: 9.34), control2: CGPoint(x: 13.068, y: 10.154))
        p.addCurve(to: CGPoint(x: 12.02, y: 12.973), control1: CGPoint(x: 12.758, y: 11.709), control2: CGPoint(x: 12.463, y: 12.374))
        p.addCurve(to: CGPoint(x: 10.37, y: 14.403), control1: CGPoint(x: 11.576, y: 13.573), control2: CGPoint(x: 11.027, y: 14.049))
        p.addCurve(to: CGPoint(x: 8, y: 15), control1: CGPoint(x: 9.63, y: 14.801), control2: CGPoint(x: 8.84, y: 15))
        p.addCurve(to: CGPoint(x: 5.63, y: 14.403), control1: CGPoint(x: 7.16, y: 15), control2: CGPoint(x: 6.37, y: 14.801))
        p.addCurve(to: CGPoint(x: 3.98, y: 12.973), control1: CGPoint(x: 4.973, y: 14.049), control2: CGPoint(x: 4.424, y: 13.573))
        p.addCurve(to: CGPoint(x: 3.097, y: 10.978), control1: CGPoint(x: 3.537, y: 12.374), control2: CGPoint(x: 3.242, y: 11.709))
        p.addCurve(to: CGPoint(x: 3.219, y: 8.537), control1: CGPoint(x: 2.932, y: 10.154), control2: CGPoint(x: 2.973, y: 9.34))
        p.addCurve(to: CGPoint(x: 4.484, y: 6.445), control1: CGPoint(x: 3.465, y: 7.733), control2: CGPoint(x: 3.887, y: 7.036))
        p.addCurve(to: CGPoint(x: 6, y: 5.417), control1: CGPoint(x: 4.929, y: 6.005), control2: CGPoint(x: 5.434, y: 5.663))
        p.addLine(to: CGPoint(x: 6, y: 3.693))
        p.addCurve(to: CGPoint(x: 5.772, y: 3.316), control1: CGPoint(x: 5.896, y: 3.585), control2: CGPoint(x: 5.82, y: 3.459))
        p.addLine(to: CGPoint(x: 5.439, y: 2.316))
        p.addCurve(to: CGPoint(x: 5.576, y: 1.415), control1: CGPoint(x: 5.331, y: 1.992), control2: CGPoint(x: 5.377, y: 1.692))
        p.addCurve(to: CGPoint(x: 6.387, y: 1), control1: CGPoint(x: 5.776, y: 1.138), control2: CGPoint(x: 6.046, y: 1))
        p.addLine(to: CGPoint(x: 9.613, y: 1))
        p.addCurve(to: CGPoint(x: 10.424, y: 1.415), control1: CGPoint(x: 9.954, y: 1), control2: CGPoint(x: 10.224, y: 1.138))
        p.addCurve(to: CGPoint(x: 10.561, y: 2.316), control1: CGPoint(x: 10.623, y: 1.692), control2: CGPoint(x: 10.669, y: 1.992))
        p.addLine(to: CGPoint(x: 10.228, y: 3.316))
        p.closeSubpath()
        p.move(to: CGPoint(x: 7, y: 5.757))
        p.addCurve(to: CGPoint(x: 6.909, y: 6.047), control1: CGPoint(x: 7, y: 5.864), control2: CGPoint(x: 6.97, y: 5.961))
        p.addCurve(to: CGPoint(x: 6.667, y: 6.229), control1: CGPoint(x: 6.848, y: 6.132), control2: CGPoint(x: 6.768, y: 6.193))
        p.addCurve(to: CGPoint(x: 5.187, y: 7.156), control1: CGPoint(x: 6.104, y: 6.428), control2: CGPoint(x: 5.611, y: 6.737))
        p.addCurve(to: CGPoint(x: 4.175, y: 8.829), control1: CGPoint(x: 4.709, y: 7.629), control2: CGPoint(x: 4.372, y: 8.186))
        p.addCurve(to: CGPoint(x: 4.045, y: 9.392), control1: CGPoint(x: 4.118, y: 9.016), control2: CGPoint(x: 4.075, y: 9.204))
        p.addLine(to: CGPoint(x: 4.057, y: 9.385))
        p.addCurve(to: CGPoint(x: 5.5, y: 9), control1: CGPoint(x: 4.48, y: 9.128), control2: CGPoint(x: 4.961, y: 9))
        p.addCurve(to: CGPoint(x: 7.134, y: 9.353), control1: CGPoint(x: 6.041, y: 9), control2: CGPoint(x: 6.585, y: 9.118))
        p.addCurve(to: CGPoint(x: 8.354, y: 10.146), control1: CGPoint(x: 7.631, y: 9.566), control2: CGPoint(x: 8.037, y: 9.83))
        p.addCurve(to: CGPoint(x: 9.259, y: 10.728), control1: CGPoint(x: 8.579, y: 10.372), control2: CGPoint(x: 8.881, y: 10.566))
        p.addCurve(to: CGPoint(x: 10.5, y: 11), control1: CGPoint(x: 9.683, y: 10.909), control2: CGPoint(x: 10.096, y: 11))
        p.addCurve(to: CGPoint(x: 11.425, y: 10.76), control1: CGPoint(x: 10.853, y: 11), control2: CGPoint(x: 11.161, y: 10.92))
        p.addCurve(to: CGPoint(x: 11.991, y: 10.278), control1: CGPoint(x: 11.577, y: 10.667), control2: CGPoint(x: 11.766, y: 10.507))
        p.addCurve(to: CGPoint(x: 11.825, y: 8.829), control1: CGPoint(x: 12.027, y: 9.791), control2: CGPoint(x: 11.971, y: 9.308))
        p.addCurve(to: CGPoint(x: 10.813, y: 7.156), control1: CGPoint(x: 11.628, y: 8.186), control2: CGPoint(x: 11.291, y: 7.629))
        p.addCurve(to: CGPoint(x: 9.333, y: 6.229), control1: CGPoint(x: 10.389, y: 6.737), control2: CGPoint(x: 9.896, y: 6.428))
        p.addCurve(to: CGPoint(x: 9.091, y: 6.047), control1: CGPoint(x: 9.232, y: 6.193), control2: CGPoint(x: 9.152, y: 6.132))
        p.addCurve(to: CGPoint(x: 9, y: 5.757), control1: CGPoint(x: 9.03, y: 5.961), control2: CGPoint(x: 9, y: 5.864))
        p.addLine(to: CGPoint(x: 9, y: 4))
        p.addLine(to: CGPoint(x: 7, y: 4))
        p.addLine(to: CGPoint(x: 7, y: 5.757))
        p.closeSubpath()
        p.move(to: CGPoint(x: 4.784, y: 12.379))
        p.addCurve(to: CGPoint(x: 6.104, y: 13.522), control1: CGPoint(x: 5.139, y: 12.858), control2: CGPoint(x: 5.579, y: 13.239))
        p.addCurve(to: CGPoint(x: 8, y: 14), control1: CGPoint(x: 6.696, y: 13.841), control2: CGPoint(x: 7.328, y: 14))
        p.addCurve(to: CGPoint(x: 9.896, y: 13.522), control1: CGPoint(x: 8.672, y: 14), control2: CGPoint(x: 9.304, y: 13.841))
        p.addCurve(to: CGPoint(x: 11.216, y: 12.379), control1: CGPoint(x: 10.421, y: 13.239), control2: CGPoint(x: 10.861, y: 12.858))
        p.addCurve(to: CGPoint(x: 11.573, y: 11.801), control1: CGPoint(x: 11.352, y: 12.194), control2: CGPoint(x: 11.471, y: 12.001))
        p.addCurve(to: CGPoint(x: 10.5, y: 12), control1: CGPoint(x: 11.245, y: 11.934), control2: CGPoint(x: 10.888, y: 12))
        p.addCurve(to: CGPoint(x: 8.866, y: 11.647), control1: CGPoint(x: 9.959, y: 12), control2: CGPoint(x: 9.415, y: 11.882))
        p.addCurve(to: CGPoint(x: 7.646, y: 10.854), control1: CGPoint(x: 8.369, y: 11.434), control2: CGPoint(x: 7.963, y: 11.17))
        p.addCurve(to: CGPoint(x: 6.741, y: 10.272), control1: CGPoint(x: 7.421, y: 10.628), control2: CGPoint(x: 7.119, y: 10.434))
        p.addCurve(to: CGPoint(x: 5.5, y: 10), control1: CGPoint(x: 6.317, y: 10.091), control2: CGPoint(x: 5.904, y: 10))
        p.addCurve(to: CGPoint(x: 4.575, y: 10.24), control1: CGPoint(x: 5.147, y: 10), control2: CGPoint(x: 4.839, y: 10.08))
        p.addCurve(to: CGPoint(x: 4.057, y: 10.673), control1: CGPoint(x: 4.434, y: 10.326), control2: CGPoint(x: 4.261, y: 10.47))
        p.addCurve(to: CGPoint(x: 4.077, y: 10.782), control1: CGPoint(x: 4.063, y: 10.709), control2: CGPoint(x: 4.07, y: 10.746))
        p.addCurve(to: CGPoint(x: 4.784, y: 12.379), control1: CGPoint(x: 4.194, y: 11.367), control2: CGPoint(x: 4.43, y: 11.899))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

// PotionIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```

### Compose

```kotlin
// Gentleface "potion" (line-round), MIT. https://gentleface.com/icons/potion
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.addPathNodes
import androidx.compose.ui.unit.dp

val PotionIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "potion", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M10.228 3.316C10.18 3.459 10.104 3.585 10 3.693L10 5.417C10.566 5.663 11.071 6.005 11.516 6.445C12.113 7.036 12.535 7.733 12.781 8.537C13.027 9.34 13.068 10.154 12.903 10.978C12.758 11.709 12.463 12.374 12.02 12.973C11.576 13.573 11.027 14.049 10.37 14.403C9.63 14.801 8.84 15 8 15C7.16 15 6.37 14.801 5.63 14.403C4.973 14.049 4.424 13.573 3.98 12.973C3.537 12.374 3.242 11.709 3.097 10.978C2.932 10.154 2.973 9.34 3.219 8.537C3.465 7.733 3.887 7.036 4.484 6.445C4.929 6.005 5.434 5.663 6 5.417L6 3.693C5.896 3.585 5.82 3.459 5.772 3.316L5.439 2.316C5.331 1.992 5.377 1.692 5.576 1.415C5.776 1.138 6.046 1 6.387 1L9.613 1C9.954 1 10.224 1.138 10.424 1.415C10.623 1.692 10.669 1.992 10.561 2.316L10.228 3.316ZM7 5.757C7 5.864 6.97 5.961 6.909 6.047C6.848 6.132 6.768 6.193 6.667 6.229C6.104 6.428 5.611 6.737 5.187 7.156C4.709 7.629 4.372 8.186 4.175 8.829C4.118 9.016 4.075 9.204 4.045 9.392L4.057 9.385C4.48 9.128 4.961 9 5.5 9C6.041 9 6.585 9.118 7.134 9.353C7.631 9.566 8.037 9.83 8.354 10.146C8.579 10.372 8.881 10.566 9.259 10.728C9.683 10.909 10.096 11 10.5 11C10.853 11 11.161 10.92 11.425 10.76C11.577 10.667 11.766 10.507 11.991 10.278C12.027 9.791 11.971 9.308 11.825 8.829C11.628 8.186 11.291 7.629 10.813 7.156C10.389 6.737 9.896 6.428 9.333 6.229C9.232 6.193 9.152 6.132 9.091 6.047C9.03 5.961 9 5.864 9 5.757L9 4L7 4L7 5.757ZM4.784 12.379C5.139 12.858 5.579 13.239 6.104 13.522C6.696 13.841 7.328 14 8 14C8.672 14 9.304 13.841 9.896 13.522C10.421 13.239 10.861 12.858 11.216 12.379C11.352 12.194 11.471 12.001 11.573 11.801C11.245 11.934 10.888 12 10.5 12C9.959 12 9.415 11.882 8.866 11.647C8.369 11.434 7.963 11.17 7.646 10.854C7.421 10.628 7.119 10.434 6.741 10.272C6.317 10.091 5.904 10 5.5 10C5.147 10 4.839 10.08 4.575 10.24C4.434 10.326 4.261 10.47 4.057 10.673C4.063 10.709 4.07 10.746 4.077 10.782C4.194 11.367 4.43 11.899 4.784 12.379Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

// Icon(PotionIcon, contentDescription = null) tints it with LocalContentColor.
```

### Android XML

```xml
<!-- res/drawable/ic_potion.xml · Gentleface "potion" (line-round), MIT. https://gentleface.com/icons/potion -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M10.228 3.316C10.18 3.459 10.104 3.585 10 3.693L10 5.417C10.566 5.663 11.071 6.005 11.516 6.445C12.113 7.036 12.535 7.733 12.781 8.537C13.027 9.34 13.068 10.154 12.903 10.978C12.758 11.709 12.463 12.374 12.02 12.973C11.576 13.573 11.027 14.049 10.37 14.403C9.63 14.801 8.84 15 8 15C7.16 15 6.37 14.801 5.63 14.403C4.973 14.049 4.424 13.573 3.98 12.973C3.537 12.374 3.242 11.709 3.097 10.978C2.932 10.154 2.973 9.34 3.219 8.537C3.465 7.733 3.887 7.036 4.484 6.445C4.929 6.005 5.434 5.663 6 5.417L6 3.693C5.896 3.585 5.82 3.459 5.772 3.316L5.439 2.316C5.331 1.992 5.377 1.692 5.576 1.415C5.776 1.138 6.046 1 6.387 1L9.613 1C9.954 1 10.224 1.138 10.424 1.415C10.623 1.692 10.669 1.992 10.561 2.316L10.228 3.316ZM7 5.757C7 5.864 6.97 5.961 6.909 6.047C6.848 6.132 6.768 6.193 6.667 6.229C6.104 6.428 5.611 6.737 5.187 7.156C4.709 7.629 4.372 8.186 4.175 8.829C4.118 9.016 4.075 9.204 4.045 9.392L4.057 9.385C4.48 9.128 4.961 9 5.5 9C6.041 9 6.585 9.118 7.134 9.353C7.631 9.566 8.037 9.83 8.354 10.146C8.579 10.372 8.881 10.566 9.259 10.728C9.683 10.909 10.096 11 10.5 11C10.853 11 11.161 10.92 11.425 10.76C11.577 10.667 11.766 10.507 11.991 10.278C12.027 9.791 11.971 9.308 11.825 8.829C11.628 8.186 11.291 7.629 10.813 7.156C10.389 6.737 9.896 6.428 9.333 6.229C9.232 6.193 9.152 6.132 9.091 6.047C9.03 5.961 9 5.864 9 5.757L9 4L7 4L7 5.757ZM4.784 12.379C5.139 12.858 5.579 13.239 6.104 13.522C6.696 13.841 7.328 14 8 14C8.672 14 9.304 13.841 9.896 13.522C10.421 13.239 10.861 12.858 11.216 12.379C11.352 12.194 11.471 12.001 11.573 11.801C11.245 11.934 10.888 12 10.5 12C9.959 12 9.415 11.882 8.866 11.647C8.369 11.434 7.963 11.17 7.646 10.854C7.421 10.628 7.119 10.434 6.741 10.272C6.317 10.091 5.904 10 5.5 10C5.147 10 4.839 10.08 4.575 10.24C4.434 10.326 4.261 10.47 4.057 10.673C4.063 10.709 4.07 10.746 4.077 10.782C4.194 11.367 4.43 11.899 4.784 12.379Z"/>
</vector>
```

### Flutter

```dart
// Gentleface "potion" (line-round), MIT. https://gentleface.com/icons/potion
import 'package:flutter/widgets.dart';

class PotionIcon extends StatelessWidget {
  const PotionIcon({super.key, this.size = 16, this.color});
  final double size;
  final Color? color;

  @override
  Widget build(BuildContext context) => CustomPaint(
        size: Size.square(size),
        painter: _PotionIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
      );
}

class _PotionIconPainter extends CustomPainter {
  _PotionIconPainter(this.color);
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(10.228, 3.316)
      ..cubicTo(10.18, 3.459, 10.104, 3.585, 10, 3.693)
      ..lineTo(10, 5.417)
      ..cubicTo(10.566, 5.663, 11.071, 6.005, 11.516, 6.445)
      ..cubicTo(12.113, 7.036, 12.535, 7.733, 12.781, 8.537)
      ..cubicTo(13.027, 9.34, 13.068, 10.154, 12.903, 10.978)
      ..cubicTo(12.758, 11.709, 12.463, 12.374, 12.02, 12.973)
      ..cubicTo(11.576, 13.573, 11.027, 14.049, 10.37, 14.403)
      ..cubicTo(9.63, 14.801, 8.84, 15, 8, 15)
      ..cubicTo(7.16, 15, 6.37, 14.801, 5.63, 14.403)
      ..cubicTo(4.973, 14.049, 4.424, 13.573, 3.98, 12.973)
      ..cubicTo(3.537, 12.374, 3.242, 11.709, 3.097, 10.978)
      ..cubicTo(2.932, 10.154, 2.973, 9.34, 3.219, 8.537)
      ..cubicTo(3.465, 7.733, 3.887, 7.036, 4.484, 6.445)
      ..cubicTo(4.929, 6.005, 5.434, 5.663, 6, 5.417)
      ..lineTo(6, 3.693)
      ..cubicTo(5.896, 3.585, 5.82, 3.459, 5.772, 3.316)
      ..lineTo(5.439, 2.316)
      ..cubicTo(5.331, 1.992, 5.377, 1.692, 5.576, 1.415)
      ..cubicTo(5.776, 1.138, 6.046, 1, 6.387, 1)
      ..lineTo(9.613, 1)
      ..cubicTo(9.954, 1, 10.224, 1.138, 10.424, 1.415)
      ..cubicTo(10.623, 1.692, 10.669, 1.992, 10.561, 2.316)
      ..lineTo(10.228, 3.316)
      ..close()
      ..moveTo(7, 5.757)
      ..cubicTo(7, 5.864, 6.97, 5.961, 6.909, 6.047)
      ..cubicTo(6.848, 6.132, 6.768, 6.193, 6.667, 6.229)
      ..cubicTo(6.104, 6.428, 5.611, 6.737, 5.187, 7.156)
      ..cubicTo(4.709, 7.629, 4.372, 8.186, 4.175, 8.829)
      ..cubicTo(4.118, 9.016, 4.075, 9.204, 4.045, 9.392)
      ..lineTo(4.057, 9.385)
      ..cubicTo(4.48, 9.128, 4.961, 9, 5.5, 9)
      ..cubicTo(6.041, 9, 6.585, 9.118, 7.134, 9.353)
      ..cubicTo(7.631, 9.566, 8.037, 9.83, 8.354, 10.146)
      ..cubicTo(8.579, 10.372, 8.881, 10.566, 9.259, 10.728)
      ..cubicTo(9.683, 10.909, 10.096, 11, 10.5, 11)
      ..cubicTo(10.853, 11, 11.161, 10.92, 11.425, 10.76)
      ..cubicTo(11.577, 10.667, 11.766, 10.507, 11.991, 10.278)
      ..cubicTo(12.027, 9.791, 11.971, 9.308, 11.825, 8.829)
      ..cubicTo(11.628, 8.186, 11.291, 7.629, 10.813, 7.156)
      ..cubicTo(10.389, 6.737, 9.896, 6.428, 9.333, 6.229)
      ..cubicTo(9.232, 6.193, 9.152, 6.132, 9.091, 6.047)
      ..cubicTo(9.03, 5.961, 9, 5.864, 9, 5.757)
      ..lineTo(9, 4)
      ..lineTo(7, 4)
      ..lineTo(7, 5.757)
      ..close()
      ..moveTo(4.784, 12.379)
      ..cubicTo(5.139, 12.858, 5.579, 13.239, 6.104, 13.522)
      ..cubicTo(6.696, 13.841, 7.328, 14, 8, 14)
      ..cubicTo(8.672, 14, 9.304, 13.841, 9.896, 13.522)
      ..cubicTo(10.421, 13.239, 10.861, 12.858, 11.216, 12.379)
      ..cubicTo(11.352, 12.194, 11.471, 12.001, 11.573, 11.801)
      ..cubicTo(11.245, 11.934, 10.888, 12, 10.5, 12)
      ..cubicTo(9.959, 12, 9.415, 11.882, 8.866, 11.647)
      ..cubicTo(8.369, 11.434, 7.963, 11.17, 7.646, 10.854)
      ..cubicTo(7.421, 10.628, 7.119, 10.434, 6.741, 10.272)
      ..cubicTo(6.317, 10.091, 5.904, 10, 5.5, 10)
      ..cubicTo(5.147, 10, 4.839, 10.08, 4.575, 10.24)
      ..cubicTo(4.434, 10.326, 4.261, 10.47, 4.057, 10.673)
      ..cubicTo(4.063, 10.709, 4.07, 10.746, 4.077, 10.782)
      ..cubicTo(4.194, 11.367, 4.43, 11.899, 4.784, 12.379)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

  @override
  bool shouldRepaint(_PotionIconPainter old) => old.color != color;
}
```