Layers

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

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

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

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

.ai-layers-icon .top,
.ai-layers-icon .middle {
  transform-origin: center;
}

.ai-layers-icon:not(.no-hover):hover .top {
  animation: ai-layers-stack-top 700ms ease-in-out;
}

.ai-layers-icon:not(.no-hover):hover .middle {
  animation: ai-layers-stack-middle 700ms ease-in-out;
}

@keyframes ai-layers-stack-top {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

@keyframes ai-layers-stack-middle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="bottom" d="M12.8378 10.2774C13.0576 10.2018 13.3077 10.2882 13.4306 10.4962C13.5531 10.7041 13.508 10.9642 13.3358 11.1202L13.2538 11.1808L7.75381 14.4308C7.59714 14.5231 7.40267 14.5231 7.246 14.4308L1.746 11.1808L1.66397 11.1202C1.49183 10.9643 1.44671 10.704 1.56924 10.4962C1.69212 10.2882 1.94221 10.2018 2.16202 10.2774L2.25381 10.3194L7.49991 13.419L12.746 10.3194L12.8378 10.2774Z" fill="currentColor"/>
        <path className="middle" d="M12.8378 7.27743C13.0576 7.20179 13.3077 7.28825 13.4306 7.49618C13.5531 7.70407 13.508 7.96425 13.3358 8.12021L13.2538 8.18075L7.75381 11.4308C7.59714 11.5231 7.40267 11.5231 7.246 11.4308L1.746 8.18075L1.66397 8.12021C1.49183 7.96425 1.44671 7.70405 1.56924 7.49618C1.69212 7.28825 1.94221 7.20183 2.16202 7.27743L2.25381 7.31942L7.49991 10.419L12.746 7.31942L12.8378 7.27743Z" fill="currentColor"/>
        <path className="top" d="M7.30557 0.789151C7.45005 0.728211 7.6165 0.738495 7.75381 0.819425L13.2538 4.06942C13.4061 4.15938 13.4999 4.32326 13.4999 4.50009C13.4999 4.67692 13.4061 4.8408 13.2538 4.93075L7.75381 8.18075C7.59714 8.2731 7.40267 8.27312 7.246 8.18075L1.746 4.93075C1.5938 4.84079 1.49991 4.67689 1.49991 4.50009C1.49991 4.32328 1.5938 4.15939 1.746 4.06942L7.246 0.819425L7.30557 0.789151ZM2.98233 4.50009L7.49991 7.16903L12.0165 4.50009L7.49991 1.83017L2.98233 4.50009Z" fill="currentColor"/>
      </svg>
    </>
  );
}