# escape icon

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

- Category: Devices & hardware
- Use it for: escape key, esc, esc key
- Tags: escape, esc, key, keyboard, exit, cancel, leave, dismiss, iso-escape
- Component name: EscapeIcon
- Added: 2026-10-29
- Since: version 0.2.0
- npm: `import { EscapeIcon } from '@gentleface/react';` (@gentleface/react 0.2.0)
- Changed: 2026-10-30 (added)

## Don't confuse with

- `log-out`: sign out or exit an app (log-out)

## 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/escape.svg · PNG https://gentleface.com/png/line-round/16/escape.png · https://gentleface.com/png/line-round/32/escape.png · https://gentleface.com/png/line-round/48/escape.png
- line-soft: https://gentleface.com/svg/line-soft/16/escape.svg · PNG https://gentleface.com/png/line-soft/16/escape.png · https://gentleface.com/png/line-soft/32/escape.png · https://gentleface.com/png/line-soft/48/escape.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/escape.svg · PNG https://gentleface.com/png/line-sharp/16/escape.png · https://gentleface.com/png/line-sharp/32/escape.png · https://gentleface.com/png/line-sharp/48/escape.png
- solid-round: https://gentleface.com/svg/solid-round/16/escape.svg · PNG https://gentleface.com/png/solid-round/16/escape.png · https://gentleface.com/png/solid-round/32/escape.png · https://gentleface.com/png/solid-round/48/escape.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/escape.svg · PNG https://gentleface.com/png/solid-soft/16/escape.png · https://gentleface.com/png/solid-soft/32/escape.png · https://gentleface.com/png/solid-soft/48/escape.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/escape.svg · PNG https://gentleface.com/png/solid-sharp/16/escape.png · https://gentleface.com/png/solid-sharp/32/escape.png · https://gentleface.com/png/solid-sharp/48/escape.png

