Gauge Rotate 315 icon

Use the Gauge Rotate 315 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 { GaugeRotate31524Regular, GaugeRotate31524Filled } from "@fluentui/react-icons";

export function Example() {
  return <GaugeRotate31524Regular aria-label="Gauge Rotate 315" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_gauge_rotate_315_24_regular.svg" width="24" height="24" alt="Gauge Rotate 315">

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.8096 2.03176C17.9539 2.44442 21.9996 6.74957 22 11.9995C22 17.5224 17.5228 21.9995 12 21.9995C6.47715 21.9995 2 17.5224 2 11.9995C2.00022 9.1196 3.21854 6.52233 5.16602 4.69875C5.4683 4.41594 5.94349 4.43187 6.22656 4.73391C6.5095 5.03615 6.4934 5.51035 6.19141 5.79348C4.53411 7.34531 3.50022 9.55153 3.5 11.9995C3.5 16.694 7.30558 20.4995 12 20.4995C16.6944 20.4995 20.5 16.694 20.5 11.9995C20.4996 7.53779 17.0606 3.87849 12.6895 3.52785C12.2769 3.49456 11.9691 3.13283 12.002 2.72024C12.0353 2.30767 12.3969 1.99881 12.8096 2.03176ZM6.88672 7.86086C6.62843 7.25798 7.25845 6.62789 7.86133 6.88625L7.99121 6.95559C9.62781 8.03953 11.2761 9.11015 12.875 10.2495C13.279 10.5374 13.6201 10.7916 13.7656 10.937C14.5466 11.7181 14.5466 12.9841 13.7656 13.7652C12.9846 14.5462 11.7185 14.5462 10.9375 13.7652C10.792 13.6197 10.537 13.2786 10.249 12.8745C9.34646 11.608 7.82218 9.30698 6.95605 7.99075L6.88672 7.86086Z" 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/gauge_rotate_315_24_regular.svg";

Details