# perspective icon

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

- Category: Design
- Use it for: perspective transform, perspective warp
- Tags: perspective, perspective transform, keystone, trapezoid, distort, transform, foreshorten, vanishing point, figma, photoshop, design tool
- Component name: PerspectiveIcon
- Added: 2026-10-29
- Since: version 0.2.0
- npm: `import { PerspectiveIcon } from '@gentleface/react';` (@gentleface/react 0.2.0)
- Changed: 2026-10-30 (added)

## Alternatives

- `skew`: slant without depth

## Also fits

- bounding box: distort with depth (trapezoid)
- skew: distort with depth (trapezoid)

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

The SVG of every style: https://gentleface.com/icons/perspective.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="M14.856 3.144C14.952 3.241 15 3.359 15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4L10.707 4L11.854 5.146C11.951 5.244 12 5.362 12 5.5C12 5.638 11.951 5.756 11.854 5.854C11.754 5.953 11.636 6.003 11.5 6.003C11.364 6.003 11.246 5.953 11.146 5.854L9.146 3.854C9.047 3.754 8.997 3.636 8.997 3.5C8.997 3.364 9.047 3.246 9.146 3.146L11.146 1.146C11.246 1.047 11.364 0.997 11.5 0.997C11.636 0.997 11.754 1.047 11.854 1.146C11.951 1.244 12 1.362 12 1.5C12 1.638 11.951 1.756 11.854 1.854L10.707 3L14.5 3C14.641 3 14.759 3.048 14.856 3.144ZM4.5 6.003C4.364 6.003 4.246 5.953 4.146 5.854C4.047 5.754 3.997 5.636 3.997 5.5C3.997 5.364 4.047 5.246 4.146 5.146L5.293 4L1.5 4C1.359 4 1.241 3.952 1.144 3.856C1.048 3.759 1 3.641 1 3.5C1 3.359 1.048 3.241 1.144 3.144C1.241 3.048 1.359 3 1.5 3L5.293 3L4.146 1.854C4.049 1.756 4 1.638 4 1.5C4 1.362 4.049 1.244 4.146 1.146C4.244 1.049 4.362 1 4.5 1C4.638 1 4.756 1.049 4.854 1.146L6.854 3.146C6.951 3.244 7 3.362 7 3.5C7 3.638 6.951 3.756 6.854 3.854L4.854 5.854C4.754 5.953 4.636 6.003 4.5 6.003ZM14.585 13.553C14.657 13.697 14.693 13.849 14.691 14.01C14.689 14.196 14.639 14.368 14.542 14.526C14.444 14.684 14.312 14.805 14.147 14.89C14.004 14.963 13.852 15 13.691 15L2.309 15C2.148 15 1.996 14.963 1.853 14.89C1.688 14.805 1.556 14.684 1.458 14.526C1.361 14.368 1.311 14.196 1.309 14.01C1.307 13.849 1.343 13.697 1.415 13.553L3.915 8.553C3.999 8.383 4.122 8.249 4.283 8.149C4.444 8.05 4.62 8 4.809 8L11.191 8C11.38 8 11.556 8.05 11.717 8.149C11.878 8.249 12.001 8.383 12.085 8.553L14.585 13.553ZM13.691 14L11.191 9L4.809 9L2.309 14L13.691 14Z"/></svg>
```

### React

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

export function PerspectiveIcon(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="M14.856 3.144C14.952 3.241 15 3.359 15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4L10.707 4L11.854 5.146C11.951 5.244 12 5.362 12 5.5C12 5.638 11.951 5.756 11.854 5.854C11.754 5.953 11.636 6.003 11.5 6.003C11.364 6.003 11.246 5.953 11.146 5.854L9.146 3.854C9.047 3.754 8.997 3.636 8.997 3.5C8.997 3.364 9.047 3.246 9.146 3.146L11.146 1.146C11.246 1.047 11.364 0.997 11.5 0.997C11.636 0.997 11.754 1.047 11.854 1.146C11.951 1.244 12 1.362 12 1.5C12 1.638 11.951 1.756 11.854 1.854L10.707 3L14.5 3C14.641 3 14.759 3.048 14.856 3.144ZM4.5 6.003C4.364 6.003 4.246 5.953 4.146 5.854C4.047 5.754 3.997 5.636 3.997 5.5C3.997 5.364 4.047 5.246 4.146 5.146L5.293 4L1.5 4C1.359 4 1.241 3.952 1.144 3.856C1.048 3.759 1 3.641 1 3.5C1 3.359 1.048 3.241 1.144 3.144C1.241 3.048 1.359 3 1.5 3L5.293 3L4.146 1.854C4.049 1.756 4 1.638 4 1.5C4 1.362 4.049 1.244 4.146 1.146C4.244 1.049 4.362 1 4.5 1C4.638 1 4.756 1.049 4.854 1.146L6.854 3.146C6.951 3.244 7 3.362 7 3.5C7 3.638 6.951 3.756 6.854 3.854L4.854 5.854C4.754 5.953 4.636 6.003 4.5 6.003ZM14.585 13.553C14.657 13.697 14.693 13.849 14.691 14.01C14.689 14.196 14.639 14.368 14.542 14.526C14.444 14.684 14.312 14.805 14.147 14.89C14.004 14.963 13.852 15 13.691 15L2.309 15C2.148 15 1.996 14.963 1.853 14.89C1.688 14.805 1.556 14.684 1.458 14.526C1.361 14.368 1.311 14.196 1.309 14.01C1.307 13.849 1.343 13.697 1.415 13.553L3.915 8.553C3.999 8.383 4.122 8.249 4.283 8.149C4.444 8.05 4.62 8 4.809 8L11.191 8C11.38 8 11.556 8.05 11.717 8.149C11.878 8.249 12.001 8.383 12.085 8.553L14.585 13.553ZM13.691 14L11.191 9L4.809 9L2.309 14L13.691 14Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "perspective" (line-round), MIT. https://gentleface.com/icons/perspective -->
<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="M14.856 3.144C14.952 3.241 15 3.359 15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4L10.707 4L11.854 5.146C11.951 5.244 12 5.362 12 5.5C12 5.638 11.951 5.756 11.854 5.854C11.754 5.953 11.636 6.003 11.5 6.003C11.364 6.003 11.246 5.953 11.146 5.854L9.146 3.854C9.047 3.754 8.997 3.636 8.997 3.5C8.997 3.364 9.047 3.246 9.146 3.146L11.146 1.146C11.246 1.047 11.364 0.997 11.5 0.997C11.636 0.997 11.754 1.047 11.854 1.146C11.951 1.244 12 1.362 12 1.5C12 1.638 11.951 1.756 11.854 1.854L10.707 3L14.5 3C14.641 3 14.759 3.048 14.856 3.144ZM4.5 6.003C4.364 6.003 4.246 5.953 4.146 5.854C4.047 5.754 3.997 5.636 3.997 5.5C3.997 5.364 4.047 5.246 4.146 5.146L5.293 4L1.5 4C1.359 4 1.241 3.952 1.144 3.856C1.048 3.759 1 3.641 1 3.5C1 3.359 1.048 3.241 1.144 3.144C1.241 3.048 1.359 3 1.5 3L5.293 3L4.146 1.854C4.049 1.756 4 1.638 4 1.5C4 1.362 4.049 1.244 4.146 1.146C4.244 1.049 4.362 1 4.5 1C4.638 1 4.756 1.049 4.854 1.146L6.854 3.146C6.951 3.244 7 3.362 7 3.5C7 3.638 6.951 3.756 6.854 3.854L4.854 5.854C4.754 5.953 4.636 6.003 4.5 6.003ZM14.585 13.553C14.657 13.697 14.693 13.849 14.691 14.01C14.689 14.196 14.639 14.368 14.542 14.526C14.444 14.684 14.312 14.805 14.147 14.89C14.004 14.963 13.852 15 13.691 15L2.309 15C2.148 15 1.996 14.963 1.853 14.89C1.688 14.805 1.556 14.684 1.458 14.526C1.361 14.368 1.311 14.196 1.309 14.01C1.307 13.849 1.343 13.697 1.415 13.553L3.915 8.553C3.999 8.383 4.122 8.249 4.283 8.149C4.444 8.05 4.62 8 4.809 8L11.191 8C11.38 8 11.556 8.05 11.717 8.149C11.878 8.249 12.001 8.383 12.085 8.553L14.585 13.553ZM13.691 14L11.191 9L4.809 9L2.309 14L13.691 14Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "perspective" (line-round), MIT. https://gentleface.com/icons/perspective -->
<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="M14.856 3.144C14.952 3.241 15 3.359 15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4L10.707 4L11.854 5.146C11.951 5.244 12 5.362 12 5.5C12 5.638 11.951 5.756 11.854 5.854C11.754 5.953 11.636 6.003 11.5 6.003C11.364 6.003 11.246 5.953 11.146 5.854L9.146 3.854C9.047 3.754 8.997 3.636 8.997 3.5C8.997 3.364 9.047 3.246 9.146 3.146L11.146 1.146C11.246 1.047 11.364 0.997 11.5 0.997C11.636 0.997 11.754 1.047 11.854 1.146C11.951 1.244 12 1.362 12 1.5C12 1.638 11.951 1.756 11.854 1.854L10.707 3L14.5 3C14.641 3 14.759 3.048 14.856 3.144ZM4.5 6.003C4.364 6.003 4.246 5.953 4.146 5.854C4.047 5.754 3.997 5.636 3.997 5.5C3.997 5.364 4.047 5.246 4.146 5.146L5.293 4L1.5 4C1.359 4 1.241 3.952 1.144 3.856C1.048 3.759 1 3.641 1 3.5C1 3.359 1.048 3.241 1.144 3.144C1.241 3.048 1.359 3 1.5 3L5.293 3L4.146 1.854C4.049 1.756 4 1.638 4 1.5C4 1.362 4.049 1.244 4.146 1.146C4.244 1.049 4.362 1 4.5 1C4.638 1 4.756 1.049 4.854 1.146L6.854 3.146C6.951 3.244 7 3.362 7 3.5C7 3.638 6.951 3.756 6.854 3.854L4.854 5.854C4.754 5.953 4.636 6.003 4.5 6.003ZM14.585 13.553C14.657 13.697 14.693 13.849 14.691 14.01C14.689 14.196 14.639 14.368 14.542 14.526C14.444 14.684 14.312 14.805 14.147 14.89C14.004 14.963 13.852 15 13.691 15L2.309 15C2.148 15 1.996 14.963 1.853 14.89C1.688 14.805 1.556 14.684 1.458 14.526C1.361 14.368 1.311 14.196 1.309 14.01C1.307 13.849 1.343 13.697 1.415 13.553L3.915 8.553C3.999 8.383 4.122 8.249 4.283 8.149C4.444 8.05 4.62 8 4.809 8L11.191 8C11.38 8 11.556 8.05 11.717 8.149C11.878 8.249 12.001 8.383 12.085 8.553L14.585 13.553ZM13.691 14L11.191 9L4.809 9L2.309 14L13.691 14Z" />
</svg>
```

