← Back

Group

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
FlagDescription
--dest <dir>Destination directory (default: components/animated-icons)

Or copy the component with the CLI

CLI
npx @svg-animated-icons/cli add group --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 GroupIcon({ disableHover, className }: Props) {
  const classes = [
    "ai-group-icon",
    disableHover ? "no-hover" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");

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

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

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

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

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

@keyframes ai-group-expand {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="group" d="M1.44995 10.95C1.72609 10.95 1.94995 11.1738 1.94995 11.45V12.95H3.44995C3.72609 12.95 3.94995 13.1738 3.94995 13.45C3.94995 13.7261 3.72609 13.95 3.44995 13.95H1.44995C1.17381 13.95 0.949951 13.7261 0.949951 13.45V11.45C0.949951 11.1738 1.17381 10.95 1.44995 10.95ZM8.94995 12.95C9.22609 12.95 9.44995 13.1738 9.44995 13.45C9.44995 13.7261 9.22609 13.95 8.94995 13.95H5.94995C5.67381 13.95 5.44995 13.7261 5.44995 13.45C5.44995 13.1738 5.67381 12.95 5.94995 12.95H8.94995ZM13.45 10.95C13.7261 10.95 13.95 11.1738 13.95 11.45V13.45C13.9499 13.7261 13.7261 13.9499 13.45 13.95H11.45C11.1738 13.95 10.95 13.7261 10.95 13.45C10.95 13.1738 11.1738 12.95 11.45 12.95H12.949L12.95 11.45C12.95 11.1738 13.1738 10.95 13.45 10.95ZM1.44995 5.44995C1.72609 5.44995 1.94995 5.67381 1.94995 5.94995V8.94995C1.94995 9.22609 1.72609 9.44995 1.44995 9.44995C1.17381 9.44995 0.949951 9.22609 0.949951 8.94995V5.94995C0.949951 5.67381 1.17381 5.44995 1.44995 5.44995ZM13.45 5.44995C13.7261 5.44995 13.95 5.67381 13.95 5.94995V8.94995C13.95 9.22609 13.7261 9.44995 13.45 9.44995C13.1738 9.44995 12.95 9.22609 12.95 8.94995V5.94995C12.95 5.67381 13.1738 5.44995 13.45 5.44995ZM3.44995 0.949951C3.72609 0.949951 3.94995 1.17381 3.94995 1.44995C3.94995 1.72609 3.72609 1.94995 3.44995 1.94995H1.94995V3.44995C1.94995 3.72609 1.72609 3.94995 1.44995 3.94995C1.17382 3.94994 0.949953 3.72609 0.949951 3.44995V1.44995C0.949951 1.31734 1.00267 1.1902 1.09644 1.09644C1.1902 1.00267 1.31734 0.949951 1.44995 0.949951H3.44995ZM13.449 0.949951C13.7251 0.949951 13.95 1.17381 13.95 1.44995V3.44995C13.95 3.72609 13.7261 3.94994 13.45 3.94995C13.1738 3.94995 12.95 3.72609 12.95 3.44995V1.94995H11.45C11.1738 1.94995 10.95 1.72609 10.95 1.44995C10.95 1.17381 11.1738 0.949951 11.45 0.949951H13.449ZM8.94995 0.949951C9.22609 0.949951 9.44995 1.17381 9.44995 1.44995C9.44995 1.72609 9.22609 1.94995 8.94995 1.94995H5.94995C5.67381 1.94995 5.44995 1.72609 5.44995 1.44995C5.44995 1.17381 5.67381 0.949951 5.94995 0.949951H8.94995Z" fill="currentColor"/>
      </svg>
    </>
  );
}