The SVG of every style: https://gentleface.com/icons/escape.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="M8.854 8.146C8.953 8.246 9.003 8.364 9.003 8.5C9.003 8.636 8.953 8.754 8.854 8.854C8.754 8.953 8.636 9.003 8.5 9.003C8.364 9.003 8.246 8.953 8.146 8.854L2 2.707L2 4.5C2 4.641 1.952 4.759 1.856 4.856C1.759 4.952 1.641 5 1.5 5C1.359 5 1.241 4.952 1.144 4.856C1.048 4.759 1 4.641 1 4.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L4.5 1C4.641 1 4.759 1.048 4.856 1.144C4.952 1.241 5 1.359 5 1.5C5 1.641 4.952 1.759 4.856 1.856C4.759 1.952 4.641 2 4.5 2L2.707 2L8.854 8.146ZM8.5 2C9.327 2 10.124 2.152 10.893 2.456C11.727 2.787 12.462 3.269 13.096 3.904C13.731 4.538 14.213 5.273 14.544 6.107C14.848 6.876 15 7.673 15 8.5C15 9.327 14.848 10.124 14.544 10.893C14.213 11.727 13.731 12.462 13.096 13.096C12.462 13.731 11.727 14.213 10.893 14.544C10.124 14.848 9.327 15 8.5 15C7.673 15 6.876 14.848 6.107 14.544C5.273 14.213 4.538 13.731 3.904 13.096C3.269 12.462 2.787 11.727 2.456 10.893C2.152 10.124 2 9.327 2 8.5C2 8.359 2.048 8.241 2.144 8.144C2.241 8.048 2.359 8 2.5 8C2.641 8 2.759 8.048 2.856 8.144C2.952 8.241 3 8.359 3 8.5C3 9.199 3.129 9.874 3.386 10.525C3.666 11.231 4.074 11.852 4.611 12.389C5.148 12.926 5.769 13.334 6.475 13.614C7.126 13.871 7.801 14 8.5 14C9.199 14 9.874 13.871 10.525 13.614C11.231 13.334 11.852 12.926 12.389 12.389C12.926 11.852 13.334 11.231 13.614 10.525C13.871 9.874 14 9.199 14 8.5C14 7.801 13.871 7.126 13.614 6.475C13.334 5.769 12.926 5.148 12.389 4.611C11.852 4.074 11.231 3.666 10.525 3.386C9.874 3.129 9.199 3 8.5 3C8.359 3 8.241 2.952 8.144 2.856C8.048 2.759 8 2.641 8 2.5C8 2.359 8.048 2.241 8.144 2.144C8.241 2.048 8.359 2 8.5 2Z"/></svg>
```

### React

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

export function EscapeIcon(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="M8.854 8.146C8.953 8.246 9.003 8.364 9.003 8.5C9.003 8.636 8.953 8.754 8.854 8.854C8.754 8.953 8.636 9.003 8.5 9.003C8.364 9.003 8.246 8.953 8.146 8.854L2 2.707L2 4.5C2 4.641 1.952 4.759 1.856 4.856C1.759 4.952 1.641 5 1.5 5C1.359 5 1.241 4.952 1.144 4.856C1.048 4.759 1 4.641 1 4.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L4.5 1C4.641 1 4.759 1.048 4.856 1.144C4.952 1.241 5 1.359 5 1.5C5 1.641 4.952 1.759 4.856 1.856C4.759 1.952 4.641 2 4.5 2L2.707 2L8.854 8.146ZM8.5 2C9.327 2 10.124 2.152 10.893 2.456C11.727 2.787 12.462 3.269 13.096 3.904C13.731 4.538 14.213 5.273 14.544 6.107C14.848 6.876 15 7.673 15 8.5C15 9.327 14.848 10.124 14.544 10.893C14.213 11.727 13.731 12.462 13.096 13.096C12.462 13.731 11.727 14.213 10.893 14.544C10.124 14.848 9.327 15 8.5 15C7.673 15 6.876 14.848 6.107 14.544C5.273 14.213 4.538 13.731 3.904 13.096C3.269 12.462 2.787 11.727 2.456 10.893C2.152 10.124 2 9.327 2 8.5C2 8.359 2.048 8.241 2.144 8.144C2.241 8.048 2.359 8 2.5 8C2.641 8 2.759 8.048 2.856 8.144C2.952 8.241 3 8.359 3 8.5C3 9.199 3.129 9.874 3.386 10.525C3.666 11.231 4.074 11.852 4.611 12.389C5.148 12.926 5.769 13.334 6.475 13.614C7.126 13.871 7.801 14 8.5 14C9.199 14 9.874 13.871 10.525 13.614C11.231 13.334 11.852 12.926 12.389 12.389C12.926 11.852 13.334 11.231 13.614 10.525C13.871 9.874 14 9.199 14 8.5C14 7.801 13.871 7.126 13.614 6.475C13.334 5.769 12.926 5.148 12.389 4.611C11.852 4.074 11.231 3.666 10.525 3.386C9.874 3.129 9.199 3 8.5 3C8.359 3 8.241 2.952 8.144 2.856C8.048 2.759 8 2.641 8 2.5C8 2.359 8.048 2.241 8.144 2.144C8.241 2.048 8.359 2 8.5 2Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "escape" (line-round), MIT. https://gentleface.com/icons/escape -->
<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="M8.854 8.146C8.953 8.246 9.003 8.364 9.003 8.5C9.003 8.636 8.953 8.754 8.854 8.854C8.754 8.953 8.636 9.003 8.5 9.003C8.364 9.003 8.246 8.953 8.146 8.854L2 2.707L2 4.5C2 4.641 1.952 4.759 1.856 4.856C1.759 4.952 1.641 5 1.5 5C1.359 5 1.241 4.952 1.144 4.856C1.048 4.759 1 4.641 1 4.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L4.5 1C4.641 1 4.759 1.048 4.856 1.144C4.952 1.241 5 1.359 5 1.5C5 1.641 4.952 1.759 4.856 1.856C4.759 1.952 4.641 2 4.5 2L2.707 2L8.854 8.146ZM8.5 2C9.327 2 10.124 2.152 10.893 2.456C11.727 2.787 12.462 3.269 13.096 3.904C13.731 4.538 14.213 5.273 14.544 6.107C14.848 6.876 15 7.673 15 8.5C15 9.327 14.848 10.124 14.544 10.893C14.213 11.727 13.731 12.462 13.096 13.096C12.462 13.731 11.727 14.213 10.893 14.544C10.124 14.848 9.327 15 8.5 15C7.673 15 6.876 14.848 6.107 14.544C5.273 14.213 4.538 13.731 3.904 13.096C3.269 12.462 2.787 11.727 2.456 10.893C2.152 10.124 2 9.327 2 8.5C2 8.359 2.048 8.241 2.144 8.144C2.241 8.048 2.359 8 2.5 8C2.641 8 2.759 8.048 2.856 8.144C2.952 8.241 3 8.359 3 8.5C3 9.199 3.129 9.874 3.386 10.525C3.666 11.231 4.074 11.852 4.611 12.389C5.148 12.926 5.769 13.334 6.475 13.614C7.126 13.871 7.801 14 8.5 14C9.199 14 9.874 13.871 10.525 13.614C11.231 13.334 11.852 12.926 12.389 12.389C12.926 11.852 13.334 11.231 13.614 10.525C13.871 9.874 14 9.199 14 8.5C14 7.801 13.871 7.126 13.614 6.475C13.334 5.769 12.926 5.148 12.389 4.611C11.852 4.074 11.231 3.666 10.525 3.386C9.874 3.129 9.199 3 8.5 3C8.359 3 8.241 2.952 8.144 2.856C8.048 2.759 8 2.641 8 2.5C8 2.359 8.048 2.241 8.144 2.144C8.241 2.048 8.359 2 8.5 2Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "escape" (line-round), MIT. https://gentleface.com/icons/escape -->
<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="M8.854 8.146C8.953 8.246 9.003 8.364 9.003 8.5C9.003 8.636 8.953 8.754 8.854 8.854C8.754 8.953 8.636 9.003 8.5 9.003C8.364 9.003 8.246 8.953 8.146 8.854L2 2.707L2 4.5C2 4.641 1.952 4.759 1.856 4.856C1.759 4.952 1.641 5 1.5 5C1.359 5 1.241 4.952 1.144 4.856C1.048 4.759 1 4.641 1 4.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L4.5 1C4.641 1 4.759 1.048 4.856 1.144C4.952 1.241 5 1.359 5 1.5C5 1.641 4.952 1.759 4.856 1.856C4.759 1.952 4.641 2 4.5 2L2.707 2L8.854 8.146ZM8.5 2C9.327 2 10.124 2.152 10.893 2.456C11.727 2.787 12.462 3.269 13.096 3.904C13.731 4.538 14.213 5.273 14.544 6.107C14.848 6.876 15 7.673 15 8.5C15 9.327 14.848 10.124 14.544 10.893C14.213 11.727 13.731 12.462 13.096 13.096C12.462 13.731 11.727 14.213 10.893 14.544C10.124 14.848 9.327 15 8.5 15C7.673 15 6.876 14.848 6.107 14.544C5.273 14.213 4.538 13.731 3.904 13.096C3.269 12.462 2.787 11.727 2.456 10.893C2.152 10.124 2 9.327 2 8.5C2 8.359 2.048 8.241 2.144 8.144C2.241 8.048 2.359 8 2.5 8C2.641 8 2.759 8.048 2.856 8.144C2.952 8.241 3 8.359 3 8.5C3 9.199 3.129 9.874 3.386 10.525C3.666 11.231 4.074 11.852 4.611 12.389C5.148 12.926 5.769 13.334 6.475 13.614C7.126 13.871 7.801 14 8.5 14C9.199 14 9.874 13.871 10.525 13.614C11.231 13.334 11.852 12.926 12.389 12.389C12.926 11.852 13.334 11.231 13.614 10.525C13.871 9.874 14 9.199 14 8.5C14 7.801 13.871 7.126 13.614 6.475C13.334 5.769 12.926 5.148 12.389 4.611C11.852 4.074 11.231 3.666 10.525 3.386C9.874 3.129 9.199 3 8.5 3C8.359 3 8.241 2.952 8.144 2.856C8.048 2.759 8 2.641 8 2.5C8 2.359 8.048 2.241 8.144 2.144C8.241 2.048 8.359 2 8.5 2Z" />
</svg>
```

