Dust icon

Use the Dust 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 { Dust24Regular, Dust24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M7 3C7 3.55228 6.55228 4 6 4C5.44772 4 5 3.55228 5 3C5 2.44772 5.44772 2 6 2C6.55228 2 7 2.44772 7 3ZM21 13C21.5523 13 22 12.5523 22 12C22 11.4477 21.5523 11 21 11C20.4477 11 20 11.4477 20 12C20 12.5523 20.4477 13 21 13ZM6 22C6.55228 22 7 21.5523 7 21C7 20.4477 6.55228 20 6 20C5.44772 20 5 20.4477 5 21C5 21.5523 5.44772 22 6 22ZM13.75 3C11.3017 3 9.24522 4.67555 8.66413 6.94285C8.21377 6.81714 7.73936 6.75 7.25 6.75C4.3505 6.75 2 9.1005 2 12C2 14.8995 4.3505 17.25 7.25 17.25C7.73936 17.25 8.21378 17.1829 8.66413 17.0571C9.24522 19.3244 11.3017 21 13.75 21C16.6495 21 19 18.6495 19 15.75C19 14.2805 18.3958 12.9523 17.4241 12C18.3958 11.0477 19 9.71953 19 8.25C19 5.3505 16.6495 3 13.75 3ZM10.0071 8.0176C10.1267 6.05514 11.757 4.5 13.75 4.5C15.8211 4.5 17.5 6.17893 17.5 8.25C17.5 9.55363 16.8354 10.7024 15.8231 11.3755C15.614 11.5145 15.4883 11.7489 15.4883 12C15.4883 12.2511 15.614 12.4855 15.8231 12.6246C16.8354 13.2976 17.5 14.4464 17.5 15.75C17.5 17.8211 15.8211 19.5 13.75 19.5C11.757 19.5 10.1267 17.9449 10.0071 15.9824C9.99174 15.7311 9.85135 15.5042 9.63326 15.3784C9.41517 15.2526 9.1485 15.2446 8.92326 15.3571C8.42042 15.6083 7.85284 15.75 7.25 15.75C5.17893 15.75 3.5 14.0711 3.5 12C3.5 9.92893 5.17893 8.25 7.25 8.25C7.85283 8.25 8.42042 8.39169 8.92326 8.6429C9.1485 8.75543 9.41517 8.74743 9.63326 8.6216C9.85134 8.49577 9.99174 8.26892 10.0071 8.0176Z" 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/dust_24_regular.svg";

Details

Keywords

allergiesallergensdustdander