Gentleface › Games & sports › potion
potion icon
potionPotion: potion, health potion, elixir. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.
Code line-round
<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>
// 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: see /icons/potion.md
Svelte: see /icons/potion.md
HTML img: see /icons/potion.md
CSS: see /icons/potion.md
Data URL: see /icons/potion.md
Sprite: see /icons/potion.md
SwiftUI: see /icons/potion.md
Compose: see /icons/potion.md
Android XML: see /icons/potion.md
Flutter: see /icons/potion.md
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. 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 { PotionIcon } from '@gentleface/react'; (setup).
Meaning
- Use it for
- potion, health potion, elixir
- Tags
- potion, health-potion, elixir, flask, vial, bottle, magic, alchemy, rpg, game, item, consumable, cork
- Category
- Games & sports
- Component name
PotionIcon- History
- 20 px drawn, 24 px drawn, added, released in 0.6.0
- Since
- version 0.6.0
More games & sports icons
alien american-football badminton barbell baseball baseball-bat basketball basketball-court billiards bomb bow-arrow bowling boxing-glove chess-bishop chess-king chess-knight · all games & sports icons
For agents
Metadata: /icons/potion.json · Markdown: /icons/potion.md · SVG: https://gentleface.com/svg/{style}/16/potion.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/potion.png