Fluent Icons

Location Dismiss icon

Used in map and travel scenarios. The Location Dismiss icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 2 sizes from 20 to 24 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
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

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_location_dismiss_24_regular.svg

Location Dismiss icon in React

npm install @fluentui/react-icons

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

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

Location Dismiss icon in SVG

npm install @fluentui/svg-icons

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

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

Location 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.LocationDismiss())" />

Location Dismiss icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.location_dismiss_24_regular)

Location 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="&#xE787;" FontSize="24" />

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

Location 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_location_dismiss_24_regular"></i>

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

Location 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_location_dismiss_24_regular" />

// Kotlin
R.drawable.ic_fluent_location_dismiss_24_regular

Location Dismiss icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .locationDismiss24Regular)

Location 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 Location 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 { LocationDismiss24Regular, LocationDismiss24Filled } from "@fluentui/react-icons";

export function Example() {
  return <LocationDismiss24Regular aria-label="Location 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_location_dismiss_24_regular.svg" width="24" height="24" alt="Location 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="M5.84279 4.5591C9.2432 1.15869 14.7564 1.15869 18.1568 4.5591C21.4892 7.8915 21.5558 13.253 18.3567 16.6665L18.1568 16.8731C17.2418 17.7881 15.7114 19.2829 13.5639 21.3592C12.6917 22.2025 11.3079 22.2024 10.4358 21.3589L6.58608 17.6103C6.30186 17.3301 6.0541 17.0844 5.84279 16.8731C2.44238 13.4727 2.44238 7.95951 5.84279 4.5591ZM17.0961 5.61976C14.2815 2.80513 9.71807 2.80513 6.90345 5.61976C4.08882 8.43438 4.08882 12.9978 6.90345 15.8124L8.59964 17.4844C9.38247 18.2494 10.3422 19.1816 11.4786 20.2807C11.7693 20.5619 12.2305 20.5619 12.5213 20.2808L15.4957 17.3913C16.1542 16.7471 16.6877 16.2208 17.0961 15.8124C19.9107 12.9978 19.9107 8.43438 17.0961 5.61976ZM14.946 7.61314L15.0301 7.68575C15.2964 7.95202 15.3206 8.36868 15.1027 8.6623L15.0301 8.74641L13.0608 10.7161L15.0301 12.6858C15.2964 12.952 15.3206 13.3687 15.1027 13.6623L15.0301 13.7464C14.7638 14.0127 14.3472 14.0369 14.0536 13.819L13.9694 13.7464L11.9998 11.7771L10.0301 13.7464C9.76384 14.0127 9.34718 14.0369 9.05356 13.819L8.96945 13.7464C8.70318 13.4801 8.67897 13.0635 8.89683 12.7699L8.96945 12.6858L10.9388 10.7161L8.96945 8.74641C8.70318 8.48015 8.67897 8.06348 8.89683 7.76987L8.96945 7.68575C9.23571 7.41949 9.65238 7.39528 9.94599 7.61314L10.0301 7.68575L11.9998 9.65508L13.9694 7.68575C14.2357 7.41949 14.6524 7.39528 14.946 7.61314Z" fill="currentColor"/></svg>

Details

NameLocation Dismiss
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_location_dismiss_24_regular.svg
Filled fileic_fluent_location_dismiss_24_filled.svg
React (Regular)LocationDismiss20Regular, LocationDismiss24Regular
React (Filled)LocationDismiss20Filled, LocationDismiss24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

pinmarkermaplocationtravelx

Related icons

LocationLocation ArrowLocation Arrow LeftLocation Arrow RightLocation Arrow UpLocation LiveLocation OffLocation RippleLocation Target SquareLocation AddRectangle Portrait Location TargetMountain Location Bottom