Arrow Clockwise Dashes Settings icon

Use the Arrow Clockwise Dashes Settings 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 { ArrowClockwiseDashesSettings24Regular, ArrowClockwiseDashesSettings24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ArrowClockwiseDashesSettings24Regular aria-label="Arrow Clockwise Dashes Settings" />;
}

Use it in HTML

Reference the SVG file directly:

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

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.90185ZM7.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.0672C3.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.99477ZM14.2772 13.9759C14.592 15.0661 13.9376 16.1995 12.836 16.4721L12.2518 16.6166C12.2069 16.9043 12.1836 17.1995 12.1836 17.5003C12.1836 17.815 12.2091 18.1235 12.2582 18.4237L12.7976 18.5536C13.9102 18.8216 14.5715 19.9666 14.2476 21.0641L14.0613 21.6954C14.5005 22.081 15.0009 22.3942 15.5455 22.6169L16.0388 22.0982C16.8273 21.269 18.1496 21.2692 18.9379 22.0987L19.4366 22.6235C19.9801 22.4032 20.4801 22.093 20.9194 21.7106L20.7214 21.0247C20.4066 19.9344 21.061 18.801 22.1626 18.5285L22.7463 18.384C22.7912 18.0963 22.8145 17.8011 22.8145 17.5003C22.8145 17.1856 22.789 16.877 22.7399 16.5767L22.2009 16.4469C21.0884 16.179 20.4271 15.034 20.751 13.9364L20.9371 13.3056C20.498 12.9198 19.9975 12.6066 19.4529 12.3838L18.9598 12.9023C18.1713 13.7316 16.849 13.7313 16.0607 12.9018L15.5619 12.377C15.0184 12.5972 14.5184 12.9073 14.0791 13.2897L14.2772 13.9759ZM17.4991 19.0003C16.6984 19.0003 16.0494 18.3287 16.0494 17.5003C16.0494 16.6719 16.6984 16.0003 17.4991 16.0003C18.2997 16.0003 18.9487 16.6719 18.9487 17.5003C18.9487 18.3287 18.2997 19.0003 17.4991 19.0003Z" 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_settings_24_regular.svg";

Details

Keywords

arrowpointdirectioncirclehintworkflowsolutionssettings