Download

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

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

.ai-download-icon * {
  transform-box: fill-box;
}

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

.ai-download-icon .arrow {
  transform-origin: center;
}

.ai-download-icon:not(.no-hover):hover .arrow {
  animation: ai-download-motion 700ms ease-in-out;
}

@keyframes ai-download-motion {
  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="tray" d="M12.5 10.0002C12.7761 10.0002 13 10.224 13 10.5002V12.0002C12.9999 13.1042 12.106 14.0002 11.001 14.0002H3.99609C2.89012 14 2.0001 13.103 2 12.0002V10.5002C2 10.224 2.22386 10.0002 2.5 10.0002C2.77614 10.0002 3 10.224 3 10.5002V12.0002C3.0001 12.5539 3.44557 13 3.99609 13.0002H11.001C11.5527 13.0002 11.9999 12.5529 12 12.0002V10.5002C12 10.224 12.2239 10.0002 12.5 10.0002Z" fill="currentColor"/>
        <path className="arrow" d="M7.5 1.04999C7.74853 1.04999 7.9502 1.25165 7.9502 1.50018V8.41327L10.1816 6.18182C10.3574 6.00609 10.6426 6.00609 10.8184 6.18182C10.994 6.35757 10.9941 6.64283 10.8184 6.81854L7.81836 9.81854C7.64264 9.99413 7.35734 9.99416 7.18164 9.81854L4.18164 6.81854C4.00595 6.64285 4.00603 6.35757 4.18164 6.18182C4.35738 6.00609 4.64262 6.00609 4.81836 6.18182L7.0498 8.41327V1.50018C7.0498 1.25167 7.25149 1.05001 7.5 1.04999Z" fill="currentColor"/>
      </svg>
    </>
  );
}