Broom icon

Use the Broom 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 { Broom24Regular, Broom24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M22.4533 1.92279C22.7462 2.21569 22.7462 2.69056 22.4533 2.98345L15.5248 9.91202C17.2598 12.1668 17.0945 15.4134 15.0287 17.4791L14.1973 18.3106L11.4101 22.4913C11.2855 22.6783 11.0836 22.7995 10.86 22.8217C10.6364 22.8438 10.4146 22.7645 10.2557 22.6056L1.77046 14.1204C1.61157 13.9615 1.53229 13.7397 1.55444 13.5161C1.57658 13.2925 1.6978 13.0906 1.88476 12.966L6.06572 10.1787L6.89699 9.34742C8.96276 7.28165 12.2093 7.11629 14.4641 8.85136L21.3927 1.92279C21.6856 1.6299 22.1604 1.6299 22.4533 1.92279ZM7.6041 10.7616L13.6145 16.772L13.9681 16.4185C15.6278 14.7588 15.6278 12.0678 13.9681 10.4081C12.3083 8.74835 9.61738 8.74835 7.95765 10.4081L7.6041 10.7616ZM6.44786 11.7267L3.47801 13.7066L10.6695 20.8981L12.6494 17.9282L6.44786 11.7267Z" 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/broom_24_regular.svg";

Details

Keywords

sweepcleanbrush