gentleface

Gentleface › Food & drink › jar

jar icon

Jar: jar, preserves, mason jar, jam. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

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="M12.856 1.144C12.952 1.241 13 1.359 13 1.5L13 3.5C13 3.641 12.952 3.759 12.856 3.856C12.759 3.952 12.641 4 12.5 4L12 4L12 5.05C12.142 5.079 12.283 5.121 12.42 5.176C12.741 5.303 13.024 5.488 13.268 5.732C13.512 5.976 13.697 6.259 13.824 6.58C13.941 6.875 14 7.182 14 7.5L14 13C14 13.254 13.953 13.5 13.86 13.736C13.758 13.993 13.609 14.219 13.414 14.414C13.219 14.609 12.993 14.758 12.736 14.86C12.5 14.953 12.254 15 12 15L4 15C3.746 15 3.5 14.953 3.264 14.86C3.007 14.758 2.781 14.609 2.586 14.414C2.391 14.219 2.242 13.993 2.14 13.736C2.047 13.5 2 13.254 2 13L2 7.5C2 7.182 2.059 6.875 2.176 6.58C2.303 6.259 2.488 5.976 2.732 5.732C2.976 5.488 3.259 5.303 3.58 5.176C3.717 5.121 3.857 5.079 4 5.05L4 4L3.5 4C3.359 4 3.241 3.952 3.144 3.856C3.048 3.759 3 3.641 3 3.5L3 1.5C3 1.359 3.048 1.241 3.144 1.144C3.241 1.048 3.359 1 3.5 1L12.5 1C12.641 1 12.759 1.048 12.856 1.144ZM12 2L4 2L4 3L12 3L12 2ZM5 5.5C5 5.641 4.952 5.759 4.856 5.856C4.759 5.952 4.641 6 4.5 6C4.309 6 4.125 6.035 3.948 6.105C3.755 6.182 3.586 6.293 3.439 6.439C3.293 6.586 3.182 6.755 3.105 6.948C3.035 7.125 3 7.309 3 7.5L3 9L13 9L13 7.5C13 7.309 12.965 7.125 12.895 6.948C12.818 6.755 12.707 6.586 12.561 6.439C12.414 6.293 12.245 6.182 12.052 6.105C11.875 6.035 11.691 6 11.5 6C11.359 6 11.241 5.952 11.144 5.856C11.048 5.759 11 5.641 11 5.5L11 4L5 4L5 5.5ZM3.293 13.707C3.488 13.902 3.724 14 4 14L12 14C12.276 14 12.512 13.902 12.707 13.707C12.902 13.512 13 13.276 13 13L13 10L3 10L3 13C3 13.276 3.098 13.512 3.293 13.707Z"/></svg>
React
// Gentleface "jar" (line-round), MIT. https://gentleface.com/icons/jar
import type { SVGProps } from 'react';

export function JarIcon(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="M12.856 1.144C12.952 1.241 13 1.359 13 1.5L13 3.5C13 3.641 12.952 3.759 12.856 3.856C12.759 3.952 12.641 4 12.5 4L12 4L12 5.05C12.142 5.079 12.283 5.121 12.42 5.176C12.741 5.303 13.024 5.488 13.268 5.732C13.512 5.976 13.697 6.259 13.824 6.58C13.941 6.875 14 7.182 14 7.5L14 13C14 13.254 13.953 13.5 13.86 13.736C13.758 13.993 13.609 14.219 13.414 14.414C13.219 14.609 12.993 14.758 12.736 14.86C12.5 14.953 12.254 15 12 15L4 15C3.746 15 3.5 14.953 3.264 14.86C3.007 14.758 2.781 14.609 2.586 14.414C2.391 14.219 2.242 13.993 2.14 13.736C2.047 13.5 2 13.254 2 13L2 7.5C2 7.182 2.059 6.875 2.176 6.58C2.303 6.259 2.488 5.976 2.732 5.732C2.976 5.488 3.259 5.303 3.58 5.176C3.717 5.121 3.857 5.079 4 5.05L4 4L3.5 4C3.359 4 3.241 3.952 3.144 3.856C3.048 3.759 3 3.641 3 3.5L3 1.5C3 1.359 3.048 1.241 3.144 1.144C3.241 1.048 3.359 1 3.5 1L12.5 1C12.641 1 12.759 1.048 12.856 1.144ZM12 2L4 2L4 3L12 3L12 2ZM5 5.5C5 5.641 4.952 5.759 4.856 5.856C4.759 5.952 4.641 6 4.5 6C4.309 6 4.125 6.035 3.948 6.105C3.755 6.182 3.586 6.293 3.439 6.439C3.293 6.586 3.182 6.755 3.105 6.948C3.035 7.125 3 7.309 3 7.5L3 9L13 9L13 7.5C13 7.309 12.965 7.125 12.895 6.948C12.818 6.755 12.707 6.586 12.561 6.439C12.414 6.293 12.245 6.182 12.052 6.105C11.875 6.035 11.691 6 11.5 6C11.359 6 11.241 5.952 11.144 5.856C11.048 5.759 11 5.641 11 5.5L11 4L5 4L5 5.5ZM3.293 13.707C3.488 13.902 3.724 14 4 14L12 14C12.276 14 12.512 13.902 12.707 13.707C12.902 13.512 13 13.276 13 13L13 10L3 10L3 13C3 13.276 3.098 13.512 3.293 13.707Z" />
    </svg>
  );
}
Vue
Vue: see /icons/jar.md
Svelte
Svelte: see /icons/jar.md
HTML img
HTML img: see /icons/jar.md
CSS
CSS: see /icons/jar.md
Data URL
Data URL: see /icons/jar.md
Sprite
Sprite: see /icons/jar.md
SwiftUI
SwiftUI: see /icons/jar.md
Compose
Compose: see /icons/jar.md
Android XML
Android XML: see /icons/jar.md
Flutter
Flutter: see /icons/jar.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 { JarIcon } from '@gentleface/react'; (setup).

Meaning

Use it for
jar, preserves, mason jar, jam, canning
Tags
jar, preserves, jam, jelly, honey, mason-jar, pantry, canning, pickles, spread, storage, groceries, food
Category
Food & drink
Component name
JarIcon
History
  • released in 0.2.0
  • 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/jar.json · Markdown: /icons/jar.md · SVG: https://gentleface.com/svg/{style}/16/jar.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/jar.png