Fluent Icons

Delete Dismiss icon

Used in the deletion of content. The Delete Dismiss 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_delete_dismiss_24_regular.svg

Delete Dismiss icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <DeleteDismiss24Regular aria-label="Delete Dismiss" />;
}

Delete Dismiss icon in SVG

npm install @fluentui/svg-icons

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

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

Delete Dismiss icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Delete Dismiss icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.delete_dismiss_24_regular)

Delete Dismiss 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="&#xE47F;" FontSize="24" />

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

Delete Dismiss 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_delete_dismiss_24_regular"></i>

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

Delete Dismiss icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_delete_dismiss_24_regular

Delete Dismiss icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .deleteDismiss24Regular)

Delete Dismiss 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 Delete Dismiss 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 { DeleteDismiss24Regular, DeleteDismiss24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DeleteDismiss24Regular aria-label="Delete Dismiss" />;
}

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_delete_dismiss_24_regular.svg" width="24" height="24" alt="Delete Dismiss">

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="M14 5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5H14ZM8.5 5C8.5 3.067 10.067 1.5 12 1.5C13.933 1.5 15.5 3.067 15.5 5H21.25C21.6642 5 22 5.33579 22 5.75C22 6.16421 21.6642 6.5 21.25 6.5H19.9309L19.4281 11.6953C18.9712 11.4644 18.4833 11.2858 17.9722 11.1674L18.4239 6.5H5.57608L6.73416 18.4667C6.84577 19.62 7.815 20.5 8.97369 20.5H10.7322C11.0194 21.051 11.3832 21.5557 11.8096 22H8.97369C7.04254 22 5.42715 20.5334 5.24113 18.6112L4.06908 6.5H2.75C2.33579 6.5 2 6.16421 2 5.75C2 5.33579 2.33579 5 2.75 5H8.5ZM22 17.5C22 20.5376 19.5376 23 16.5 23C13.4624 23 11 20.5376 11 17.5C11 14.4624 13.4624 12 16.5 12C19.5376 12 22 14.4624 22 17.5ZM14.8536 15.1464C14.6583 14.9512 14.3417 14.9512 14.1464 15.1464C13.9512 15.3417 13.9512 15.6583 14.1464 15.8536L15.7929 17.5L14.1464 19.1464C13.9512 19.3417 13.9512 19.6583 14.1464 19.8536C14.3417 20.0488 14.6583 20.0488 14.8536 19.8536L16.5 18.2071L18.1464 19.8536C18.3417 20.0488 18.6583 20.0488 18.8536 19.8536C19.0488 19.6583 19.0488 19.3417 18.8536 19.1464L17.2071 17.5L18.8536 15.8536C19.0488 15.6583 19.0488 15.3417 18.8536 15.1464C18.6583 14.9512 18.3417 14.9512 18.1464 15.1464L16.5 16.7929L14.8536 15.1464Z" fill="currentColor"/></svg>

Details

NameDelete Dismiss
StylesRegular (outlined), Filled
Sizes20 px, 24 px, 28 px
Regular (outlined) fileic_fluent_delete_dismiss_24_regular.svg
Filled fileic_fluent_delete_dismiss_24_filled.svg
React (Regular)DeleteDismiss20Regular, DeleteDismiss24Regular, DeleteDismiss28Regular
React (Filled)DeleteDismiss20Filled, DeleteDismiss24Filled, DeleteDismiss28Filled
LicenseMIT (© Microsoft Corporation)

Keywords

removeedit

Related icons

DeleteDelete Arrow BackDelete LinesDelete OffDocument Footer DismissDocument Header DismissDiamond DismissDismissDismiss CircleDismiss SquareDismiss Square MultipleGroup Dismiss