showerhead icon

showerhead-32-regular from Fluent UI System Icons by Microsoft Corporation · 32 Regular · MIT Free for personal and commercial use.

Name
showerhead-32-regular
Set
Fluent UI System Icons
Style
32 Regular
Viewbox
32×32
License
MIT

5 other variants in Fluent UI System Icons

showerhead-20-filledshowerhead-20-regularshowerhead-24-filledshowerhead-24-regularshowerhead-32-filled

Use the showerhead icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M20.508 7.07c-3.512-1.773-7.852-1.343-10.962 1.29a3.124 3.124 0 0 0-3.594 5.008l12.704 12.704a3.123 3.123 0 0 0 4.99-3.627c2.63-3.112 3.056-7.45 1.28-10.96l3.153-3.155a3.122 3.122 0 1 0-4.416-4.415zm-9.413 2.61a8.001 8.001 0 0 1 11.226 11.226zm-3.729.687a1.123 1.123 0 0 1 1.548-.037l12.781 12.78a1.122 1.122 0 0 1-1.625 1.548L7.366 11.954a1.123 1.123 0 0 1 0-1.588m14.864-2.19l2.848-2.847a1.122 1.122 0 1 1 1.587 1.587l-2.847 2.847a10 10 0 0 0-1.588-1.587M7.707 19.707a1 1 0 1 0-1.414-1.414l-3 3a1 1 0 1 0 1.414 1.414zm3 1.586a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414l3-3a1 1 0 0 1 1.414 0m3 4.414a1 1 0 0 0-1.414-1.414l-3 3a1 1 0 1 0 1.414 1.414z"/></svg>

React

import type { SVGProps } from "react";

export function FluentShowerhead32Regular(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M20.508 7.07c-3.512-1.773-7.852-1.343-10.962 1.29a3.124 3.124 0 0 0-3.594 5.008l12.704 12.704a3.123 3.123 0 0 0 4.99-3.627c2.63-3.112 3.056-7.45 1.28-10.96l3.153-3.155a3.122 3.122 0 1 0-4.416-4.415zm-9.413 2.61a8.001 8.001 0 0 1 11.226 11.226zm-3.729.687a1.123 1.123 0 0 1 1.548-.037l12.781 12.78a1.122 1.122 0 0 1-1.625 1.548L7.366 11.954a1.123 1.123 0 0 1 0-1.588m14.864-2.19l2.848-2.847a1.122 1.122 0 1 1 1.587 1.587l-2.847 2.847a10 10 0 0 0-1.588-1.587M7.707 19.707a1 1 0 1 0-1.414-1.414l-3 3a1 1 0 1 0 1.414 1.414zm3 1.586a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414l3-3a1 1 0 0 1 1.414 0m3 4.414a1 1 0 0 0-1.414-1.414l-3 3a1 1 0 1 0 1.414 1.414z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M20.508 7.07c-3.512-1.773-7.852-1.343-10.962 1.29a3.124 3.124 0 0 0-3.594 5.008l12.704 12.704a3.123 3.123 0 0 0 4.99-3.627c2.63-3.112 3.056-7.45 1.28-10.96l3.153-3.155a3.122 3.122 0 1 0-4.416-4.415zm-9.413 2.61a8.001 8.001 0 0 1 11.226 11.226zm-3.729.687a1.123 1.123 0 0 1 1.548-.037l12.781 12.78a1.122 1.122 0 0 1-1.625 1.548L7.366 11.954a1.123 1.123 0 0 1 0-1.588m14.864-2.19l2.848-2.847a1.122 1.122 0 1 1 1.587 1.587l-2.847 2.847a10 10 0 0 0-1.588-1.587M7.707 19.707a1 1 0 1 0-1.414-1.414l-3 3a1 1 0 1 0 1.414 1.414zm3 1.586a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414l3-3a1 1 0 0 1 1.414 0m3 4.414a1 1 0 0 0-1.414-1.414l-3 3a1 1 0 1 0 1.414 1.414z"/></svg>
</template>

CSS

.icon-showerhead-32-regular {
  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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M20.508%207.07c-3.512-1.773-7.852-1.343-10.962%201.29a3.124%203.124%200%200%200-3.594%205.008l12.704%2012.704a3.123%203.123%200%200%200%204.99-3.627c2.63-3.112%203.056-7.45%201.28-10.96l3.153-3.155a3.122%203.122%200%201%200-4.416-4.415zm-9.413%202.61a8.001%208.001%200%200%201%2011.226%2011.226zm-3.729.687a1.123%201.123%200%200%201%201.548-.037l12.781%2012.78a1.122%201.122%200%200%201-1.625%201.548L7.366%2011.954a1.123%201.123%200%200%201%200-1.588m14.864-2.19l2.848-2.847a1.122%201.122%200%201%201%201.587%201.587l-2.847%202.847a10%2010%200%200%200-1.588-1.587M7.707%2019.707a1%201%200%201%200-1.414-1.414l-3%203a1%201%200%201%200%201.414%201.414zm3%201.586a1%201%200%200%201%200%201.414l-3%203a1%201%200%200%201-1.414-1.414l3-3a1%201%200%200%201%201.414%200m3%204.414a1%201%200%200%200-1.414-1.414l-3%203a1%201%200%201%200%201.414%201.414z%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M20.508%207.07c-3.512-1.773-7.852-1.343-10.962%201.29a3.124%203.124%200%200%200-3.594%205.008l12.704%2012.704a3.123%203.123%200%200%200%204.99-3.627c2.63-3.112%203.056-7.45%201.28-10.96l3.153-3.155a3.122%203.122%200%201%200-4.416-4.415zm-9.413%202.61a8.001%208.001%200%200%201%2011.226%2011.226zm-3.729.687a1.123%201.123%200%200%201%201.548-.037l12.781%2012.78a1.122%201.122%200%200%201-1.625%201.548L7.366%2011.954a1.123%201.123%200%200%201%200-1.588m14.864-2.19l2.848-2.847a1.122%201.122%200%201%201%201.587%201.587l-2.847%202.847a10%2010%200%200%200-1.588-1.587M7.707%2019.707a1%201%200%201%200-1.414-1.414l-3%203a1%201%200%201%200%201.414%201.414zm3%201.586a1%201%200%200%201%200%201.414l-3%203a1%201%200%200%201-1.414-1.414l3-3a1%201%200%200%201%201.414%200m3%204.414a1%201%200%200%200-1.414-1.414l-3%203a1%201%200%201%200%201.414%201.414z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/showerhead-32-regular.svg?color=%231a73e8&size=48