Copy code import type { SVGProps } from "react";
export type IconProps = {
size?: number | string;
color?: string;
className?: string;
} & SVGProps<SVGSVGElement>;
export const Edge = ({
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.349 13.684H8.874q-.002.649.195 1.178a3.33 3.33 0 0 0 1.381 1.634q.465.295 1.005.484c.356.13.729.226 1.107.288.821.13 1.658.123 2.477-.021a9.8 9.8 0 0 0 2.421-.783c.393-.18.79-.376 1.201-.594v3.805a13.5 13.5 0 0 1-2.711.978q-.684.17-1.396.246-.73.08-1.464.079a8.2 8.2 0 0 1-1.95-.232 7.7 7.7 0 0 1-1.762-.668 7.3 7.3 0 0 1-1.51-1.062 6.67 6.67 0 0 1-1.941-3.103 7 7 0 0 1-.267-1.953q0-1.105.303-2.11a6.7 6.7 0 0 1 2.264-3.342 7.4 7.4 0 0 1 1.847-1.066 3.9 3.9 0 0 0-.869 1.329 5.7 5.7 0 0 0-.401 1.538h6.391q.002-.967-.196-1.689-.196-.726-.637-1.201A2.64 2.64 0 0 0 13.23 6.7q-.694-.24-1.675-.241c-.771 0-1.543.111-2.314.344a9.8 9.8 0 0 0-2.2.955q-1.043.619-1.919 1.452a9.2 9.2 0 0 0-1.474 1.819c.084-.742.247-1.474.485-2.18a9.3 9.3 0 0 1 .912-1.938 8.6 8.6 0 0 1 1.303-1.609 7.7 7.7 0 0 1 1.655-1.235 8.5 8.5 0 0 1 1.955-.792 10 10 0 0 1 2.233-.254q.689 0 1.375.124.685.125 1.339.342a8 8 0 0 1 2.315 1.239 8 8 0 0 1 1.711 1.833c.463.692.813 1.459 1.055 2.292s.365 1.701.365 2.602v2.23z" />
</svg>
);Default · 24px · currentColor
UI examples Size, inline, toolbar, and dark UI — works for any icon style.
Edge Icon — Free SVG Component The Edge 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 Edge icon in React Import the Edge 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: <Edge 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.