cylinder icon

cylinder-bold from Phosphor by Phosphor Icons · Bold · MIT Free for personal and commercial use.

Name: cylinder-bold
Set: Phosphor
Style: Bold
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

cylinder 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="M179.14 24.08C165.28 16.29 147.12 12 128 12s-37.28 4.29-51.14 12.08C60.83 33.1 52 45.86 52 60v136c0 14.14 8.83 26.9 24.86 35.92C90.72 239.71 108.88 244 128 244s37.28-4.29 51.14-12.08c16-9 24.86-21.78 24.86-35.92V60c0-14.14-8.83-26.9-24.86-35.92M88.63 45c10.17-5.72 24.52-9 39.37-9s29.2 3.28 39.37 9c8 4.52 12.63 10 12.63 15s-4.6 10.48-12.63 15c-10.17 5.72-24.52 9-39.37 9s-29.2-3.28-39.37-9C80.6 70.48 76 65 76 60s4.6-10.48 12.63-15m78.74 166c-10.17 5.72-24.52 9-39.37 9s-29.2-3.28-39.37-9C80.6 206.48 76 201 76 196V95.4l.86.52C90.72 103.71 108.88 108 128 108s37.28-4.29 51.14-12.08l.86-.52V196c0 5-4.6 10.48-12.63 15"/></svg>

React

import type { SVGProps } from "react";

export function PhCylinderBold(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="M179.14 24.08C165.28 16.29 147.12 12 128 12s-37.28 4.29-51.14 12.08C60.83 33.1 52 45.86 52 60v136c0 14.14 8.83 26.9 24.86 35.92C90.72 239.71 108.88 244 128 244s37.28-4.29 51.14-12.08c16-9 24.86-21.78 24.86-35.92V60c0-14.14-8.83-26.9-24.86-35.92M88.63 45c10.17-5.72 24.52-9 39.37-9s29.2 3.28 39.37 9c8 4.52 12.63 10 12.63 15s-4.6 10.48-12.63 15c-10.17 5.72-24.52 9-39.37 9s-29.2-3.28-39.37-9C80.6 70.48 76 65 76 60s4.6-10.48 12.63-15m78.74 166c-10.17 5.72-24.52 9-39.37 9s-29.2-3.28-39.37-9C80.6 206.48 76 201 76 196V95.4l.86.52C90.72 103.71 108.88 108 128 108s37.28-4.29 51.14-12.08l.86-.52V196c0 5-4.6 10.48-12.63 15"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M179.14 24.08C165.28 16.29 147.12 12 128 12s-37.28 4.29-51.14 12.08C60.83 33.1 52 45.86 52 60v136c0 14.14 8.83 26.9 24.86 35.92C90.72 239.71 108.88 244 128 244s37.28-4.29 51.14-12.08c16-9 24.86-21.78 24.86-35.92V60c0-14.14-8.83-26.9-24.86-35.92M88.63 45c10.17-5.72 24.52-9 39.37-9s29.2 3.28 39.37 9c8 4.52 12.63 10 12.63 15s-4.6 10.48-12.63 15c-10.17 5.72-24.52 9-39.37 9s-29.2-3.28-39.37-9C80.6 70.48 76 65 76 60s4.6-10.48 12.63-15m78.74 166c-10.17 5.72-24.52 9-39.37 9s-29.2-3.28-39.37-9C80.6 206.48 76 201 76 196V95.4l.86.52C90.72 103.71 108.88 108 128 108s37.28-4.29 51.14-12.08l.86-.52V196c0 5-4.6 10.48-12.63 15"/></svg>
</template>

CSS

.icon-cylinder-bold {
  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%22M179.14%2024.08C165.28%2016.29%20147.12%2012%20128%2012s-37.28%204.29-51.14%2012.08C60.83%2033.1%2052%2045.86%2052%2060v136c0%2014.14%208.83%2026.9%2024.86%2035.92C90.72%20239.71%20108.88%20244%20128%20244s37.28-4.29%2051.14-12.08c16-9%2024.86-21.78%2024.86-35.92V60c0-14.14-8.83-26.9-24.86-35.92M88.63%2045c10.17-5.72%2024.52-9%2039.37-9s29.2%203.28%2039.37%209c8%204.52%2012.63%2010%2012.63%2015s-4.6%2010.48-12.63%2015c-10.17%205.72-24.52%209-39.37%209s-29.2-3.28-39.37-9C80.6%2070.48%2076%2065%2076%2060s4.6-10.48%2012.63-15m78.74%20166c-10.17%205.72-24.52%209-39.37%209s-29.2-3.28-39.37-9C80.6%20206.48%2076%20201%2076%20196V95.4l.86.52C90.72%20103.71%20108.88%20108%20128%20108s37.28-4.29%2051.14-12.08l.86-.52V196c0%205-4.6%2010.48-12.63%2015%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%22M179.14%2024.08C165.28%2016.29%20147.12%2012%20128%2012s-37.28%204.29-51.14%2012.08C60.83%2033.1%2052%2045.86%2052%2060v136c0%2014.14%208.83%2026.9%2024.86%2035.92C90.72%20239.71%20108.88%20244%20128%20244s37.28-4.29%2051.14-12.08c16-9%2024.86-21.78%2024.86-35.92V60c0-14.14-8.83-26.9-24.86-35.92M88.63%2045c10.17-5.72%2024.52-9%2039.37-9s29.2%203.28%2039.37%209c8%204.52%2012.63%2010%2012.63%2015s-4.6%2010.48-12.63%2015c-10.17%205.72-24.52%209-39.37%209s-29.2-3.28-39.37-9C80.6%2070.48%2076%2065%2076%2060s4.6-10.48%2012.63-15m78.74%20166c-10.17%205.72-24.52%209-39.37%209s-29.2-3.28-39.37-9C80.6%20206.48%2076%20201%2076%20196V95.4l.86.52C90.72%20103.71%20108.88%20108%20128%20108s37.28-4.29%2051.14-12.08l.86-.52V196c0%205-4.6%2010.48-12.63%2015%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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