Arrow Counterclockwise Info icon

Use the Arrow Counterclockwise Info 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 { ArrowCounterclockwiseInfo24Regular, ArrowCounterclockwiseInfo24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowCounterclockwiseInfo24Regular aria-label="Arrow Counterclockwise Info" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_arrow_counterclockwise_info_24_regular.svg" width="24" height="24" alt="Arrow Counterclockwise Info">

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 4.5C15.9072 4.5 19.1166 7.48778 19.4681 11.3033C20.0134 11.4763 20.5275 11.7193 21 12.0218L21 12C21 7.02944 16.9706 3 12 3C9.69494 3 7.59227 3.86656 6 5.29168V4.25C6 3.83579 5.66421 3.5 5.25 3.5C4.83579 3.5 4.5 3.83579 4.5 4.25V7.25C4.5 7.66421 4.83579 8 5.25 8H8.25C8.66421 8 9 7.66421 9 7.25C9 6.83579 8.66421 6.5 8.25 6.5H6.90093C8.23907 5.25883 10.0309 4.5 12 4.5ZM4.5 12C4.5 15.9072 7.48778 19.1166 11.3033 19.4681C11.4763 20.0134 11.7193 20.5275 12.0218 21L12 21C7.02944 21 3 16.9706 3 12C3 11.5317 3.03576 11.0718 3.10471 10.6228C3.161 10.2562 3.48623 10 3.85708 10C4.31609 10 4.64845 10.4382 4.58123 10.8923C4.52772 11.2538 4.5 11.6236 4.5 12ZM12 17.5C12 14.4624 14.4624 12 17.5 12C20.5376 12 23 14.4624 23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5ZM17.5 21C17.7761 21 18 20.7761 18 20.5L18 16.5C18 16.2239 17.7761 16 17.5 16C17.2239 16 17 16.2239 17 16.5L17 20.5C17 20.7761 17.2239 21 17.5 21ZM17.5 13.875C17.1548 13.875 16.875 14.1548 16.875 14.5C16.875 14.8452 17.1548 15.125 17.5 15.125C17.8452 15.125 18.125 14.8452 18.125 14.5C18.125 14.1548 17.8452 13.875 17.5 13.875Z" 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/arrow_counterclockwise_info_24_regular.svg";

Details