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

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

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

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

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

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

@keyframes ai-notion-logo-tilt {
  0%, 100% { transform: rotate(0); }
  35% { transform: rotate(-4deg); }
  70% { transform: rotate(4deg); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="logo" d="M9.32544 0.781257C10.2448 0.702402 10.482 0.755043 11.0598 1.17481L13.4495 2.8545C13.8434 3.14304 13.9747 3.22173 13.9749 3.53614V12.749C13.9749 13.3264 13.7648 13.6684 13.0295 13.7207L4.33521 14.2451C3.7832 14.2715 3.5198 14.1929 3.23071 13.8252L1.47095 11.542C1.15567 11.1218 1.02471 10.8073 1.02466 10.4395V2.25001C1.02478 1.77803 1.23559 1.38431 1.83911 1.33204L9.32544 0.781257ZM4.12427 4.32423C3.80923 4.3507 3.70435 4.50848 3.70435 4.84962V12.6699C3.70435 13.0903 3.91419 13.2477 4.38696 13.2217L12.5559 12.749C13.0289 12.723 13.0823 12.4342 13.0823 12.0928V4.32423C13.0823 3.98339 12.9508 3.79905 12.6614 3.8252L4.12427 4.32423ZM11.7688 5.26856C11.8212 5.50502 11.7684 5.74101 11.5315 5.76758L11.1379 5.84669V11.6201C10.7963 11.8037 10.4815 11.9091 10.219 11.9092C9.79864 11.9092 9.69295 11.7781 9.37817 11.3848L6.80298 7.34278V11.2529L7.61841 11.4375C7.61819 11.4543 7.60603 11.909 6.96118 11.9092L5.14868 12.0147C5.09607 11.9096 5.14878 11.6475 5.33228 11.5947L5.80591 11.4629V6.29298L5.14868 6.24024C5.09606 6.00389 5.2273 5.66344 5.59497 5.63673L7.53931 5.50489L10.219 9.59962V5.97755L9.5354 5.89942C9.48299 5.61051 9.69281 5.40024 9.95532 5.37403L11.7688 5.26856ZM9.64087 1.51563L2.44263 2.04102C2.18055 2.06716 2.12818 2.19857 2.23267 2.30372L3.25806 3.11719C3.67766 3.45799 3.83535 3.43148 4.62329 3.37891L12.0569 2.93262C12.214 2.93262 12.0844 2.77691 12.0315 2.75001L10.7961 1.85743C10.5596 1.67381 10.2448 1.46305 9.64087 1.51563Z" fill="currentColor"/>
      </svg>
    </>
  );
}