Location icon
Used in map and travel scenarios. The Location 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 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 { Location24Regular, Location24Filled } from "@fluentui/react-icons";
export function Example() {
return <Location24Regular aria-label="Location" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_location_24_regular.svg" width="24" height="24" alt="Location"> 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.84325 4.56799C9.24367 1.16776 14.7573 1.16764 18.1577 4.56799C21.558 7.96834 21.5579 13.482 18.1577 16.8824L16.9702 18.0563C16.0953 18.915 14.9598 20.0192 13.5639 21.3688C12.6917 22.2117 11.308 22.2111 10.436 21.3678L6.94481 17.9723C6.50614 17.5416 6.13904 17.1782 5.84325 16.8824C2.44284 13.482 2.44284 7.9684 5.84325 4.56799ZM17.0962 5.62951C14.2816 2.81489 9.71842 2.81489 6.90379 5.62951C4.08948 8.44416 4.08927 13.0074 6.90379 15.8219L8.3911 17.2887C9.20996 18.0901 10.2394 19.0908 11.479 20.2897C11.7697 20.5708 12.2312 20.5708 12.522 20.2897L15.9165 16.9889C16.3853 16.5288 16.7786 16.1395 17.0962 15.8219C19.9108 13.0073 19.9108 8.44414 17.0962 5.62951ZM12.0005 7.49963C13.9331 7.49988 15.5003 9.06696 15.5005 10.9996C15.5005 12.9325 13.9333 14.4994 12.0005 14.4996C10.0675 14.4996 8.50047 12.9326 8.50047 10.9996C8.50067 9.0668 10.0676 7.49963 12.0005 7.49963ZM12.0005 8.99963C10.896 8.99963 10.0007 9.89523 10.0005 10.9996C10.0005 12.1042 10.8959 12.9996 12.0005 12.9996C13.1048 12.9994 14.0005 12.104 14.0005 10.9996C14.0003 9.89539 13.1047 8.99988 12.0005 8.99963Z" 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_24_regular.svg";Details
| Name | Location |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_location_24_regular.svg |
| Filled file | ic_fluent_location_24_filled.svg |
| React components | Location24Regular, Location24Filled |
| License | MIT (© Microsoft Corporation) |