Counter Clockwise Clock

Install

npm install @svg-animated-icons/react

CLI

Copy an icon component straight into your project — shadcn-style. Replace {icon} with an icon name like arrow-left.

terminal

npx @svg-animated-icons/cli add {icon} --react

Flag	Description
`--dest <dir>`	Destination directory (default: components/animated-icons)

Or copy the component with the CLI

CLI

npx @svg-animated-icons/cli add counter-clockwise-clock --react

Code

React

// Generated by @svg-animated-icons/cli
// You own this file — edit it freely.

import React from "react";

type Props = {
  disableHover?: boolean;
  className?: string;
};

export function CounterClockwiseClockIcon({ disableHover, className }: Props) {
  const classes = [
    "ai-counter-clockwise-clock-icon",
    disableHover ? "no-hover" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <>
      <style>{`
.ai-counter-clockwise-clock-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  cursor: pointer;
  overflow: visible;
}

.ai-counter-clockwise-clock-icon * {
  transform-box: fill-box;
}

.ai-counter-clockwise-clock-icon.no-hover * {
  transform: none;
  opacity: 1;
  animation: none;
}

.ai-counter-clockwise-clock-icon .minute {
  transform-box: view-box;
  transform-origin: 7.5px 7.5px;
}

.ai-counter-clockwise-clock-icon:not(.no-hover):hover .minute {
  animation: ai-counter-clockwise-clock-sweep 700ms ease-in-out;
}

@keyframes ai-counter-clockwise-clock-sweep {
  from { transform: rotate(0); }
  to { transform: rotate(-360deg); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="outer" 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.849976Z" fill="currentColor"/>
        <path className="hour" d="M7.5 7.5L9.85352 9.14685" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/>
        <path className="minute" d="M7.5 7.5V4.5" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/>
      </svg>
    </>
  );
}