Copy code import type { SVGProps } from "react";
export type IconProps = {
size?: number | string;
color?: string;
className?: string;
} & SVGProps<SVGSVGElement>;
export const Typescript = ({
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.24 3H4.76A1.76 1.76 0 0 0 3 4.76v14.48A1.76 1.76 0 0 0 4.76 21h14.48A1.76 1.76 0 0 0 21 19.24V4.76A1.76 1.76 0 0 0 19.24 3m-5.8 10h-2.25v6.44H9.4V13H7.15v-1.46h6.29zm5.8 5.28a1.7 1.7 0 0 1-.67.74 3 3 0 0 1-1 .39 6 6 0 0 1-1.2.12 7 7 0 0 1-1.23-.11 4.5 4.5 0 0 1-1-.33v-1.71l-.06-.06h.06v.07a3.4 3.4 0 0 0 1 .54 3.1 3.1 0 0 0 1.13.2 2.6 2.6 0 0 0 .6-.06 1.5 1.5 0 0 0 .42-.17.75.75 0 0 0 .25-.25.69.69 0 0 0-.06-.74 1.2 1.2 0 0 0-.35-.33 3 3 0 0 0-.53-.3l-.67-.28a3.6 3.6 0 0 1-1.37-1 2 2 0 0 1-.46-1.33 2.16 2.16 0 0 1 .24-1.06 2.1 2.1 0 0 1 .66-.71 2.9 2.9 0 0 1 1-.42 5 5 0 0 1 1.19-.13 7 7 0 0 1 1.09.07 4.5 4.5 0 0 1 .88.23v1.65a2.4 2.4 0 0 0-.42-.24 4 4 0 0 0-.49-.17 3 3 0 0 0-.49-.1 2.5 2.5 0 0 0-.46 0 2.3 2.3 0 0 0-.56.06 1.5 1.5 0 0 0-.43.16.8.8 0 0 0-.26.25.63.63 0 0 0-.09.33.6.6 0 0 0 .1.35 1.2 1.2 0 0 0 .3.29 2.2 2.2 0 0 0 .46.28l.63.28a7 7 0 0 1 .84.42 2.7 2.7 0 0 1 .64.49 1.8 1.8 0 0 1 .42.63 2.5 2.5 0 0 1 .14.85 2.7 2.7 0 0 1-.25 1.08z" />
</svg>
);Default · 24px · currentColor
UI examples Size, inline, toolbar, and dark UI — works for any icon style.
Related languages-frameworks icons
Typescript Icon — Free SVG Component The Typescript 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 Typescript icon in React Import the Typescript 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: <Typescript 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.