cylinder icon

cylinder from Phosphor by Phosphor Icons · Regular · MIT Free for personal and commercial use.

Name: cylinder
Set: Phosphor
Style: Regular
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

cylinder-bold cylinder-duotone cylinder-fill cylinder-light cylinder-thin

The same icon in other sets

cylinderBoxIcons v2 cylinderBoxIcons v2 Solid cylinderIconPark cylinderIconPark Outline cylinderIconPark Solid cylinderIconPark TwoTone cylinderIconoir cylinderLucide cylinderMaterial Design Icons cylinder-fillMingCute Icon cylinderTabler Icons

Use the cylinder icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 16c-40.37 0-72 19.33-72 44v136c0 24.67 31.63 44 72 44s72-19.33 72-44V60c0-24.67-31.63-44-72-44m0 16c26.49 0 56 11.5 56 28s-29.51 28-56 28s-56-11.5-56-28s29.51-28 56-28m0 192c-29.83 0-56-13.08-56-28V88c13.1 9.85 33.14 16 56 16s42.9-6.2 56-16v108c0 14.92-26.17 28-56 28"/></svg>

React

import type { SVGProps } from "react";

export function PhCylinder(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 16c-40.37 0-72 19.33-72 44v136c0 24.67 31.63 44 72 44s72-19.33 72-44V60c0-24.67-31.63-44-72-44m0 16c26.49 0 56 11.5 56 28s-29.51 28-56 28s-56-11.5-56-28s29.51-28 56-28m0 192c-29.83 0-56-13.08-56-28V88c13.1 9.85 33.14 16 56 16s42.9-6.2 56-16v108c0 14.92-26.17 28-56 28"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 16c-40.37 0-72 19.33-72 44v136c0 24.67 31.63 44 72 44s72-19.33 72-44V60c0-24.67-31.63-44-72-44m0 16c26.49 0 56 11.5 56 28s-29.51 28-56 28s-56-11.5-56-28s29.51-28 56-28m0 192c-29.83 0-56-13.08-56-28V88c13.1 9.85 33.14 16 56 16s42.9-6.2 56-16v108c0 14.92-26.17 28-56 28"/></svg>
</template>

CSS

.icon-cylinder {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128%2016c-40.37%200-72%2019.33-72%2044v136c0%2024.67%2031.63%2044%2072%2044s72-19.33%2072-44V60c0-24.67-31.63-44-72-44m0%2016c26.49%200%2056%2011.5%2056%2028s-29.51%2028-56%2028s-56-11.5-56-28s29.51-28%2056-28m0%20192c-29.83%200-56-13.08-56-28V88c13.1%209.85%2033.14%2016%2056%2016s42.9-6.2%2056-16v108c0%2014.92-26.17%2028-56%2028%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128%2016c-40.37%200-72%2019.33-72%2044v136c0%2024.67%2031.63%2044%2072%2044s72-19.33%2072-44V60c0-24.67-31.63-44-72-44m0%2016c26.49%200%2056%2011.5%2056%2028s-29.51%2028-56%2028s-56-11.5-56-28s29.51-28%2056-28m0%20192c-29.83%200-56-13.08-56-28V88c13.1%209.85%2033.14%2016%2056%2016s42.9-6.2%2056-16v108c0%2014.92-26.17%2028-56%2028%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/cylinder.svg?color=%231a73e8&size=48