# undo icon

Undo. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/undo

- Category: Arrows
- Use it for: undo, revert, step back, revert changes, undo action
- Tags: undo, back, revert, u-turn
- Family: arrow-down, arrow-down-left, arrow-down-right, arrow-down-to-line, arrow-left, arrow-left-right, arrow-left-to-line, arrow-right, arrow-right-to-line, arrow-up, arrow-up-down, arrow-up-left, arrow-up-right, arrow-up-to-line, corner-down-left, corner-down-right, corner-right-up, external-link, fit-height, fit-screen, fit-width, move, move-horizontal, move-vertical, redo, refresh, shrink
- Component name: UndoIcon
- Added: 2026-10-14

## Alternatives

- `history`: restore an older version from the version history (version-history)
- `arrow-left`: navigate back to the previous screen (back)

## Don't confuse with

- `rotate-ccw`: rotate-ccw turns an object counterclockwise (rotate-counterclockwise)

## Also fits

- restore from trash: undo the last delete right after it

## Not for

- back (use `arrow-left`): undo reverts the last edit; back returns to the previous screen
- reply (use `reply`): undo reverts the last action; it is not a reply
- rotate counterclockwise (use `rotate-ccw`): the curved arrow means undo
- history (use `history`): undo reverts one step; it is not a history list

## Files

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it.

- line-round: https://gentleface.com/svg/line-round/16/undo.svg · PNG https://gentleface.com/png/line-round/16/undo.png · https://gentleface.com/png/line-round/32/undo.png · https://gentleface.com/png/line-round/48/undo.png
- line-soft: https://gentleface.com/svg/line-soft/16/undo.svg · PNG https://gentleface.com/png/line-soft/16/undo.png · https://gentleface.com/png/line-soft/32/undo.png · https://gentleface.com/png/line-soft/48/undo.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/undo.svg · PNG https://gentleface.com/png/line-sharp/16/undo.png · https://gentleface.com/png/line-sharp/32/undo.png · https://gentleface.com/png/line-sharp/48/undo.png
- solid-round: https://gentleface.com/svg/solid-round/16/undo.svg · PNG https://gentleface.com/png/solid-round/16/undo.png · https://gentleface.com/png/solid-round/32/undo.png · https://gentleface.com/png/solid-round/48/undo.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/undo.svg · PNG https://gentleface.com/png/solid-soft/16/undo.png · https://gentleface.com/png/solid-soft/32/undo.png · https://gentleface.com/png/solid-soft/48/undo.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/undo.svg · PNG https://gentleface.com/png/solid-sharp/16/undo.png · https://gentleface.com/png/solid-sharp/32/undo.png · https://gentleface.com/png/solid-sharp/48/undo.png

The SVG of every style: https://gentleface.com/icons/undo.json (`svg`).

## Code (line-round)

The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. For another style, take its SVG from the JSON and swap the path `d`.

### SVG

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M3.707 5L9 5C9.509 5 9.999 5.094 10.472 5.281C10.986 5.484 11.438 5.781 11.828 6.172C12.219 6.562 12.516 7.014 12.719 7.528C12.906 8.001 13 8.491 13 9C13 9.509 12.906 9.999 12.719 10.472C12.516 10.986 12.219 11.438 11.828 11.828C11.438 12.219 10.986 12.516 10.472 12.719C9.999 12.906 9.509 13 9 13L5.5 13C5.359 13 5.241 12.952 5.144 12.856C5.048 12.759 5 12.641 5 12.5C5 12.359 5.048 12.241 5.144 12.144C5.241 12.048 5.359 12 5.5 12L9 12C9.381 12 9.75 11.93 10.104 11.789C10.489 11.637 10.828 11.414 11.121 11.121C11.414 10.828 11.637 10.489 11.789 10.104C11.93 9.75 12 9.381 12 9C12 8.619 11.93 8.25 11.789 7.896C11.637 7.511 11.414 7.172 11.121 6.879C10.828 6.586 10.489 6.363 10.104 6.211C9.75 6.07 9.381 6 9 6L3.707 6L5.854 8.146C5.953 8.246 6.003 8.364 6.003 8.5C6.003 8.636 5.953 8.754 5.854 8.854C5.756 8.951 5.638 9 5.5 9C5.362 9 5.244 8.951 5.146 8.854L2.146 5.854C2.049 5.756 2 5.638 2 5.5C2 5.362 2.049 5.244 2.146 5.146L5.146 2.146C5.244 2.049 5.362 2 5.5 2C5.638 2 5.756 2.049 5.854 2.146C5.951 2.244 6 2.362 6 2.5C6 2.638 5.951 2.756 5.854 2.854L3.707 5Z"/></svg>
```

### React

```tsx
// Gentleface "undo" (line-round), MIT. https://gentleface.com/icons/undo
import type { SVGProps } from 'react';

