Copy code import type { SVGProps } from "react";
export type IconProps = {
size?: number | string;
color?: string;
className?: string;
} & SVGProps<SVGSVGElement>;
export const QQ = ({
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="M14.57 10.18c-.06-1.4-.97-2.52-2.45-2.52s-2.39 1.11-2.45 2.52c-.04.08-.06.17-.06.26v.04c-.1.16-.16.35-.16.56v.1c-.24.09-.55.49-.78 1.02-.29.69-.34 1.34-.1 1.46.16.09.41-.11.65-.46.09.38.33.73.66 1.01-.35.13-.57.34-.57.58 0 .39.61.71 1.37.71.68 0 1.25-.26 1.35-.59h.16c.1.34.67.59 1.36.59.76 0 1.37-.32 1.37-.71 0-.24-.23-.45-.57-.58.33-.28.56-.63.66-1.01.24.35.49.54.65.46.23-.12.19-.78-.1-1.46-.23-.54-.54-.94-.78-1.02v-.1c0-.21-.06-.4-.16-.56v-.04c0-.1-.02-.19-.06-.26Zm.01-7.94c-1.02-.29-1.88.36-2.17 1.37-.28 1.02.11 2.01 1.14 2.3 1.02.29 7.5 2.54 7.73 9.88.13-.33.24-.66.34-1 1.52-5.41-1.63-11.03-7.04-12.55m2.19 14.03c-.77.73-6.03 5.14-12.45 1.57q.315.42.69.81c3.86 4.08 10.3 4.26 14.39.4.77-.73.66-1.8-.06-2.57s-1.79-.94-2.56-.21Zm-10.8-2.48c-.23-1.04-1.32-7.81 5.04-11.49-.35.04-.7.1-1.04.18C4.48 3.7 1.02 9.14 2.25 14.62c.23 1.04 1.21 1.49 2.24 1.26s1.72-1.05 1.49-2.09Z" />
</svg>
);Default · 24px · currentColor
UI examples Size, inline, toolbar, and dark UI — works for any icon style.
QQ Icon — Free SVG Component The QQ 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 QQ icon in React Import the QQ 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: <QQ 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.