Fluent Icons

Dust icon

Used to represent a type of allergen around dust & dander. The Dust icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 3 sizes from 20 to 28 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_dust_24_regular.svg

Dust icon in React

npm install @fluentui/react-icons

import { Dust24Regular } from "@fluentui/react-icons";

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

Dust icon in SVG

npm install @fluentui/svg-icons

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

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/dust_24_regular.svg" width="24" height="24" alt="Dust">

Dust icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.Dust())" />

Dust icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.dust_24_regular)

Dust icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF011F;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF011F;" FontSize="24" />

Dust icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_dust_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f011f";
  font-size: 24px;
}

Dust icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_dust_24_regular" />

// Kotlin
R.drawable.ic_fluent_dust_24_regular

Dust icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .dust24Regular)

Dust icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameDust
StylesRegular (outlined), Filled
Sizes20 px, 24 px, 28 px
Regular (outlined) fileic_fluent_dust_24_regular.svg
Filled fileic_fluent_dust_24_filled.svg
React (Regular)Dust20Regular, Dust24Regular, Dust28Regular
React (Filled)Dust20Filled, Dust24Filled, Dust28Filled
LicenseMIT (© Microsoft Corporation)

Keywords

Related icons

MoldPlant GrassPlant RagweedDumbbellEarthDual Screen VibrateEarth LeafDual Screen Vertical ScrollEditDual Screen UpdateEdit Arrow BackDual Screen Tablet