Grid

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

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

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

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

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

.ai-grid-icon:not(.no-hover):hover .grid {
  animation: ai-grid-rotate 700ms ease-in-out;
}

@keyframes ai-grid-rotate {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(90deg); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="grid" d="M12.6533 1.00781C13.4097 1.08461 14 1.72334 14 2.5V12.5L13.9922 12.6533C13.9205 13.3593 13.3593 13.9205 12.6533 13.9922L12.5 14H2.5L2.34668 13.9922C1.64069 13.9205 1.07949 13.3593 1.00781 12.6533L1 12.5V2.5C1 1.72334 1.59028 1.08461 2.34668 1.00781L2.5 1H12.5L12.6533 1.00781ZM2 8V12.5C2 12.7761 2.22386 13 2.5 13H7V8H2ZM8 8V13H12.5C12.7761 13 13 12.7761 13 12.5V8H8ZM2.5 2C2.22386 2 2 2.22386 2 2.5V7H7V2H2.5ZM8 7H13V2.5C13 2.22386 12.7761 2 12.5 2H8V7Z" fill="currentColor"/>
      </svg>
    </>
  );
}