export function UndoIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M3.707 5L9 5C9.509 5 9.999 5.094 10.472 5.281C10.986 5.484 11.438 5.781 11.828 6.172C12.219 6.562 12.516 7.014 12.719 7.528C12.906 8.001 13 8.491 13 9C13 9.509 12.906 9.999 12.719 10.472C12.516 10.986 12.219 11.438 11.828 11.828C11.438 12.219 10.986 12.516 10.472 12.719C9.999 12.906 9.509 13 9 13L5.5 13C5.359 13 5.241 12.952 5.144 12.856C5.048 12.759 5 12.641 5 12.5C5 12.359 5.048 12.241 5.144 12.144C5.241 12.048 5.359 12 5.5 12L9 12C9.381 12 9.75 11.93 10.104 11.789C10.489 11.637 10.828 11.414 11.121 11.121C11.414 10.828 11.637 10.489 11.789 10.104C11.93 9.75 12 9.381 12 9C12 8.619 11.93 8.25 11.789 7.896C11.637 7.511 11.414 7.172 11.121 6.879C10.828 6.586 10.489 6.363 10.104 6.211C9.75 6.07 9.381 6 9 6L3.707 6L5.854 8.146C5.953 8.246 6.003 8.364 6.003 8.5C6.003 8.636 5.953 8.754 5.854 8.854C5.756 8.951 5.638 9 5.5 9C5.362 9 5.244 8.951 5.146 8.854L2.146 5.854C2.049 5.756 2 5.638 2 5.5C2 5.362 2.049 5.244 2.146 5.146L5.146 2.146C5.244 2.049 5.362 2 5.5 2C5.638 2 5.756 2.049 5.854 2.146C5.951 2.244 6 2.362 6 2.5C6 2.638 5.951 2.756 5.854 2.854L3.707 5Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "undo" (line-round), MIT. https://gentleface.com/icons/undo -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
    <path d="M3.707 5L9 5C9.509 5 9.999 5.094 10.472 5.281C10.986 5.484 11.438 5.781 11.828 6.172C12.219 6.562 12.516 7.014 12.719 7.528C12.906 8.001 13 8.491 13 9C13 9.509 12.906 9.999 12.719 10.472C12.516 10.986 12.219 11.438 11.828 11.828C11.438 12.219 10.986 12.516 10.472 12.719C9.999 12.906 9.509 13 9 13L5.5 13C5.359 13 5.241 12.952 5.144 12.856C5.048 12.759 5 12.641 5 12.5C5 12.359 5.048 12.241 5.144 12.144C5.241 12.048 5.359 12 5.5 12L9 12C9.381 12 9.75 11.93 10.104 11.789C10.489 11.637 10.828 11.414 11.121 11.121C11.414 10.828 11.637 10.489 11.789 10.104C11.93 9.75 12 9.381 12 9C12 8.619 11.93 8.25 11.789 7.896C11.637 7.511 11.414 7.172 11.121 6.879C10.828 6.586 10.489 6.363 10.104 6.211C9.75 6.07 9.381 6 9 6L3.707 6L5.854 8.146C5.953 8.246 6.003 8.364 6.003 8.5C6.003 8.636 5.953 8.754 5.854 8.854C5.756 8.951 5.638 9 5.5 9C5.362 9 5.244 8.951 5.146 8.854L2.146 5.854C2.049 5.756 2 5.638 2 5.5C2 5.362 2.049 5.244 2.146 5.146L5.146 2.146C5.244 2.049 5.362 2 5.5 2C5.638 2 5.756 2.049 5.854 2.146C5.951 2.244 6 2.362 6 2.5C6 2.638 5.951 2.756 5.854 2.854L3.707 5Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "undo" (line-round), MIT. https://gentleface.com/icons/undo -->
<script>
  let props = $props();
