Copy code import type { SVGProps } from "react";
export type IconProps = {
size?: number | string;
color?: string;
className?: string;
} & SVGProps<SVGSVGElement>;
export const Gsap = ({
size = 24,
color = "currentColor",
className,
...props
}: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width={size}
height={size}
fill={color}
className={className}
{...props}
>
<path d="m7.83 11.76-.26 1.15c-.01.06-.08.11-.15.11H7.1s-.04.02-.05.04c-.29.99-.69 1.68-1.21 2.09-.45.35-1 .51-1.73.51-.66 0-1.1-.21-1.48-.63-.5-.55-.7-1.46-.58-2.55.22-2.05 1.29-4.12 3.34-4.12.62 0 1.11.19 1.45.57.36.41.54 1.02.54 1.82 0 .07-.06.13-.13.13h-1.5c-.05 0-.1-.05-.1-.1-.01-.55-.18-.82-.5-.82-.58 0-.91.78-1.09 1.21-.25.6-.38 1.26-.35 1.92.01.3.06.73.35.91.26.16.62.05.84-.12s.4-.48.47-.75c.01-.04.01-.07 0-.08a.1.1 0 0 0-.06-.02h-.39s-.08-.02-.11-.05a.1.1 0 0 1-.02-.09l.26-1.14c.01-.06.07-.1.13-.11s2.53 0 2.53 0h.02c.07 0 .11.07.11.14Z" />
<path d="M12.18 10.45c0 .07-.06.13-.13.13h-1.38c-.09 0-.17-.07-.17-.16q0-.6-.42-.6c-.42 0-.47.18-.47.48 0 .34.19.65.74 1.18.72.68 1.01 1.28 1 2.08-.02 1.29-.9 2.12-2.23 2.12-.68 0-1.2-.18-1.54-.54-.35-.36-.51-.9-.48-1.59 0-.07.06-.13.13-.13h1.43s.08.02.1.05q.03.045.03.09c-.02.25.03.43.13.54.06.07.15.1.26.1.26 0 .42-.19.42-.51 0-.28-.08-.53-.57-1.03-.63-.61-1.19-1.24-1.17-2.23.01-.58.24-1.1.64-1.48.43-.4 1.01-.61 1.69-.61s1.2.2 1.53.58c.32.36.47.88.46 1.54Zm4.29 4.98V8.59c.01-.07-.05-.13-.12-.13h-2.14c-.07 0-.1.06-.12.1l-3.1 6.82c-.03.08.03.17.12.17h1.5c.08 0 .13-.02.16-.08l.3-.71c.04-.09.04-.1.15-.1h1.43c.1 0 .1 0 .1.1l-.03.66c0 .07.06.13.13.13h1.51s.07-.02.1-.04c.02-.02.03-.06.03-.09Zm-2.65-2.28h-.03c-.02 0-.03-.02-.03-.04 0-.01 0-.02.01-.04l1.07-2.65s.02-.05.03-.08c.02-.04.04-.04.05-.01l-.12 2.72c-.01.1-.01.11-.11.11h-.86v-.01Zm5.69-4.69h-1.14c-.06 0-.13.03-.14.1l-1.58 6.86s0 .06.02.09c.03.03.07.05.11.05h1.42c.08 0 .13-.04.14-.1l.17-.78c.01-.06 0-.11-.06-.14-.03-.01-.05-.03-.08-.04l-.25-.13-.24-.13-.09-.05s-.03-.02-.02-.04c0-.03.02-.05.05-.05h.78c.23 0 .47-.01.69-.05 1.61-.3 2.68-1.59 2.71-3.34.03-1.5-.81-2.26-2.48-2.26Zm-.39 4.08h-.11l.45-1.98c.01-.06.01-.09-.02-.11-.05-.02-.7-.37-.7-.37-.02 0-.03-.02-.02-.04 0-.03.02-.05.05-.05h1.04c.32 0 .5.3.49.79-.01.85-.42 1.74-1.17 1.77Z" />
</svg>
);Default · 24px · currentColor
UI examples Size, inline, toolbar, and dark UI — works for any icon style.
Related languages-frameworks icons
Gsap Icon — Free SVG Component The Gsap icon is a free, open-source SVG icon component built with TypeScript for React, Next.js, Vue, Remix, Svelte, and Astro projects. No npm install or package dependency required — just copy the component code and paste it into your project.
How to use Gsap icon in React Import the Gsap component from your icons folder. Use it as a standard React component with props: size (number), color (string), className (string), and all standard SVG attributes via spread props.
Example: <Gsap size={24} color=“currentColor“ className=“shrink-0“ />
Features Zero dependencies — no package install needed TypeScript ready with full type safety Fully customizable size, color, and className Works with Tailwind CSS, styled-components, CSS modules Accessible — supports aria attributes Tree-shakeable — only import what you use MIT licensed — free for commercial use Compatible frameworks React, Next.js (App Router & Pages Router), Vue, Remix, Svelte, Astro, Nuxt, Gatsby, Vite, Angular, Qwik.
Category: languages-frameworks Browse more languages-frameworks icons in the Next Icons library. All icons are hand-crafted SVGs optimized for web performance.