Arrow Counterclockwise Dashes icon

Use the Arrow Counterclockwise Dashes 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 { ArrowCounterclockwiseDashes24Regular, ArrowCounterclockwiseDashes24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M13.8375 3.18741C13.395 3.09567 13.0012 3.44993 13.0012 3.90185C13.0012 4.28205 13.2839 4.59936 13.6548 4.68283C14.5014 4.87334 15.2938 5.207 16.0053 5.65707C16.3264 5.86021 16.7504 5.83556 17.0191 5.56687C17.3387 5.2472 17.3106 4.71808 16.9327 4.47004C16.0058 3.86181 14.9599 3.42009 13.8375 3.18741ZM11.0012 3.90185C11.0012 4.28205 10.7185 4.59936 10.3476 4.68283C9.03579 4.97802 7.85409 5.61693 6.90206 6.5H8.25046C8.66467 6.5 9.00046 6.83579 9.00046 7.25C9.00046 7.66421 8.66467 8 8.25046 8H5.25046C4.83624 8 4.50046 7.66421 4.50046 7.25V4.25C4.50046 3.83579 4.83624 3.5 5.25046 3.5C5.66467 3.5 6.00046 3.83579 6.00046 4.25V5.29228C7.15816 4.25588 8.58575 3.51479 10.1648 3.18743C10.6073 3.09569 11.0012 3.44993 11.0012 3.90185ZM3.90282 12.9985C4.28307 12.9985 4.6004 13.2813 4.68381 13.6523C4.87427 14.4993 5.20805 15.2922 5.65834 16.004C5.86149 16.3251 5.83684 16.7491 5.56815 17.0178C5.24847 17.3375 4.71936 17.3093 4.47132 16.9314C3.8628 16.0041 3.42095 14.9577 3.18836 13.8347C3.09671 13.3922 3.45096 12.9985 3.90282 12.9985ZM10.3476 19.317C10.7185 19.4005 11.0012 19.7178 11.0012 20.098C11.0012 20.5499 10.6074 20.9042 10.1649 20.8125C9.04197 20.5797 7.99562 20.1376 7.06847 19.529C6.69059 19.2809 6.66251 18.7519 6.98215 18.4322C7.25088 18.1635 7.67491 18.1389 7.99605 18.3421C8.70778 18.7925 9.50056 19.1264 10.3476 19.317ZM16.0069 18.3418C16.328 18.1385 16.7521 18.1631 17.0209 18.4318C17.3405 18.7515 17.3124 19.2805 16.9346 19.5286C16.0073 20.1374 14.9607 20.5796 13.8375 20.8125C13.395 20.9042 13.0012 20.5499 13.0012 20.098C13.0012 19.7178 13.2839 19.4005 13.6548 19.317C14.5021 19.1264 15.295 18.7923 16.0069 18.3418ZM19.3186 13.6523C19.402 13.2813 19.7193 12.9985 20.0996 12.9985C20.5515 12.9985 20.9057 13.3922 20.8141 13.8347C20.5815 14.9574 20.1398 16.0036 19.5315 16.9307C19.2835 17.3087 18.7543 17.3369 18.4346 17.0172C18.166 16.7485 18.1413 16.3246 18.3444 16.0035C18.7945 15.2918 19.1282 14.4991 19.3186 13.6523ZM18.3434 7.99477C18.1402 7.67364 18.1648 7.2496 18.4335 6.98087C18.7531 6.66124 19.2822 6.68932 19.5302 7.06719C20.1386 7.99392 20.5805 9.03972 20.8134 10.1621C20.9052 10.6046 20.5509 10.9985 20.099 10.9985C19.7188 10.9985 19.4015 10.7159 19.318 10.345C19.1274 9.49847 18.7936 8.70614 18.3434 7.99477Z" 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_dashes_24_regular.svg";

Details

Keywords

arrowpointdirectioncirclehint