Calculator Arrow Clockwise icon

Use the Calculator Arrow Clockwise 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 { CalculatorArrowClockwise24Regular, CalculatorArrowClockwise24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CalculatorArrowClockwise24Regular aria-label="Calculator Arrow Clockwise" />;
}

Use it in HTML

Reference the SVG file directly:

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

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="M7 7C7 5.89543 7.89543 5 9 5H15C16.1046 5 17 5.89543 17 7V8C17 9.10457 16.1046 10 15 10H9C7.89543 10 7 9.10457 7 8V7ZM9 6.5C8.72386 6.5 8.5 6.72386 8.5 7V8C8.5 8.27614 8.72386 8.5 9 8.5H15C15.2761 8.5 15.5 8.27614 15.5 8V7C15.5 6.72386 15.2761 6.5 15 6.5H9ZM8.25 14.5C8.94036 14.5 9.5 13.9404 9.5 13.25C9.5 12.5596 8.94036 12 8.25 12C7.55964 12 7 12.5596 7 13.25C7 13.9404 7.55964 14.5 8.25 14.5ZM9.5 17.25C9.5 17.9404 8.94036 18.5 8.25 18.5C7.55964 18.5 7 17.9404 7 17.25C7 16.5596 7.55964 16 8.25 16C8.94036 16 9.5 16.5596 9.5 17.25ZM7.25 22H12.101C11.6485 21.5565 11.2558 21.0521 10.9365 20.5H7.25C6.2835 20.5 5.5 19.7165 5.5 18.75V5.25C5.5 4.2835 6.2835 3.5 7.25 3.5H16.75C17.7165 3.5 18.5 4.2835 18.5 5.25V10.1614C18.9394 10.2575 19.3636 10.3948 19.768 10.5691C19.8025 10.5143 19.8399 10.4615 19.88 10.4111C19.9176 10.3638 19.9577 10.3185 20 10.2753V5.25C20 3.45507 18.5449 2 16.75 2H7.25C5.45507 2 4 3.45507 4 5.25V18.75C4 20.5449 5.45507 22 7.25 22ZM21.25 15C21.6642 15 22 14.6642 22 14.25V11.5C22 11.0858 21.6642 10.75 21.25 10.75C21.0121 10.75 20.8001 10.8608 20.6627 11.0335C20.5608 11.1616 20.5 11.3237 20.5 11.5V12.1261C19.5149 11.4176 18.3054 11 17 11C13.6863 11 11 13.6863 11 17C11 20.3137 13.6863 23 17 23C20.3137 23 23 20.3137 23 17C23 16.5858 22.6642 16.25 22.25 16.25C21.8358 16.25 21.5 16.5858 21.5 17C21.5 19.4853 19.4853 21.5 17 21.5C14.5147 21.5 12.5 19.4853 12.5 17C12.5 14.5147 14.5147 12.5 17 12.5C18.0649 12.5 19.0416 12.869 19.8121 13.4867C19.8146 13.4887 19.8171 13.4906 19.8196 13.4926C19.8228 13.4951 19.826 13.4976 19.8293 13.5H18.5C18.0858 13.5 17.75 13.8358 17.75 14.25C17.75 14.6642 18.0858 15 18.5 15H21.25Z" 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/calculator_arrow_clockwise_24_regular.svg";

Details

Keywords

mathformulasaddsubtractmultiplydivde