cylinder icon

cylinder-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.

Name: cylinder-light
Set: Phosphor
Style: Light
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

cylinder cylinder-bold cylinder-duotone cylinder-fill 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 18c-39.25 0-70 18.45-70 42v136c0 23.55 30.75 42 70 42s70-18.45 70-42V60c0-23.55-30.75-42-70-42m0 12c31.44 0 58 13.74 58 30s-26.56 30-58 30s-58-13.74-58-30s26.56-30 58-30m0 196c-31.44 0-58-13.74-58-30V83.81C82.48 94.87 103.59 102 128 102s45.52-7.13 58-18.19V196c0 16.26-26.56 30-58 30"/></svg>

React

import type { SVGProps } from "react";

export function PhCylinderLight(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 18c-39.25 0-70 18.45-70 42v136c0 23.55 30.75 42 70 42s70-18.45 70-42V60c0-23.55-30.75-42-70-42m0 12c31.44 0 58 13.74 58 30s-26.56 30-58 30s-58-13.74-58-30s26.56-30 58-30m0 196c-31.44 0-58-13.74-58-30V83.81C82.48 94.87 103.59 102 128 102s45.52-7.13 58-18.19V196c0 16.26-26.56 30-58 30"/></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 18c-39.25 0-70 18.45-70 42v136c0 23.55 30.75 42 70 42s70-18.45 70-42V60c0-23.55-30.75-42-70-42m0 12c31.44 0 58 13.74 58 30s-26.56 30-58 30s-58-13.74-58-30s26.56-30 58-30m0 196c-31.44 0-58-13.74-58-30V83.81C82.48 94.87 103.59 102 128 102s45.52-7.13 58-18.19V196c0 16.26-26.56 30-58 30"/></svg>
</template>

CSS

.icon-cylinder-light {
  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%2018c-39.25%200-70%2018.45-70%2042v136c0%2023.55%2030.75%2042%2070%2042s70-18.45%2070-42V60c0-23.55-30.75-42-70-42m0%2012c31.44%200%2058%2013.74%2058%2030s-26.56%2030-58%2030s-58-13.74-58-30s26.56-30%2058-30m0%20196c-31.44%200-58-13.74-58-30V83.81C82.48%2094.87%20103.59%20102%20128%20102s45.52-7.13%2058-18.19V196c0%2016.26-26.56%2030-58%2030%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%2018c-39.25%200-70%2018.45-70%2042v136c0%2023.55%2030.75%2042%2070%2042s70-18.45%2070-42V60c0-23.55-30.75-42-70-42m0%2012c31.44%200%2058%2013.74%2058%2030s-26.56%2030-58%2030s-58-13.74-58-30s26.56-30%2058-30m0%20196c-31.44%200-58-13.74-58-30V83.81C82.48%2094.87%20103.59%20102%20128%20102s45.52-7.13%2058-18.19V196c0%2016.26-26.56%2030-58%2030%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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