Showerhead icon

Use the Showerhead icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { Showerhead24Regular, Showerhead24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Showerhead24Regular aria-label="Showerhead" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_showerhead_24_regular.svg" width="24" height="24" alt="Showerhead">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.6046 4.85577L17.7291 2.73129C18.7041 1.75624 20.285 1.75624 21.26 2.73129C22.2351 3.70633 22.2351 5.2872 21.26 6.26224L19.1384 8.38384C20.6019 11.2713 20.201 14.8612 17.9357 17.3639C18.1536 18.1942 17.9371 19.1147 17.2864 19.7655C16.3113 20.7405 14.7305 20.7405 13.7554 19.7655L4.26577 10.2758C3.29072 9.30077 3.29072 7.71991 4.26577 6.74486C4.90315 6.10747 5.79941 5.88675 6.6161 6.08267C9.11623 3.80437 12.7113 3.39541 15.6046 4.85577ZM18.3143 7.08661L20.1994 5.20158C20.5886 4.81232 20.5886 4.18121 20.1994 3.79195C19.8101 3.40268 19.179 3.40268 18.7897 3.79195L16.9036 5.67807C17.165 5.88133 17.4167 6.10306 17.6569 6.34326C17.894 6.58043 18.1132 6.82877 18.3143 7.08661ZM5.32643 7.80552C4.93717 8.19478 4.93717 8.8259 5.32643 9.21516L14.8161 18.7048C15.2054 19.0941 15.8365 19.0941 16.2257 18.7048C16.615 18.3156 16.615 17.6844 16.2257 17.2952L6.73607 7.80552C6.34681 7.41626 5.71569 7.41626 5.32643 7.80552ZM7.78033 17.2803C8.07322 16.9874 8.07322 16.5126 7.78033 16.2197C7.48744 15.9268 7.01256 15.9268 6.71967 16.2197L4.71967 18.2197C4.42678 18.5126 4.42678 18.9874 4.71967 19.2803C5.01256 19.5732 5.48744 19.5732 5.78033 19.2803L7.78033 17.2803ZM10.2803 18.7197C10.5732 19.0126 10.5732 19.4874 10.2803 19.7803L8.28033 21.7803C7.98744 22.0732 7.51256 22.0732 7.21967 21.7803C6.92678 21.4874 6.92678 21.0126 7.21967 20.7197L9.21967 18.7197C9.51256 18.4268 9.98744 18.4268 10.2803 18.7197ZM5.28033 14.7803C5.57322 14.4874 5.57322 14.0126 5.28033 13.7197C4.98744 13.4268 4.51256 13.4268 4.21967 13.7197L2.21967 15.7197C1.92678 16.0126 1.92678 16.4874 2.21967 16.7803C2.51256 17.0732 2.98744 17.0732 3.28033 16.7803L5.28033 14.7803ZM17.0963 16.0357C19.1219 13.4842 18.9552 9.76297 16.5962 7.40392C14.2371 5.04488 10.5159 4.87819 7.9644 6.90386L17.0963 16.0357Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/showerhead_24_regular.svg";

Details

Keywords

homebathroomwatershower