Calendar Arrow Counterclockwise icon
Used to represent Calendar wrap up. The Calendar Arrow Counterclockwise 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 Calendar Arrow Counterclockwise 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 { CalendarArrowCounterclockwise24Regular, CalendarArrowCounterclockwise24Filled } from "@fluentui/react-icons";
export function Example() {
return <CalendarArrowCounterclockwise24Regular aria-label="Calendar Arrow Counterclockwise" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_calendar_arrow_counterclockwise_24_regular.svg" width="24" height="24" alt="Calendar Arrow Counterclockwise"> 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="M6.25 3C4.45507 3 3 4.45507 3 6.25V8.93934L2.28033 8.21967C1.98744 7.92678 1.51256 7.92678 1.21967 8.21967C0.926777 8.51256 0.926777 8.98744 1.21967 9.28033L3.21967 11.2803C3.51256 11.5732 3.98744 11.5732 4.28033 11.2803L6.28033 9.28033C6.57322 8.98744 6.57322 8.51256 6.28033 8.21967C5.98744 7.92678 5.51256 7.92678 5.21967 8.21967L4.5 8.93934V6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V7H5.99944C5.96586 7 5.9328 7.00221 5.90039 7.00648C6.2967 7.04059 6.6836 7.20928 6.98688 7.51256C7.26483 7.79052 7.42974 8.13871 7.4816 8.5H19.5V17.75C19.5 18.7165 18.7165 19.5 17.75 19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V13.75C4.5 13.3358 4.16421 13 3.75 13C3.33579 13 3 13.3358 3 13.75V17.75C3 19.5449 4.45507 21 6.25 21H17.75C19.5449 21 21 19.5449 21 17.75V6.25C21 4.45507 19.5449 3 17.75 3H6.25ZM7.74944 14.5C8.4398 14.5 8.99944 15.0596 8.99944 15.75C8.99944 16.4404 8.4398 17 7.74944 17C7.05908 17 6.49944 16.4404 6.49944 15.75C6.49944 15.0596 7.05908 14.5 7.74944 14.5ZM11.9994 14.5C12.6898 14.5 13.2494 15.0596 13.2494 15.75C13.2494 16.4404 12.6898 17 11.9994 17C11.3091 17 10.7494 16.4404 10.7494 15.75C10.7494 15.0596 11.3091 14.5 11.9994 14.5ZM7.74944 10.5C8.4398 10.5 8.99944 11.0596 8.99944 11.75C8.99944 12.4404 8.4398 13 7.74944 13C7.05908 13 6.49944 12.4404 6.49944 11.75C6.49944 11.0596 7.05908 10.5 7.74944 10.5ZM11.9994 10.5C12.6898 10.5 13.2494 11.0596 13.2494 11.75C13.2494 12.4404 12.6898 13 11.9994 13C11.3091 13 10.7494 12.4404 10.7494 11.75C10.7494 11.0596 11.3091 10.5 11.9994 10.5ZM16.2494 10.5C16.9398 10.5 17.4994 11.0596 17.4994 11.75C17.4994 12.4404 16.9398 13 16.2494 13C15.5591 13 14.9994 12.4404 14.9994 11.75C14.9994 11.0596 15.5591 10.5 16.2494 10.5Z" 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/calendar_arrow_counterclockwise_24_regular.svg";Details
| Name | Calendar Arrow Counterclockwise |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_calendar_arrow_counterclockwise_24_regular.svg |
| Filled file | ic_fluent_calendar_arrow_counterclockwise_24_filled.svg |
| React components | CalendarArrowCounterclockwise24Regular, CalendarArrowCounterclockwise24Filled |
| License | MIT (© Microsoft Corporation) |