</script>

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
  <path d="M3.707 5L9 5C9.509 5 9.999 5.094 10.472 5.281C10.986 5.484 11.438 5.781 11.828 6.172C12.219 6.562 12.516 7.014 12.719 7.528C12.906 8.001 13 8.491 13 9C13 9.509 12.906 9.999 12.719 10.472C12.516 10.986 12.219 11.438 11.828 11.828C11.438 12.219 10.986 12.516 10.472 12.719C9.999 12.906 9.509 13 9 13L5.5 13C5.359 13 5.241 12.952 5.144 12.856C5.048 12.759 5 12.641 5 12.5C5 12.359 5.048 12.241 5.144 12.144C5.241 12.048 5.359 12 5.5 12L9 12C9.381 12 9.75 11.93 10.104 11.789C10.489 11.637 10.828 11.414 11.121 11.121C11.414 10.828 11.637 10.489 11.789 10.104C11.93 9.75 12 9.381 12 9C12 8.619 11.93 8.25 11.789 7.896C11.637 7.511 11.414 7.172 11.121 6.879C10.828 6.586 10.489 6.363 10.104 6.211C9.75 6.07 9.381 6 9 6L3.707 6L5.854 8.146C5.953 8.246 6.003 8.364 6.003 8.5C6.003 8.636 5.953 8.754 5.854 8.854C5.756 8.951 5.638 9 5.5 9C5.362 9 5.244 8.951 5.146 8.854L2.146 5.854C2.049 5.756 2 5.638 2 5.5C2 5.362 2.049 5.244 2.146 5.146L5.146 2.146C5.244 2.049 5.362 2 5.5 2C5.638 2 5.756 2.049 5.854 2.146C5.951 2.244 6 2.362 6 2.5C6 2.638 5.951 2.756 5.854 2.854L3.707 5Z" />
