Location Add icon
Used in map and travel scenarios. The Location Add 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 Add 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 { LocationAdd24Regular, LocationAdd24Filled } from "@fluentui/react-icons";
export function Example() {
return <LocationAdd24Regular aria-label="Location Add" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_location_add_24_regular.svg" width="24" height="24" alt="Location Add"> 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="M8 10.75C8 10.3358 8.33579 10 8.75 10H11.25V7.74908C11.25 7.33487 11.5858 6.99908 12 6.99908C12.4142 6.99908 12.75 7.33487 12.75 7.74908V10H15.25C15.6642 10 16 10.3358 16 10.75C16 11.1642 15.6642 11.5 15.25 11.5H12.75V13.7491C12.75 14.1633 12.4142 14.4991 12 14.4991C11.5858 14.4991 11.25 14.1633 11.25 13.7491V11.5H8.75C8.33579 11.5 8 11.1642 8 10.75ZM5.84328 4.56789C9.24369 1.16748 14.7568 1.16748 18.1573 4.56789C21.5577 7.9683 21.5577 13.4815 18.1573 16.8819L16.9703 18.0558C16.0954 18.9144 14.9603 20.0184 13.5644 21.3679C12.6922 22.2113 11.3084 22.2112 10.4362 21.3677L6.94515 17.9718C6.50638 17.541 6.13912 17.1777 5.84328 16.8819C2.44287 13.4815 2.44287 7.9683 5.84328 4.56789ZM17.0966 5.62855C14.282 2.81392 9.71856 2.81392 6.90394 5.62855C4.08931 8.44317 4.08931 13.0066 6.90394 15.8212L8.39101 17.2887C9.20992 18.0901 10.2394 19.0905 11.4791 20.2895C11.7698 20.5706 12.231 20.5707 12.5218 20.2896L15.9167 16.9881C16.3856 16.5278 16.779 16.1388 17.0966 15.8212C19.9112 13.0066 19.9112 8.44317 17.0966 5.62855Z" 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_add_24_regular.svg";Details
| Name | Location Add |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_location_add_24_regular.svg |
| Filled file | ic_fluent_location_add_24_filled.svg |
| React components | LocationAdd24Regular, LocationAdd24Filled |
| License | MIT (© Microsoft Corporation) |