Copy code import type { SVGProps } from "react";
export type IconProps = {
size?: number | string;
color?: string;
className?: string;
} & SVGProps<SVGSVGElement>;
export const Dribbble = ({
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.66 6.98a9.93 9.93 0 0 0-3.641-3.64Q14.719 2 12 2c-2.719 0-3.486.447-5.02 1.34q-2.3 1.34-3.64 3.64C2 9.28 2 10.187 2 12s.446 3.487 1.34 5.02a9.9 9.9 0 0 0 3.641 3.64Q9.281 22 12 22c2.719 0 3.486-.447 5.02-1.34a9.93 9.93 0 0 0 3.641-3.64Q22.001 14.72 22 12c-.001-2.72-.446-3.487-1.34-5.02M12 3.66q2.999 0 5.32 1.919-1.38 1.76-4.1 2.9-1.502-2.72-3.261-4.54A7.7 7.7 0 0 1 12 3.66M5.51 6.8a8.1 8.1 0 0 1 2.711-2.22q1.818 1.8 3.34 4.5-3 .9-6.341.9-.86 0-1.3-.04A8.55 8.55 0 0 1 5.51 6.8M3.66 12q0-.08.01-.2t.01-.2q.381.02 1.161.02 4 0 7.439-1.1.281.56.58 1.26-1.98.44-4.061 2.14C6.718 15.62 6.4 16.247 5.76 17.5q-2.1-2.38-2.1-5.5M12 20.34q-2.84 0-5.101-1.759Q7.8 16.8 9.67 15.18t3.71-2.02a29.4 29.4 0 0 1 1.56 6.62 8.2 8.2 0 0 1-2.94.56m7.08-3.96a8.35 8.35 0 0 1-2.58 2.621q-.36-3.12-1.379-6.081 1.398-.1 2.5-.1 1.199 0 2.659.1a8.1 8.1 0 0 1-1.2 3.46m-1.24-5q-1.74 0-3.22.14a27 27 0 0 0-.68-1.62q3.099-1.359 4.399-3.3 1.8 2.12 1.96 4.84-1.218-.06-2.459-.06" />
</svg>
);Default · 24px · currentColor
UI examples Size, inline, toolbar, and dark UI — works for any icon style.
Dribbble Icon — Free SVG Component The Dribbble 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 Dribbble icon in React Import the Dribbble 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: <Dribbble 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.