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 filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
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" />;
}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>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/location_dismiss_24_regular.svg";Details
| Name | Location Dismiss |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_location_dismiss_24_regular.svg |
| Filled file | ic_fluent_location_dismiss_24_filled.svg |
| React components | LocationDismiss24Regular, LocationDismiss24Filled |
| License | MIT (© Microsoft Corporation) |