Gentleface › Devices & hardware › escape

escape icon

Escape: escape key, esc, esc key. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

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

// 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: see /icons/escape.md

Svelte

Svelte: see /icons/escape.md

HTML img

HTML img: see /icons/escape.md

CSS

CSS: see /icons/escape.md

Data URL

Data URL: see /icons/escape.md

Sprite

Sprite: see /icons/escape.md

SwiftUI

SwiftUI: see /icons/escape.md

Compose

Compose: see /icons/escape.md

Android XML

Android XML: see /icons/escape.md

Flutter

Flutter: see /icons/escape.md

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. 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. More in how to use.

With npm: import { EscapeIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

escape key, esc, esc key

Don’t confuse with

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

Tags

escape, esc, key, keyboard, exit, cancel, leave, dismiss, iso-escape

Category

Devices & hardware

Component name

EscapeIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

More devices & hardware icons

backspace battery battery-alert battery-charging battery-check battery-full battery-low battery-medium battery-saver cable caps-lock charger circuit-board cpu cpu-sparkle desktop-tower · all devices & hardware icons

For agents

Metadata: /icons/escape.json · Markdown: /icons/escape.md · SVG: https://gentleface.com/svg/{style}/16/escape.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/escape.png

escape icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More devices & hardware icons

For agents

escape icon