Copy code import type { SVGProps } from "react";
export type IconProps = {
size?: number | string;
color?: string;
className?: string;
} & SVGProps<SVGSVGElement>;
export const Svelte = ({
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.26 4.65c-1.86-2.66-5.53-3.45-8.18-1.76L6.42 5.86c-1.27.8-2.15 2.1-2.41 3.58-.22 1.23-.03 2.5.55 3.61-.4.6-.67 1.28-.8 2-.27 1.51.08 3.06.97 4.31 1.86 2.66 5.53 3.45 8.18 1.76l4.66-2.97c1.27-.8 2.15-2.1 2.41-3.58.22-1.23.03-2.5-.55-3.61.4-.6.67-1.28.8-2 .27-1.51-.08-3.06-.97-4.31m-1.33 3.81c-.03.15-.06.29-.11.44l-.09.27-.24-.18c-.55-.41-1.17-.71-1.82-.91l-.17-.05.02-.17c.02-.25-.05-.49-.19-.69-.27-.38-.74-.56-1.2-.44-.1.03-.2.07-.29.13L9.18 9.83a.99.99 0 0 0-.26 1.43c.27.38.74.56 1.2.44.1-.03.2-.07.29-.13l1.78-1.13c.29-.19.61-.33.95-.42 1.5-.39 3.09.2 3.97 1.47.54.75.75 1.68.59 2.59-.16.89-.69 1.67-1.45 2.15l-4.66 2.97c-.29.19-.61.33-.95.42-1.5.39-3.09-.2-3.97-1.47a3.41 3.41 0 0 1-.48-3.03l.09-.27.24.18c.55.41 1.17.71 1.82.91l.17.05-.02.17c-.02.25.05.49.19.69.27.38.74.56 1.2.44.1-.03.2-.07.29-.13l4.66-2.97a1 1 0 0 0 .44-.65c.05-.27-.02-.55-.18-.78-.27-.38-.74-.56-1.2-.44-.1.03-.2.07-.29.13l-1.78 1.13c-.29.19-.61.33-.95.42-1.5.39-3.09-.2-3.97-1.47a3.4 3.4 0 0 1-.59-2.59c.16-.89.69-1.67 1.45-2.15l4.66-2.97c.29-.19.61-.33.95-.42 1.5-.39 3.09.2 3.97 1.47.54.75.75 1.68.59 2.59" />
</svg>
);Default · 24px · currentColor
UI examples Size, inline, toolbar, and dark UI — works for any icon style.
Related languages-frameworks icons
Svelte Icon — Free SVG Component The Svelte 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 Svelte icon in React Import the Svelte 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: <Svelte 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.