Double Arrow Right

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

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

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

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

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

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

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

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

@keyframes ai-double-arrow-right-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="M2.14669 3.14669C2.31756 2.97583 2.58152 2.95407 2.7756 3.08224L2.85372 3.14669L6.85372 7.14669C7.04899 7.34195 7.04899 7.65846 6.85372 7.85372L2.85372 11.8537L2.7756 11.9182C2.58152 12.0463 2.31756 12.0246 2.14669 11.8537C1.97583 11.6829 1.95407 11.4189 2.08224 11.2248L2.14669 11.1467L5.79318 7.50021L2.14669 3.85372L2.08224 3.7756C1.95407 3.58152 1.97583 3.31756 2.14669 3.14669Z" fill="currentColor"/>
        <path className="chev chev-2" d="M8.14669 3.14669C8.31756 2.97583 8.58152 2.95407 8.7756 3.08224L8.85372 3.14669L12.8537 7.14669C13.049 7.34195 13.049 7.65846 12.8537 7.85372L8.85372 11.8537L8.7756 11.9182C8.58152 12.0463 8.31756 12.0246 8.14669 11.8537C7.97583 11.6829 7.95407 11.4189 8.08224 11.2248L8.14669 11.1467L11.7932 7.50021L8.14669 3.85372L8.08224 3.7756C7.95407 3.58152 7.97583 3.31756 8.14669 3.14669Z" fill="currentColor"/>
      </svg>
    </>
  );
}