Arrow Clockwise Dashes icon
Used for loading, retry, & skip actions. The Arrow Clockwise Dashes icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Arrow Clockwise 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 { ArrowClockwiseDashes24Regular, ArrowClockwiseDashes24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowClockwiseDashes24Regular aria-label="Arrow Clockwise Dashes" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_clockwise_dashes_24_regular.svg" width="24" height="24" alt="Arrow Clockwise 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="M10.163 3.18741C10.6055 3.09567 10.9993 3.44993 10.9993 3.90185C10.9993 4.28205 10.7165 4.59936 10.3456 4.68283C9.49903 4.87334 8.70663 5.207 7.99518 5.65707C7.67405 5.86021 7.25008 5.83556 6.98138 5.56687C6.66171 5.2472 6.68983 4.71808 7.0678 4.47004C7.99464 3.86181 9.04053 3.42009 10.163 3.18741ZM12.9993 3.90185C12.9993 4.28205 13.282 4.59936 13.6529 4.68283C14.9647 4.97802 16.1464 5.61693 17.0984 6.5H15.75C15.3358 6.5 15 6.83579 15 7.25C15 7.66421 15.3358 8 15.75 8H18.75C19.1642 8 19.5 7.66421 19.5 7.25V4.25C19.5 3.83579 19.1642 3.5 18.75 3.5C18.3358 3.5 18 3.83579 18 4.25V5.29228C16.8423 4.25588 15.4147 3.51479 13.8356 3.18743C13.3931 3.09569 12.9993 3.44993 12.9993 3.90185ZM20.0976 12.9985C19.7174 12.9985 19.4001 13.2813 19.3166 13.6523C19.1262 14.4993 18.7924 15.2922 18.3421 16.004C18.139 16.3251 18.1636 16.7491 18.4323 17.0178C18.752 17.3375 19.2811 17.3093 19.5291 16.9314C20.1377 16.0041 20.5795 14.9577 20.8121 13.8347C20.9037 13.3922 20.5495 12.9985 20.0976 12.9985ZM13.6529 19.317C13.282 19.4005 12.9993 19.7178 12.9993 20.098C12.9993 20.5499 13.393 20.9042 13.8355 20.8125C14.9585 20.5797 16.0048 20.1376 16.932 19.529C17.3099 19.2809 17.3379 18.7519 17.0183 18.4322C16.7496 18.1635 16.3255 18.1389 16.0044 18.3421C15.2927 18.7925 14.4999 19.1264 13.6529 19.317ZM7.99355 18.3418C7.67242 18.1385 7.24835 18.1631 6.9796 18.4318C6.65999 18.7515 6.68804 19.2805 7.06588 19.5286C7.99319 20.1374 9.03976 20.5796 10.163 20.8125C10.6055 20.9042 10.9993 20.5499 10.9993 20.098C10.9993 19.7178 10.7165 19.4005 10.3456 19.317C9.49839 19.1264 8.70543 18.7923 7.99355 18.3418ZM4.68186 13.6523C4.59845 13.2813 4.28111 12.9985 3.90086 12.9985C3.449 12.9985 3.09476 13.3922 3.1864 13.8347C3.41895 14.9574 3.86065 16.0036 4.46895 16.9307C4.71697 17.3087 5.24612 17.3369 5.56581 17.0172C5.83449 16.7485 5.85915 16.3246 5.65605 16.0035C5.20592 15.2918 4.87227 14.4991 4.68186 13.6523ZM5.65707 7.99477C5.8603 7.67364 5.83569 7.2496 5.56696 6.98087C5.24732 6.66124 4.71828 6.68932 4.47021 7.06719C3.86182 7.99392 3.41993 9.03972 3.18705 10.1621C3.09523 10.6046 3.44951 10.9985 3.90148 10.9985C4.28164 10.9985 4.59892 10.7159 4.68245 10.345C4.8731 9.49847 5.20689 8.70614 5.65707 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_clockwise_dashes_24_regular.svg";Details
| Name | Arrow Clockwise Dashes |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_clockwise_dashes_24_regular.svg |
| Filled file | ic_fluent_arrow_clockwise_dashes_24_filled.svg |
| React components | ArrowClockwiseDashes24Regular, ArrowClockwiseDashes24Filled |
| License | MIT (© Microsoft Corporation) |