Location Settings icon

Use the Location Settings 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 { LocationSettings24Regular, LocationSettings24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M17.061 13.9022C17.8493 14.7313 19.171 14.7312 19.9595 13.9022L20.4526 13.3836C20.9972 13.6064 21.4979 13.9198 21.937 14.3055L21.7515 14.9364C21.4276 16.0338 22.0883 17.1791 23.2007 17.4471L23.7397 17.577C23.7888 17.877 23.8149 18.1853 23.8149 18.4998C23.8149 18.8005 23.7914 19.096 23.7466 19.3836L23.1626 19.5281C22.0612 19.8006 21.4067 20.9341 21.7212 22.0242L21.9194 22.7108C21.4802 23.0931 20.9805 23.4036 20.437 23.6239L19.938 23.0985C19.1497 22.269 17.8271 22.2692 17.0386 23.0985L16.5454 23.617C16.0009 23.3942 15.5001 23.0808 15.061 22.6951L15.2476 22.0643C15.5714 20.9667 14.9099 19.8215 13.7974 19.5535L13.2583 19.4237C13.2092 19.1234 13.1841 18.8145 13.1841 18.4998C13.1841 18.1993 13.2066 17.9044 13.2515 17.617L13.8364 17.4725C14.9378 17.1998 15.5916 16.0656 15.2768 14.9754L15.0796 14.2899C15.5188 13.9075 16.0185 13.597 16.562 13.3768L17.061 13.9022ZM5.84326 4.56819C9.24368 1.16801 14.7574 1.16786 18.1577 4.56819C20.2687 6.67934 21.0674 9.60503 20.5571 12.3338C20.0883 12.1775 19.596 12.0727 19.0864 12.0272C19.4976 9.77682 18.8359 7.36863 17.0962 5.62873C14.2816 2.8146 9.71831 2.81448 6.9038 5.62873C4.0894 8.44338 4.08925 13.0075 6.9038 15.8221L8.39111 17.2889C9.20995 18.0903 10.2395 19.0911 11.479 20.2899C11.7018 20.5052 12.0239 20.553 12.2935 20.4383C12.4444 20.922 12.6512 21.3815 12.9048 21.8094C12.0912 22.1663 11.1108 22.0204 10.436 21.368L6.94482 17.9725C6.50626 17.5419 6.13901 17.1784 5.84326 16.8826C2.44292 13.4823 2.44307 7.96862 5.84326 4.56819ZM18.4995 16.9998C17.699 16.9998 17.0496 17.6716 17.0493 18.4998C17.0493 19.3283 17.6989 19.9998 18.4995 19.9998C19.2999 19.9996 19.9487 19.3281 19.9487 18.4998C19.9485 17.6718 19.2998 17.0001 18.4995 16.9998ZM12.0005 7.5008C13.9333 7.50106 15.5005 9.06797 15.5005 11.0008C15.5003 12.9335 13.9332 14.5005 12.0005 14.5008C10.0676 14.5008 8.50065 12.9337 8.50048 11.0008C8.50048 9.06781 10.0675 7.5008 12.0005 7.5008ZM12.0005 9.0008C10.8959 9.0008 10.0005 9.89623 10.0005 11.0008C10.0007 12.1052 10.896 13.0008 12.0005 13.0008C13.1047 13.0005 14.0003 12.1051 14.0005 11.0008C14.0005 9.89639 13.1048 9.00106 12.0005 9.0008Z" 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_settings_24_regular.svg";

Details