Lock Closed

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

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

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

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

.ai-lock-closed-icon .shackle {
  transform-box: view-box;
  transform-origin: 10.5px 6px;
}

.ai-lock-closed-icon:not(.no-hover):hover .shackle {
  animation: ai-lock-closed-open-close 700ms ease-in-out;
}

@keyframes ai-lock-closed-open-close {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(30deg); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="body" d="M3 5.99979H12C12.5522 5.99979 12.9999 6.4476 13 6.99979V12.9998C13 13.5521 12.5523 13.9998 12 13.9998H3C2.44772 13.9998 2 13.5521 2 12.9998V6.99979C2.00011 6.4476 2.44778 5.99979 3 5.99979ZM3 12.9998H12V6.99979H3V12.9998Z" fill="currentColor"/>
        <path className="shackle" d="M7.50098 0.97831C8.5754 0.97831 9.46932 1.32269 10.0908 1.99198C10.7073 2.65592 11 3.57934 11 4.63358V5.99979H10V4.63358C10 3.75741 9.75854 3.10258 9.3584 2.67167C8.96322 2.24619 8.35692 1.97831 7.50098 1.97831C6.64571 1.9784 6.0396 2.24726 5.64355 2.67362C5.24259 3.10537 5.00009 3.76007 5 4.63554V5.99979H4V4.63554C4.00009 3.58126 4.29322 2.65732 4.91016 1.99296C5.53211 1.32327 6.42651 0.978401 7.50098 0.97831Z" fill="currentColor"/>
      </svg>
    </>
  );
}