Copy code import type { SVGProps } from "react";
export type IconProps = {
size?: number | string;
color?: string;
className?: string;
} & SVGProps<SVGSVGElement>;
export const BraveBrowser = ({
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.88 6.78.43-.96c.05-.13.03-.27-.07-.37l-1.16-1.18a1.88 1.88 0 0 0-1.95-.45l-.33.11L15.02 2l-3.01-.02h-.02l-3.03.03-1.77 1.94-.32-.11c-.69-.25-1.45-.07-1.97.46L3.72 5.5c-.08.08-.1.19-.06.29l.44 1-.61 1.67.4 1.51 1.81 6.86c.21.79.68 1.48 1.35 1.96 0 0 2.19 1.55 4.35 2.95.19.13.39.21.6.21s.41-.09.6-.21c2.43-1.59 4.35-2.96 4.35-2.96.66-.48 1.14-1.17 1.35-1.96l1.79-6.86.39-1.51-.62-1.67Zm-5.01 8.81-1.15.82c-.07.05-.19.14-.25.2l-.51.44-.24.21-.5.44c-.07.06-.17.06-.24 0l-.49-.44-.24-.21-.51-.44c-.07-.06-.18-.15-.25-.2l-1.15-.81c-.07-.05-.07-.13.01-.17l1.3-.68c.08-.04.21-.1.29-.13l.86-.36c.08-.03.17-.06.19-.06h.21s.11.03.19.06l.86.36c.08.03.21.09.29.13l1.3.66c.08.04.09.11.01.17Zm3.76-6.85c-.04.16-.16.31-.15.33l-.21.24-2.2 2.34c-.06.07-.08.19-.05.27l.46 1.08c.03.08.04.22 0 .3l-.13.34c-.1.29-.28.54-.52.73l-.44.37c-.07.05-.19.07-.27.03l-1.41-.67c-.08-.03-.2-.11-.27-.17l-1.01-.91c-.15-.13-.16-.37-.02-.5l2.12-1.43c.07-.05.1-.15.06-.23l-.94-1.75c-.05-.07-.05-.21-.01-.29l.11-.26c.03-.09.13-.17.21-.21l2.73-1.04c.09-.03.08-.07 0-.07l-1.76-.17c-.09 0-.23 0-.31.03l-1.57.44c-.09.02-.14.11-.13.2l.54 2.98c.02.09.01.21 0 .27-.02.06-.11.13-.19.15l-1.02.23c-.09.02-.23.02-.31 0l-1.09-.23c-.09-.02-.17-.08-.19-.15a.6.6 0 0 1 0-.27l.54-2.98a.185.185 0 0 0-.13-.2L9.5 7.1c-.09-.02-.23-.03-.31-.03l-1.76.17c-.09 0-.09.04 0 .07l2.73 1.02c.08.03.18.13.21.21l.11.26c.03.08.03.21-.01.29l-.93 1.75c-.04.08-.01.19.06.23l2.12 1.43c.13.15.13.37-.02.5l-1.01.91c-.07.06-.19.14-.27.18l-1.41.67c-.08.04-.2.02-.27-.03l-.44-.36c-.24-.19-.42-.44-.52-.73l-.13-.34a.5.5 0 0 1 0-.3l.46-1.08c.03-.08.01-.2-.05-.27l-2.2-2.34c-.06-.06-.16-.17-.21-.24 0 0-.11-.15-.16-.31-.03-.09-.03-.12-.03-.12 0-.09 0-.23.02-.32l.07-.19c.04-.08.11-.21.16-.28l.75-1.11.19-.26.97-1.22c.05-.07.11-.12.11-.12h.01s.07 0 .16.03l1.49.28c.09.01.23.05.31.06h.03c.09.02.23.01.31-.01l1.24-.4c.08-.03.22-.07.31-.09 0 0 .25-.05.46-.05s.46.05.46.05c.08.02.22.06.31.09l1.24.4c.09.03.23.03.31.02h.03c.09-.02.23-.05.31-.07l1.48-.29c.09-.01.16-.03.16-.03h.01s.06.05.11.12l.97 1.22c.06.07.15.19.19.26l.75 1.11c.05.07.12.2.16.28l.07.19c.01.09.02.23.02.32 0 0 0 .03-.03.12Z" />
</svg>
);Default · 24px · currentColor
UI examples Size, inline, toolbar, and dark UI — works for any icon style.
Brave Browser Icon — Free SVG Component The Brave Browser 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 Brave Browser icon in React Import the Brave Browser 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: <Brave Browser 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: browsers Browse more browsers icons in the Next Icons library. All icons are hand-crafted SVGs optimized for web performance.