Copy code import type { SVGProps } from "react";
export type IconProps = {
size?: number | string;
color?: string;
className?: string;
} & SVGProps<SVGSVGElement>;
export const Firebase = ({
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="M18.21 8.97c-.45-.62-1.48-1.9-3.07-3.81-.69-.83-1.28-1.53-1.57-1.87-.16-.19-.3-.35-.41-.48l-.17-.2-.09-.11-.02-.03-.4-.47-.51.41c-1.3 1.04-2.36 2.38-3.07 3.87-.44.89-.72 1.75-.87 2.65-.04.2-.07.41-.1.61l-.53-.03h-.05c-.64-.02-1.28.05-1.9.23l-.26.07-.14.24c-.64 1.12-1 2.39-1.04 3.68-.06 1.67.4 3.29 1.32 4.69.9 1.36 2.18 2.4 3.68 3.01l.2.08.06.02c.79.28 1.61.44 2.45.47h.29c1.06 0 2.09-.21 3.07-.62s.26-.12.26-.12a8 8 0 0 0 3.27-2.78 8.04 8.04 0 0 0 1.37-4.2c.06-1.8-.54-3.59-1.78-5.31ZM9.72 20.25c-.07-.02-.14-.05-.2-.08l-.05-.02a6.63 6.63 0 0 1-3.03-2.51 6.56 6.56 0 0 1-1.08-3.88c.03-.99.28-1.94.74-2.82.26-.06.53-.09.8-.11h.47c.19 0 .38.03.56.06.06 1.26.37 2.62.92 4.04.53 1.37 1.41 2.63 2.62 3.76-.6.78-1.32 1.29-1.74 1.55Zm-.44-9.11c.4.13.77.3 1.1.52.94.61 1.59 1.58 1.94 2.88.27 1.04.22 2.03-.16 2.96-.95-.93-1.64-1.96-2.06-3.05-.45-1.17-.73-2.28-.81-3.31Zm2.49 9.5c-.1 0-.21 0-.31-.02a8 8 0 0 0 1.02-1.07c.4.31.82.59 1.26.86-.64.17-1.3.25-1.97.23m5.89-3.14c-.58.93-1.38 1.71-2.33 2.26-.53-.26-1.3-.7-2.12-1.33.66-1.31.79-2.73.4-4.23-.43-1.63-1.27-2.86-2.5-3.66-.54-.35-1.15-.62-1.83-.79 0-.11.02-.22.04-.33.01-.09.02-.18.04-.26.11-.57.28-1.14.49-1.69.08-.21.17-.42.27-.62.15-.3.31-.61.51-.93l.08-.13c.45-.71 1-1.36 1.62-1.93l.24.28c.56.66 1.09 1.29 1.56 1.86 1.08 1.29 2.47 2.99 3.01 3.73 1.06 1.48 1.58 2.98 1.53 4.48-.04 1.16-.38 2.3-1 3.28Z" />
</svg>
);Default · 24px · currentColor
UI examples Size, inline, toolbar, and dark UI — works for any icon style.
Related languages-frameworks icons
Firebase Icon — Free SVG Component The Firebase 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 Firebase icon in React Import the Firebase 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: <Firebase 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.