showerhead icon

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

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

5 other variants in Fluent UI System Icons

showerhead-20-filledshowerhead-24-filledshowerhead-24-regularshowerhead-32-filledshowerhead-32-regular

Use the showerhead icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M17.433 2.567a1.943 1.943 0 0 0-2.743 0l-2.043 2.038l-.006.006a6 6 0 0 0-6.747 1.014A1.913 1.913 0 0 0 4.148 8.85l7.003 7.004a1.913 1.913 0 0 0 3.225-1.748a6 6 0 0 0 1.013-6.748l.006-.007l2.038-2.033a1.94 1.94 0 0 0 0-2.751m-2.576 3.909a6 6 0 0 0-1.333-1.333l1.872-1.868a.943.943 0 1 1 1.331 1.335zm-8.021-.348a5 5 0 0 1 7.036 7.036l-.016-.016l-7.003-7.003zm-.714.7l7.05 7.051a.913.913 0 0 1-1.314 1.268L4.854 8.143A.913.913 0 0 1 6.122 6.83m.732 6.319a.5.5 0 0 1 0 .707l-2 2a.5.5 0 0 1-.708-.707l2-2a.5.5 0 0 1 .708 0m-2-1.293a.5.5 0 1 0-.708-.707l-2 2a.5.5 0 1 0 .708.707zm4 3.293a.5.5 0 0 1 0 .707l-2 2a.5.5 0 0 1-.708-.707l2-2a.5.5 0 0 1 .708 0"/></svg>

React

import type { SVGProps } from "react";

export function FluentShowerhead20Regular(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M17.433 2.567a1.943 1.943 0 0 0-2.743 0l-2.043 2.038l-.006.006a6 6 0 0 0-6.747 1.014A1.913 1.913 0 0 0 4.148 8.85l7.003 7.004a1.913 1.913 0 0 0 3.225-1.748a6 6 0 0 0 1.013-6.748l.006-.007l2.038-2.033a1.94 1.94 0 0 0 0-2.751m-2.576 3.909a6 6 0 0 0-1.333-1.333l1.872-1.868a.943.943 0 1 1 1.331 1.335zm-8.021-.348a5 5 0 0 1 7.036 7.036l-.016-.016l-7.003-7.003zm-.714.7l7.05 7.051a.913.913 0 0 1-1.314 1.268L4.854 8.143A.913.913 0 0 1 6.122 6.83m.732 6.319a.5.5 0 0 1 0 .707l-2 2a.5.5 0 0 1-.708-.707l2-2a.5.5 0 0 1 .708 0m-2-1.293a.5.5 0 1 0-.708-.707l-2 2a.5.5 0 1 0 .708.707zm4 3.293a.5.5 0 0 1 0 .707l-2 2a.5.5 0 0 1-.708-.707l2-2a.5.5 0 0 1 .708 0"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M17.433 2.567a1.943 1.943 0 0 0-2.743 0l-2.043 2.038l-.006.006a6 6 0 0 0-6.747 1.014A1.913 1.913 0 0 0 4.148 8.85l7.003 7.004a1.913 1.913 0 0 0 3.225-1.748a6 6 0 0 0 1.013-6.748l.006-.007l2.038-2.033a1.94 1.94 0 0 0 0-2.751m-2.576 3.909a6 6 0 0 0-1.333-1.333l1.872-1.868a.943.943 0 1 1 1.331 1.335zm-8.021-.348a5 5 0 0 1 7.036 7.036l-.016-.016l-7.003-7.003zm-.714.7l7.05 7.051a.913.913 0 0 1-1.314 1.268L4.854 8.143A.913.913 0 0 1 6.122 6.83m.732 6.319a.5.5 0 0 1 0 .707l-2 2a.5.5 0 0 1-.708-.707l2-2a.5.5 0 0 1 .708 0m-2-1.293a.5.5 0 1 0-.708-.707l-2 2a.5.5 0 1 0 .708.707zm4 3.293a.5.5 0 0 1 0 .707l-2 2a.5.5 0 0 1-.708-.707l2-2a.5.5 0 0 1 .708 0"/></svg>
</template>

CSS

.icon-showerhead-20-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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17.433%202.567a1.943%201.943%200%200%200-2.743%200l-2.043%202.038l-.006.006a6%206%200%200%200-6.747%201.014A1.913%201.913%200%200%200%204.148%208.85l7.003%207.004a1.913%201.913%200%200%200%203.225-1.748a6%206%200%200%200%201.013-6.748l.006-.007l2.038-2.033a1.94%201.94%200%200%200%200-2.751m-2.576%203.909a6%206%200%200%200-1.333-1.333l1.872-1.868a.943.943%200%201%201%201.331%201.335zm-8.021-.348a5%205%200%200%201%207.036%207.036l-.016-.016l-7.003-7.003zm-.714.7l7.05%207.051a.913.913%200%200%201-1.314%201.268L4.854%208.143A.913.913%200%200%201%206.122%206.83m.732%206.319a.5.5%200%200%201%200%20.707l-2%202a.5.5%200%200%201-.708-.707l2-2a.5.5%200%200%201%20.708%200m-2-1.293a.5.5%200%201%200-.708-.707l-2%202a.5.5%200%201%200%20.708.707zm4%203.293a.5.5%200%200%201%200%20.707l-2%202a.5.5%200%200%201-.708-.707l2-2a.5.5%200%200%201%20.708%200%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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17.433%202.567a1.943%201.943%200%200%200-2.743%200l-2.043%202.038l-.006.006a6%206%200%200%200-6.747%201.014A1.913%201.913%200%200%200%204.148%208.85l7.003%207.004a1.913%201.913%200%200%200%203.225-1.748a6%206%200%200%200%201.013-6.748l.006-.007l2.038-2.033a1.94%201.94%200%200%200%200-2.751m-2.576%203.909a6%206%200%200%200-1.333-1.333l1.872-1.868a.943.943%200%201%201%201.331%201.335zm-8.021-.348a5%205%200%200%201%207.036%207.036l-.016-.016l-7.003-7.003zm-.714.7l7.05%207.051a.913.913%200%200%201-1.314%201.268L4.854%208.143A.913.913%200%200%201%206.122%206.83m.732%206.319a.5.5%200%200%201%200%20.707l-2%202a.5.5%200%200%201-.708-.707l2-2a.5.5%200%200%201%20.708%200m-2-1.293a.5.5%200%201%200-.708-.707l-2%202a.5.5%200%201%200%20.708.707zm4%203.293a.5.5%200%200%201%200%20.707l-2%202a.5.5%200%200%201-.708-.707l2-2a.5.5%200%200%201%20.708%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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