</svg>
```

### HTML img

```html
<!-- Gentleface "undo" (line-round), MIT. https://gentleface.com/icons/undo. An <img> can't take currentColor: it draws black. Inline the SVG or use the CSS mask to color it. -->
<img src="https://gentleface.com/svg/line-round/16/undo.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "undo" (line-round), MIT. https://gentleface.com/icons/undo. Takes the text color. */
.icon-undo {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M3.707 5L9 5C9.509 5 9.999 5.094 10.472 5.281C10.986 5.484 11.438 5.781 11.828 6.172C12.219 6.562 12.516 7.014 12.719 7.528C12.906 8.001 13 8.491 13 9C13 9.509 12.906 9.999 12.719 10.472C12.516 10.986 12.219 11.438 11.828 11.828C11.438 12.219 10.986 12.516 10.472 12.719C9.999 12.906 9.509 13 9 13L5.5 13C5.359 13 5.241 12.952 5.144 12.856C5.048 12.759 5 12.641 5 12.5C5 12.359 5.048 12.241 5.144 12.144C5.241 12.048 5.359 12 5.5 12L9 12C9.381 12 9.75 11.93 10.104 11.789C10.489 11.637 10.828 11.414 11.121 11.121C11.414 10.828 11.637 10.489 11.789 10.104C11.93 9.75 12 9.381 12 9C12 8.619 11.93 8.25 11.789 7.896C11.637 7.511 11.414 7.172 11.121 6.879C10.828 6.586 10.489 6.363 10.104 6.211C9.75 6.07 9.381 6 9 6L3.707 6L5.854 8.146C5.953 8.246 6.003 8.364 6.003 8.5C6.003 8.636 5.953 8.754 5.854 8.854C5.756 8.951 5.638 9 5.5 9C5.362 9 5.244 8.951 5.146 8.854L2.146 5.854C2.049 5.756 2 5.638 2 5.5C2 5.362 2.049 5.244 2.146 5.146L5.146 2.146C5.244 2.049 5.362 2 5.5 2C5.638 2 5.756 2.049 5.854 2.146C5.951 2.244 6 2.362 6 2.5C6 2.638 5.951 2.756 5.854 2.854L3.707 5Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M3.707 5L9 5C9.509 5 9.999 5.094 10.472 5.281C10.986 5.484 11.438 5.781 11.828 6.172C12.219 6.562 12.516 7.014 12.719 7.528C12.906 8.001 13 8.491 13 9C13 9.509 12.906 9.999 12.719 10.472C12.516 10.986 12.219 11.438 11.828 11.828C11.438 12.219 10.986 12.516 10.472 12.719C9.999 12.906 9.509 13 9 13L5.5 13C5.359 13 5.241 12.952 5.144 12.856C5.048 12.759 5 12.641 5 12.5C5 12.359 5.048 12.241 5.144 12.144C5.241 12.048 5.359 12 5.5 12L9 12C9.381 12 9.75 11.93 10.104 11.789C10.489 11.637 10.828 11.414 11.121 11.121C11.414 10.828 11.637 10.489 11.789 10.104C11.93 9.75 12 9.381 12 9C12 8.619 11.93 8.25 11.789 7.896C11.637 7.511 11.414 7.172 11.121 6.879C10.828 6.586 10.489 6.363 10.104 6.211C9.75 6.07 9.381 6 9 6L3.707 6L5.854 8.146C5.953 8.246 6.003 8.364 6.003 8.5C6.003 8.636 5.953 8.754 5.854 8.854C5.756 8.951 5.638 9 5.5 9C5.362 9 5.244 8.951 5.146 8.854L2.146 5.854C2.049 5.756 2 5.638 2 5.5C2 5.362 2.049 5.244 2.146 5.146L5.146 2.146C5.244 2.049 5.362 2 5.5 2C5.638 2 5.756 2.049 5.854 2.146C5.951 2.244 6 2.362 6 2.5C6 2.638 5.951 2.756 5.854 2.854L3.707 5Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
```

### Data URL

```text
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M3.707 5L9 5C9.509 5 9.999 5.094 10.472 5.281C10.986 5.484 11.438 5.781 11.828 6.172C12.219 6.562 12.516 7.014 12.719 7.528C12.906 8.001 13 8.491 13 9C13 9.509 12.906 9.999 12.719 10.472C12.516 10.986 12.219 11.438 11.828 11.828C11.438 12.219 10.986 12.516 10.472 12.719C9.999 12.906 9.509 13 9 13L5.5 13C5.359 13 5.241 12.952 5.144 12.856C5.048 12.759 5 12.641 5 12.5C5 12.359 5.048 12.241 5.144 12.144C5.241 12.048 5.359 12 5.5 12L9 12C9.381 12 9.75 11.93 10.104 11.789C10.489 11.637 10.828 11.414 11.121 11.121C11.414 10.828 11.637 10.489 11.789 10.104C11.93 9.75 12 9.381 12 9C12 8.619 11.93 8.25 11.789 7.896C11.637 7.511 11.414 7.172 11.121 6.879C10.828 6.586 10.489 6.363 10.104 6.211C9.75 6.07 9.381 6 9 6L3.707 6L5.854 8.146C5.953 8.246 6.003 8.364 6.003 8.5C6.003 8.636 5.953 8.754 5.854 8.854C5.756 8.951 5.638 9 5.5 9C5.362 9 5.244 8.951 5.146 8.854L2.146 5.854C2.049 5.756 2 5.638 2 5.5C2 5.362 2.049 5.244 2.146 5.146L5.146 2.146C5.244 2.049 5.362 2 5.5 2C5.638 2 5.756 2.049 5.854 2.146C5.951 2.244 6 2.362 6 2.5C6 2.638 5.951 2.756 5.854 2.854L3.707 5Z'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "undo" (line-round), MIT. https://gentleface.com/icons/undo
     Every icon of this style in one file: https://gentleface.com/sprite/line-round.svg
     Serve it from your own origin: <use> does not load from another origin. -->
<svg width="16" height="16" aria-hidden="true"><use href="/sprite/line-round.svg#undo"/></svg>
```

### SwiftUI

```swift
// Gentleface "undo" (line-round), MIT. https://gentleface.com/icons/undo
import SwiftUI

struct UndoIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 3.707, y: 5))
        p.addLine(to: CGPoint(x: 9, y: 5))
        p.addCurve(to: CGPoint(x: 10.472, y: 5.281), control1: CGPoint(x: 9.509, y: 5), control2: CGPoint(x: 9.999, y: 5.094))
        p.addCurve(to: CGPoint(x: 11.828, y: 6.172), control1: CGPoint(x: 10.986, y: 5.484), control2: CGPoint(x: 11.438, y: 5.781))
        p.addCurve(to: CGPoint(x: 12.719, y: 7.528), control1: CGPoint(x: 12.219, y: 6.562), control2: CGPoint(x: 12.516, y: 7.014))
        p.addCurve(to: CGPoint(x: 13, y: 9), control1: CGPoint(x: 12.906, y: 8.001), control2: CGPoint(x: 13, y: 8.491))
        p.addCurve(to: CGPoint(x: 12.719, y: 10.472), control1: CGPoint(x: 13, y: 9.509), control2: CGPoint(x: 12.906, y: 9.999))
        p.addCurve(to: CGPoint(x: 11.828, y: 11.828), control1: CGPoint(x: 12.516, y: 10.986), control2: CGPoint(x: 12.219, y: 11.438))
        p.addCurve(to: CGPoint(x: 10.472, y: 12.719), control1: CGPoint(x: 11.438, y: 12.219), control2: CGPoint(x: 10.986, y: 12.516))
        p.addCurve(to: CGPoint(x: 9, y: 13), control1: CGPoint(x: 9.999, y: 12.906), control2: CGPoint(x: 9.509, y: 13))
        p.addLine(to: CGPoint(x: 5.5, y: 13))
        p.addCurve(to: CGPoint(x: 5.144, y: 12.856), control1: CGPoint(x: 5.359, y: 13), control2: CGPoint(x: 5.241, y: 12.952))
        p.addCurve(to: CGPoint(x: 5, y: 12.5), control1: CGPoint(x: 5.048, y: 12.759), control2: CGPoint(x: 5, y: 12.641))
        p.addCurve(to: CGPoint(x: 5.144, y: 12.144), control1: CGPoint(x: 5, y: 12.359), control2: CGPoint(x: 5.048, y: 12.241))
        p.addCurve(to: CGPoint(x: 5.5, y: 12), control1: CGPoint(x: 5.241, y: 12.048), control2: CGPoint(x: 5.359, y: 12))
        p.addLine(to: CGPoint(x: 9, y: 12))
        p.addCurve(to: CGPoint(x: 10.104, y: 11.789), control1: CGPoint(x: 9.381, y: 12), control2: CGPoint(x: 9.75, y: 11.93))
        p.addCurve(to: CGPoint(x: 11.121, y: 11.121), control1: CGPoint(x: 10.489, y: 11.637), control2: CGPoint(x: 10.828, y: 11.414))
        p.addCurve(to: CGPoint(x: 11.789, y: 10.104), control1: CGPoint(x: 11.414, y: 10.828), control2: CGPoint(x: 11.637, y: 10.489))
        p.addCurve(to: CGPoint(x: 12, y: 9), control1: CGPoint(x: 11.93, y: 9.75), control2: CGPoint(x: 12, y: 9.381))
        p.addCurve(to: CGPoint(x: 11.789, y: 7.896), control1: CGPoint(x: 12, y: 8.619), control2: CGPoint(x: 11.93, y: 8.25))
        p.addCurve(to: CGPoint(x: 11.121, y: 6.879), control1: CGPoint(x: 11.637, y: 7.511), control2: CGPoint(x: 11.414, y: 7.172))
        p.addCurve(to: CGPoint(x: 10.104, y: 6.211), control1: CGPoint(x: 10.828, y: 6.586), control2: CGPoint(x: 10.489, y: 6.363))
        p.addCurve(to: CGPoint(x: 9, y: 6), control1: CGPoint(x: 9.75, y: 6.07), control2: CGPoint(x: 9.381, y: 6))
        p.addLine(to: CGPoint(x: 3.707, y: 6))
        p.addLine(to: CGPoint(x: 5.854, y: 8.146))
        p.addCurve(to: CGPoint(x: 6.003, y: 8.5), control1: CGPoint(x: 5.953, y: 8.246), control2: CGPoint(x: 6.003, y: 8.364))
        p.addCurve(to: CGPoint(x: 5.854, y: 8.854), control1: CGPoint(x: 6.003, y: 8.636), control2: CGPoint(x: 5.953, y: 8.754))
        p.addCurve(to: CGPoint(x: 5.5, y: 9), control1: CGPoint(x: 5.756, y: 8.951), control2: CGPoint(x: 5.638, y: 9))
        p.addCurve(to: CGPoint(x: 5.146, y: 8.854), control1: CGPoint(x: 5.362, y: 9), control2: CGPoint(x: 5.244, y: 8.951))
        p.addLine(to: CGPoint(x: 2.146, y: 5.854))
        p.addCurve(to: CGPoint(x: 2, y: 5.5), control1: CGPoint(x: 2.049, y: 5.756), control2: CGPoint(x: 2, y: 5.638))
        p.addCurve(to: CGPoint(x: 2.146, y: 5.146), control1: CGPoint(x: 2, y: 5.362), control2: CGPoint(x: 2.049, y: 5.244))
        p.addLine(to: CGPoint(x: 5.146, y: 2.146))
        p.addCurve(to: CGPoint(x: 5.5, y: 2), control1: CGPoint(x: 5.244, y: 2.049), control2: CGPoint(x: 5.362, y: 2))
        p.addCurve(to: CGPoint(x: 5.854, y: 2.146), control1: CGPoint(x: 5.638, y: 2), control2: CGPoint(x: 5.756, y: 2.049))
        p.addCurve(to: CGPoint(x: 6, y: 2.5), control1: CGPoint(x: 5.951, y: 2.244), control2: CGPoint(x: 6, y: 2.362))
        p.addCurve(to: CGPoint(x: 5.854, y: 2.854), control1: CGPoint(x: 6, y: 2.638), control2: CGPoint(x: 5.951, y: 2.756))
        p.addLine(to: CGPoint(x: 3.707, y: 5))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

// UndoIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```

### Compose

```kotlin
// Gentleface "undo" (line-round), MIT. https://gentleface.com/icons/undo
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.addPathNodes
import androidx.compose.ui.unit.dp

val UndoIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "undo", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M3.707 5L9 5C9.509 5 9.999 5.094 10.472 5.281C10.986 5.484 11.438 5.781 11.828 6.172C12.219 6.562 12.516 7.014 12.719 7.528C12.906 8.001 13 8.491 13 9C13 9.509 12.906 9.999 12.719 10.472C12.516 10.986 12.219 11.438 11.828 11.828C11.438 12.219 10.986 12.516 10.472 12.719C9.999 12.906 9.509 13 9 13L5.5 13C5.359 13 5.241 12.952 5.144 12.856C5.048 12.759 5 12.641 5 12.5C5 12.359 5.048 12.241 5.144 12.144C5.241 12.048 5.359 12 5.5 12L9 12C9.381 12 9.75 11.93 10.104 11.789C10.489 11.637 10.828 11.414 11.121 11.121C11.414 10.828 11.637 10.489 11.789 10.104C11.93 9.75 12 9.381 12 9C12 8.619 11.93 8.25 11.789 7.896C11.637 7.511 11.414 7.172 11.121 6.879C10.828 6.586 10.489 6.363 10.104 6.211C9.75 6.07 9.381 6 9 6L3.707 6L5.854 8.146C5.953 8.246 6.003 8.364 6.003 8.5C6.003 8.636 5.953 8.754 5.854 8.854C5.756 8.951 5.638 9 5.5 9C5.362 9 5.244 8.951 5.146 8.854L2.146 5.854C2.049 5.756 2 5.638 2 5.5C2 5.362 2.049 5.244 2.146 5.146L5.146 2.146C5.244 2.049 5.362 2 5.5 2C5.638 2 5.756 2.049 5.854 2.146C5.951 2.244 6 2.362 6 2.5C6 2.638 5.951 2.756 5.854 2.854L3.707 5Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

// Icon(UndoIcon, contentDescription = null) tints it with LocalContentColor.
```

