Location Off icon
Used in map and travel scenarios. The Location Off 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 Off 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 { LocationOff24Regular, LocationOff24Filled } from "@fluentui/react-icons";
export function Example() {
return <LocationOff24Regular aria-label="Location Off" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_location_off_24_regular.svg" width="24" height="24" alt="Location Off"> 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="M2.21973 2.21973C2.51262 1.92684 2.98738 1.92684 3.28028 2.21973L21.7803 20.7197L21.8311 20.7764C22.0715 21.0709 22.0548 21.5056 21.7803 21.7803C21.5056 22.0549 21.071 22.0715 20.7764 21.8311L20.7197 21.7803L16.9824 18.043L16.9697 18.0557C16.095 18.9142 14.959 20.0189 13.5635 21.3682C12.6913 22.2112 11.3076 22.2114 10.4355 21.3682L6.94434 17.9717C6.50569 17.541 6.13856 17.1776 5.84278 16.8818C2.8416 13.8806 2.49056 9.2351 4.78711 5.84766L2.21973 3.28028C1.92684 2.98738 1.92684 2.51262 2.21973 2.21973ZM5.87207 6.93262C4.1479 9.71209 4.4905 13.4084 6.90332 15.8213L8.38965 17.2891C9.20855 18.0905 10.2389 19.0911 11.4785 20.29C11.7691 20.5707 12.2298 20.5706 12.5205 20.29L15.916 16.9883C15.9179 16.9864 15.92 16.9843 15.9219 16.9824L13.2188 14.2793C12.839 14.4211 12.4283 14.5 11.999 14.5C10.0663 14.4998 8.49925 12.9327 8.49903 11C8.49907 10.5706 8.5772 10.1593 8.71875 9.7793L5.87207 6.93262ZM6.86914 3.68848C10.275 1.19917 15.0802 1.49231 18.1563 4.56836C21.2322 7.64439 21.5243 12.4487 19.0352 15.8545L17.958 14.7773C19.8701 11.9721 19.5842 8.1175 17.0957 5.62891C14.607 3.14029 10.7516 2.85339 7.94629 4.76563L6.86914 3.68848ZM11.999 7.5C13.9318 7.50018 15.4988 9.06728 15.499 11C15.499 11.3954 15.4314 11.7754 15.3105 12.1299L13.9883 10.8076C13.8973 9.85664 13.1416 9.10024 12.1904 9.00977L10.8682 7.6875C11.2228 7.56652 11.6035 7.50003 11.999 7.5Z" 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_off_24_regular.svg";Details
| Name | Location Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_location_off_24_regular.svg |
| Filled file | ic_fluent_location_off_24_filled.svg |
| React components | LocationOff24Regular, LocationOff24Filled |
| License | MIT (© Microsoft Corporation) |