Copy code import type { SVGProps } from "react";
export type IconProps = {
size?: number | string;
color?: string;
className?: string;
} & SVGProps<SVGSVGElement>;
export const Flask = ({
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="M22 17.93c-.23.26-.56.31-.86.43-.09.04-.14.07-.14.17 0 .12-.07.19-.17.24-.21.08-.42.17-.63.25-.18.06-.28.02-.36-.16-.04-.1-.11-.06-.17-.04-.34.13-.69.26-1.04.37-1.04.34-2.11.59-3.2.68-1.39.12-2.76 0-4.09-.44a9.9 9.9 0 0 1-3.52-2.03c-.3-.26-.58-.55-.86-.83-.1-.11-.1-.12.03-.19 1.29-.65 2.57-1.3 3.86-1.95.57-.29 1.14-.58 1.71-.88.1-.05.14-.01.18.07.25.49.54.95.89 1.38 1.01 1.25 2.27 2.09 3.87 2.38.64.12 1.28.13 1.93.1.12 0 .14-.07.12-.16-.03-.12.02-.18.13-.21.15-.05.29-.11.44-.17.12-.05.24-.1.37-.01.06.04.13 0 .19-.02.13-.05.26-.11.4-.16.19-.07.29-.04.4.12.17.23.31.48.46.72.02.03.03.07.07.09v.26ZM10.68 4.07c.19 0 .29.1.3.26.02.45.03.9.06 1.35a93 93 0 0 0 .29 3.16v.03q.02.32-.27.45c-1.65.73-3.3 1.47-4.94 2.2-.59.26-1.17.52-1.76.79-.11.05-.16.03-.21-.08-.37-.74-.66-1.52-.87-2.32 0-.02 0-.03-.01-.05-.06-.25-.06-.25-.32-.26-.12 0-.19-.07-.24-.16-.22-.4-.45-.8-.66-1.21-.1-.19.01-.45.26-.58.3-.16.61-.28.92-.42 1.18-.51 2.36-1.01 3.54-1.52.92-.39 1.83-.78 2.75-1.18.34-.15.69-.29 1.03-.43.05-.02.11-.03.14-.04Zm1.55 8.45c0 .09-.06.11-.11.13-.59.3-1.18.6-1.78.9l-3.96 2.01c-.21.11-.21.11-.35-.09-.36-.48-.67-.99-.98-1.51-.11-.19-.23-.38-.34-.57-.05-.08-.04-.13.05-.17.62-.27 1.24-.55 1.85-.83l2.7-1.2c.69-.31 1.37-.61 2.06-.92.17-.07.19-.07.23.11.18.7.36 1.39.6 2.07 0 .02.01.04.02.05Z" />
</svg>
);Default · 24px · currentColor
UI examples Size, inline, toolbar, and dark UI — works for any icon style.
Related languages-frameworks icons
Flask Icon — Free SVG Component The Flask 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 Flask icon in React Import the Flask 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: <Flask 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.