# cylinder icon

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

- Category: Shapes
- Use it for: cylinder solid
- Tags: cylinder, 3d, shape, solid, geometry, tube
- Component name: CylinderIcon
- Added: 2026-10-15

## Don't confuse with

- `database`: a cylinder with bands is the database

## Files

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.

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

The SVG of every style: https://gentleface.com/icons/cylinder.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="M12.557 13.569C12.281 13.879 11.89 14.147 11.385 14.371C10.908 14.583 10.361 14.743 9.743 14.852C9.182 14.951 8.601 15 8 15C7.399 15 6.818 14.951 6.257 14.852C5.639 14.743 5.092 14.583 4.615 14.371C4.11 14.147 3.719 13.879 3.443 13.569C3.148 13.238 3 12.881 3 12.5L3 3.5C3 3.119 3.148 2.762 3.443 2.431C3.719 2.121 4.11 1.853 4.615 1.629C5.092 1.417 5.639 1.257 6.257 1.148C6.818 1.049 7.399 1 8 1C8.601 1 9.182 1.049 9.743 1.148C10.361 1.257 10.908 1.417 11.385 1.629C11.89 1.853 12.281 2.121 12.557 2.431C12.852 2.762 13 3.119 13 3.5L13 12.5C13 12.881 12.852 13.238 12.557 13.569ZM12 3.5C12 3.373 11.937 3.238 11.811 3.096C11.63 2.893 11.353 2.709 10.979 2.543C10.577 2.364 10.107 2.227 9.57 2.133C9.066 2.044 8.543 2 8 2C7.457 2 6.934 2.044 6.43 2.133C5.893 2.227 5.423 2.364 5.021 2.543C4.647 2.709 4.37 2.893 4.189 3.096C4.063 3.238 4 3.373 4 3.5C4 3.627 4.063 3.762 4.189 3.904C4.37 4.107 4.647 4.291 5.021 4.457C5.423 4.636 5.893 4.773 6.43 4.867C6.934 4.956 7.457 5 8 5C8.543 5 9.066 4.956 9.57 4.867C10.107 4.773 10.577 4.636 10.979 4.457C11.353 4.291 11.63 4.107 11.811 3.904C11.937 3.762 12 3.627 12 3.5ZM11.385 5.371C10.908 5.583 10.361 5.743 9.743 5.852C9.182 5.951 8.601 6 8 6C7.399 6 6.818 5.951 6.257 5.852C5.639 5.743 5.092 5.583 4.615 5.371C4.387 5.27 4.182 5.159 4 5.04L4 12.5C4 12.627 4.063 12.762 4.189 12.904C4.37 13.107 4.647 13.291 5.021 13.457C5.423 13.636 5.893 13.773 6.43 13.867C6.934 13.956 7.457 14 8 14C8.543 14 9.066 13.956 9.57 13.867C10.107 13.773 10.577 13.636 10.979 13.457C11.353 13.291 11.63 13.107 11.811 12.904C11.937 12.762 12 12.627 12 12.5L12 5.04C11.818 5.159 11.613 5.27 11.385 5.371Z"/></svg>
```

### React

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

export function CylinderIcon(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.557 13.569C12.281 13.879 11.89 14.147 11.385 14.371C10.908 14.583 10.361 14.743 9.743 14.852C9.182 14.951 8.601 15 8 15C7.399 15 6.818 14.951 6.257 14.852C5.639 14.743 5.092 14.583 4.615 14.371C4.11 14.147 3.719 13.879 3.443 13.569C3.148 13.238 3 12.881 3 12.5L3 3.5C3 3.119 3.148 2.762 3.443 2.431C3.719 2.121 4.11 1.853 4.615 1.629C5.092 1.417 5.639 1.257 6.257 1.148C6.818 1.049 7.399 1 8 1C8.601 1 9.182 1.049 9.743 1.148C10.361 1.257 10.908 1.417 11.385 1.629C11.89 1.853 12.281 2.121 12.557 2.431C12.852 2.762 13 3.119 13 3.5L13 12.5C13 12.881 12.852 13.238 12.557 13.569ZM12 3.5C12 3.373 11.937 3.238 11.811 3.096C11.63 2.893 11.353 2.709 10.979 2.543C10.577 2.364 10.107 2.227 9.57 2.133C9.066 2.044 8.543 2 8 2C7.457 2 6.934 2.044 6.43 2.133C5.893 2.227 5.423 2.364 5.021 2.543C4.647 2.709 4.37 2.893 4.189 3.096C4.063 3.238 4 3.373 4 3.5C4 3.627 4.063 3.762 4.189 3.904C4.37 4.107 4.647 4.291 5.021 4.457C5.423 4.636 5.893 4.773 6.43 4.867C6.934 4.956 7.457 5 8 5C8.543 5 9.066 4.956 9.57 4.867C10.107 4.773 10.577 4.636 10.979 4.457C11.353 4.291 11.63 4.107 11.811 3.904C11.937 3.762 12 3.627 12 3.5ZM11.385 5.371C10.908 5.583 10.361 5.743 9.743 5.852C9.182 5.951 8.601 6 8 6C7.399 6 6.818 5.951 6.257 5.852C5.639 5.743 5.092 5.583 4.615 5.371C4.387 5.27 4.182 5.159 4 5.04L4 12.5C4 12.627 4.063 12.762 4.189 12.904C4.37 13.107 4.647 13.291 5.021 13.457C5.423 13.636 5.893 13.773 6.43 13.867C6.934 13.956 7.457 14 8 14C8.543 14 9.066 13.956 9.57 13.867C10.107 13.773 10.577 13.636 10.979 13.457C11.353 13.291 11.63 13.107 11.811 12.904C11.937 12.762 12 12.627 12 12.5L12 5.04C11.818 5.159 11.613 5.27 11.385 5.371Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "cylinder" (line-round), MIT. https://gentleface.com/icons/cylinder -->
<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="M12.557 13.569C12.281 13.879 11.89 14.147 11.385 14.371C10.908 14.583 10.361 14.743 9.743 14.852C9.182 14.951 8.601 15 8 15C7.399 15 6.818 14.951 6.257 14.852C5.639 14.743 5.092 14.583 4.615 14.371C4.11 14.147 3.719 13.879 3.443 13.569C3.148 13.238 3 12.881 3 12.5L3 3.5C3 3.119 3.148 2.762 3.443 2.431C3.719 2.121 4.11 1.853 4.615 1.629C5.092 1.417 5.639 1.257 6.257 1.148C6.818 1.049 7.399 1 8 1C8.601 1 9.182 1.049 9.743 1.148C10.361 1.257 10.908 1.417 11.385 1.629C11.89 1.853 12.281 2.121 12.557 2.431C12.852 2.762 13 3.119 13 3.5L13 12.5C13 12.881 12.852 13.238 12.557 13.569ZM12 3.5C12 3.373 11.937 3.238 11.811 3.096C11.63 2.893 11.353 2.709 10.979 2.543C10.577 2.364 10.107 2.227 9.57 2.133C9.066 2.044 8.543 2 8 2C7.457 2 6.934 2.044 6.43 2.133C5.893 2.227 5.423 2.364 5.021 2.543C4.647 2.709 4.37 2.893 4.189 3.096C4.063 3.238 4 3.373 4 3.5C4 3.627 4.063 3.762 4.189 3.904C4.37 4.107 4.647 4.291 5.021 4.457C5.423 4.636 5.893 4.773 6.43 4.867C6.934 4.956 7.457 5 8 5C8.543 5 9.066 4.956 9.57 4.867C10.107 4.773 10.577 4.636 10.979 4.457C11.353 4.291 11.63 4.107 11.811 3.904C11.937 3.762 12 3.627 12 3.5ZM11.385 5.371C10.908 5.583 10.361 5.743 9.743 5.852C9.182 5.951 8.601 6 8 6C7.399 6 6.818 5.951 6.257 5.852C5.639 5.743 5.092 5.583 4.615 5.371C4.387 5.27 4.182 5.159 4 5.04L4 12.5C4 12.627 4.063 12.762 4.189 12.904C4.37 13.107 4.647 13.291 5.021 13.457C5.423 13.636 5.893 13.773 6.43 13.867C6.934 13.956 7.457 14 8 14C8.543 14 9.066 13.956 9.57 13.867C10.107 13.773 10.577 13.636 10.979 13.457C11.353 13.291 11.63 13.107 11.811 12.904C11.937 12.762 12 12.627 12 12.5L12 5.04C11.818 5.159 11.613 5.27 11.385 5.371Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "cylinder" (line-round), MIT. https://gentleface.com/icons/cylinder -->
<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="M12.557 13.569C12.281 13.879 11.89 14.147 11.385 14.371C10.908 14.583 10.361 14.743 9.743 14.852C9.182 14.951 8.601 15 8 15C7.399 15 6.818 14.951 6.257 14.852C5.639 14.743 5.092 14.583 4.615 14.371C4.11 14.147 3.719 13.879 3.443 13.569C3.148 13.238 3 12.881 3 12.5L3 3.5C3 3.119 3.148 2.762 3.443 2.431C3.719 2.121 4.11 1.853 4.615 1.629C5.092 1.417 5.639 1.257 6.257 1.148C6.818 1.049 7.399 1 8 1C8.601 1 9.182 1.049 9.743 1.148C10.361 1.257 10.908 1.417 11.385 1.629C11.89 1.853 12.281 2.121 12.557 2.431C12.852 2.762 13 3.119 13 3.5L13 12.5C13 12.881 12.852 13.238 12.557 13.569ZM12 3.5C12 3.373 11.937 3.238 11.811 3.096C11.63 2.893 11.353 2.709 10.979 2.543C10.577 2.364 10.107 2.227 9.57 2.133C9.066 2.044 8.543 2 8 2C7.457 2 6.934 2.044 6.43 2.133C5.893 2.227 5.423 2.364 5.021 2.543C4.647 2.709 4.37 2.893 4.189 3.096C4.063 3.238 4 3.373 4 3.5C4 3.627 4.063 3.762 4.189 3.904C4.37 4.107 4.647 4.291 5.021 4.457C5.423 4.636 5.893 4.773 6.43 4.867C6.934 4.956 7.457 5 8 5C8.543 5 9.066 4.956 9.57 4.867C10.107 4.773 10.577 4.636 10.979 4.457C11.353 4.291 11.63 4.107 11.811 3.904C11.937 3.762 12 3.627 12 3.5ZM11.385 5.371C10.908 5.583 10.361 5.743 9.743 5.852C9.182 5.951 8.601 6 8 6C7.399 6 6.818 5.951 6.257 5.852C5.639 5.743 5.092 5.583 4.615 5.371C4.387 5.27 4.182 5.159 4 5.04L4 12.5C4 12.627 4.063 12.762 4.189 12.904C4.37 13.107 4.647 13.291 5.021 13.457C5.423 13.636 5.893 13.773 6.43 13.867C6.934 13.956 7.457 14 8 14C8.543 14 9.066 13.956 9.57 13.867C10.107 13.773 10.577 13.636 10.979 13.457C11.353 13.291 11.63 13.107 11.811 12.904C11.937 12.762 12 12.627 12 12.5L12 5.04C11.818 5.159 11.613 5.27 11.385 5.371Z" />
</svg>
```