### HTML img

```html
<!-- Gentleface "escape" (line-round), MIT. https://gentleface.com/icons/escape. 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/escape.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "escape" (line-round), MIT. https://gentleface.com/icons/escape. Takes the text color. */
.icon-escape {
  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='M8.854 8.146C8.953 8.246 9.003 8.364 9.003 8.5C9.003 8.636 8.953 8.754 8.854 8.854C8.754 8.953 8.636 9.003 8.5 9.003C8.364 9.003 8.246 8.953 8.146 8.854L2 2.707L2 4.5C2 4.641 1.952 4.759 1.856 4.856C1.759 4.952 1.641 5 1.5 5C1.359 5 1.241 4.952 1.144 4.856C1.048 4.759 1 4.641 1 4.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L4.5 1C4.641 1 4.759 1.048 4.856 1.144C4.952 1.241 5 1.359 5 1.5C5 1.641 4.952 1.759 4.856 1.856C4.759 1.952 4.641 2 4.5 2L2.707 2L8.854 8.146ZM8.5 2C9.327 2 10.124 2.152 10.893 2.456C11.727 2.787 12.462 3.269 13.096 3.904C13.731 4.538 14.213 5.273 14.544 6.107C14.848 6.876 15 7.673 15 8.5C15 9.327 14.848 10.124 14.544 10.893C14.213 11.727 13.731 12.462 13.096 13.096C12.462 13.731 11.727 14.213 10.893 14.544C10.124 14.848 9.327 15 8.5 15C7.673 15 6.876 14.848 6.107 14.544C5.273 14.213 4.538 13.731 3.904 13.096C3.269 12.462 2.787 11.727 2.456 10.893C2.152 10.124 2 9.327 2 8.5C2 8.359 2.048 8.241 2.144 8.144C2.241 8.048 2.359 8 2.5 8C2.641 8 2.759 8.048 2.856 8.144C2.952 8.241 3 8.359 3 8.5C3 9.199 3.129 9.874 3.386 10.525C3.666 11.231 4.074 11.852 4.611 12.389C5.148 12.926 5.769 13.334 6.475 13.614C7.126 13.871 7.801 14 8.5 14C9.199 14 9.874 13.871 10.525 13.614C11.231 13.334 11.852 12.926 12.389 12.389C12.926 11.852 13.334 11.231 13.614 10.525C13.871 9.874 14 9.199 14 8.5C14 7.801 13.871 7.126 13.614 6.475C13.334 5.769 12.926 5.148 12.389 4.611C11.852 4.074 11.231 3.666 10.525 3.386C9.874 3.129 9.199 3 8.5 3C8.359 3 8.241 2.952 8.144 2.856C8.048 2.759 8 2.641 8 2.5C8 2.359 8.048 2.241 8.144 2.144C8.241 2.048 8.359 2 8.5 2Z'/%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='M8.854 8.146C8.953 8.246 9.003 8.364 9.003 8.5C9.003 8.636 8.953 8.754 8.854 8.854C8.754 8.953 8.636 9.003 8.5 9.003C8.364 9.003 8.246 8.953 8.146 8.854L2 2.707L2 4.5C2 4.641 1.952 4.759 1.856 4.856C1.759 4.952 1.641 5 1.5 5C1.359 5 1.241 4.952 1.144 4.856C1.048 4.759 1 4.641 1 4.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L4.5 1C4.641 1 4.759 1.048 4.856 1.144C4.952 1.241 5 1.359 5 1.5C5 1.641 4.952 1.759 4.856 1.856C4.759 1.952 4.641 2 4.5 2L2.707 2L8.854 8.146ZM8.5 2C9.327 2 10.124 2.152 10.893 2.456C11.727 2.787 12.462 3.269 13.096 3.904C13.731 4.538 14.213 5.273 14.544 6.107C14.848 6.876 15 7.673 15 8.5C15 9.327 14.848 10.124 14.544 10.893C14.213 11.727 13.731 12.462 13.096 13.096C12.462 13.731 11.727 14.213 10.893 14.544C10.124 14.848 9.327 15 8.5 15C7.673 15 6.876 14.848 6.107 14.544C5.273 14.213 4.538 13.731 3.904 13.096C3.269 12.462 2.787 11.727 2.456 10.893C2.152 10.124 2 9.327 2 8.5C2 8.359 2.048 8.241 2.144 8.144C2.241 8.048 2.359 8 2.5 8C2.641 8 2.759 8.048 2.856 8.144C2.952 8.241 3 8.359 3 8.5C3 9.199 3.129 9.874 3.386 10.525C3.666 11.231 4.074 11.852 4.611 12.389C5.148 12.926 5.769 13.334 6.475 13.614C7.126 13.871 7.801 14 8.5 14C9.199 14 9.874 13.871 10.525 13.614C11.231 13.334 11.852 12.926 12.389 12.389C12.926 11.852 13.334 11.231 13.614 10.525C13.871 9.874 14 9.199 14 8.5C14 7.801 13.871 7.126 13.614 6.475C13.334 5.769 12.926 5.148 12.389 4.611C11.852 4.074 11.231 3.666 10.525 3.386C9.874 3.129 9.199 3 8.5 3C8.359 3 8.241 2.952 8.144 2.856C8.048 2.759 8 2.641 8 2.5C8 2.359 8.048 2.241 8.144 2.144C8.241 2.048 8.359 2 8.5 2Z'/%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='M8.854 8.146C8.953 8.246 9.003 8.364 9.003 8.5C9.003 8.636 8.953 8.754 8.854 8.854C8.754 8.953 8.636 9.003 8.5 9.003C8.364 9.003 8.246 8.953 8.146 8.854L2 2.707L2 4.5C2 4.641 1.952 4.759 1.856 4.856C1.759 4.952 1.641 5 1.5 5C1.359 5 1.241 4.952 1.144 4.856C1.048 4.759 1 4.641 1 4.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L4.5 1C4.641 1 4.759 1.048 4.856 1.144C4.952 1.241 5 1.359 5 1.5C5 1.641 4.952 1.759 4.856 1.856C4.759 1.952 4.641 2 4.5 2L2.707 2L8.854 8.146ZM8.5 2C9.327 2 10.124 2.152 10.893 2.456C11.727 2.787 12.462 3.269 13.096 3.904C13.731 4.538 14.213 5.273 14.544 6.107C14.848 6.876 15 7.673 15 8.5C15 9.327 14.848 10.124 14.544 10.893C14.213 11.727 13.731 12.462 13.096 13.096C12.462 13.731 11.727 14.213 10.893 14.544C10.124 14.848 9.327 15 8.5 15C7.673 15 6.876 14.848 6.107 14.544C5.273 14.213 4.538 13.731 3.904 13.096C3.269 12.462 2.787 11.727 2.456 10.893C2.152 10.124 2 9.327 2 8.5C2 8.359 2.048 8.241 2.144 8.144C2.241 8.048 2.359 8 2.5 8C2.641 8 2.759 8.048 2.856 8.144C2.952 8.241 3 8.359 3 8.5C3 9.199 3.129 9.874 3.386 10.525C3.666 11.231 4.074 11.852 4.611 12.389C5.148 12.926 5.769 13.334 6.475 13.614C7.126 13.871 7.801 14 8.5 14C9.199 14 9.874 13.871 10.525 13.614C11.231 13.334 11.852 12.926 12.389 12.389C12.926 11.852 13.334 11.231 13.614 10.525C13.871 9.874 14 9.199 14 8.5C14 7.801 13.871 7.126 13.614 6.475C13.334 5.769 12.926 5.148 12.389 4.611C11.852 4.074 11.231 3.666 10.525 3.386C9.874 3.129 9.199 3 8.5 3C8.359 3 8.241 2.952 8.144 2.856C8.048 2.759 8 2.641 8 2.5C8 2.359 8.048 2.241 8.144 2.144C8.241 2.048 8.359 2 8.5 2Z'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "escape" (line-round), MIT. https://gentleface.com/icons/escape
     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#escape"/></svg>
```

