Copy code import type { SVGProps } from "react";
export type IconProps = {
size?: number | string;
color?: string;
className?: string;
} & SVGProps<SVGSVGElement>;
export const MCP = ({
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="M19.97 11.84c.66-.66 1.02-1.53 1.02-2.46s-.36-1.8-1.02-2.46l-.04-.04a3.45 3.45 0 0 0-2.46-1.02c-.17 0-.34.03-.51.05.02-.17.05-.33.05-.51 0-.93-.36-1.8-1.02-2.46s-1.53-1.02-2.46-1.02-1.8.36-2.46 1.02L3.2 10.81a.694.694 0 0 0 .98.98l7.87-7.87c.39-.39.92-.61 1.47-.61A2.08 2.08 0 0 1 15.6 5.4c0 .56-.22 1.08-.61 1.48l-5.86 5.86-.08.08c-.27.27-.27.71 0 .98.14.14.31.2.49.2s.36-.07.49-.2l5.94-5.94a2.09 2.09 0 0 1 2.95 0l.04.04c.39.39.61.92.61 1.47s-.22 1.08-.61 1.48l-7.11 7.11c-.63.63-.63 1.66 0 2.29l1.46 1.46c.14.14.31.2.49.2s.36-.07.49-.2c.27-.27.27-.71 0-.98l-1.46-1.46a.235.235 0 0 1 0-.33l7.11-7.11Z" />
<path d="M17.96 9.83a.694.694 0 0 0-.98-.98l-5.82 5.82c-.81.81-2.14.81-2.95 0s-.81-2.14 0-2.95l5.82-5.82a.694.694 0 0 0-.98-.98l-5.82 5.82a3.476 3.476 0 0 0 0 4.92c.68.68 1.57 1.02 2.46 1.02s1.78-.34 2.46-1.02l5.82-5.82Z" />
</svg>
);Default · 24px · currentColor
UI examples Size, inline, toolbar, and dark UI — works for any icon style.
Related languages-frameworks icons
MCP Icon — Free SVG Component The MCP 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 MCP icon in React Import the MCP 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: <MCP 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.