Copy code import type { SVGProps } from "react";
export type IconProps = {
size?: number | string;
color?: string;
className?: string;
} & SVGProps<SVGSVGElement>;
export const Patreon = ({
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="M20.99 7.7c0 .16.01.31 0 .47-.01.18-.04.36-.07.54-.05.25-.1.51-.17.76-.05.18-.11.37-.18.54-.16.38-.33.76-.56 1.1-.14.21-.28.42-.43.63-.06.08-.12.15-.18.22-.11.12-.22.24-.34.35-.18.16-.37.31-.56.45-.18.12-.38.22-.56.34-.2.13-.43.19-.65.29-.19.09-.4.12-.59.19-.25.09-.51.11-.77.17-.27.06-.55.1-.82.16-.22.04-.45.1-.67.15-.13.03-.25.05-.38.09-.15.05-.3.11-.45.16-.1.04-.21.06-.3.11-.14.07-.27.16-.41.23-.23.12-.42.29-.59.48-.15.16-.27.34-.4.52-.21.29-.35.62-.48.96-.13.33-.24.66-.36.99-.11.31-.21.63-.33.94-.1.27-.2.54-.31.81-.15.39-.34.76-.56 1.11-.17.27-.34.52-.57.74-.18.17-.36.35-.58.47s-.45.22-.7.28q-.45.09-.9.06c-.11 0-.23-.04-.34-.06a1 1 0 0 1-.2-.04c-.06-.02-.11-.05-.16-.08-.15-.07-.31-.13-.45-.22q-.255-.18-.48-.39c-.28-.25-.48-.55-.67-.87-.13-.21-.24-.43-.34-.66-.1-.22-.17-.45-.25-.67-.06-.18-.12-.35-.17-.53-.05-.16-.08-.32-.12-.48-.04-.15-.07-.3-.11-.45-.06-.27-.11-.54-.16-.8-.02-.11-.05-.23-.07-.34l-.09-.51c-.02-.13-.05-.25-.06-.38l-.06-.42-.06-.36c-.02-.11-.03-.23-.04-.34-.02-.12-.03-.24-.05-.36-.01-.12-.03-.24-.04-.35-.02-.14-.03-.27-.05-.41 0-.05-.01-.1-.01-.15-.02-.2-.03-.4-.05-.6 0-.12-.02-.25-.02-.37-.01-.19-.02-.39-.02-.58 0-.32-.01-.64-.01-.96 0-.19 0-.38.01-.56.01-.2.04-.39.06-.59.02-.16.03-.31.05-.47.01-.09.03-.17.05-.26.05-.22.09-.43.14-.65.04-.15.09-.3.13-.46.08-.29.2-.55.31-.83.05-.12.12-.24.18-.36.09-.16.18-.33.29-.48.13-.19.27-.37.41-.55.14-.17.28-.33.44-.48.12-.12.26-.22.38-.33.13-.11.25-.22.38-.31q.315-.225.63-.42c.12-.08.26-.15.39-.22.2-.11.4-.22.61-.32.13-.06.26-.12.4-.18.34-.14.68-.28 1.03-.41.23-.08.47-.15.7-.23.12-.04.24-.08.36-.11.1-.03.2-.04.3-.07.11-.02.22-.06.33-.08.15-.03.3-.05.45-.07.17-.03.34-.05.51-.08.07 0 .14 0 .21-.01.23-.01.47-.03.71-.04.09 0 .19-.03.28 0 .22.04.44 0 .67.02.21.01.43.04.64.06.15.02.3.05.46.07.13.02.27.03.4.05l.32.06c.23.05.46.1.69.16.2.05.4.14.6.18.23.06.45.17.68.24s.43.21.65.3c.26.11.48.27.71.43.17.12.34.25.5.38.23.2.46.42.68.64.13.13.24.28.36.42.19.23.33.5.46.76.11.21.2.44.27.66.06.19.08.39.12.58.05.21.05.42.04.63Z" />
</svg>
);Default · 24px · currentColor
UI examples Size, inline, toolbar, and dark UI — works for any icon style.
Patreon Icon — Free SVG Component The Patreon 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 Patreon icon in React Import the Patreon 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: <Patreon 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: brands Browse more brands icons in the Next Icons library. All icons are hand-crafted SVGs optimized for web performance.