Copy code import type { SVGProps } from "react";
export type IconProps = {
size?: number | string;
color?: string;
className?: string;
} & SVGProps<SVGSVGElement>;
export const History = ({
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="M21.21 8.11c-.25-.59-.56-1.16-.92-1.7-.36-.53-.77-1.03-1.22-1.48s-.95-.86-1.48-1.22c-.54-.36-1.11-.67-1.7-.92-.6-.26-1.24-.45-1.88-.58-1.31-.27-2.72-.27-4.03 0-.64.13-1.27.33-1.88.58-.59.25-1.16.56-1.7.92-.53.36-1.03.77-1.48 1.22-.17.17-.32.35-.48.52L1.99 3v6h6L5.86 6.87c.15-.18.31-.36.48-.52.36-.36.76-.69 1.18-.98.43-.29.89-.54 1.36-.74.48-.2.99-.36 1.5-.47 1.05-.21 2.18-.21 3.23 0 .51.11 1.02.26 1.5.47.47.2.93.45 1.36.74.42.29.82.62 1.18.98s.69.76.98 1.18c.29.43.54.89.74 1.36.2.48.36.99.47 1.5.11.53.16 1.07.16 1.61a7.85 7.85 0 0 1-.63 3.11c-.2.47-.45.93-.74 1.36-.29.42-.62.82-.98 1.18s-.76.69-1.18.98c-.43.29-.89.54-1.36.74-.48.2-.99.36-1.5.47-1.05.21-2.18.21-3.23 0a8 8 0 0 1-1.5-.47c-.47-.2-.93-.45-1.36-.74-.42-.29-.82-.62-1.18-.98s-.69-.76-.98-1.18c-.29-.43-.54-.89-.74-1.36-.2-.48-.36-.99-.47-1.5A8 8 0 0 1 3.99 12h-2c0 .68.07 1.35.2 2.01.13.64.33 1.27.58 1.88.25.59.56 1.16.92 1.7.36.53.77 1.03 1.22 1.48s.95.86 1.48 1.22c.54.36 1.11.67 1.7.92.6.26 1.24.45 1.88.58.66.13 1.33.2 2.01.2s1.36-.07 2.01-.2c.64-.13 1.27-.33 1.88-.58.59-.25 1.16-.56 1.7-.92.53-.36 1.03-.77 1.48-1.22s.86-.95 1.22-1.48c.36-.54.67-1.11.92-1.7.26-.6.45-1.24.58-1.88.13-.66.2-1.34.2-2.01s-.07-1.35-.2-2.01c-.13-.64-.33-1.27-.58-1.88Z" />
<path d="M11 7v6h6v-2h-4V7z" />
</svg>
);Default · 24px · currentColor
UI examples Size, inline, toolbar, and dark UI — works for any icon style.
History Icon — Free SVG Component The History 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 History icon in React Import the History 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: <History 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: navigation Browse more navigation icons in the Next Icons library. All icons are hand-crafted SVGs optimized for web performance.