cylinder icon

cylinder-fill from Phosphor by Phosphor Icons · Fill · MIT Free for personal and commercial use.

Name: cylinder-fill
Set: Phosphor
Style: Fill
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

cylinder cylinder-bold cylinder-duotone 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 208c-29.83 0-56-13.08-56-28V77.43C82.92 88.5 103.9 96 128 96s45.08-7.5 56-18.57V196c0 14.92-26.17 28-56 28"/></svg>

React

import type { SVGProps } from "react";

export function PhCylinderFill(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 208c-29.83 0-56-13.08-56-28V77.43C82.92 88.5 103.9 96 128 96s45.08-7.5 56-18.57V196c0 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 208c-29.83 0-56-13.08-56-28V77.43C82.92 88.5 103.9 96 128 96s45.08-7.5 56-18.57V196c0 14.92-26.17 28-56 28"/></svg>
</template>

CSS

.icon-cylinder-fill {
  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%20208c-29.83%200-56-13.08-56-28V77.43C82.92%2088.5%20103.9%2096%20128%2096s45.08-7.5%2056-18.57V196c0%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%20208c-29.83%200-56-13.08-56-28V77.43C82.92%2088.5%20103.9%2096%20128%2096s45.08-7.5%2056-18.57V196c0%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-fill.svg?color=%231a73e8&size=48