### HTML img

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

### CSS

```css
/* Gentleface "perspective" (line-round), MIT. https://gentleface.com/icons/perspective. Takes the text color. */
.icon-perspective {
  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='M14.856 3.144C14.952 3.241 15 3.359 15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4L10.707 4L11.854 5.146C11.951 5.244 12 5.362 12 5.5C12 5.638 11.951 5.756 11.854 5.854C11.754 5.953 11.636 6.003 11.5 6.003C11.364 6.003 11.246 5.953 11.146 5.854L9.146 3.854C9.047 3.754 8.997 3.636 8.997 3.5C8.997 3.364 9.047 3.246 9.146 3.146L11.146 1.146C11.246 1.047 11.364 0.997 11.5 0.997C11.636 0.997 11.754 1.047 11.854 1.146C11.951 1.244 12 1.362 12 1.5C12 1.638 11.951 1.756 11.854 1.854L10.707 3L14.5 3C14.641 3 14.759 3.048 14.856 3.144ZM4.5 6.003C4.364 6.003 4.246 5.953 4.146 5.854C4.047 5.754 3.997 5.636 3.997 5.5C3.997 5.364 4.047 5.246 4.146 5.146L5.293 4L1.5 4C1.359 4 1.241 3.952 1.144 3.856C1.048 3.759 1 3.641 1 3.5C1 3.359 1.048 3.241 1.144 3.144C1.241 3.048 1.359 3 1.5 3L5.293 3L4.146 1.854C4.049 1.756 4 1.638 4 1.5C4 1.362 4.049 1.244 4.146 1.146C4.244 1.049 4.362 1 4.5 1C4.638 1 4.756 1.049 4.854 1.146L6.854 3.146C6.951 3.244 7 3.362 7 3.5C7 3.638 6.951 3.756 6.854 3.854L4.854 5.854C4.754 5.953 4.636 6.003 4.5 6.003ZM14.585 13.553C14.657 13.697 14.693 13.849 14.691 14.01C14.689 14.196 14.639 14.368 14.542 14.526C14.444 14.684 14.312 14.805 14.147 14.89C14.004 14.963 13.852 15 13.691 15L2.309 15C2.148 15 1.996 14.963 1.853 14.89C1.688 14.805 1.556 14.684 1.458 14.526C1.361 14.368 1.311 14.196 1.309 14.01C1.307 13.849 1.343 13.697 1.415 13.553L3.915 8.553C3.999 8.383 4.122 8.249 4.283 8.149C4.444 8.05 4.62 8 4.809 8L11.191 8C11.38 8 11.556 8.05 11.717 8.149C11.878 8.249 12.001 8.383 12.085 8.553L14.585 13.553ZM13.691 14L11.191 9L4.809 9L2.309 14L13.691 14Z'/%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='M14.856 3.144C14.952 3.241 15 3.359 15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4L10.707 4L11.854 5.146C11.951 5.244 12 5.362 12 5.5C12 5.638 11.951 5.756 11.854 5.854C11.754 5.953 11.636 6.003 11.5 6.003C11.364 6.003 11.246 5.953 11.146 5.854L9.146 3.854C9.047 3.754 8.997 3.636 8.997 3.5C8.997 3.364 9.047 3.246 9.146 3.146L11.146 1.146C11.246 1.047 11.364 0.997 11.5 0.997C11.636 0.997 11.754 1.047 11.854 1.146C11.951 1.244 12 1.362 12 1.5C12 1.638 11.951 1.756 11.854 1.854L10.707 3L14.5 3C14.641 3 14.759 3.048 14.856 3.144ZM4.5 6.003C4.364 6.003 4.246 5.953 4.146 5.854C4.047 5.754 3.997 5.636 3.997 5.5C3.997 5.364 4.047 5.246 4.146 5.146L5.293 4L1.5 4C1.359 4 1.241 3.952 1.144 3.856C1.048 3.759 1 3.641 1 3.5C1 3.359 1.048 3.241 1.144 3.144C1.241 3.048 1.359 3 1.5 3L5.293 3L4.146 1.854C4.049 1.756 4 1.638 4 1.5C4 1.362 4.049 1.244 4.146 1.146C4.244 1.049 4.362 1 4.5 1C4.638 1 4.756 1.049 4.854 1.146L6.854 3.146C6.951 3.244 7 3.362 7 3.5C7 3.638 6.951 3.756 6.854 3.854L4.854 5.854C4.754 5.953 4.636 6.003 4.5 6.003ZM14.585 13.553C14.657 13.697 14.693 13.849 14.691 14.01C14.689 14.196 14.639 14.368 14.542 14.526C14.444 14.684 14.312 14.805 14.147 14.89C14.004 14.963 13.852 15 13.691 15L2.309 15C2.148 15 1.996 14.963 1.853 14.89C1.688 14.805 1.556 14.684 1.458 14.526C1.361 14.368 1.311 14.196 1.309 14.01C1.307 13.849 1.343 13.697 1.415 13.553L3.915 8.553C3.999 8.383 4.122 8.249 4.283 8.149C4.444 8.05 4.62 8 4.809 8L11.191 8C11.38 8 11.556 8.05 11.717 8.149C11.878 8.249 12.001 8.383 12.085 8.553L14.585 13.553ZM13.691 14L11.191 9L4.809 9L2.309 14L13.691 14Z'/%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='M14.856 3.144C14.952 3.241 15 3.359 15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4L10.707 4L11.854 5.146C11.951 5.244 12 5.362 12 5.5C12 5.638 11.951 5.756 11.854 5.854C11.754 5.953 11.636 6.003 11.5 6.003C11.364 6.003 11.246 5.953 11.146 5.854L9.146 3.854C9.047 3.754 8.997 3.636 8.997 3.5C8.997 3.364 9.047 3.246 9.146 3.146L11.146 1.146C11.246 1.047 11.364 0.997 11.5 0.997C11.636 0.997 11.754 1.047 11.854 1.146C11.951 1.244 12 1.362 12 1.5C12 1.638 11.951 1.756 11.854 1.854L10.707 3L14.5 3C14.641 3 14.759 3.048 14.856 3.144ZM4.5 6.003C4.364 6.003 4.246 5.953 4.146 5.854C4.047 5.754 3.997 5.636 3.997 5.5C3.997 5.364 4.047 5.246 4.146 5.146L5.293 4L1.5 4C1.359 4 1.241 3.952 1.144 3.856C1.048 3.759 1 3.641 1 3.5C1 3.359 1.048 3.241 1.144 3.144C1.241 3.048 1.359 3 1.5 3L5.293 3L4.146 1.854C4.049 1.756 4 1.638 4 1.5C4 1.362 4.049 1.244 4.146 1.146C4.244 1.049 4.362 1 4.5 1C4.638 1 4.756 1.049 4.854 1.146L6.854 3.146C6.951 3.244 7 3.362 7 3.5C7 3.638 6.951 3.756 6.854 3.854L4.854 5.854C4.754 5.953 4.636 6.003 4.5 6.003ZM14.585 13.553C14.657 13.697 14.693 13.849 14.691 14.01C14.689 14.196 14.639 14.368 14.542 14.526C14.444 14.684 14.312 14.805 14.147 14.89C14.004 14.963 13.852 15 13.691 15L2.309 15C2.148 15 1.996 14.963 1.853 14.89C1.688 14.805 1.556 14.684 1.458 14.526C1.361 14.368 1.311 14.196 1.309 14.01C1.307 13.849 1.343 13.697 1.415 13.553L3.915 8.553C3.999 8.383 4.122 8.249 4.283 8.149C4.444 8.05 4.62 8 4.809 8L11.191 8C11.38 8 11.556 8.05 11.717 8.149C11.878 8.249 12.001 8.383 12.085 8.553L14.585 13.553ZM13.691 14L11.191 9L4.809 9L2.309 14L13.691 14Z'/%3E%3C/svg%3E
```

