cylinder icon

Cylinder: cylinder solid. 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="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

// 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: see /icons/cylinder.md

Svelte

Svelte: see /icons/cylinder.md

HTML img

HTML img: see /icons/cylinder.md

CSS

CSS: see /icons/cylinder.md

Data URL

Data URL: see /icons/cylinder.md

Sprite

Sprite: see /icons/cylinder.md

SwiftUI

SwiftUI: see /icons/cylinder.md

Compose

Compose: see /icons/cylinder.md

Android XML

Android XML: see /icons/cylinder.md

Flutter

Flutter: see /icons/cylinder.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.

Meaning

Use it for

cylinder solid

Don’t confuse with

database: a cylinder with bands is the database

Tags

cylinder, 3d, shape, solid, geometry, tube

Category

Shapes

Component name

CylinderIcon

History

2026-10-15 added

More shapes icons

burst circle cone cube diamond dot ellipse hexagon octagon pentagon polygon rectangle rectangle-vertical sphere spiral square · all shapes icons

For agents

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

cylinder icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More shapes icons

For agents

cylinder icon