### HTML img

```html
<!-- Gentleface "cylinder" (line-round), MIT. https://gentleface.com/icons/cylinder. 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/cylinder.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "cylinder" (line-round), MIT. https://gentleface.com/icons/cylinder. Takes the text color. */
.icon-cylinder {
  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='M12.557 13.569C12.281 13.879 11.89 14.147 11.385 14.371C10.908 14.583 10.361 14.743 9.743 14.852C9.182 14.951 8.601 15 8 15C7.399 15 6.818 14.951 6.257 14.852C5.639 14.743 5.092 14.583 4.615 14.371C4.11 14.147 3.719 13.879 3.443 13.569C3.148 13.238 3 12.881 3 12.5L3 3.5C3 3.119 3.148 2.762 3.443 2.431C3.719 2.121 4.11 1.853 4.615 1.629C5.092 1.417 5.639 1.257 6.257 1.148C6.818 1.049 7.399 1 8 1C8.601 1 9.182 1.049 9.743 1.148C10.361 1.257 10.908 1.417 11.385 1.629C11.89 1.853 12.281 2.121 12.557 2.431C12.852 2.762 13 3.119 13 3.5L13 12.5C13 12.881 12.852 13.238 12.557 13.569ZM12 3.5C12 3.373 11.937 3.238 11.811 3.096C11.63 2.893 11.353 2.709 10.979 2.543C10.577 2.364 10.107 2.227 9.57 2.133C9.066 2.044 8.543 2 8 2C7.457 2 6.934 2.044 6.43 2.133C5.893 2.227 5.423 2.364 5.021 2.543C4.647 2.709 4.37 2.893 4.189 3.096C4.063 3.238 4 3.373 4 3.5C4 3.627 4.063 3.762 4.189 3.904C4.37 4.107 4.647 4.291 5.021 4.457C5.423 4.636 5.893 4.773 6.43 4.867C6.934 4.956 7.457 5 8 5C8.543 5 9.066 4.956 9.57 4.867C10.107 4.773 10.577 4.636 10.979 4.457C11.353 4.291 11.63 4.107 11.811 3.904C11.937 3.762 12 3.627 12 3.5ZM11.385 5.371C10.908 5.583 10.361 5.743 9.743 5.852C9.182 5.951 8.601 6 8 6C7.399 6 6.818 5.951 6.257 5.852C5.639 5.743 5.092 5.583 4.615 5.371C4.387 5.27 4.182 5.159 4 5.04L4 12.5C4 12.627 4.063 12.762 4.189 12.904C4.37 13.107 4.647 13.291 5.021 13.457C5.423 13.636 5.893 13.773 6.43 13.867C6.934 13.956 7.457 14 8 14C8.543 14 9.066 13.956 9.57 13.867C10.107 13.773 10.577 13.636 10.979 13.457C11.353 13.291 11.63 13.107 11.811 12.904C11.937 12.762 12 12.627 12 12.5L12 5.04C11.818 5.159 11.613 5.27 11.385 5.371Z'/%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='M12.557 13.569C12.281 13.879 11.89 14.147 11.385 14.371C10.908 14.583 10.361 14.743 9.743 14.852C9.182 14.951 8.601 15 8 15C7.399 15 6.818 14.951 6.257 14.852C5.639 14.743 5.092 14.583 4.615 14.371C4.11 14.147 3.719 13.879 3.443 13.569C3.148 13.238 3 12.881 3 12.5L3 3.5C3 3.119 3.148 2.762 3.443 2.431C3.719 2.121 4.11 1.853 4.615 1.629C5.092 1.417 5.639 1.257 6.257 1.148C6.818 1.049 7.399 1 8 1C8.601 1 9.182 1.049 9.743 1.148C10.361 1.257 10.908 1.417 11.385 1.629C11.89 1.853 12.281 2.121 12.557 2.431C12.852 2.762 13 3.119 13 3.5L13 12.5C13 12.881 12.852 13.238 12.557 13.569ZM12 3.5C12 3.373 11.937 3.238 11.811 3.096C11.63 2.893 11.353 2.709 10.979 2.543C10.577 2.364 10.107 2.227 9.57 2.133C9.066 2.044 8.543 2 8 2C7.457 2 6.934 2.044 6.43 2.133C5.893 2.227 5.423 2.364 5.021 2.543C4.647 2.709 4.37 2.893 4.189 3.096C4.063 3.238 4 3.373 4 3.5C4 3.627 4.063 3.762 4.189 3.904C4.37 4.107 4.647 4.291 5.021 4.457C5.423 4.636 5.893 4.773 6.43 4.867C6.934 4.956 7.457 5 8 5C8.543 5 9.066 4.956 9.57 4.867C10.107 4.773 10.577 4.636 10.979 4.457C11.353 4.291 11.63 4.107 11.811 3.904C11.937 3.762 12 3.627 12 3.5ZM11.385 5.371C10.908 5.583 10.361 5.743 9.743 5.852C9.182 5.951 8.601 6 8 6C7.399 6 6.818 5.951 6.257 5.852C5.639 5.743 5.092 5.583 4.615 5.371C4.387 5.27 4.182 5.159 4 5.04L4 12.5C4 12.627 4.063 12.762 4.189 12.904C4.37 13.107 4.647 13.291 5.021 13.457C5.423 13.636 5.893 13.773 6.43 13.867C6.934 13.956 7.457 14 8 14C8.543 14 9.066 13.956 9.57 13.867C10.107 13.773 10.577 13.636 10.979 13.457C11.353 13.291 11.63 13.107 11.811 12.904C11.937 12.762 12 12.627 12 12.5L12 5.04C11.818 5.159 11.613 5.27 11.385 5.371Z'/%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='M12.557 13.569C12.281 13.879 11.89 14.147 11.385 14.371C10.908 14.583 10.361 14.743 9.743 14.852C9.182 14.951 8.601 15 8 15C7.399 15 6.818 14.951 6.257 14.852C5.639 14.743 5.092 14.583 4.615 14.371C4.11 14.147 3.719 13.879 3.443 13.569C3.148 13.238 3 12.881 3 12.5L3 3.5C3 3.119 3.148 2.762 3.443 2.431C3.719 2.121 4.11 1.853 4.615 1.629C5.092 1.417 5.639 1.257 6.257 1.148C6.818 1.049 7.399 1 8 1C8.601 1 9.182 1.049 9.743 1.148C10.361 1.257 10.908 1.417 11.385 1.629C11.89 1.853 12.281 2.121 12.557 2.431C12.852 2.762 13 3.119 13 3.5L13 12.5C13 12.881 12.852 13.238 12.557 13.569ZM12 3.5C12 3.373 11.937 3.238 11.811 3.096C11.63 2.893 11.353 2.709 10.979 2.543C10.577 2.364 10.107 2.227 9.57 2.133C9.066 2.044 8.543 2 8 2C7.457 2 6.934 2.044 6.43 2.133C5.893 2.227 5.423 2.364 5.021 2.543C4.647 2.709 4.37 2.893 4.189 3.096C4.063 3.238 4 3.373 4 3.5C4 3.627 4.063 3.762 4.189 3.904C4.37 4.107 4.647 4.291 5.021 4.457C5.423 4.636 5.893 4.773 6.43 4.867C6.934 4.956 7.457 5 8 5C8.543 5 9.066 4.956 9.57 4.867C10.107 4.773 10.577 4.636 10.979 4.457C11.353 4.291 11.63 4.107 11.811 3.904C11.937 3.762 12 3.627 12 3.5ZM11.385 5.371C10.908 5.583 10.361 5.743 9.743 5.852C9.182 5.951 8.601 6 8 6C7.399 6 6.818 5.951 6.257 5.852C5.639 5.743 5.092 5.583 4.615 5.371C4.387 5.27 4.182 5.159 4 5.04L4 12.5C4 12.627 4.063 12.762 4.189 12.904C4.37 13.107 4.647 13.291 5.021 13.457C5.423 13.636 5.893 13.773 6.43 13.867C6.934 13.956 7.457 14 8 14C8.543 14 9.066 13.956 9.57 13.867C10.107 13.773 10.577 13.636 10.979 13.457C11.353 13.291 11.63 13.107 11.811 12.904C11.937 12.762 12 12.627 12 12.5L12 5.04C11.818 5.159 11.613 5.27 11.385 5.371Z'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "cylinder" (line-round), MIT. https://gentleface.com/icons/cylinder
     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#cylinder"/></svg>
```