### Sprite

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

### SwiftUI

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

struct PerspectiveIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 14.856, y: 3.144))
        p.addCurve(to: CGPoint(x: 15, y: 3.5), control1: CGPoint(x: 14.952, y: 3.241), control2: CGPoint(x: 15, y: 3.359))
        p.addCurve(to: CGPoint(x: 14.856, y: 3.856), control1: CGPoint(x: 15, y: 3.641), control2: CGPoint(x: 14.952, y: 3.759))
        p.addCurve(to: CGPoint(x: 14.5, y: 4), control1: CGPoint(x: 14.759, y: 3.952), control2: CGPoint(x: 14.641, y: 4))
        p.addLine(to: CGPoint(x: 10.707, y: 4))
        p.addLine(to: CGPoint(x: 11.854, y: 5.146))
        p.addCurve(to: CGPoint(x: 12, y: 5.5), control1: CGPoint(x: 11.951, y: 5.244), control2: CGPoint(x: 12, y: 5.362))
        p.addCurve(to: CGPoint(x: 11.854, y: 5.854), control1: CGPoint(x: 12, y: 5.638), control2: CGPoint(x: 11.951, y: 5.756))
        p.addCurve(to: CGPoint(x: 11.5, y: 6.003), control1: CGPoint(x: 11.754, y: 5.953), control2: CGPoint(x: 11.636, y: 6.003))
        p.addCurve(to: CGPoint(x: 11.146, y: 5.854), control1: CGPoint(x: 11.364, y: 6.003), control2: CGPoint(x: 11.246, y: 5.953))
        p.addLine(to: CGPoint(x: 9.146, y: 3.854))
        p.addCurve(to: CGPoint(x: 8.997, y: 3.5), control1: CGPoint(x: 9.047, y: 3.754), control2: CGPoint(x: 8.997, y: 3.636))
        p.addCurve(to: CGPoint(x: 9.146, y: 3.146), control1: CGPoint(x: 8.997, y: 3.364), control2: CGPoint(x: 9.047, y: 3.246))
        p.addLine(to: CGPoint(x: 11.146, y: 1.146))
        p.addCurve(to: CGPoint(x: 11.5, y: 0.997), control1: CGPoint(x: 11.246, y: 1.047), control2: CGPoint(x: 11.364, y: 0.997))
        p.addCurve(to: CGPoint(x: 11.854, y: 1.146), control1: CGPoint(x: 11.636, y: 0.997), control2: CGPoint(x: 11.754, y: 1.047))
        p.addCurve(to: CGPoint(x: 12, y: 1.5), control1: CGPoint(x: 11.951, y: 1.244), control2: CGPoint(x: 12, y: 1.362))
        p.addCurve(to: CGPoint(x: 11.854, y: 1.854), control1: CGPoint(x: 12, y: 1.638), control2: CGPoint(x: 11.951, y: 1.756))
        p.addLine(to: CGPoint(x: 10.707, y: 3))
        p.addLine(to: CGPoint(x: 14.5, y: 3))
        p.addCurve(to: CGPoint(x: 14.856, y: 3.144), control1: CGPoint(x: 14.641, y: 3), control2: CGPoint(x: 14.759, y: 3.048))
        p.closeSubpath()
        p.move(to: CGPoint(x: 4.5, y: 6.003))
        p.addCurve(to: CGPoint(x: 4.146, y: 5.854), control1: CGPoint(x: 4.364, y: 6.003), control2: CGPoint(x: 4.246, y: 5.953))
        p.addCurve(to: CGPoint(x: 3.997, y: 5.5), control1: CGPoint(x: 4.047, y: 5.754), control2: CGPoint(x: 3.997, y: 5.636))
        p.addCurve(to: CGPoint(x: 4.146, y: 5.146), control1: CGPoint(x: 3.997, y: 5.364), control2: CGPoint(x: 4.047, y: 5.246))
        p.addLine(to: CGPoint(x: 5.293, y: 4))
        p.addLine(to: CGPoint(x: 1.5, y: 4))
        p.addCurve(to: CGPoint(x: 1.144, y: 3.856), control1: CGPoint(x: 1.359, y: 4), control2: CGPoint(x: 1.241, y: 3.952))
        p.addCurve(to: CGPoint(x: 1, y: 3.5), control1: CGPoint(x: 1.048, y: 3.759), control2: CGPoint(x: 1, y: 3.641))
        p.addCurve(to: CGPoint(x: 1.144, y: 3.144), control1: CGPoint(x: 1, y: 3.359), control2: CGPoint(x: 1.048, y: 3.241))
        p.addCurve(to: CGPoint(x: 1.5, y: 3), control1: CGPoint(x: 1.241, y: 3.048), control2: CGPoint(x: 1.359, y: 3))
        p.addLine(to: CGPoint(x: 5.293, y: 3))
        p.addLine(to: CGPoint(x: 4.146, y: 1.854))
        p.addCurve(to: CGPoint(x: 4, y: 1.5), control1: CGPoint(x: 4.049, y: 1.756), control2: CGPoint(x: 4, y: 1.638))
        p.addCurve(to: CGPoint(x: 4.146, y: 1.146), control1: CGPoint(x: 4, y: 1.362), control2: CGPoint(x: 4.049, y: 1.244))
        p.addCurve(to: CGPoint(x: 4.5, y: 1), control1: CGPoint(x: 4.244, y: 1.049), control2: CGPoint(x: 4.362, y: 1))
        p.addCurve(to: CGPoint(x: 4.854, y: 1.146), control1: CGPoint(x: 4.638, y: 1), control2: CGPoint(x: 4.756, y: 1.049))
        p.addLine(to: CGPoint(x: 6.854, y: 3.146))
        p.addCurve(to: CGPoint(x: 7, y: 3.5), control1: CGPoint(x: 6.951, y: 3.244), control2: CGPoint(x: 7, y: 3.362))
        p.addCurve(to: CGPoint(x: 6.854, y: 3.854), control1: CGPoint(x: 7, y: 3.638), control2: CGPoint(x: 6.951, y: 3.756))
        p.addLine(to: CGPoint(x: 4.854, y: 5.854))
        p.addCurve(to: CGPoint(x: 4.5, y: 6.003), control1: CGPoint(x: 4.754, y: 5.953), control2: CGPoint(x: 4.636, y: 6.003))
        p.closeSubpath()
        p.move(to: CGPoint(x: 14.585, y: 13.553))
        p.addCurve(to: CGPoint(x: 14.691, y: 14.01), control1: CGPoint(x: 14.657, y: 13.697), control2: CGPoint(x: 14.693, y: 13.849))
        p.addCurve(to: CGPoint(x: 14.542, y: 14.526), control1: CGPoint(x: 14.689, y: 14.196), control2: CGPoint(x: 14.639, y: 14.368))
        p.addCurve(to: CGPoint(x: 14.147, y: 14.89), control1: CGPoint(x: 14.444, y: 14.684), control2: CGPoint(x: 14.312, y: 14.805))
        p.addCurve(to: CGPoint(x: 13.691, y: 15), control1: CGPoint(x: 14.004, y: 14.963), control2: CGPoint(x: 13.852, y: 15))
        p.addLine(to: CGPoint(x: 2.309, y: 15))
        p.addCurve(to: CGPoint(x: 1.853, y: 14.89), control1: CGPoint(x: 2.148, y: 15), control2: CGPoint(x: 1.996, y: 14.963))
        p.addCurve(to: CGPoint(x: 1.458, y: 14.526), control1: CGPoint(x: 1.688, y: 14.805), control2: CGPoint(x: 1.556, y: 14.684))
        p.addCurve(to: CGPoint(x: 1.309, y: 14.01), control1: CGPoint(x: 1.361, y: 14.368), control2: CGPoint(x: 1.311, y: 14.196))
        p.addCurve(to: CGPoint(x: 1.415, y: 13.553), control1: CGPoint(x: 1.307, y: 13.849), control2: CGPoint(x: 1.343, y: 13.697))
        p.addLine(to: CGPoint(x: 3.915, y: 8.553))
        p.addCurve(to: CGPoint(x: 4.283, y: 8.149), control1: CGPoint(x: 3.999, y: 8.383), control2: CGPoint(x: 4.122, y: 8.249))
        p.addCurve(to: CGPoint(x: 4.809, y: 8), control1: CGPoint(x: 4.444, y: 8.05), control2: CGPoint(x: 4.62, y: 8))
        p.addLine(to: CGPoint(x: 11.191, y: 8))
        p.addCurve(to: CGPoint(x: 11.717, y: 8.149), control1: CGPoint(x: 11.38, y: 8), control2: CGPoint(x: 11.556, y: 8.05))
        p.addCurve(to: CGPoint(x: 12.085, y: 8.553), control1: CGPoint(x: 11.878, y: 8.249), control2: CGPoint(x: 12.001, y: 8.383))
        p.addLine(to: CGPoint(x: 14.585, y: 13.553))
        p.closeSubpath()
        p.move(to: CGPoint(x: 13.691, y: 14))
        p.addLine(to: CGPoint(x: 11.191, y: 9))
        p.addLine(to: CGPoint(x: 4.809, y: 9))
        p.addLine(to: CGPoint(x: 2.309, y: 14))
        p.addLine(to: CGPoint(x: 13.691, y: 14))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

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

