Copy code import type { SVGProps } from "react";
export type IconProps = {
size?: number | string;
color?: string;
className?: string;
} & SVGProps<SVGSVGElement>;
export const Bun = ({
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="M9.34 7.66c-.07.06-.02.18.08.15.85-.33 2.01-1.32 1.52-3.33-.02-.11-.17-.08-.17.02 0 1.21-.51 2.36-1.43 3.16m2-3.15c.63 1.02.78 2.27.41 3.41-.03.09.08.16.14.09.55-.71 1.04-2.12-.41-3.64-.07-.07-.19.04-.14.12Zm.7-.05c.98.69 1.61 1.78 1.73 2.98 0 .05.03.09.07.09s.08-.02.09-.07c.23-.88.1-2.39-1.82-3.17-.1-.04-.17.1-.08.16Zm-4.67 2.8c.91.06 2.38-.37 2.82-2.39.02-.1-.12-.14-.17-.05A4.3 4.3 0 0 1 7.37 7.1c-.09.03-.09.16 0 .16" />
<path d="M19.87 8.36s-.08-.09-.13-.13c-.04-.04-.08-.09-.13-.13-.04-.04-.08-.09-.13-.13-.04-.04-.08-.09-.13-.13-.04-.04-.08-.09-.13-.13-.04-.04-.08-.09-.13-.12l-.06-.06a8.9 8.9 0 0 0-2.25-1.7c-.94-.5-1.65-.94-2.28-1.33-.27-.17-.52-.33-.78-.47-.83-.49-1.49-.79-2.25-.79s-1.52.35-2.41.88c-.29.17-.59.36-.91.55-.58.36-1.23.76-1.99 1.17-2.62 1.42-4.18 3.78-4.18 6.31 0 1.86.84 3.56 2.22 4.88l.1.1.76.76c1.74 1.75 4.42 2.88 7.43 2.88 5.24 0 9.49-3.41 9.49-7.59 0-1.79-.77-3.48-2.13-4.81Zm-8.38 10.76c-4.89 0-8.86-3.13-8.86-6.97 0-2.3 1.44-4.45 3.85-5.75.76-.41 1.44-.83 2.03-1.19.31-.19.61-.38.9-.54.82-.48 1.48-.79 2.09-.79s1.17.25 1.94.71c.23.14.48.3.76.47.61.37 1.35.85 2.31 1.36 2.41 1.3 3.85 3.45 3.85 5.75 0 3.85-3.97 6.97-8.86 6.97Z" />
<path d="M13.08 13.65H9.96a.36.36 0 0 0-.29.13c-.06.07-.08.16-.07.25.12.5.4.95.79 1.28.31.29.7.47 1.13.51.42-.04.82-.22 1.12-.51.39-.33.67-.78.79-1.28.02-.09 0-.18-.06-.25a.4.4 0 0 0-.29-.13m-1.56 1.87c-.35-.04-.67-.2-.92-.44l-.06-.06c.26-.33.65-.52 1.07-.53.38.01.74.16 1.01.43-.05.06-.11.12-.17.17-.25.24-.58.4-.92.44Zm-3.14-5.38a1.396 1.396 0 1 0-.009 2.789 1.396 1.396 0 0 0 .009-2.789m-.44 1.48c-.29 0-.52-.24-.52-.52 0-.29.24-.53.53-.52a.525.525 0 1 1-.01 1.05Zm6.73-1.48c-.77 0-1.4.61-1.41 1.38v.01c0 .77.62 1.39 1.38 1.39.77 0 1.4-.61 1.41-1.38s-.61-1.4-1.38-1.41Zm-.45 1.48c-.29 0-.52-.24-.52-.52 0-.29.24-.53.53-.52a.525.525 0 1 1-.01 1.05Z" />
</svg>
);Default · 24px · currentColor
UI examples Size, inline, toolbar, and dark UI — works for any icon style.
Related languages-frameworks icons
Bun Icon — Free SVG Component The Bun 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 Bun icon in React Import the Bun 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: <Bun 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.