Drawing Pin Filled

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

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

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

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

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

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

@keyframes ai-drawing-pin-filled-tilt {
  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.62097 1.13601C9.81619 0.940789 10.1327 0.940868 10.328 1.13601L13.8641 4.67117C14.0593 4.86631 14.059 5.18291 13.8641 5.3782C13.6689 5.57346 13.3524 5.57346 13.1571 5.3782L12.5038 4.72586L8.86706 9.57449L9.97448 10.6819C10.1697 10.8772 10.1697 11.1937 9.97448 11.3889C9.77921 11.5841 9.46269 11.5842 9.26745 11.3889L6.79284 8.91336V8.91433L3.52233 12.1848C3.32712 12.3799 3.01052 12.3799 2.8153 12.1848C2.6201 11.9896 2.62022 11.6731 2.8153 11.4778L6.08581 8.2073V8.20632L3.6112 5.73171C3.41594 5.53645 3.41594 5.21994 3.6112 5.02468C3.8065 4.82984 4.12311 4.82956 4.31823 5.02468L5.42566 6.13308L10.2743 2.49636L9.62097 1.84304C9.42586 1.64781 9.42586 1.33124 9.62097 1.13601Z" fill="currentColor"/>
        <path className="pin-2" d="M9.62097 1.13601C9.81619 0.940789 10.1327 0.940868 10.328 1.13601L13.8641 4.67117C14.0593 4.86631 14.059 5.18291 13.8641 5.3782C13.6689 5.57346 13.3524 5.57346 13.1571 5.3782L12.5038 4.72586L8.86706 9.57449L9.97448 10.6819C10.1697 10.8772 10.1697 11.1937 9.97448 11.3889C9.77921 11.5841 9.46269 11.5842 9.26745 11.3889L6.79284 8.91336V8.91433L3.52233 12.1848C3.32712 12.3799 3.01052 12.3799 2.8153 12.1848C2.6201 11.9896 2.62022 11.6731 2.8153 11.4778L6.08581 8.2073V8.20632L3.6112 5.73171C3.41594 5.53645 3.41594 5.21994 3.6112 5.02468C3.8065 4.82984 4.12311 4.82956 4.31823 5.02468L5.42566 6.13308L10.2743 2.49636L9.62097 1.84304C9.42586 1.64781 9.42586 1.33124 9.62097 1.13601Z" fill="currentColor"/>
      </svg>
    </>
  );
}