### SwiftUI

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

struct EscapeIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 8.854, y: 8.146))
        p.addCurve(to: CGPoint(x: 9.003, y: 8.5), control1: CGPoint(x: 8.953, y: 8.246), control2: CGPoint(x: 9.003, y: 8.364))
        p.addCurve(to: CGPoint(x: 8.854, y: 8.854), control1: CGPoint(x: 9.003, y: 8.636), control2: CGPoint(x: 8.953, y: 8.754))
        p.addCurve(to: CGPoint(x: 8.5, y: 9.003), control1: CGPoint(x: 8.754, y: 8.953), control2: CGPoint(x: 8.636, y: 9.003))
        p.addCurve(to: CGPoint(x: 8.146, y: 8.854), control1: CGPoint(x: 8.364, y: 9.003), control2: CGPoint(x: 8.246, y: 8.953))
        p.addLine(to: CGPoint(x: 2, y: 2.707))
        p.addLine(to: CGPoint(x: 2, y: 4.5))
        p.addCurve(to: CGPoint(x: 1.856, y: 4.856), control1: CGPoint(x: 2, y: 4.641), control2: CGPoint(x: 1.952, y: 4.759))
        p.addCurve(to: CGPoint(x: 1.5, y: 5), control1: CGPoint(x: 1.759, y: 4.952), control2: CGPoint(x: 1.641, y: 5))
        p.addCurve(to: CGPoint(x: 1.144, y: 4.856), control1: CGPoint(x: 1.359, y: 5), control2: CGPoint(x: 1.241, y: 4.952))
        p.addCurve(to: CGPoint(x: 1, y: 4.5), control1: CGPoint(x: 1.048, y: 4.759), control2: CGPoint(x: 1, y: 4.641))
        p.addLine(to: CGPoint(x: 1, y: 1.5))
        p.addCurve(to: CGPoint(x: 1.144, y: 1.144), control1: CGPoint(x: 1, y: 1.359), control2: CGPoint(x: 1.048, y: 1.241))
        p.addCurve(to: CGPoint(x: 1.5, y: 1), control1: CGPoint(x: 1.241, y: 1.048), control2: CGPoint(x: 1.359, y: 1))
        p.addLine(to: CGPoint(x: 4.5, y: 1))
        p.addCurve(to: CGPoint(x: 4.856, y: 1.144), control1: CGPoint(x: 4.641, y: 1), control2: CGPoint(x: 4.759, y: 1.048))
        p.addCurve(to: CGPoint(x: 5, y: 1.5), control1: CGPoint(x: 4.952, y: 1.241), control2: CGPoint(x: 5, y: 1.359))
        p.addCurve(to: CGPoint(x: 4.856, y: 1.856), control1: CGPoint(x: 5, y: 1.641), control2: CGPoint(x: 4.952, y: 1.759))
        p.addCurve(to: CGPoint(x: 4.5, y: 2), control1: CGPoint(x: 4.759, y: 1.952), control2: CGPoint(x: 4.641, y: 2))
        p.addLine(to: CGPoint(x: 2.707, y: 2))
        p.addLine(to: CGPoint(x: 8.854, y: 8.146))
        p.closeSubpath()
        p.move(to: CGPoint(x: 8.5, y: 2))
        p.addCurve(to: CGPoint(x: 10.893, y: 2.456), control1: CGPoint(x: 9.327, y: 2), control2: CGPoint(x: 10.124, y: 2.152))
        p.addCurve(to: CGPoint(x: 13.096, y: 3.904), control1: CGPoint(x: 11.727, y: 2.787), control2: CGPoint(x: 12.462, y: 3.269))
        p.addCurve(to: CGPoint(x: 14.544, y: 6.107), control1: CGPoint(x: 13.731, y: 4.538), control2: CGPoint(x: 14.213, y: 5.273))
        p.addCurve(to: CGPoint(x: 15, y: 8.5), control1: CGPoint(x: 14.848, y: 6.876), control2: CGPoint(x: 15, y: 7.673))
        p.addCurve(to: CGPoint(x: 14.544, y: 10.893), control1: CGPoint(x: 15, y: 9.327), control2: CGPoint(x: 14.848, y: 10.124))
        p.addCurve(to: CGPoint(x: 13.096, y: 13.096), control1: CGPoint(x: 14.213, y: 11.727), control2: CGPoint(x: 13.731, y: 12.462))
        p.addCurve(to: CGPoint(x: 10.893, y: 14.544), control1: CGPoint(x: 12.462, y: 13.731), control2: CGPoint(x: 11.727, y: 14.213))
        p.addCurve(to: CGPoint(x: 8.5, y: 15), control1: CGPoint(x: 10.124, y: 14.848), control2: CGPoint(x: 9.327, y: 15))
        p.addCurve(to: CGPoint(x: 6.107, y: 14.544), control1: CGPoint(x: 7.673, y: 15), control2: CGPoint(x: 6.876, y: 14.848))
        p.addCurve(to: CGPoint(x: 3.904, y: 13.096), control1: CGPoint(x: 5.273, y: 14.213), control2: CGPoint(x: 4.538, y: 13.731))
        p.addCurve(to: CGPoint(x: 2.456, y: 10.893), control1: CGPoint(x: 3.269, y: 12.462), control2: CGPoint(x: 2.787, y: 11.727))
        p.addCurve(to: CGPoint(x: 2, y: 8.5), control1: CGPoint(x: 2.152, y: 10.124), control2: CGPoint(x: 2, y: 9.327))
        p.addCurve(to: CGPoint(x: 2.144, y: 8.144), control1: CGPoint(x: 2, y: 8.359), control2: CGPoint(x: 2.048, y: 8.241))
        p.addCurve(to: CGPoint(x: 2.5, y: 8), control1: CGPoint(x: 2.241, y: 8.048), control2: CGPoint(x: 2.359, y: 8))
        p.addCurve(to: CGPoint(x: 2.856, y: 8.144), control1: CGPoint(x: 2.641, y: 8), control2: CGPoint(x: 2.759, y: 8.048))
        p.addCurve(to: CGPoint(x: 3, y: 8.5), control1: CGPoint(x: 2.952, y: 8.241), control2: CGPoint(x: 3, y: 8.359))
        p.addCurve(to: CGPoint(x: 3.386, y: 10.525), control1: CGPoint(x: 3, y: 9.199), control2: CGPoint(x: 3.129, y: 9.874))
        p.addCurve(to: CGPoint(x: 4.611, y: 12.389), control1: CGPoint(x: 3.666, y: 11.231), control2: CGPoint(x: 4.074, y: 11.852))
        p.addCurve(to: CGPoint(x: 6.475, y: 13.614), control1: CGPoint(x: 5.148, y: 12.926), control2: CGPoint(x: 5.769, y: 13.334))
        p.addCurve(to: CGPoint(x: 8.5, y: 14), control1: CGPoint(x: 7.126, y: 13.871), control2: CGPoint(x: 7.801, y: 14))
        p.addCurve(to: CGPoint(x: 10.525, y: 13.614), control1: CGPoint(x: 9.199, y: 14), control2: CGPoint(x: 9.874, y: 13.871))
        p.addCurve(to: CGPoint(x: 12.389, y: 12.389), control1: CGPoint(x: 11.231, y: 13.334), control2: CGPoint(x: 11.852, y: 12.926))
        p.addCurve(to: CGPoint(x: 13.614, y: 10.525), control1: CGPoint(x: 12.926, y: 11.852), control2: CGPoint(x: 13.334, y: 11.231))
        p.addCurve(to: CGPoint(x: 14, y: 8.5), control1: CGPoint(x: 13.871, y: 9.874), control2: CGPoint(x: 14, y: 9.199))
        p.addCurve(to: CGPoint(x: 13.614, y: 6.475), control1: CGPoint(x: 14, y: 7.801), control2: CGPoint(x: 13.871, y: 7.126))
        p.addCurve(to: CGPoint(x: 12.389, y: 4.611), control1: CGPoint(x: 13.334, y: 5.769), control2: CGPoint(x: 12.926, y: 5.148))
        p.addCurve(to: CGPoint(x: 10.525, y: 3.386), control1: CGPoint(x: 11.852, y: 4.074), control2: CGPoint(x: 11.231, y: 3.666))
        p.addCurve(to: CGPoint(x: 8.5, y: 3), control1: CGPoint(x: 9.874, y: 3.129), control2: CGPoint(x: 9.199, y: 3))
        p.addCurve(to: CGPoint(x: 8.144, y: 2.856), control1: CGPoint(x: 8.359, y: 3), control2: CGPoint(x: 8.241, y: 2.952))
        p.addCurve(to: CGPoint(x: 8, y: 2.5), control1: CGPoint(x: 8.048, y: 2.759), control2: CGPoint(x: 8, y: 2.641))
        p.addCurve(to: CGPoint(x: 8.144, y: 2.144), control1: CGPoint(x: 8, y: 2.359), control2: CGPoint(x: 8.048, y: 2.241))
        p.addCurve(to: CGPoint(x: 8.5, y: 2), control1: CGPoint(x: 8.241, y: 2.048), control2: CGPoint(x: 8.359, y: 2))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

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

