Drawing Pin

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

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

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

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

.ai-drawing-pin-icon .pin {
  transform-box: view-box;
  transform-origin: 7.5px 7.5px;
}

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

@keyframes ai-drawing-pin-motion {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="pin" d="M9.62103 1.13601C9.81625 0.940789 10.1328 0.940868 10.3281 1.13601L13.8642 4.67117C14.0593 4.86631 14.0591 5.18291 13.8642 5.3782C13.6689 5.57346 13.3524 5.57346 13.1572 5.3782L12.5038 4.72586L8.86712 9.57449L9.97454 10.6819C10.1698 10.8772 10.1698 11.1937 9.97454 11.3889C9.77928 11.5841 9.46275 11.5842 9.26751 11.3889L6.7929 8.91336V8.91433L3.5224 12.1848C3.32718 12.3799 3.01058 12.3799 2.81536 12.1848C2.62016 11.9896 2.62028 11.6731 2.81536 11.4778L6.08587 8.2073V8.20632L3.61126 5.73171C3.41601 5.53645 3.416 5.21994 3.61126 5.02468C3.80656 4.82984 4.12317 4.82956 4.31829 5.02468L5.42572 6.13308L10.2743 2.49636L9.62103 1.84304C9.42592 1.64781 9.42592 1.33124 9.62103 1.13601ZM6.13958 6.84695L8.15326 8.86062L11.79 4.01101L10.9882 3.21023L6.13958 6.84695Z" fill="currentColor"/>
      </svg>
    </>
  );
}