Double Arrow Up

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

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

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

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

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

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

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

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

@keyframes ai-double-arrow-up-2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-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="M7.14669 8.14645C7.34195 7.95118 7.65846 7.95118 7.85372 8.14645L11.8537 12.1464L11.9182 12.2246C12.0463 12.4186 12.0246 12.6826 11.8537 12.8535C11.6829 13.0243 11.4189 13.0461 11.2248 12.9179L11.1467 12.8535L7.50021 9.20699L3.85372 12.8535L3.7756 12.9179C3.58152 13.0461 3.31756 13.0243 3.14669 12.8535C2.97583 12.6826 2.95407 12.4187 3.08224 12.2246L3.14669 12.1464L7.14669 8.14645Z" fill="currentColor"/>
        <path className="chev chev-2" d="M7.14669 2.14645C7.34195 1.95118 7.65846 1.95118 7.85372 2.14645L11.8537 6.14645L11.9182 6.22457C12.0463 6.41865 12.0246 6.68261 11.8537 6.85348C11.6829 7.02434 11.4189 7.04609 11.2248 6.91793L11.1467 6.85348L7.50021 3.20699L3.85372 6.85348L3.7756 6.91793C3.58152 7.04609 3.31756 7.02434 3.14669 6.85348C2.97583 6.68261 2.95407 6.41865 3.08224 6.22457L3.14669 6.14645L7.14669 2.14645Z" fill="currentColor"/>
      </svg>
    </>
  );
}