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

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

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

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

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

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

@keyframes ai-pin-left-push {
  0%, 50%, 100% { transform: translateX(0); }
  25%, 75% { transform: translateX(-1px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="arrow" d="M5.12427 7.7478C5.02515 7.59795 5.02515 7.40156 5.12427 7.25171L5.18189 7.1814L8.43189 3.9314C8.60764 3.75592 8.89296 3.75575 9.0686 3.9314C9.24416 4.10705 9.24405 4.39239 9.0686 4.56812L6.58716 7.04956L14.5002 7.04956C14.7486 7.04969 14.9503 7.25138 14.9504 7.49976C14.9504 7.74821 14.7487 7.94983 14.5002 7.94995L6.58716 7.94995L9.0686 10.4314L9.12622 10.5017C9.24163 10.6763 9.22219 10.9143 9.0686 11.0681C8.91481 11.2219 8.67687 11.2411 8.5022 11.1257L8.43189 11.0681L5.18189 7.81812L5.12427 7.7478Z" fill="currentColor"/>
        <path className="bar" d="M2.05005 1.49976C2.05016 1.25132 2.25178 1.04956 2.50025 1.04956C2.74862 1.04967 2.95034 1.25138 2.95044 1.49976L2.95044 13.4998C2.95044 13.7482 2.74868 13.9498 2.50024 13.95C2.25172 13.95 2.05005 13.7483 2.05005 13.4998L2.05005 1.49976Z" fill="currentColor"/>
      </svg>
    </>
  );
}