cylinder icon
cylinder-duotone from Phosphor by Phosphor Icons · Duotone · MIT Free for personal and commercial use.
- Name
- cylinder-duotone
- Set
- Phosphor
- Style
- Duotone
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
Use the cylinder icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M192 60c0 19.88-28.65 36-64 36S64 79.88 64 60s28.65-36 64-36s64 16.12 64 36" opacity=".2"/><path 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"/></g></svg>
React
import type { SVGProps } from "react";
export function PhCylinderDuotone(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M192 60c0 19.88-28.65 36-64 36S64 79.88 64 60s28.65-36 64-36s64 16.12 64 36" opacity=".2"/><path 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"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M192 60c0 19.88-28.65 36-64 36S64 79.88 64 60s28.65-36 64-36s64 16.12 64 36" opacity=".2"/><path 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"/></g></svg> </template>
CSS
.icon-cylinder-duotone {
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%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M192%2060c0%2019.88-28.65%2036-64%2036S64%2079.88%2064%2060s28.65-36%2064-36s64%2016.12%2064%2036%22%20opacity%3D%22.2%22%2F%3E%3Cpath%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%2Fg%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%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M192%2060c0%2019.88-28.65%2036-64%2036S64%2079.88%2064%2060s28.65-36%2064-36s64%2016.12%2064%2036%22%20opacity%3D%22.2%22%2F%3E%3Cpath%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%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/cylinder-duotone.svg?color=%231a73e8&size=48
