Dashboard

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

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

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

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

.ai-dashboard-icon .tile { transform-origin: center; }

.ai-dashboard-icon:not(.no-hover):hover .tile-tl { animation: ai-dashboard-tl 700ms ease-in-out; }
.ai-dashboard-icon:not(.no-hover):hover .tile-tr { animation: ai-dashboard-tr 700ms ease-in-out; }
.ai-dashboard-icon:not(.no-hover):hover .tile-bl { animation: ai-dashboard-bl 700ms ease-in-out; }
.ai-dashboard-icon:not(.no-hover):hover .tile-br { animation: ai-dashboard-br 700ms ease-in-out; }

@keyframes ai-dashboard-tl { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-1px, -1px); } }
@keyframes ai-dashboard-tr { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1px, -1px); } }
@keyframes ai-dashboard-bl { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-1px, 1px); } }
@keyframes ai-dashboard-br { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1px, 1px); } }
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="tile tile-tl" fillRule="evenodd" fill="currentColor" d="M5.24996 0.999963C5.47841 0.999746 5.6761 1.00007 5.85055 1.04196C6.39869 1.17373 6.8272 1.60123 6.95895 2.14938C7.00083 2.32383 7.00018 2.52151 6.99996 2.74996V5.24996C7.00018 5.47841 7.00083 5.6761 6.95895 5.85055C6.82722 6.39882 6.39882 6.82722 5.85055 6.95895C5.6761 7.00083 5.47841 7.00018 5.24996 6.99996H2.74996C2.52151 7.00018 2.32383 7.00083 2.14938 6.95895C1.60123 6.8272 1.17373 6.39869 1.04196 5.85055C1.00007 5.6761 0.999746 5.47841 0.999963 5.24996V2.74996C0.999746 2.52151 1.00007 2.32383 1.04196 2.14938C1.17375 1.60136 1.60136 1.17375 2.14938 1.04196C2.32383 1.00007 2.52151 0.999746 2.74996 0.999963H5.24996ZM2.79977 1.99996C2.49333 1.99997 2.42679 2.00339 2.38375 2.01364C2.20093 2.05753 2.05753 2.20093 2.01364 2.38375C2.00339 2.42679 1.99997 2.49333 1.99996 2.79977V5.20016C1.99996 5.50783 2.0033 5.57412 2.01364 5.61715C2.05762 5.79982 2.20104 5.94243 2.38375 5.98629C2.42679 5.99654 2.49326 5.99996 2.79977 5.99996H5.20016C5.50783 5.99996 5.57412 5.99662 5.61715 5.98629C5.79968 5.94233 5.94233 5.79968 5.98629 5.61715C5.99662 5.57412 5.99996 5.50783 5.99996 5.20016V2.79977C5.99996 2.49326 5.99654 2.42679 5.98629 2.38375C5.94243 2.20104 5.79982 2.05762 5.61715 2.01364C5.57412 2.0033 5.50783 1.99996 5.20016 1.99996H2.79977Z"/>
        <path className="tile tile-tr" fillRule="evenodd" fill="currentColor" d="M12.25 0.999963C12.4784 0.999746 12.6761 1.00007 12.8505 1.04196C13.3987 1.17373 13.8272 1.60123 13.9589 2.14938C14.0008 2.32383 14.0002 2.52151 14 2.74996V5.24996C14.0002 5.47841 14.0008 5.6761 13.9589 5.85055C13.8272 6.39882 13.3988 6.82722 12.8505 6.95895C12.6761 7.00083 12.4784 7.00018 12.25 6.99996H9.74996C9.52151 7.00018 9.32383 7.00083 9.14938 6.95895C8.60123 6.8272 8.17373 6.39869 8.04196 5.85055C8.00007 5.6761 7.99975 5.47841 7.99996 5.24996V2.74996C7.99975 2.52151 8.00007 2.32383 8.04196 2.14938C8.17375 1.60136 8.60136 1.17375 9.14938 1.04196C9.32383 1.00007 9.52151 0.999746 9.74996 0.999963H12.25ZM9.79977 1.99996C9.49333 1.99997 9.42679 2.00339 9.38375 2.01364C9.20093 2.05753 9.05753 2.20093 9.01364 2.38375C9.00339 2.42679 8.99997 2.49333 8.99996 2.79977V5.20016C8.99996 5.50783 9.0033 5.57412 9.01364 5.61715C9.05762 5.79982 9.20104 5.94243 9.38375 5.98629C9.42679 5.99654 9.49326 5.99996 9.79977 5.99996H12.2002C12.5078 5.99996 12.5741 5.99662 12.6172 5.98629C12.7997 5.94233 12.9423 5.79968 12.9863 5.61715C12.9966 5.57412 13 5.50783 13 5.20016V2.79977C13 2.49326 12.9965 2.42679 12.9863 2.38375C12.9424 2.20104 12.7998 2.05762 12.6172 2.01364C12.5741 2.0033 12.5078 1.99996 12.2002 1.99996H9.79977Z"/>
        <path className="tile tile-bl" fillRule="evenodd" fill="currentColor" d="M5.24996 7.99996C5.47841 7.99975 5.6761 8.00007 5.85055 8.04196C6.39869 8.17373 6.8272 8.60123 6.95895 9.14938C7.00083 9.32383 7.00018 9.52151 6.99996 9.74996V12.25C7.00018 12.4784 7.00083 12.6761 6.95895 12.8505C6.82722 13.3988 6.39882 13.8272 5.85055 13.9589C5.6761 14.0008 5.47841 14.0002 5.24996 14H2.74996C2.52151 14.0002 2.32383 14.0008 2.14938 13.9589C1.60123 13.8272 1.17373 13.3987 1.04196 12.8505C1.00007 12.6761 0.999746 12.4784 0.999963 12.25V9.74996C0.999746 9.52151 1.00007 9.32383 1.04196 9.14938C1.17375 8.60136 1.60136 8.17375 2.14938 8.04196C2.32383 8.00007 2.52151 7.99975 2.74996 7.99996H5.24996ZM2.79977 8.99996C2.49333 8.99997 2.42679 9.00339 2.38375 9.01364C2.20093 9.05753 2.05753 9.20093 2.01364 9.38375C2.00339 9.42679 1.99997 9.49333 1.99996 9.79977V12.2002C1.99996 12.5078 2.0033 12.5741 2.01364 12.6172C2.05762 12.7998 2.20104 12.9424 2.38375 12.9863C2.42679 12.9965 2.49326 13 2.79977 13H5.20016C5.50783 13 5.57412 12.9966 5.61715 12.9863C5.79968 12.9423 5.94233 12.7997 5.98629 12.6172C5.99662 12.5741 5.99996 12.5078 5.99996 12.2002V9.79977C5.99996 9.49326 5.99654 9.42679 5.98629 9.38375C5.94243 9.20104 5.79982 9.05762 5.61715 9.01364C5.57412 9.0033 5.50783 8.99996 5.20016 8.99996H2.79977Z"/>
        <path className="tile tile-br" fillRule="evenodd" fill="currentColor" d="M12.25 7.99996C12.4784 7.99975 12.6761 8.00007 12.8505 8.04196C13.3987 8.17373 13.8272 8.60123 13.9589 9.14938C14.0008 9.32383 14.0002 9.52151 14 9.74996V12.25C14.0002 12.4784 14.0008 12.6761 13.9589 12.8505C13.8272 13.3988 13.3988 13.8272 12.8505 13.9589C12.6761 14.0008 12.4784 14.0002 12.25 14H9.74996C9.52151 14.0002 9.32383 14.0008 9.14938 13.9589C8.60123 13.8272 8.17373 13.3987 8.04196 12.8505C8.00007 12.6761 7.99975 12.4784 7.99996 12.25V9.74996C7.99975 9.52151 8.00007 9.32383 8.04196 9.14938C8.17375 8.60136 8.60136 8.17375 9.14938 8.04196C9.32383 8.00007 9.52151 7.99975 9.74996 7.99996H12.25ZM9.79977 8.99996C9.49333 8.99997 9.42679 9.00339 9.38375 9.01364C9.20093 9.05753 9.05753 9.20093 9.01364 9.38375C9.00339 9.42679 8.99997 9.49333 8.99996 9.79977V12.2002C8.99996 12.5078 9.0033 12.5741 9.01364 12.6172C9.05762 12.7998 9.20104 12.9424 9.38375 12.9863C9.42679 12.9965 9.49326 13 9.79977 13H12.2002C12.5078 13 12.5741 12.9966 12.6172 12.9863C12.7997 12.9423 12.9423 12.7997 12.9863 12.6172C12.9966 12.5741 13 12.5078 13 12.2002V9.79977C13 9.49326 12.9965 9.42679 12.9863 9.38375C12.9424 9.20104 12.7998 9.05762 12.6172 9.01364C12.5741 9.0033 12.5078 8.99996 12.2002 8.99996H9.79977Z"/>
      </svg>
    </>
  );
}