perspective icon

Perspective: perspective transform, perspective warp. 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="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

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

Svelte

Svelte: see /icons/perspective.md

HTML img

HTML img: see /icons/perspective.md

CSS

CSS: see /icons/perspective.md

Data URL

Data URL: see /icons/perspective.md

Sprite

Sprite: see /icons/perspective.md

SwiftUI

SwiftUI: see /icons/perspective.md

Compose

Compose: see /icons/perspective.md

Android XML

Android XML: see /icons/perspective.md

Flutter

Flutter: see /icons/perspective.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 { PerspectiveIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

perspective transform, perspective warp

Alternatives

skew: slant without depth

Also fits

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

Tags

perspective, perspective transform, keystone, trapezoid, distort, transform, foreshorten, vanishing point, figma, photoshop, design tool

Category

Design

Component name

PerspectiveIcon

History

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

Since

version 0.2.0

More design icons

align-horizontal-center align-objects-bottom align-objects-bottom-three align-objects-left align-objects-left-three align-objects-right align-objects-right-three align-objects-top align-objects-top-three align-vertical-center angle animation animation-off auto-layout-horizontal auto-layout-vertical auto-layout-wrap · all design icons

For agents

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

perspective icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More design icons

For agents

perspective icon