### SwiftUI

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

struct CylinderIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 12.557, y: 13.569))
        p.addCurve(to: CGPoint(x: 11.385, y: 14.371), control1: CGPoint(x: 12.281, y: 13.879), control2: CGPoint(x: 11.89, y: 14.147))
        p.addCurve(to: CGPoint(x: 9.743, y: 14.852), control1: CGPoint(x: 10.908, y: 14.583), control2: CGPoint(x: 10.361, y: 14.743))
        p.addCurve(to: CGPoint(x: 8, y: 15), control1: CGPoint(x: 9.182, y: 14.951), control2: CGPoint(x: 8.601, y: 15))
        p.addCurve(to: CGPoint(x: 6.257, y: 14.852), control1: CGPoint(x: 7.399, y: 15), control2: CGPoint(x: 6.818, y: 14.951))
        p.addCurve(to: CGPoint(x: 4.615, y: 14.371), control1: CGPoint(x: 5.639, y: 14.743), control2: CGPoint(x: 5.092, y: 14.583))
        p.addCurve(to: CGPoint(x: 3.443, y: 13.569), control1: CGPoint(x: 4.11, y: 14.147), control2: CGPoint(x: 3.719, y: 13.879))
        p.addCurve(to: CGPoint(x: 3, y: 12.5), control1: CGPoint(x: 3.148, y: 13.238), control2: CGPoint(x: 3, y: 12.881))
        p.addLine(to: CGPoint(x: 3, y: 3.5))
        p.addCurve(to: CGPoint(x: 3.443, y: 2.431), control1: CGPoint(x: 3, y: 3.119), control2: CGPoint(x: 3.148, y: 2.762))
        p.addCurve(to: CGPoint(x: 4.615, y: 1.629), control1: CGPoint(x: 3.719, y: 2.121), control2: CGPoint(x: 4.11, y: 1.853))
        p.addCurve(to: CGPoint(x: 6.257, y: 1.148), control1: CGPoint(x: 5.092, y: 1.417), control2: CGPoint(x: 5.639, y: 1.257))
        p.addCurve(to: CGPoint(x: 8, y: 1), control1: CGPoint(x: 6.818, y: 1.049), control2: CGPoint(x: 7.399, y: 1))
        p.addCurve(to: CGPoint(x: 9.743, y: 1.148), control1: CGPoint(x: 8.601, y: 1), control2: CGPoint(x: 9.182, y: 1.049))
        p.addCurve(to: CGPoint(x: 11.385, y: 1.629), control1: CGPoint(x: 10.361, y: 1.257), control2: CGPoint(x: 10.908, y: 1.417))
        p.addCurve(to: CGPoint(x: 12.557, y: 2.431), control1: CGPoint(x: 11.89, y: 1.853), control2: CGPoint(x: 12.281, y: 2.121))
        p.addCurve(to: CGPoint(x: 13, y: 3.5), control1: CGPoint(x: 12.852, y: 2.762), control2: CGPoint(x: 13, y: 3.119))
        p.addLine(to: CGPoint(x: 13, y: 12.5))
        p.addCurve(to: CGPoint(x: 12.557, y: 13.569), control1: CGPoint(x: 13, y: 12.881), control2: CGPoint(x: 12.852, y: 13.238))
        p.closeSubpath()
        p.move(to: CGPoint(x: 12, y: 3.5))
        p.addCurve(to: CGPoint(x: 11.811, y: 3.096), control1: CGPoint(x: 12, y: 3.373), control2: CGPoint(x: 11.937, y: 3.238))
        p.addCurve(to: CGPoint(x: 10.979, y: 2.543), control1: CGPoint(x: 11.63, y: 2.893), control2: CGPoint(x: 11.353, y: 2.709))
        p.addCurve(to: CGPoint(x: 9.57, y: 2.133), control1: CGPoint(x: 10.577, y: 2.364), control2: CGPoint(x: 10.107, y: 2.227))
        p.addCurve(to: CGPoint(x: 8, y: 2), control1: CGPoint(x: 9.066, y: 2.044), control2: CGPoint(x: 8.543, y: 2))
        p.addCurve(to: CGPoint(x: 6.43, y: 2.133), control1: CGPoint(x: 7.457, y: 2), control2: CGPoint(x: 6.934, y: 2.044))
        p.addCurve(to: CGPoint(x: 5.021, y: 2.543), control1: CGPoint(x: 5.893, y: 2.227), control2: CGPoint(x: 5.423, y: 2.364))
        p.addCurve(to: CGPoint(x: 4.189, y: 3.096), control1: CGPoint(x: 4.647, y: 2.709), control2: CGPoint(x: 4.37, y: 2.893))
        p.addCurve(to: CGPoint(x: 4, y: 3.5), control1: CGPoint(x: 4.063, y: 3.238), control2: CGPoint(x: 4, y: 3.373))
        p.addCurve(to: CGPoint(x: 4.189, y: 3.904), control1: CGPoint(x: 4, y: 3.627), control2: CGPoint(x: 4.063, y: 3.762))
        p.addCurve(to: CGPoint(x: 5.021, y: 4.457), control1: CGPoint(x: 4.37, y: 4.107), control2: CGPoint(x: 4.647, y: 4.291))
        p.addCurve(to: CGPoint(x: 6.43, y: 4.867), control1: CGPoint(x: 5.423, y: 4.636), control2: CGPoint(x: 5.893, y: 4.773))
        p.addCurve(to: CGPoint(x: 8, y: 5), control1: CGPoint(x: 6.934, y: 4.956), control2: CGPoint(x: 7.457, y: 5))
        p.addCurve(to: CGPoint(x: 9.57, y: 4.867), control1: CGPoint(x: 8.543, y: 5), control2: CGPoint(x: 9.066, y: 4.956))
        p.addCurve(to: CGPoint(x: 10.979, y: 4.457), control1: CGPoint(x: 10.107, y: 4.773), control2: CGPoint(x: 10.577, y: 4.636))
        p.addCurve(to: CGPoint(x: 11.811, y: 3.904), control1: CGPoint(x: 11.353, y: 4.291), control2: CGPoint(x: 11.63, y: 4.107))
        p.addCurve(to: CGPoint(x: 12, y: 3.5), control1: CGPoint(x: 11.937, y: 3.762), control2: CGPoint(x: 12, y: 3.627))
        p.closeSubpath()
        p.move(to: CGPoint(x: 11.385, y: 5.371))
        p.addCurve(to: CGPoint(x: 9.743, y: 5.852), control1: CGPoint(x: 10.908, y: 5.583), control2: CGPoint(x: 10.361, y: 5.743))
        p.addCurve(to: CGPoint(x: 8, y: 6), control1: CGPoint(x: 9.182, y: 5.951), control2: CGPoint(x: 8.601, y: 6))
        p.addCurve(to: CGPoint(x: 6.257, y: 5.852), control1: CGPoint(x: 7.399, y: 6), control2: CGPoint(x: 6.818, y: 5.951))
        p.addCurve(to: CGPoint(x: 4.615, y: 5.371), control1: CGPoint(x: 5.639, y: 5.743), control2: CGPoint(x: 5.092, y: 5.583))
        p.addCurve(to: CGPoint(x: 4, y: 5.04), control1: CGPoint(x: 4.387, y: 5.27), control2: CGPoint(x: 4.182, y: 5.159))
        p.addLine(to: CGPoint(x: 4, y: 12.5))
        p.addCurve(to: CGPoint(x: 4.189, y: 12.904), control1: CGPoint(x: 4, y: 12.627), control2: CGPoint(x: 4.063, y: 12.762))
        p.addCurve(to: CGPoint(x: 5.021, y: 13.457), control1: CGPoint(x: 4.37, y: 13.107), control2: CGPoint(x: 4.647, y: 13.291))
        p.addCurve(to: CGPoint(x: 6.43, y: 13.867), control1: CGPoint(x: 5.423, y: 13.636), control2: CGPoint(x: 5.893, y: 13.773))
        p.addCurve(to: CGPoint(x: 8, y: 14), control1: CGPoint(x: 6.934, y: 13.956), control2: CGPoint(x: 7.457, y: 14))
        p.addCurve(to: CGPoint(x: 9.57, y: 13.867), control1: CGPoint(x: 8.543, y: 14), control2: CGPoint(x: 9.066, y: 13.956))
        p.addCurve(to: CGPoint(x: 10.979, y: 13.457), control1: CGPoint(x: 10.107, y: 13.773), control2: CGPoint(x: 10.577, y: 13.636))
        p.addCurve(to: CGPoint(x: 11.811, y: 12.904), control1: CGPoint(x: 11.353, y: 13.291), control2: CGPoint(x: 11.63, y: 13.107))
        p.addCurve(to: CGPoint(x: 12, y: 12.5), control1: CGPoint(x: 11.937, y: 12.762), control2: CGPoint(x: 12, y: 12.627))
        p.addLine(to: CGPoint(x: 12, y: 5.04))
        p.addCurve(to: CGPoint(x: 11.385, y: 5.371), control1: CGPoint(x: 11.818, y: 5.159), control2: CGPoint(x: 11.613, y: 5.27))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

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

