cylinder icon

cylinder from Material Design Icons by Pictogrammers · Filled · Shape · Apache-2.0 Free for personal and commercial use.

Name: cylinder
Set: Material Design Icons
Style: Filled
Category: Shape
Viewbox: 24×24
License: Apache 2.0

The same icon in other sets

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

More shape icons from Material Design Icons

Use the cylinder icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2c-2.11 0-9 .29-9 4v12c0 3.71 6.89 4 9 4s9-.29 9-4V6c0-3.71-6.89-4-9-4m0 8c1.38 0 4.8-.13 7-1.25v6.5C16.8 14.13 13.38 14 12 14s-4.8.13-7 1.25v-6.5C7.2 9.87 10.62 10 12 10m0-6c3.87 0 7 .89 7 2s-3.13 2-7 2s-7-.89-7-2s3.13-2 7-2m0 16c-3.87 0-7-.89-7-2c0-1.1 3.13-2 7-2s7 .9 7 2c0 1.11-3.13 2-7 2"/></svg>

React

import type { SVGProps } from "react";

export function MdiCylinder(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2c-2.11 0-9 .29-9 4v12c0 3.71 6.89 4 9 4s9-.29 9-4V6c0-3.71-6.89-4-9-4m0 8c1.38 0 4.8-.13 7-1.25v6.5C16.8 14.13 13.38 14 12 14s-4.8.13-7 1.25v-6.5C7.2 9.87 10.62 10 12 10m0-6c3.87 0 7 .89 7 2s-3.13 2-7 2s-7-.89-7-2s3.13-2 7-2m0 16c-3.87 0-7-.89-7-2c0-1.1 3.13-2 7-2s7 .9 7 2c0 1.11-3.13 2-7 2"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2c-2.11 0-9 .29-9 4v12c0 3.71 6.89 4 9 4s9-.29 9-4V6c0-3.71-6.89-4-9-4m0 8c1.38 0 4.8-.13 7-1.25v6.5C16.8 14.13 13.38 14 12 14s-4.8.13-7 1.25v-6.5C7.2 9.87 10.62 10 12 10m0-6c3.87 0 7 .89 7 2s-3.13 2-7 2s-7-.89-7-2s3.13-2 7-2m0 16c-3.87 0-7-.89-7-2c0-1.1 3.13-2 7-2s7 .9 7 2c0 1.11-3.13 2-7 2"/></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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%202c-2.11%200-9%20.29-9%204v12c0%203.71%206.89%204%209%204s9-.29%209-4V6c0-3.71-6.89-4-9-4m0%208c1.38%200%204.8-.13%207-1.25v6.5C16.8%2014.13%2013.38%2014%2012%2014s-4.8.13-7%201.25v-6.5C7.2%209.87%2010.62%2010%2012%2010m0-6c3.87%200%207%20.89%207%202s-3.13%202-7%202s-7-.89-7-2s3.13-2%207-2m0%2016c-3.87%200-7-.89-7-2c0-1.1%203.13-2%207-2s7%20.9%207%202c0%201.11-3.13%202-7%202%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%202c-2.11%200-9%20.29-9%204v12c0%203.71%206.89%204%209%204s9-.29%209-4V6c0-3.71-6.89-4-9-4m0%208c1.38%200%204.8-.13%207-1.25v6.5C16.8%2014.13%2013.38%2014%2012%2014s-4.8.13-7%201.25v-6.5C7.2%209.87%2010.62%2010%2012%2010m0-6c3.87%200%207%20.89%207%202s-3.13%202-7%202s-7-.89-7-2s3.13-2%207-2m0%2016c-3.87%200-7-.89-7-2c0-1.1%203.13-2%207-2s7%20.9%207%202c0%201.11-3.13%202-7%202%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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