My Location icon

Use the My 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 { MyLocation24Regular, MyLocation24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_my_location_24_regular.svg" width="24" height="24" alt="My 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="M12 2C12.3797 2 12.6935 2.28215 12.7432 2.64823L12.75 2.75L12.7491 4.53771C16.2928 4.88757 19.1124 7.70719 19.4632 11.2525L19.5 11.25H21.25C21.6642 11.25 22 11.5858 22 12C22 12.3797 21.7178 12.6935 21.3518 12.7432L21.25 12.75L19.4617 12.749C19.1124 16.2928 16.2928 19.1124 12.7475 19.4632L12.75 19.5V21.25C12.75 21.6642 12.4142 22 12 22C11.6203 22 11.3065 21.7178 11.2568 21.3518L11.25 21.25L11.251 19.4617C7.70719 19.1124 4.88757 16.2928 4.53678 12.7475L4.5 12.75H2.75C2.33579 12.75 2 12.4142 2 12C2 11.6203 2.28215 11.3065 2.64823 11.2568L2.75 11.25L4.53771 11.2509C4.88757 7.70719 7.70719 4.88757 11.2525 4.53678L11.25 4.5V2.75C11.25 2.33579 11.5858 2 12 2ZM12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6ZM12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8Z" 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/my_location_24_regular.svg";

Details

Keywords

locationpinpointmapmaker