### Compose

```kotlin
// Gentleface "cylinder" (line-round), MIT. https://gentleface.com/icons/cylinder
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 CylinderIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "cylinder", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M12.557 13.569C12.281 13.879 11.89 14.147 11.385 14.371C10.908 14.583 10.361 14.743 9.743 14.852C9.182 14.951 8.601 15 8 15C7.399 15 6.818 14.951 6.257 14.852C5.639 14.743 5.092 14.583 4.615 14.371C4.11 14.147 3.719 13.879 3.443 13.569C3.148 13.238 3 12.881 3 12.5L3 3.5C3 3.119 3.148 2.762 3.443 2.431C3.719 2.121 4.11 1.853 4.615 1.629C5.092 1.417 5.639 1.257 6.257 1.148C6.818 1.049 7.399 1 8 1C8.601 1 9.182 1.049 9.743 1.148C10.361 1.257 10.908 1.417 11.385 1.629C11.89 1.853 12.281 2.121 12.557 2.431C12.852 2.762 13 3.119 13 3.5L13 12.5C13 12.881 12.852 13.238 12.557 13.569ZM12 3.5C12 3.373 11.937 3.238 11.811 3.096C11.63 2.893 11.353 2.709 10.979 2.543C10.577 2.364 10.107 2.227 9.57 2.133C9.066 2.044 8.543 2 8 2C7.457 2 6.934 2.044 6.43 2.133C5.893 2.227 5.423 2.364 5.021 2.543C4.647 2.709 4.37 2.893 4.189 3.096C4.063 3.238 4 3.373 4 3.5C4 3.627 4.063 3.762 4.189 3.904C4.37 4.107 4.647 4.291 5.021 4.457C5.423 4.636 5.893 4.773 6.43 4.867C6.934 4.956 7.457 5 8 5C8.543 5 9.066 4.956 9.57 4.867C10.107 4.773 10.577 4.636 10.979 4.457C11.353 4.291 11.63 4.107 11.811 3.904C11.937 3.762 12 3.627 12 3.5ZM11.385 5.371C10.908 5.583 10.361 5.743 9.743 5.852C9.182 5.951 8.601 6 8 6C7.399 6 6.818 5.951 6.257 5.852C5.639 5.743 5.092 5.583 4.615 5.371C4.387 5.27 4.182 5.159 4 5.04L4 12.5C4 12.627 4.063 12.762 4.189 12.904C4.37 13.107 4.647 13.291 5.021 13.457C5.423 13.636 5.893 13.773 6.43 13.867C6.934 13.956 7.457 14 8 14C8.543 14 9.066 13.956 9.57 13.867C10.107 13.773 10.577 13.636 10.979 13.457C11.353 13.291 11.63 13.107 11.811 12.904C11.937 12.762 12 12.627 12 12.5L12 5.04C11.818 5.159 11.613 5.27 11.385 5.371Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

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

### Android XML

```xml
<!-- res/drawable/ic_cylinder.xml · Gentleface "cylinder" (line-round), MIT. https://gentleface.com/icons/cylinder -->
<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="M12.557 13.569C12.281 13.879 11.89 14.147 11.385 14.371C10.908 14.583 10.361 14.743 9.743 14.852C9.182 14.951 8.601 15 8 15C7.399 15 6.818 14.951 6.257 14.852C5.639 14.743 5.092 14.583 4.615 14.371C4.11 14.147 3.719 13.879 3.443 13.569C3.148 13.238 3 12.881 3 12.5L3 3.5C3 3.119 3.148 2.762 3.443 2.431C3.719 2.121 4.11 1.853 4.615 1.629C5.092 1.417 5.639 1.257 6.257 1.148C6.818 1.049 7.399 1 8 1C8.601 1 9.182 1.049 9.743 1.148C10.361 1.257 10.908 1.417 11.385 1.629C11.89 1.853 12.281 2.121 12.557 2.431C12.852 2.762 13 3.119 13 3.5L13 12.5C13 12.881 12.852 13.238 12.557 13.569ZM12 3.5C12 3.373 11.937 3.238 11.811 3.096C11.63 2.893 11.353 2.709 10.979 2.543C10.577 2.364 10.107 2.227 9.57 2.133C9.066 2.044 8.543 2 8 2C7.457 2 6.934 2.044 6.43 2.133C5.893 2.227 5.423 2.364 5.021 2.543C4.647 2.709 4.37 2.893 4.189 3.096C4.063 3.238 4 3.373 4 3.5C4 3.627 4.063 3.762 4.189 3.904C4.37 4.107 4.647 4.291 5.021 4.457C5.423 4.636 5.893 4.773 6.43 4.867C6.934 4.956 7.457 5 8 5C8.543 5 9.066 4.956 9.57 4.867C10.107 4.773 10.577 4.636 10.979 4.457C11.353 4.291 11.63 4.107 11.811 3.904C11.937 3.762 12 3.627 12 3.5ZM11.385 5.371C10.908 5.583 10.361 5.743 9.743 5.852C9.182 5.951 8.601 6 8 6C7.399 6 6.818 5.951 6.257 5.852C5.639 5.743 5.092 5.583 4.615 5.371C4.387 5.27 4.182 5.159 4 5.04L4 12.5C4 12.627 4.063 12.762 4.189 12.904C4.37 13.107 4.647 13.291 5.021 13.457C5.423 13.636 5.893 13.773 6.43 13.867C6.934 13.956 7.457 14 8 14C8.543 14 9.066 13.956 9.57 13.867C10.107 13.773 10.577 13.636 10.979 13.457C11.353 13.291 11.63 13.107 11.811 12.904C11.937 12.762 12 12.627 12 12.5L12 5.04C11.818 5.159 11.613 5.27 11.385 5.371Z"/>
</vector>
```

### Flutter

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

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

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

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

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(12.557, 13.569)
      ..cubicTo(12.281, 13.879, 11.89, 14.147, 11.385, 14.371)
      ..cubicTo(10.908, 14.583, 10.361, 14.743, 9.743, 14.852)
      ..cubicTo(9.182, 14.951, 8.601, 15, 8, 15)
      ..cubicTo(7.399, 15, 6.818, 14.951, 6.257, 14.852)
      ..cubicTo(5.639, 14.743, 5.092, 14.583, 4.615, 14.371)
      ..cubicTo(4.11, 14.147, 3.719, 13.879, 3.443, 13.569)
      ..cubicTo(3.148, 13.238, 3, 12.881, 3, 12.5)
      ..lineTo(3, 3.5)
      ..cubicTo(3, 3.119, 3.148, 2.762, 3.443, 2.431)
      ..cubicTo(3.719, 2.121, 4.11, 1.853, 4.615, 1.629)
      ..cubicTo(5.092, 1.417, 5.639, 1.257, 6.257, 1.148)
      ..cubicTo(6.818, 1.049, 7.399, 1, 8, 1)
      ..cubicTo(8.601, 1, 9.182, 1.049, 9.743, 1.148)
      ..cubicTo(10.361, 1.257, 10.908, 1.417, 11.385, 1.629)
      ..cubicTo(11.89, 1.853, 12.281, 2.121, 12.557, 2.431)
      ..cubicTo(12.852, 2.762, 13, 3.119, 13, 3.5)
      ..lineTo(13, 12.5)
      ..cubicTo(13, 12.881, 12.852, 13.238, 12.557, 13.569)
      ..close()
      ..moveTo(12, 3.5)
      ..cubicTo(12, 3.373, 11.937, 3.238, 11.811, 3.096)
      ..cubicTo(11.63, 2.893, 11.353, 2.709, 10.979, 2.543)
      ..cubicTo(10.577, 2.364, 10.107, 2.227, 9.57, 2.133)
      ..cubicTo(9.066, 2.044, 8.543, 2, 8, 2)
      ..cubicTo(7.457, 2, 6.934, 2.044, 6.43, 2.133)
      ..cubicTo(5.893, 2.227, 5.423, 2.364, 5.021, 2.543)
      ..cubicTo(4.647, 2.709, 4.37, 2.893, 4.189, 3.096)
      ..cubicTo(4.063, 3.238, 4, 3.373, 4, 3.5)
      ..cubicTo(4, 3.627, 4.063, 3.762, 4.189, 3.904)
      ..cubicTo(4.37, 4.107, 4.647, 4.291, 5.021, 4.457)
      ..cubicTo(5.423, 4.636, 5.893, 4.773, 6.43, 4.867)
      ..cubicTo(6.934, 4.956, 7.457, 5, 8, 5)
      ..cubicTo(8.543, 5, 9.066, 4.956, 9.57, 4.867)
      ..cubicTo(10.107, 4.773, 10.577, 4.636, 10.979, 4.457)
      ..cubicTo(11.353, 4.291, 11.63, 4.107, 11.811, 3.904)
      ..cubicTo(11.937, 3.762, 12, 3.627, 12, 3.5)
      ..close()
      ..moveTo(11.385, 5.371)
      ..cubicTo(10.908, 5.583, 10.361, 5.743, 9.743, 5.852)
      ..cubicTo(9.182, 5.951, 8.601, 6, 8, 6)
      ..cubicTo(7.399, 6, 6.818, 5.951, 6.257, 5.852)
      ..cubicTo(5.639, 5.743, 5.092, 5.583, 4.615, 5.371)
      ..cubicTo(4.387, 5.27, 4.182, 5.159, 4, 5.04)
      ..lineTo(4, 12.5)
      ..cubicTo(4, 12.627, 4.063, 12.762, 4.189, 12.904)
      ..cubicTo(4.37, 13.107, 4.647, 13.291, 5.021, 13.457)
      ..cubicTo(5.423, 13.636, 5.893, 13.773, 6.43, 13.867)
      ..cubicTo(6.934, 13.956, 7.457, 14, 8, 14)
      ..cubicTo(8.543, 14, 9.066, 13.956, 9.57, 13.867)
      ..cubicTo(10.107, 13.773, 10.577, 13.636, 10.979, 13.457)
      ..cubicTo(11.353, 13.291, 11.63, 13.107, 11.811, 12.904)
      ..cubicTo(11.937, 12.762, 12, 12.627, 12, 12.5)
      ..lineTo(12, 5.04)
      ..cubicTo(11.818, 5.159, 11.613, 5.27, 11.385, 5.371)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

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