Compass True North icon

Use the Compass True North 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 { CompassTrueNorth24Regular, CompassTrueNorth24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CompassTrueNorth24Regular aria-label="Compass True North" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_compass_true_north_24_regular.svg" width="24" height="24" alt="Compass True North">

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 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM10.9492 5.56152C11.2828 5.04305 11.9191 4.88179 12.4414 5.07715C12.6787 5.1654 12.8925 5.32716 13.0439 5.5625L13.1377 5.73535L15.0781 10.0537C15.6341 11.2915 15.6341 12.7084 15.0781 13.9463L13.1377 18.2646C12.6958 19.2483 11.2994 19.2481 10.8574 18.2646L8.91699 13.9463C8.36104 12.7084 8.36099 11.2916 8.91699 10.0537L9.04297 9.77246C9.05195 9.751 9.06072 9.72937 9.07031 9.70801L10.8555 5.73438L10.9492 5.56152ZM13.8066 13.0869C13.6331 13.184 13.4456 13.2636 13.2451 13.3213C12.4287 13.556 11.5625 13.5561 10.7461 13.3213C10.5478 13.2643 10.3624 13.1855 10.1904 13.0898C10.2195 13.1713 10.2504 13.2525 10.2861 13.332L11.9971 17.1426L13.71 13.332C13.7461 13.2515 13.7774 13.1694 13.8066 13.0869ZM10.4209 10.3662C10.172 10.9867 10.5121 11.6932 11.1611 11.8799C11.7066 12.0366 12.2856 12.0368 12.8311 11.8799C13.4953 11.6888 13.836 10.9528 13.5527 10.3223L11.9961 6.85742L10.4209 10.3662Z" 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/compass_true_north_24_regular.svg";

Details