### Android XML

```xml
<!-- res/drawable/ic_undo.xml · Gentleface "undo" (line-round), MIT. https://gentleface.com/icons/undo -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M3.707 5L9 5C9.509 5 9.999 5.094 10.472 5.281C10.986 5.484 11.438 5.781 11.828 6.172C12.219 6.562 12.516 7.014 12.719 7.528C12.906 8.001 13 8.491 13 9C13 9.509 12.906 9.999 12.719 10.472C12.516 10.986 12.219 11.438 11.828 11.828C11.438 12.219 10.986 12.516 10.472 12.719C9.999 12.906 9.509 13 9 13L5.5 13C5.359 13 5.241 12.952 5.144 12.856C5.048 12.759 5 12.641 5 12.5C5 12.359 5.048 12.241 5.144 12.144C5.241 12.048 5.359 12 5.5 12L9 12C9.381 12 9.75 11.93 10.104 11.789C10.489 11.637 10.828 11.414 11.121 11.121C11.414 10.828 11.637 10.489 11.789 10.104C11.93 9.75 12 9.381 12 9C12 8.619 11.93 8.25 11.789 7.896C11.637 7.511 11.414 7.172 11.121 6.879C10.828 6.586 10.489 6.363 10.104 6.211C9.75 6.07 9.381 6 9 6L3.707 6L5.854 8.146C5.953 8.246 6.003 8.364 6.003 8.5C6.003 8.636 5.953 8.754 5.854 8.854C5.756 8.951 5.638 9 5.5 9C5.362 9 5.244 8.951 5.146 8.854L2.146 5.854C2.049 5.756 2 5.638 2 5.5C2 5.362 2.049 5.244 2.146 5.146L5.146 2.146C5.244 2.049 5.362 2 5.5 2C5.638 2 5.756 2.049 5.854 2.146C5.951 2.244 6 2.362 6 2.5C6 2.638 5.951 2.756 5.854 2.854L3.707 5Z"/>
</vector>
```

