Figma Logo

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

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

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

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

.ai-figma-logo-icon .logo {
  transform-origin: center;
}

.ai-figma-logo-icon:not(.no-hover):hover .logo {
  animation: ai-figma-logo-lift 700ms ease-in-out;
}

@keyframes ai-figma-logo-lift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="logo" d="M9.72778 1.0627C10.9758 1.18928 11.9502 2.24321 11.9504 3.52461L11.9377 3.77852C11.8662 4.48137 11.4989 5.09527 10.9641 5.49922C11.5625 5.95094 11.9503 6.66735 11.9504 7.47481L11.9377 7.72871C11.8107 8.9764 10.756 9.95029 9.47485 9.95039L9.22192 9.9377C8.76645 9.8914 8.34868 9.7195 8.00024 9.46016V11.425L7.98755 11.6789C7.86042 12.9265 6.80585 13.9006 5.52466 13.9006L5.27173 13.8879C4.10729 13.7695 3.18139 12.8433 3.06274 11.6789L3.05005 11.425C3.05017 10.6178 3.43642 9.90018 4.03442 9.44844C3.50058 9.04448 3.13423 8.43083 3.06274 7.72871L3.05005 7.47481C3.05017 6.66753 3.43726 5.95095 4.0354 5.49922C3.50096 5.09524 3.13423 4.48115 3.06274 3.77852L3.05005 3.52461C3.05025 2.2434 4.02394 1.18955 5.27173 1.0627L5.52466 1.05H9.47485L9.72778 1.0627ZM5.52466 9.95039C4.71035 9.9506 4.05026 10.6107 4.05005 11.425C4.05026 12.2393 4.71035 12.9004 5.52466 12.9006C6.33915 12.9006 7.00003 12.2394 7.00024 11.425V9.95039H5.52466ZM5.52466 6.0002C4.71035 6.00041 4.05026 6.6605 4.05005 7.47481C4.05015 8.28921 4.71028 8.95018 5.52466 8.95039H7.00024V6.0002H5.52466ZM9.47485 6.0002C8.66054 6.00041 8.00045 6.6605 8.00024 7.47481C8.00034 8.28921 8.66047 8.95018 9.47485 8.95039C10.2893 8.95029 10.9503 8.28928 10.9504 7.47481C10.9502 6.66043 10.2893 6.0003 9.47485 6.0002ZM8.00024 5.0002H9.47485C10.2895 5.0002 10.9504 4.33923 10.9504 3.52461C10.9502 2.71017 10.2893 2.05 9.47485 2.05H8.00024V5.0002ZM5.52466 2.05C4.71035 2.05021 4.05026 2.7103 4.05005 3.52461C4.05005 4.3391 4.71022 4.99999 5.52466 5.0002H7.00024V2.05H5.52466Z" fill="currentColor"/>
      </svg>
    </>
  );
}