### Compose

```kotlin
// Gentleface "perspective" (line-round), MIT. https://gentleface.com/icons/perspective
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 PerspectiveIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "perspective", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M14.856 3.144C14.952 3.241 15 3.359 15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4L10.707 4L11.854 5.146C11.951 5.244 12 5.362 12 5.5C12 5.638 11.951 5.756 11.854 5.854C11.754 5.953 11.636 6.003 11.5 6.003C11.364 6.003 11.246 5.953 11.146 5.854L9.146 3.854C9.047 3.754 8.997 3.636 8.997 3.5C8.997 3.364 9.047 3.246 9.146 3.146L11.146 1.146C11.246 1.047 11.364 0.997 11.5 0.997C11.636 0.997 11.754 1.047 11.854 1.146C11.951 1.244 12 1.362 12 1.5C12 1.638 11.951 1.756 11.854 1.854L10.707 3L14.5 3C14.641 3 14.759 3.048 14.856 3.144ZM4.5 6.003C4.364 6.003 4.246 5.953 4.146 5.854C4.047 5.754 3.997 5.636 3.997 5.5C3.997 5.364 4.047 5.246 4.146 5.146L5.293 4L1.5 4C1.359 4 1.241 3.952 1.144 3.856C1.048 3.759 1 3.641 1 3.5C1 3.359 1.048 3.241 1.144 3.144C1.241 3.048 1.359 3 1.5 3L5.293 3L4.146 1.854C4.049 1.756 4 1.638 4 1.5C4 1.362 4.049 1.244 4.146 1.146C4.244 1.049 4.362 1 4.5 1C4.638 1 4.756 1.049 4.854 1.146L6.854 3.146C6.951 3.244 7 3.362 7 3.5C7 3.638 6.951 3.756 6.854 3.854L4.854 5.854C4.754 5.953 4.636 6.003 4.5 6.003ZM14.585 13.553C14.657 13.697 14.693 13.849 14.691 14.01C14.689 14.196 14.639 14.368 14.542 14.526C14.444 14.684 14.312 14.805 14.147 14.89C14.004 14.963 13.852 15 13.691 15L2.309 15C2.148 15 1.996 14.963 1.853 14.89C1.688 14.805 1.556 14.684 1.458 14.526C1.361 14.368 1.311 14.196 1.309 14.01C1.307 13.849 1.343 13.697 1.415 13.553L3.915 8.553C3.999 8.383 4.122 8.249 4.283 8.149C4.444 8.05 4.62 8 4.809 8L11.191 8C11.38 8 11.556 8.05 11.717 8.149C11.878 8.249 12.001 8.383 12.085 8.553L14.585 13.553ZM13.691 14L11.191 9L4.809 9L2.309 14L13.691 14Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

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

### Android XML

```xml
<!-- res/drawable/ic_perspective.xml · Gentleface "perspective" (line-round), MIT. https://gentleface.com/icons/perspective -->
<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="M14.856 3.144C14.952 3.241 15 3.359 15 3.5C15 3.641 14.952 3.759 14.856 3.856C14.759 3.952 14.641 4 14.5 4L10.707 4L11.854 5.146C11.951 5.244 12 5.362 12 5.5C12 5.638 11.951 5.756 11.854 5.854C11.754 5.953 11.636 6.003 11.5 6.003C11.364 6.003 11.246 5.953 11.146 5.854L9.146 3.854C9.047 3.754 8.997 3.636 8.997 3.5C8.997 3.364 9.047 3.246 9.146 3.146L11.146 1.146C11.246 1.047 11.364 0.997 11.5 0.997C11.636 0.997 11.754 1.047 11.854 1.146C11.951 1.244 12 1.362 12 1.5C12 1.638 11.951 1.756 11.854 1.854L10.707 3L14.5 3C14.641 3 14.759 3.048 14.856 3.144ZM4.5 6.003C4.364 6.003 4.246 5.953 4.146 5.854C4.047 5.754 3.997 5.636 3.997 5.5C3.997 5.364 4.047 5.246 4.146 5.146L5.293 4L1.5 4C1.359 4 1.241 3.952 1.144 3.856C1.048 3.759 1 3.641 1 3.5C1 3.359 1.048 3.241 1.144 3.144C1.241 3.048 1.359 3 1.5 3L5.293 3L4.146 1.854C4.049 1.756 4 1.638 4 1.5C4 1.362 4.049 1.244 4.146 1.146C4.244 1.049 4.362 1 4.5 1C4.638 1 4.756 1.049 4.854 1.146L6.854 3.146C6.951 3.244 7 3.362 7 3.5C7 3.638 6.951 3.756 6.854 3.854L4.854 5.854C4.754 5.953 4.636 6.003 4.5 6.003ZM14.585 13.553C14.657 13.697 14.693 13.849 14.691 14.01C14.689 14.196 14.639 14.368 14.542 14.526C14.444 14.684 14.312 14.805 14.147 14.89C14.004 14.963 13.852 15 13.691 15L2.309 15C2.148 15 1.996 14.963 1.853 14.89C1.688 14.805 1.556 14.684 1.458 14.526C1.361 14.368 1.311 14.196 1.309 14.01C1.307 13.849 1.343 13.697 1.415 13.553L3.915 8.553C3.999 8.383 4.122 8.249 4.283 8.149C4.444 8.05 4.62 8 4.809 8L11.191 8C11.38 8 11.556 8.05 11.717 8.149C11.878 8.249 12.001 8.383 12.085 8.553L14.585 13.553ZM13.691 14L11.191 9L4.809 9L2.309 14L13.691 14Z"/>
</vector>
```

### Flutter

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

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

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

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

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(14.856, 3.144)
      ..cubicTo(14.952, 3.241, 15, 3.359, 15, 3.5)
      ..cubicTo(15, 3.641, 14.952, 3.759, 14.856, 3.856)
      ..cubicTo(14.759, 3.952, 14.641, 4, 14.5, 4)
      ..lineTo(10.707, 4)
      ..lineTo(11.854, 5.146)
      ..cubicTo(11.951, 5.244, 12, 5.362, 12, 5.5)
      ..cubicTo(12, 5.638, 11.951, 5.756, 11.854, 5.854)
      ..cubicTo(11.754, 5.953, 11.636, 6.003, 11.5, 6.003)
      ..cubicTo(11.364, 6.003, 11.246, 5.953, 11.146, 5.854)
      ..lineTo(9.146, 3.854)
      ..cubicTo(9.047, 3.754, 8.997, 3.636, 8.997, 3.5)
      ..cubicTo(8.997, 3.364, 9.047, 3.246, 9.146, 3.146)
      ..lineTo(11.146, 1.146)
      ..cubicTo(11.246, 1.047, 11.364, 0.997, 11.5, 0.997)
      ..cubicTo(11.636, 0.997, 11.754, 1.047, 11.854, 1.146)
      ..cubicTo(11.951, 1.244, 12, 1.362, 12, 1.5)
      ..cubicTo(12, 1.638, 11.951, 1.756, 11.854, 1.854)
      ..lineTo(10.707, 3)
      ..lineTo(14.5, 3)
      ..cubicTo(14.641, 3, 14.759, 3.048, 14.856, 3.144)
      ..close()
      ..moveTo(4.5, 6.003)
      ..cubicTo(4.364, 6.003, 4.246, 5.953, 4.146, 5.854)
      ..cubicTo(4.047, 5.754, 3.997, 5.636, 3.997, 5.5)
      ..cubicTo(3.997, 5.364, 4.047, 5.246, 4.146, 5.146)
      ..lineTo(5.293, 4)
      ..lineTo(1.5, 4)
      ..cubicTo(1.359, 4, 1.241, 3.952, 1.144, 3.856)
      ..cubicTo(1.048, 3.759, 1, 3.641, 1, 3.5)
      ..cubicTo(1, 3.359, 1.048, 3.241, 1.144, 3.144)
      ..cubicTo(1.241, 3.048, 1.359, 3, 1.5, 3)
      ..lineTo(5.293, 3)
      ..lineTo(4.146, 1.854)
      ..cubicTo(4.049, 1.756, 4, 1.638, 4, 1.5)
      ..cubicTo(4, 1.362, 4.049, 1.244, 4.146, 1.146)
      ..cubicTo(4.244, 1.049, 4.362, 1, 4.5, 1)
      ..cubicTo(4.638, 1, 4.756, 1.049, 4.854, 1.146)
      ..lineTo(6.854, 3.146)
      ..cubicTo(6.951, 3.244, 7, 3.362, 7, 3.5)
      ..cubicTo(7, 3.638, 6.951, 3.756, 6.854, 3.854)
      ..lineTo(4.854, 5.854)
      ..cubicTo(4.754, 5.953, 4.636, 6.003, 4.5, 6.003)
      ..close()
      ..moveTo(14.585, 13.553)
      ..cubicTo(14.657, 13.697, 14.693, 13.849, 14.691, 14.01)
      ..cubicTo(14.689, 14.196, 14.639, 14.368, 14.542, 14.526)
      ..cubicTo(14.444, 14.684, 14.312, 14.805, 14.147, 14.89)
      ..cubicTo(14.004, 14.963, 13.852, 15, 13.691, 15)
      ..lineTo(2.309, 15)
      ..cubicTo(2.148, 15, 1.996, 14.963, 1.853, 14.89)
      ..cubicTo(1.688, 14.805, 1.556, 14.684, 1.458, 14.526)
      ..cubicTo(1.361, 14.368, 1.311, 14.196, 1.309, 14.01)
      ..cubicTo(1.307, 13.849, 1.343, 13.697, 1.415, 13.553)
      ..lineTo(3.915, 8.553)
      ..cubicTo(3.999, 8.383, 4.122, 8.249, 4.283, 8.149)
      ..cubicTo(4.444, 8.05, 4.62, 8, 4.809, 8)
      ..lineTo(11.191, 8)
      ..cubicTo(11.38, 8, 11.556, 8.05, 11.717, 8.149)
      ..cubicTo(11.878, 8.249, 12.001, 8.383, 12.085, 8.553)
      ..lineTo(14.585, 13.553)
      ..close()
      ..moveTo(13.691, 14)
      ..lineTo(11.191, 9)
      ..lineTo(4.809, 9)
      ..lineTo(2.309, 14)
      ..lineTo(13.691, 14)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

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