Double Arrow Left

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 double-arrow-left --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 DoubleArrowLeftIcon({ disableHover, className }: Props) {
  const classes = [
    "ai-double-arrow-left-icon",
    disableHover ? "no-hover" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");

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

.ai-double-arrow-left-icon * {
  transform-box: fill-box;
}

.ai-double-arrow-left-icon.no-hover * {
  transform: none;
  opacity: 1;
  animation: none;
}

.ai-double-arrow-left-icon .chev { transform-origin: center; }

.ai-double-arrow-left-icon:not(.no-hover):hover .chev-1 {
  animation: ai-double-arrow-left-1 700ms ease-in-out 0ms;
}

.ai-double-arrow-left-icon:not(.no-hover):hover .chev-2 {
  animation: ai-double-arrow-left-2 700ms ease-in-out 120ms;
}

@keyframes ai-double-arrow-left-1 {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-1.5px); }
}

@keyframes ai-double-arrow-left-2 {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-1.5px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="chev chev-1" d="M6.22457 3.08224C6.41865 2.95407 6.68261 2.97583 6.85348 3.14669C7.02434 3.31756 7.04609 3.58152 6.91793 3.7756L6.85348 3.85372L3.20699 7.50021L6.85348 11.1467L6.91793 11.2248C7.04609 11.4189 7.02434 11.6829 6.85348 11.8537C6.68261 12.0246 6.41865 12.0463 6.22457 11.9182L6.14645 11.8537L2.14645 7.85372C1.95118 7.65846 1.95118 7.34195 2.14645 7.14669L6.14645 3.14669L6.22457 3.08224Z" fill="currentColor"/>
        <path className="chev chev-2" d="M12.2246 3.08224C12.4187 2.95407 12.6826 2.97583 12.8535 3.14669C13.0243 3.31756 13.0461 3.58152 12.9179 3.7756L12.8535 3.85372L9.20699 7.50021L12.8535 11.1467L12.9179 11.2248C13.0461 11.4189 13.0243 11.6829 12.8535 11.8537C12.6826 12.0246 12.4187 12.0463 12.2246 11.9182L12.1464 11.8537L8.14645 7.85372C7.95118 7.65846 7.95118 7.34195 8.14645 7.14669L12.1464 3.14669L12.2246 3.08224Z" fill="currentColor"/>
      </svg>
    </>
  );
}