### Flutter

```dart
// Gentleface "undo" (line-round), MIT. https://gentleface.com/icons/undo
import 'package:flutter/widgets.dart';

class UndoIcon extends StatelessWidget {
  const UndoIcon({super.key, this.size = 16, this.color});
  final double size;
  final Color? color;

  @override
  Widget build(BuildContext context) => CustomPaint(
        size: Size.square(size),
        painter: _UndoIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
      );
}

class _UndoIconPainter extends CustomPainter {
  _UndoIconPainter(this.color);
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(3.707, 5)
      ..lineTo(9, 5)
      ..cubicTo(9.509, 5, 9.999, 5.094, 10.472, 5.281)
      ..cubicTo(10.986, 5.484, 11.438, 5.781, 11.828, 6.172)
      ..cubicTo(12.219, 6.562, 12.516, 7.014, 12.719, 7.528)
      ..cubicTo(12.906, 8.001, 13, 8.491, 13, 9)
      ..cubicTo(13, 9.509, 12.906, 9.999, 12.719, 10.472)
      ..cubicTo(12.516, 10.986, 12.219, 11.438, 11.828, 11.828)
      ..cubicTo(11.438, 12.219, 10.986, 12.516, 10.472, 12.719)
      ..cubicTo(9.999, 12.906, 9.509, 13, 9, 13)
      ..lineTo(5.5, 13)
      ..cubicTo(5.359, 13, 5.241, 12.952, 5.144, 12.856)
      ..cubicTo(5.048, 12.759, 5, 12.641, 5, 12.5)
      ..cubicTo(5, 12.359, 5.048, 12.241, 5.144, 12.144)
      ..cubicTo(5.241, 12.048, 5.359, 12, 5.5, 12)
      ..lineTo(9, 12)
      ..cubicTo(9.381, 12, 9.75, 11.93, 10.104, 11.789)
      ..cubicTo(10.489, 11.637, 10.828, 11.414, 11.121, 11.121)
      ..cubicTo(11.414, 10.828, 11.637, 10.489, 11.789, 10.104)
      ..cubicTo(11.93, 9.75, 12, 9.381, 12, 9)
      ..cubicTo(12, 8.619, 11.93, 8.25, 11.789, 7.896)
      ..cubicTo(11.637, 7.511, 11.414, 7.172, 11.121, 6.879)
      ..cubicTo(10.828, 6.586, 10.489, 6.363, 10.104, 6.211)
      ..cubicTo(9.75, 6.07, 9.381, 6, 9, 6)
      ..lineTo(3.707, 6)
      ..lineTo(5.854, 8.146)
      ..cubicTo(5.953, 8.246, 6.003, 8.364, 6.003, 8.5)
      ..cubicTo(6.003, 8.636, 5.953, 8.754, 5.854, 8.854)
      ..cubicTo(5.756, 8.951, 5.638, 9, 5.5, 9)
      ..cubicTo(5.362, 9, 5.244, 8.951, 5.146, 8.854)
      ..lineTo(2.146, 5.854)
      ..cubicTo(2.049, 5.756, 2, 5.638, 2, 5.5)
      ..cubicTo(2, 5.362, 2.049, 5.244, 2.146, 5.146)
      ..lineTo(5.146, 2.146)
      ..cubicTo(5.244, 2.049, 5.362, 2, 5.5, 2)
      ..cubicTo(5.638, 2, 5.756, 2.049, 5.854, 2.146)
      ..cubicTo(5.951, 2.244, 6, 2.362, 6, 2.5)
      ..cubicTo(6, 2.638, 5.951, 2.756, 5.854, 2.854)
      ..lineTo(3.707, 5)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

  @override
  bool shouldRepaint(_UndoIconPainter old) => old.color != color;
}
```