Hover the icon or press Play. Suggested motion: spin-back. Pick another to preview it and update the animated code:
Counter Clockwise Clock icon
A free counter clockwise clock icon from Radix Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.
- License
- MIT license
- Project
- icons.radix-ui.com
npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/counter-clockwise-clock.jsonimport * as React from "react";
/**
* Counter Clockwise Clock from Radix Icons (https://icons.radix-ui.com), MIT.
* Via Cuelark UI: ui.cuelark.com/icons/radix/counter-clockwise-clock. Sized in em, colored by currentColor.
*/
export function RxCounterClockwiseClockIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
fill="none"
viewBox="0 0 15 15"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M7.5 0.849976C11.5626 0.850176 14.1504 4.18587 14.1504 7.50037C14.1502 10.8147 11.5624 14.1496 7.5 14.1498C5.55651 14.1497 3.93833 13.3806 2.78613 12.2084L2.56055 11.9681C2.12341 11.4767 1.76418 10.9246 1.48926 10.3373L1.3584 10.0404C1.25353 9.78512 1.3756 9.49311 1.63086 9.38806C1.8541 9.29648 2.10559 9.37801 2.23535 9.57068L2.2832 9.66052C2.5289 10.2574 2.87436 10.8159 3.30762 11.3031L3.49902 11.5072C4.47075 12.4959 5.83522 13.1497 7.5 13.1498C10.9398 13.1496 13.1502 10.3355 13.1504 7.50037C13.1504 4.66507 10.94 1.85018 7.5 1.84998C4.88974 1.85016 3.52024 3.66593 2.87891 4.79236L2.76758 5.00037H4.5C4.77614 5.00037 5 5.22422 5 5.50037C4.9998 5.77634 4.77602 6.00037 4.5 6.00037H1.5C1.22398 6.00037 1.0002 5.77634 1 5.50037V2.50037C1 2.22422 1.22386 2.00037 1.5 2.00037C1.77614 2.00037 2 2.22422 2 2.50037V4.31189L2.00098 4.31091C2.70613 3.06863 4.3361 0.850158 7.5 0.849976ZM7.5 4.00037C7.77614 4.00037 8 4.22422 8 4.50037V7.29333L9.85352 9.14685L9.91797 9.22498C10.046 9.41903 10.0243 9.68309 9.85352 9.85388C9.68269 10.0245 9.41861 10.0463 9.22461 9.91833L9.14648 9.85388L7.14648 7.85388C7.0528 7.7602 7.00009 7.63285 7 7.50037V4.50037C7 4.22422 7.22386 4.00037 7.5 4.00037Z"
fill="currentColor"
/>
</svg>
);
}import { RxCounterClockwiseClock } from "react-icons/rx";
export function Example() {
return <RxCounterClockwiseClock className="size-5" />;
}<svg
fill="none"
viewBox="0 0 15 15"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.5 0.849976C11.5626 0.850176 14.1504 4.18587 14.1504 7.50037C14.1502 10.8147 11.5624 14.1496 7.5 14.1498C5.55651 14.1497 3.93833 13.3806 2.78613 12.2084L2.56055 11.9681C2.12341 11.4767 1.76418 10.9246 1.48926 10.3373L1.3584 10.0404C1.25353 9.78512 1.3756 9.49311 1.63086 9.38806C1.8541 9.29648 2.10559 9.37801 2.23535 9.57068L2.2832 9.66052C2.5289 10.2574 2.87436 10.8159 3.30762 11.3031L3.49902 11.5072C4.47075 12.4959 5.83522 13.1497 7.5 13.1498C10.9398 13.1496 13.1502 10.3355 13.1504 7.50037C13.1504 4.66507 10.94 1.85018 7.5 1.84998C4.88974 1.85016 3.52024 3.66593 2.87891 4.79236L2.76758 5.00037H4.5C4.77614 5.00037 5 5.22422 5 5.50037C4.9998 5.77634 4.77602 6.00037 4.5 6.00037H1.5C1.22398 6.00037 1.0002 5.77634 1 5.50037V2.50037C1 2.22422 1.22386 2.00037 1.5 2.00037C1.77614 2.00037 2 2.22422 2 2.50037V4.31189L2.00098 4.31091C2.70613 3.06863 4.3361 0.850158 7.5 0.849976ZM7.5 4.00037C7.77614 4.00037 8 4.22422 8 4.50037V7.29333L9.85352 9.14685L9.91797 9.22498C10.046 9.41903 10.0243 9.68309 9.85352 9.85388C9.68269 10.0245 9.41861 10.0463 9.22461 9.91833L9.14648 9.85388L7.14648 7.85388C7.0528 7.7602 7.00009 7.63285 7 7.50037V4.50037C7 4.22422 7.22386 4.00037 7.5 4.00037Z"
fill="currentColor"
/>
</svg>"Counter Clockwise Clock" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.