Location Arrow icon

Use the Location Arrow 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 { LocationArrow24Regular, LocationArrow24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_location_arrow_24_regular.svg" width="24" height="24" alt="Location Arrow">

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="M19.9577 2.10383C21.1708 1.63725 22.3628 2.8292 21.8962 4.04232L15.3592 21.0384C14.8366 22.3973 12.8791 22.2897 12.5086 20.8816L10.6636 13.8708C10.5948 13.6094 10.3907 13.4052 10.1292 13.3364L3.11836 11.4914C1.7103 11.1209 1.60268 9.16345 2.96163 8.64078L19.9577 2.10383ZM20.4962 3.50385L3.5001 10.0408L10.511 11.8858C11.2953 12.0922 11.9079 12.7047 12.1143 13.4891L13.9592 20.4999L20.4962 3.50385Z" 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_arrow_24_regular.svg";

Details

Keywords

pinmarkermaplocationtraveldirections