### Compose

```kotlin
// Gentleface "escape" (line-round), MIT. https://gentleface.com/icons/escape
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 EscapeIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "escape", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M8.854 8.146C8.953 8.246 9.003 8.364 9.003 8.5C9.003 8.636 8.953 8.754 8.854 8.854C8.754 8.953 8.636 9.003 8.5 9.003C8.364 9.003 8.246 8.953 8.146 8.854L2 2.707L2 4.5C2 4.641 1.952 4.759 1.856 4.856C1.759 4.952 1.641 5 1.5 5C1.359 5 1.241 4.952 1.144 4.856C1.048 4.759 1 4.641 1 4.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L4.5 1C4.641 1 4.759 1.048 4.856 1.144C4.952 1.241 5 1.359 5 1.5C5 1.641 4.952 1.759 4.856 1.856C4.759 1.952 4.641 2 4.5 2L2.707 2L8.854 8.146ZM8.5 2C9.327 2 10.124 2.152 10.893 2.456C11.727 2.787 12.462 3.269 13.096 3.904C13.731 4.538 14.213 5.273 14.544 6.107C14.848 6.876 15 7.673 15 8.5C15 9.327 14.848 10.124 14.544 10.893C14.213 11.727 13.731 12.462 13.096 13.096C12.462 13.731 11.727 14.213 10.893 14.544C10.124 14.848 9.327 15 8.5 15C7.673 15 6.876 14.848 6.107 14.544C5.273 14.213 4.538 13.731 3.904 13.096C3.269 12.462 2.787 11.727 2.456 10.893C2.152 10.124 2 9.327 2 8.5C2 8.359 2.048 8.241 2.144 8.144C2.241 8.048 2.359 8 2.5 8C2.641 8 2.759 8.048 2.856 8.144C2.952 8.241 3 8.359 3 8.5C3 9.199 3.129 9.874 3.386 10.525C3.666 11.231 4.074 11.852 4.611 12.389C5.148 12.926 5.769 13.334 6.475 13.614C7.126 13.871 7.801 14 8.5 14C9.199 14 9.874 13.871 10.525 13.614C11.231 13.334 11.852 12.926 12.389 12.389C12.926 11.852 13.334 11.231 13.614 10.525C13.871 9.874 14 9.199 14 8.5C14 7.801 13.871 7.126 13.614 6.475C13.334 5.769 12.926 5.148 12.389 4.611C11.852 4.074 11.231 3.666 10.525 3.386C9.874 3.129 9.199 3 8.5 3C8.359 3 8.241 2.952 8.144 2.856C8.048 2.759 8 2.641 8 2.5C8 2.359 8.048 2.241 8.144 2.144C8.241 2.048 8.359 2 8.5 2Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

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

### Android XML

```xml
<!-- res/drawable/ic_escape.xml · Gentleface "escape" (line-round), MIT. https://gentleface.com/icons/escape -->
<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="M8.854 8.146C8.953 8.246 9.003 8.364 9.003 8.5C9.003 8.636 8.953 8.754 8.854 8.854C8.754 8.953 8.636 9.003 8.5 9.003C8.364 9.003 8.246 8.953 8.146 8.854L2 2.707L2 4.5C2 4.641 1.952 4.759 1.856 4.856C1.759 4.952 1.641 5 1.5 5C1.359 5 1.241 4.952 1.144 4.856C1.048 4.759 1 4.641 1 4.5L1 1.5C1 1.359 1.048 1.241 1.144 1.144C1.241 1.048 1.359 1 1.5 1L4.5 1C4.641 1 4.759 1.048 4.856 1.144C4.952 1.241 5 1.359 5 1.5C5 1.641 4.952 1.759 4.856 1.856C4.759 1.952 4.641 2 4.5 2L2.707 2L8.854 8.146ZM8.5 2C9.327 2 10.124 2.152 10.893 2.456C11.727 2.787 12.462 3.269 13.096 3.904C13.731 4.538 14.213 5.273 14.544 6.107C14.848 6.876 15 7.673 15 8.5C15 9.327 14.848 10.124 14.544 10.893C14.213 11.727 13.731 12.462 13.096 13.096C12.462 13.731 11.727 14.213 10.893 14.544C10.124 14.848 9.327 15 8.5 15C7.673 15 6.876 14.848 6.107 14.544C5.273 14.213 4.538 13.731 3.904 13.096C3.269 12.462 2.787 11.727 2.456 10.893C2.152 10.124 2 9.327 2 8.5C2 8.359 2.048 8.241 2.144 8.144C2.241 8.048 2.359 8 2.5 8C2.641 8 2.759 8.048 2.856 8.144C2.952 8.241 3 8.359 3 8.5C3 9.199 3.129 9.874 3.386 10.525C3.666 11.231 4.074 11.852 4.611 12.389C5.148 12.926 5.769 13.334 6.475 13.614C7.126 13.871 7.801 14 8.5 14C9.199 14 9.874 13.871 10.525 13.614C11.231 13.334 11.852 12.926 12.389 12.389C12.926 11.852 13.334 11.231 13.614 10.525C13.871 9.874 14 9.199 14 8.5C14 7.801 13.871 7.126 13.614 6.475C13.334 5.769 12.926 5.148 12.389 4.611C11.852 4.074 11.231 3.666 10.525 3.386C9.874 3.129 9.199 3 8.5 3C8.359 3 8.241 2.952 8.144 2.856C8.048 2.759 8 2.641 8 2.5C8 2.359 8.048 2.241 8.144 2.144C8.241 2.048 8.359 2 8.5 2Z"/>
</vector>
```

### Flutter

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

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

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

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

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(8.854, 8.146)
      ..cubicTo(8.953, 8.246, 9.003, 8.364, 9.003, 8.5)
      ..cubicTo(9.003, 8.636, 8.953, 8.754, 8.854, 8.854)
      ..cubicTo(8.754, 8.953, 8.636, 9.003, 8.5, 9.003)
      ..cubicTo(8.364, 9.003, 8.246, 8.953, 8.146, 8.854)
      ..lineTo(2, 2.707)
      ..lineTo(2, 4.5)
      ..cubicTo(2, 4.641, 1.952, 4.759, 1.856, 4.856)
      ..cubicTo(1.759, 4.952, 1.641, 5, 1.5, 5)
      ..cubicTo(1.359, 5, 1.241, 4.952, 1.144, 4.856)
      ..cubicTo(1.048, 4.759, 1, 4.641, 1, 4.5)
      ..lineTo(1, 1.5)
      ..cubicTo(1, 1.359, 1.048, 1.241, 1.144, 1.144)
      ..cubicTo(1.241, 1.048, 1.359, 1, 1.5, 1)
      ..lineTo(4.5, 1)
      ..cubicTo(4.641, 1, 4.759, 1.048, 4.856, 1.144)
      ..cubicTo(4.952, 1.241, 5, 1.359, 5, 1.5)
      ..cubicTo(5, 1.641, 4.952, 1.759, 4.856, 1.856)
      ..cubicTo(4.759, 1.952, 4.641, 2, 4.5, 2)
      ..lineTo(2.707, 2)
      ..lineTo(8.854, 8.146)
      ..close()
      ..moveTo(8.5, 2)
      ..cubicTo(9.327, 2, 10.124, 2.152, 10.893, 2.456)
      ..cubicTo(11.727, 2.787, 12.462, 3.269, 13.096, 3.904)
      ..cubicTo(13.731, 4.538, 14.213, 5.273, 14.544, 6.107)
      ..cubicTo(14.848, 6.876, 15, 7.673, 15, 8.5)
      ..cubicTo(15, 9.327, 14.848, 10.124, 14.544, 10.893)
      ..cubicTo(14.213, 11.727, 13.731, 12.462, 13.096, 13.096)
      ..cubicTo(12.462, 13.731, 11.727, 14.213, 10.893, 14.544)
      ..cubicTo(10.124, 14.848, 9.327, 15, 8.5, 15)
      ..cubicTo(7.673, 15, 6.876, 14.848, 6.107, 14.544)
      ..cubicTo(5.273, 14.213, 4.538, 13.731, 3.904, 13.096)
      ..cubicTo(3.269, 12.462, 2.787, 11.727, 2.456, 10.893)
      ..cubicTo(2.152, 10.124, 2, 9.327, 2, 8.5)
      ..cubicTo(2, 8.359, 2.048, 8.241, 2.144, 8.144)
      ..cubicTo(2.241, 8.048, 2.359, 8, 2.5, 8)
      ..cubicTo(2.641, 8, 2.759, 8.048, 2.856, 8.144)
      ..cubicTo(2.952, 8.241, 3, 8.359, 3, 8.5)
      ..cubicTo(3, 9.199, 3.129, 9.874, 3.386, 10.525)
      ..cubicTo(3.666, 11.231, 4.074, 11.852, 4.611, 12.389)
      ..cubicTo(5.148, 12.926, 5.769, 13.334, 6.475, 13.614)
      ..cubicTo(7.126, 13.871, 7.801, 14, 8.5, 14)
      ..cubicTo(9.199, 14, 9.874, 13.871, 10.525, 13.614)
      ..cubicTo(11.231, 13.334, 11.852, 12.926, 12.389, 12.389)
      ..cubicTo(12.926, 11.852, 13.334, 11.231, 13.614, 10.525)
      ..cubicTo(13.871, 9.874, 14, 9.199, 14, 8.5)
      ..cubicTo(14, 7.801, 13.871, 7.126, 13.614, 6.475)
      ..cubicTo(13.334, 5.769, 12.926, 5.148, 12.389, 4.611)
      ..cubicTo(11.852, 4.074, 11.231, 3.666, 10.525, 3.386)
      ..cubicTo(9.874, 3.129, 9.199, 3, 8.5, 3)
      ..cubicTo(8.359, 3, 8.241, 2.952, 8.144, 2.856)
      ..cubicTo(8.048, 2.759, 8, 2.641, 8, 2.5)
      ..cubicTo(8, 2.359, 8.048, 2.241, 8.144, 2.144)
      ..cubicTo(8.241, 2.048, 8.359, 2, 8.5, 2)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

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