Arrow Counterclockwise Info icon
The Arrow Counterclockwise Info icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 5 sizes from 20 to 48 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Every size and style
Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.
Regular, 24 px
ic_fluent_arrow_counterclockwise_info_24_regular.svg
Arrow Counterclockwise Info icon in React
npm install @fluentui/react-icons
import { ArrowCounterclockwiseInfo24Regular } from "@fluentui/react-icons";
export function Example() {
return <ArrowCounterclockwiseInfo24Regular aria-label="Arrow Counterclockwise Info" />;
}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" />;
}Coding agents can look up this component through the Fluent Icons MCP server.
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>Details
| Name | Arrow Counterclockwise Info |
|---|---|
| Styles | Regular (outlined), Filled |
| Sizes | 20 px, 24 px, 28 px, 32 px, 48 px |
| Regular (outlined) file | ic_fluent_arrow_counterclockwise_info_24_regular.svg |
| Filled file | ic_fluent_arrow_counterclockwise_info_24_filled.svg |
| React (Regular) | ArrowCounterclockwiseInfo20Regular, ArrowCounterclockwiseInfo24Regular, ArrowCounterclockwiseInfo28Regular, ArrowCounterclockwiseInfo32Regular, ArrowCounterclockwiseInfo48Regular |
| React (Filled) | ArrowCounterclockwiseInfo20Filled, ArrowCounterclockwiseInfo24Filled, ArrowCounterclockwiseInfo28Filled, ArrowCounterclockwiseInfo32Filled, ArrowCounterclockwiseInfo48Filled |
| License | MIT (© Microsoft Corporation) |