# panorama-vertical icon

Panorama vertical. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/panorama-vertical

- Category: Photo & image
- Use it for: vertical panorama
- Tags: panorama, vertical panorama, tall, portrait, wide angle, photo, camera mode, image
- Family: panorama
- Component name: PanoramaVerticalIcon
- Added: 2026-11-06
- Since: version 0.4.0
- npm: `import { PanoramaVerticalIcon } from '@gentleface/react';` (@gentleface/react 0.6.0)

## Files

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too.

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

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

## Animated

`panorama-vertical-tilt`: The view tilts up the tall frame: the mountain sinks out at the bottom while the far sun drops much less. It then tilts down past the start, the mountain rising up the frame, and settles.

File: https://gentleface.com/motion/panorama-vertical-tilt.svg (line-round, 16 px). Native SVG animation that loops by itself. To play it once, run 0.3 s to 3.05 s. Patterns: https://gentleface.com/animated-icons.md

```svg
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.001" stroke-linecap="round" stroke-linejoin="round"><clipPath id="w9gPvC"><path d="M2.487 1.5L13.513 1.5C10.829 5.418 10.829 10.582 13.513 14.5L2.487 14.5C5.171 10.582 5.171 5.418 2.487 1.5Z"/></clipPath><path d="M2.487 1.5L13.513 1.5C10.829 5.418 10.829 10.582 13.513 14.5L2.487 14.5C5.171 10.582 5.171 5.418 2.487 1.5Z"></path><g clip-path="url(#w9gPvC)"><g><animateTransform attributeName="transform" type="translate" dur="3.4s" repeatCount="indefinite" keyTimes="0;0.088;0.294;0.368;0.632;0.706;0.882;1" values="0 0;0 0;0 3;0 3;0 -2.5;0 -2.5;0 0;0 0" calcMode="spline" keySplines="0 0 1 1;.6 0 .25 1;0 0 1 1;.6 0 .25 1;0 0 1 1;.6 0 .25 1;0 0 1 1"/><path d="M.5 14.5L5.439 9.561C6.025 8.975 6.975 8.975 7.561 9.561L17.5 19.5"></path></g><g><animateTransform attributeName="transform" type="translate" dur="3.4s" repeatCount="indefinite" keyTimes="0;0.088;0.294;0.368;0.632;0.706;0.882;1" values="0 0;0 0;0 .9;0 .9;0 -.75;0 -.75;0 0;0 0" calcMode="spline" keySplines="0 0 1 1;.6 0 .25 1;0 0 1 1;.6 0 .25 1;0 0 1 1;.6 0 .25 1;0 0 1 1"/><path fill="currentColor" stroke="none" d="M8 4C8 3.448 8.448 3 9 3C9.552 3 10 3.448 10 4C10 4.552 9.552 5 9 5C8.448 5 8 4.552 8 4Z"></path></g></g></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="M1.987 14.5C1.987 14.397 2.016 14.303 2.074 14.217C2.687 13.323 3.157 12.36 3.485 11.327C3.828 10.245 4 9.136 4 8C4 6.864 3.828 5.755 3.485 4.673C3.157 3.64 2.687 2.677 2.074 1.783C1.995 1.666 1.967 1.541 1.992 1.408C2.017 1.274 2.088 1.167 2.204 1.088C2.289 1.029 2.384 1 2.487 1L13.513 1C13.654 1 13.773 1.048 13.869 1.144C13.965 1.241 14.013 1.359 14.013 1.5C14.013 1.603 13.984 1.697 13.926 1.783C13.313 2.677 12.843 3.64 12.515 4.673C12.172 5.755 12 6.864 12 8C12 9.136 12.172 10.245 12.515 11.327C12.843 12.36 13.313 13.323 13.926 14.217C14.005 14.334 14.033 14.459 14.008 14.592C13.983 14.726 13.912 14.833 13.796 14.912C13.711 14.971 13.616 15 13.513 15L2.487 15C2.346 15 2.227 14.952 2.131 14.856C2.035 14.759 1.987 14.641 1.987 14.5ZM5.086 9.207C5.266 9.027 5.472 8.887 5.706 8.786C5.959 8.676 6.224 8.621 6.5 8.621C6.776 8.621 7.041 8.676 7.294 8.786C7.528 8.887 7.734 9.027 7.914 9.207L12.478 13.771C12.105 13.091 11.799 12.377 11.562 11.63C11.187 10.449 11 9.239 11 8C11 6.761 11.187 5.551 11.562 4.37C11.826 3.539 12.174 2.749 12.607 2L3.393 2C3.826 2.749 4.174 3.539 4.438 4.37C4.813 5.551 5 6.761 5 8C5 8.461 4.974 8.918 4.922 9.371L5.086 9.207ZM8.293 3.293C8.488 3.098 8.724 3 9 3C9.276 3 9.512 3.098 9.707 3.293C9.902 3.488 10 3.724 10 4C10 4.276 9.902 4.512 9.707 4.707C9.512 4.902 9.276 5 9 5C8.724 5 8.488 4.902 8.293 4.707C8.098 4.512 8 4.276 8 4C8 3.724 8.098 3.488 8.293 3.293ZM7.207 9.914C7.012 9.719 6.776 9.621 6.5 9.621C6.224 9.621 5.988 9.719 5.793 9.914L4.588 11.119C4.542 11.29 4.492 11.46 4.438 11.63C4.174 12.461 3.826 13.251 3.393 14L11.293 14L7.207 9.914Z"/></svg>
```

### React

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

export function PanoramaVerticalIcon(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="M1.987 14.5C1.987 14.397 2.016 14.303 2.074 14.217C2.687 13.323 3.157 12.36 3.485 11.327C3.828 10.245 4 9.136 4 8C4 6.864 3.828 5.755 3.485 4.673C3.157 3.64 2.687 2.677 2.074 1.783C1.995 1.666 1.967 1.541 1.992 1.408C2.017 1.274 2.088 1.167 2.204 1.088C2.289 1.029 2.384 1 2.487 1L13.513 1C13.654 1 13.773 1.048 13.869 1.144C13.965 1.241 14.013 1.359 14.013 1.5C14.013 1.603 13.984 1.697 13.926 1.783C13.313 2.677 12.843 3.64 12.515 4.673C12.172 5.755 12 6.864 12 8C12 9.136 12.172 10.245 12.515 11.327C12.843 12.36 13.313 13.323 13.926 14.217C14.005 14.334 14.033 14.459 14.008 14.592C13.983 14.726 13.912 14.833 13.796 14.912C13.711 14.971 13.616 15 13.513 15L2.487 15C2.346 15 2.227 14.952 2.131 14.856C2.035 14.759 1.987 14.641 1.987 14.5ZM5.086 9.207C5.266 9.027 5.472 8.887 5.706 8.786C5.959 8.676 6.224 8.621 6.5 8.621C6.776 8.621 7.041 8.676 7.294 8.786C7.528 8.887 7.734 9.027 7.914 9.207L12.478 13.771C12.105 13.091 11.799 12.377 11.562 11.63C11.187 10.449 11 9.239 11 8C11 6.761 11.187 5.551 11.562 4.37C11.826 3.539 12.174 2.749 12.607 2L3.393 2C3.826 2.749 4.174 3.539 4.438 4.37C4.813 5.551 5 6.761 5 8C5 8.461 4.974 8.918 4.922 9.371L5.086 9.207ZM8.293 3.293C8.488 3.098 8.724 3 9 3C9.276 3 9.512 3.098 9.707 3.293C9.902 3.488 10 3.724 10 4C10 4.276 9.902 4.512 9.707 4.707C9.512 4.902 9.276 5 9 5C8.724 5 8.488 4.902 8.293 4.707C8.098 4.512 8 4.276 8 4C8 3.724 8.098 3.488 8.293 3.293ZM7.207 9.914C7.012 9.719 6.776 9.621 6.5 9.621C6.224 9.621 5.988 9.719 5.793 9.914L4.588 11.119C4.542 11.29 4.492 11.46 4.438 11.63C4.174 12.461 3.826 13.251 3.393 14L11.293 14L7.207 9.914Z" />
    </svg>
  );
}
```

### Vue

```vue
<!-- Gentleface "panorama-vertical" (line-round), MIT. https://gentleface.com/icons/panorama-vertical -->
<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="M1.987 14.5C1.987 14.397 2.016 14.303 2.074 14.217C2.687 13.323 3.157 12.36 3.485 11.327C3.828 10.245 4 9.136 4 8C4 6.864 3.828 5.755 3.485 4.673C3.157 3.64 2.687 2.677 2.074 1.783C1.995 1.666 1.967 1.541 1.992 1.408C2.017 1.274 2.088 1.167 2.204 1.088C2.289 1.029 2.384 1 2.487 1L13.513 1C13.654 1 13.773 1.048 13.869 1.144C13.965 1.241 14.013 1.359 14.013 1.5C14.013 1.603 13.984 1.697 13.926 1.783C13.313 2.677 12.843 3.64 12.515 4.673C12.172 5.755 12 6.864 12 8C12 9.136 12.172 10.245 12.515 11.327C12.843 12.36 13.313 13.323 13.926 14.217C14.005 14.334 14.033 14.459 14.008 14.592C13.983 14.726 13.912 14.833 13.796 14.912C13.711 14.971 13.616 15 13.513 15L2.487 15C2.346 15 2.227 14.952 2.131 14.856C2.035 14.759 1.987 14.641 1.987 14.5ZM5.086 9.207C5.266 9.027 5.472 8.887 5.706 8.786C5.959 8.676 6.224 8.621 6.5 8.621C6.776 8.621 7.041 8.676 7.294 8.786C7.528 8.887 7.734 9.027 7.914 9.207L12.478 13.771C12.105 13.091 11.799 12.377 11.562 11.63C11.187 10.449 11 9.239 11 8C11 6.761 11.187 5.551 11.562 4.37C11.826 3.539 12.174 2.749 12.607 2L3.393 2C3.826 2.749 4.174 3.539 4.438 4.37C4.813 5.551 5 6.761 5 8C5 8.461 4.974 8.918 4.922 9.371L5.086 9.207ZM8.293 3.293C8.488 3.098 8.724 3 9 3C9.276 3 9.512 3.098 9.707 3.293C9.902 3.488 10 3.724 10 4C10 4.276 9.902 4.512 9.707 4.707C9.512 4.902 9.276 5 9 5C8.724 5 8.488 4.902 8.293 4.707C8.098 4.512 8 4.276 8 4C8 3.724 8.098 3.488 8.293 3.293ZM7.207 9.914C7.012 9.719 6.776 9.621 6.5 9.621C6.224 9.621 5.988 9.719 5.793 9.914L4.588 11.119C4.542 11.29 4.492 11.46 4.438 11.63C4.174 12.461 3.826 13.251 3.393 14L11.293 14L7.207 9.914Z" />
  </svg>
</template>
```

### Svelte

```svelte
<!-- Gentleface "panorama-vertical" (line-round), MIT. https://gentleface.com/icons/panorama-vertical -->
<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="M1.987 14.5C1.987 14.397 2.016 14.303 2.074 14.217C2.687 13.323 3.157 12.36 3.485 11.327C3.828 10.245 4 9.136 4 8C4 6.864 3.828 5.755 3.485 4.673C3.157 3.64 2.687 2.677 2.074 1.783C1.995 1.666 1.967 1.541 1.992 1.408C2.017 1.274 2.088 1.167 2.204 1.088C2.289 1.029 2.384 1 2.487 1L13.513 1C13.654 1 13.773 1.048 13.869 1.144C13.965 1.241 14.013 1.359 14.013 1.5C14.013 1.603 13.984 1.697 13.926 1.783C13.313 2.677 12.843 3.64 12.515 4.673C12.172 5.755 12 6.864 12 8C12 9.136 12.172 10.245 12.515 11.327C12.843 12.36 13.313 13.323 13.926 14.217C14.005 14.334 14.033 14.459 14.008 14.592C13.983 14.726 13.912 14.833 13.796 14.912C13.711 14.971 13.616 15 13.513 15L2.487 15C2.346 15 2.227 14.952 2.131 14.856C2.035 14.759 1.987 14.641 1.987 14.5ZM5.086 9.207C5.266 9.027 5.472 8.887 5.706 8.786C5.959 8.676 6.224 8.621 6.5 8.621C6.776 8.621 7.041 8.676 7.294 8.786C7.528 8.887 7.734 9.027 7.914 9.207L12.478 13.771C12.105 13.091 11.799 12.377 11.562 11.63C11.187 10.449 11 9.239 11 8C11 6.761 11.187 5.551 11.562 4.37C11.826 3.539 12.174 2.749 12.607 2L3.393 2C3.826 2.749 4.174 3.539 4.438 4.37C4.813 5.551 5 6.761 5 8C5 8.461 4.974 8.918 4.922 9.371L5.086 9.207ZM8.293 3.293C8.488 3.098 8.724 3 9 3C9.276 3 9.512 3.098 9.707 3.293C9.902 3.488 10 3.724 10 4C10 4.276 9.902 4.512 9.707 4.707C9.512 4.902 9.276 5 9 5C8.724 5 8.488 4.902 8.293 4.707C8.098 4.512 8 4.276 8 4C8 3.724 8.098 3.488 8.293 3.293ZM7.207 9.914C7.012 9.719 6.776 9.621 6.5 9.621C6.224 9.621 5.988 9.719 5.793 9.914L4.588 11.119C4.542 11.29 4.492 11.46 4.438 11.63C4.174 12.461 3.826 13.251 3.393 14L11.293 14L7.207 9.914Z" />
</svg>
```

### HTML img

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

### CSS

```css
/* Gentleface "panorama-vertical" (line-round), MIT. https://gentleface.com/icons/panorama-vertical. Takes the text color. */
.icon-panorama-vertical {
  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='M1.987 14.5C1.987 14.397 2.016 14.303 2.074 14.217C2.687 13.323 3.157 12.36 3.485 11.327C3.828 10.245 4 9.136 4 8C4 6.864 3.828 5.755 3.485 4.673C3.157 3.64 2.687 2.677 2.074 1.783C1.995 1.666 1.967 1.541 1.992 1.408C2.017 1.274 2.088 1.167 2.204 1.088C2.289 1.029 2.384 1 2.487 1L13.513 1C13.654 1 13.773 1.048 13.869 1.144C13.965 1.241 14.013 1.359 14.013 1.5C14.013 1.603 13.984 1.697 13.926 1.783C13.313 2.677 12.843 3.64 12.515 4.673C12.172 5.755 12 6.864 12 8C12 9.136 12.172 10.245 12.515 11.327C12.843 12.36 13.313 13.323 13.926 14.217C14.005 14.334 14.033 14.459 14.008 14.592C13.983 14.726 13.912 14.833 13.796 14.912C13.711 14.971 13.616 15 13.513 15L2.487 15C2.346 15 2.227 14.952 2.131 14.856C2.035 14.759 1.987 14.641 1.987 14.5ZM5.086 9.207C5.266 9.027 5.472 8.887 5.706 8.786C5.959 8.676 6.224 8.621 6.5 8.621C6.776 8.621 7.041 8.676 7.294 8.786C7.528 8.887 7.734 9.027 7.914 9.207L12.478 13.771C12.105 13.091 11.799 12.377 11.562 11.63C11.187 10.449 11 9.239 11 8C11 6.761 11.187 5.551 11.562 4.37C11.826 3.539 12.174 2.749 12.607 2L3.393 2C3.826 2.749 4.174 3.539 4.438 4.37C4.813 5.551 5 6.761 5 8C5 8.461 4.974 8.918 4.922 9.371L5.086 9.207ZM8.293 3.293C8.488 3.098 8.724 3 9 3C9.276 3 9.512 3.098 9.707 3.293C9.902 3.488 10 3.724 10 4C10 4.276 9.902 4.512 9.707 4.707C9.512 4.902 9.276 5 9 5C8.724 5 8.488 4.902 8.293 4.707C8.098 4.512 8 4.276 8 4C8 3.724 8.098 3.488 8.293 3.293ZM7.207 9.914C7.012 9.719 6.776 9.621 6.5 9.621C6.224 9.621 5.988 9.719 5.793 9.914L4.588 11.119C4.542 11.29 4.492 11.46 4.438 11.63C4.174 12.461 3.826 13.251 3.393 14L11.293 14L7.207 9.914Z'/%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='M1.987 14.5C1.987 14.397 2.016 14.303 2.074 14.217C2.687 13.323 3.157 12.36 3.485 11.327C3.828 10.245 4 9.136 4 8C4 6.864 3.828 5.755 3.485 4.673C3.157 3.64 2.687 2.677 2.074 1.783C1.995 1.666 1.967 1.541 1.992 1.408C2.017 1.274 2.088 1.167 2.204 1.088C2.289 1.029 2.384 1 2.487 1L13.513 1C13.654 1 13.773 1.048 13.869 1.144C13.965 1.241 14.013 1.359 14.013 1.5C14.013 1.603 13.984 1.697 13.926 1.783C13.313 2.677 12.843 3.64 12.515 4.673C12.172 5.755 12 6.864 12 8C12 9.136 12.172 10.245 12.515 11.327C12.843 12.36 13.313 13.323 13.926 14.217C14.005 14.334 14.033 14.459 14.008 14.592C13.983 14.726 13.912 14.833 13.796 14.912C13.711 14.971 13.616 15 13.513 15L2.487 15C2.346 15 2.227 14.952 2.131 14.856C2.035 14.759 1.987 14.641 1.987 14.5ZM5.086 9.207C5.266 9.027 5.472 8.887 5.706 8.786C5.959 8.676 6.224 8.621 6.5 8.621C6.776 8.621 7.041 8.676 7.294 8.786C7.528 8.887 7.734 9.027 7.914 9.207L12.478 13.771C12.105 13.091 11.799 12.377 11.562 11.63C11.187 10.449 11 9.239 11 8C11 6.761 11.187 5.551 11.562 4.37C11.826 3.539 12.174 2.749 12.607 2L3.393 2C3.826 2.749 4.174 3.539 4.438 4.37C4.813 5.551 5 6.761 5 8C5 8.461 4.974 8.918 4.922 9.371L5.086 9.207ZM8.293 3.293C8.488 3.098 8.724 3 9 3C9.276 3 9.512 3.098 9.707 3.293C9.902 3.488 10 3.724 10 4C10 4.276 9.902 4.512 9.707 4.707C9.512 4.902 9.276 5 9 5C8.724 5 8.488 4.902 8.293 4.707C8.098 4.512 8 4.276 8 4C8 3.724 8.098 3.488 8.293 3.293ZM7.207 9.914C7.012 9.719 6.776 9.621 6.5 9.621C6.224 9.621 5.988 9.719 5.793 9.914L4.588 11.119C4.542 11.29 4.492 11.46 4.438 11.63C4.174 12.461 3.826 13.251 3.393 14L11.293 14L7.207 9.914Z'/%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='M1.987 14.5C1.987 14.397 2.016 14.303 2.074 14.217C2.687 13.323 3.157 12.36 3.485 11.327C3.828 10.245 4 9.136 4 8C4 6.864 3.828 5.755 3.485 4.673C3.157 3.64 2.687 2.677 2.074 1.783C1.995 1.666 1.967 1.541 1.992 1.408C2.017 1.274 2.088 1.167 2.204 1.088C2.289 1.029 2.384 1 2.487 1L13.513 1C13.654 1 13.773 1.048 13.869 1.144C13.965 1.241 14.013 1.359 14.013 1.5C14.013 1.603 13.984 1.697 13.926 1.783C13.313 2.677 12.843 3.64 12.515 4.673C12.172 5.755 12 6.864 12 8C12 9.136 12.172 10.245 12.515 11.327C12.843 12.36 13.313 13.323 13.926 14.217C14.005 14.334 14.033 14.459 14.008 14.592C13.983 14.726 13.912 14.833 13.796 14.912C13.711 14.971 13.616 15 13.513 15L2.487 15C2.346 15 2.227 14.952 2.131 14.856C2.035 14.759 1.987 14.641 1.987 14.5ZM5.086 9.207C5.266 9.027 5.472 8.887 5.706 8.786C5.959 8.676 6.224 8.621 6.5 8.621C6.776 8.621 7.041 8.676 7.294 8.786C7.528 8.887 7.734 9.027 7.914 9.207L12.478 13.771C12.105 13.091 11.799 12.377 11.562 11.63C11.187 10.449 11 9.239 11 8C11 6.761 11.187 5.551 11.562 4.37C11.826 3.539 12.174 2.749 12.607 2L3.393 2C3.826 2.749 4.174 3.539 4.438 4.37C4.813 5.551 5 6.761 5 8C5 8.461 4.974 8.918 4.922 9.371L5.086 9.207ZM8.293 3.293C8.488 3.098 8.724 3 9 3C9.276 3 9.512 3.098 9.707 3.293C9.902 3.488 10 3.724 10 4C10 4.276 9.902 4.512 9.707 4.707C9.512 4.902 9.276 5 9 5C8.724 5 8.488 4.902 8.293 4.707C8.098 4.512 8 4.276 8 4C8 3.724 8.098 3.488 8.293 3.293ZM7.207 9.914C7.012 9.719 6.776 9.621 6.5 9.621C6.224 9.621 5.988 9.719 5.793 9.914L4.588 11.119C4.542 11.29 4.492 11.46 4.438 11.63C4.174 12.461 3.826 13.251 3.393 14L11.293 14L7.207 9.914Z'/%3E%3C/svg%3E
```

### Sprite

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

### SwiftUI

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

struct PanoramaVerticalIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 1.987, y: 14.5))
        p.addCurve(to: CGPoint(x: 2.074, y: 14.217), control1: CGPoint(x: 1.987, y: 14.397), control2: CGPoint(x: 2.016, y: 14.303))
        p.addCurve(to: CGPoint(x: 3.485, y: 11.327), control1: CGPoint(x: 2.687, y: 13.323), control2: CGPoint(x: 3.157, y: 12.36))
        p.addCurve(to: CGPoint(x: 4, y: 8), control1: CGPoint(x: 3.828, y: 10.245), control2: CGPoint(x: 4, y: 9.136))
        p.addCurve(to: CGPoint(x: 3.485, y: 4.673), control1: CGPoint(x: 4, y: 6.864), control2: CGPoint(x: 3.828, y: 5.755))
        p.addCurve(to: CGPoint(x: 2.074, y: 1.783), control1: CGPoint(x: 3.157, y: 3.64), control2: CGPoint(x: 2.687, y: 2.677))
        p.addCurve(to: CGPoint(x: 1.992, y: 1.408), control1: CGPoint(x: 1.995, y: 1.666), control2: CGPoint(x: 1.967, y: 1.541))
        p.addCurve(to: CGPoint(x: 2.204, y: 1.088), control1: CGPoint(x: 2.017, y: 1.274), control2: CGPoint(x: 2.088, y: 1.167))
        p.addCurve(to: CGPoint(x: 2.487, y: 1), control1: CGPoint(x: 2.289, y: 1.029), control2: CGPoint(x: 2.384, y: 1))
        p.addLine(to: CGPoint(x: 13.513, y: 1))
        p.addCurve(to: CGPoint(x: 13.869, y: 1.144), control1: CGPoint(x: 13.654, y: 1), control2: CGPoint(x: 13.773, y: 1.048))
        p.addCurve(to: CGPoint(x: 14.013, y: 1.5), control1: CGPoint(x: 13.965, y: 1.241), control2: CGPoint(x: 14.013, y: 1.359))
        p.addCurve(to: CGPoint(x: 13.926, y: 1.783), control1: CGPoint(x: 14.013, y: 1.603), control2: CGPoint(x: 13.984, y: 1.697))
        p.addCurve(to: CGPoint(x: 12.515, y: 4.673), control1: CGPoint(x: 13.313, y: 2.677), control2: CGPoint(x: 12.843, y: 3.64))
        p.addCurve(to: CGPoint(x: 12, y: 8), control1: CGPoint(x: 12.172, y: 5.755), control2: CGPoint(x: 12, y: 6.864))
        p.addCurve(to: CGPoint(x: 12.515, y: 11.327), control1: CGPoint(x: 12, y: 9.136), control2: CGPoint(x: 12.172, y: 10.245))
        p.addCurve(to: CGPoint(x: 13.926, y: 14.217), control1: CGPoint(x: 12.843, y: 12.36), control2: CGPoint(x: 13.313, y: 13.323))
        p.addCurve(to: CGPoint(x: 14.008, y: 14.592), control1: CGPoint(x: 14.005, y: 14.334), control2: CGPoint(x: 14.033, y: 14.459))
        p.addCurve(to: CGPoint(x: 13.796, y: 14.912), control1: CGPoint(x: 13.983, y: 14.726), control2: CGPoint(x: 13.912, y: 14.833))
        p.addCurve(to: CGPoint(x: 13.513, y: 15), control1: CGPoint(x: 13.711, y: 14.971), control2: CGPoint(x: 13.616, y: 15))
        p.addLine(to: CGPoint(x: 2.487, y: 15))
        p.addCurve(to: CGPoint(x: 2.131, y: 14.856), control1: CGPoint(x: 2.346, y: 15), control2: CGPoint(x: 2.227, y: 14.952))
        p.addCurve(to: CGPoint(x: 1.987, y: 14.5), control1: CGPoint(x: 2.035, y: 14.759), control2: CGPoint(x: 1.987, y: 14.641))
        p.closeSubpath()
        p.move(to: CGPoint(x: 5.086, y: 9.207))
        p.addCurve(to: CGPoint(x: 5.706, y: 8.786), control1: CGPoint(x: 5.266, y: 9.027), control2: CGPoint(x: 5.472, y: 8.887))
        p.addCurve(to: CGPoint(x: 6.5, y: 8.621), control1: CGPoint(x: 5.959, y: 8.676), control2: CGPoint(x: 6.224, y: 8.621))
        p.addCurve(to: CGPoint(x: 7.294, y: 8.786), control1: CGPoint(x: 6.776, y: 8.621), control2: CGPoint(x: 7.041, y: 8.676))
        p.addCurve(to: CGPoint(x: 7.914, y: 9.207), control1: CGPoint(x: 7.528, y: 8.887), control2: CGPoint(x: 7.734, y: 9.027))
        p.addLine(to: CGPoint(x: 12.478, y: 13.771))
        p.addCurve(to: CGPoint(x: 11.562, y: 11.63), control1: CGPoint(x: 12.105, y: 13.091), control2: CGPoint(x: 11.799, y: 12.377))
        p.addCurve(to: CGPoint(x: 11, y: 8), control1: CGPoint(x: 11.187, y: 10.449), control2: CGPoint(x: 11, y: 9.239))
        p.addCurve(to: CGPoint(x: 11.562, y: 4.37), control1: CGPoint(x: 11, y: 6.761), control2: CGPoint(x: 11.187, y: 5.551))
        p.addCurve(to: CGPoint(x: 12.607, y: 2), control1: CGPoint(x: 11.826, y: 3.539), control2: CGPoint(x: 12.174, y: 2.749))
        p.addLine(to: CGPoint(x: 3.393, y: 2))
        p.addCurve(to: CGPoint(x: 4.438, y: 4.37), control1: CGPoint(x: 3.826, y: 2.749), control2: CGPoint(x: 4.174, y: 3.539))
        p.addCurve(to: CGPoint(x: 5, y: 8), control1: CGPoint(x: 4.813, y: 5.551), control2: CGPoint(x: 5, y: 6.761))
        p.addCurve(to: CGPoint(x: 4.922, y: 9.371), control1: CGPoint(x: 5, y: 8.461), control2: CGPoint(x: 4.974, y: 8.918))
        p.addLine(to: CGPoint(x: 5.086, y: 9.207))
        p.closeSubpath()
        p.move(to: CGPoint(x: 8.293, y: 3.293))
        p.addCurve(to: CGPoint(x: 9, y: 3), control1: CGPoint(x: 8.488, y: 3.098), control2: CGPoint(x: 8.724, y: 3))
        p.addCurve(to: CGPoint(x: 9.707, y: 3.293), control1: CGPoint(x: 9.276, y: 3), control2: CGPoint(x: 9.512, y: 3.098))
        p.addCurve(to: CGPoint(x: 10, y: 4), control1: CGPoint(x: 9.902, y: 3.488), control2: CGPoint(x: 10, y: 3.724))
        p.addCurve(to: CGPoint(x: 9.707, y: 4.707), control1: CGPoint(x: 10, y: 4.276), control2: CGPoint(x: 9.902, y: 4.512))
        p.addCurve(to: CGPoint(x: 9, y: 5), control1: CGPoint(x: 9.512, y: 4.902), control2: CGPoint(x: 9.276, y: 5))
        p.addCurve(to: CGPoint(x: 8.293, y: 4.707), control1: CGPoint(x: 8.724, y: 5), control2: CGPoint(x: 8.488, y: 4.902))
        p.addCurve(to: CGPoint(x: 8, y: 4), control1: CGPoint(x: 8.098, y: 4.512), control2: CGPoint(x: 8, y: 4.276))
        p.addCurve(to: CGPoint(x: 8.293, y: 3.293), control1: CGPoint(x: 8, y: 3.724), control2: CGPoint(x: 8.098, y: 3.488))
        p.closeSubpath()
        p.move(to: CGPoint(x: 7.207, y: 9.914))
        p.addCurve(to: CGPoint(x: 6.5, y: 9.621), control1: CGPoint(x: 7.012, y: 9.719), control2: CGPoint(x: 6.776, y: 9.621))
        p.addCurve(to: CGPoint(x: 5.793, y: 9.914), control1: CGPoint(x: 6.224, y: 9.621), control2: CGPoint(x: 5.988, y: 9.719))
        p.addLine(to: CGPoint(x: 4.588, y: 11.119))
        p.addCurve(to: CGPoint(x: 4.438, y: 11.63), control1: CGPoint(x: 4.542, y: 11.29), control2: CGPoint(x: 4.492, y: 11.46))
        p.addCurve(to: CGPoint(x: 3.393, y: 14), control1: CGPoint(x: 4.174, y: 12.461), control2: CGPoint(x: 3.826, y: 13.251))
        p.addLine(to: CGPoint(x: 11.293, y: 14))
        p.addLine(to: CGPoint(x: 7.207, y: 9.914))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

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

### Compose

```kotlin
// Gentleface "panorama-vertical" (line-round), MIT. https://gentleface.com/icons/panorama-vertical
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 PanoramaVerticalIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "panorama-vertical", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("M1.987 14.5C1.987 14.397 2.016 14.303 2.074 14.217C2.687 13.323 3.157 12.36 3.485 11.327C3.828 10.245 4 9.136 4 8C4 6.864 3.828 5.755 3.485 4.673C3.157 3.64 2.687 2.677 2.074 1.783C1.995 1.666 1.967 1.541 1.992 1.408C2.017 1.274 2.088 1.167 2.204 1.088C2.289 1.029 2.384 1 2.487 1L13.513 1C13.654 1 13.773 1.048 13.869 1.144C13.965 1.241 14.013 1.359 14.013 1.5C14.013 1.603 13.984 1.697 13.926 1.783C13.313 2.677 12.843 3.64 12.515 4.673C12.172 5.755 12 6.864 12 8C12 9.136 12.172 10.245 12.515 11.327C12.843 12.36 13.313 13.323 13.926 14.217C14.005 14.334 14.033 14.459 14.008 14.592C13.983 14.726 13.912 14.833 13.796 14.912C13.711 14.971 13.616 15 13.513 15L2.487 15C2.346 15 2.227 14.952 2.131 14.856C2.035 14.759 1.987 14.641 1.987 14.5ZM5.086 9.207C5.266 9.027 5.472 8.887 5.706 8.786C5.959 8.676 6.224 8.621 6.5 8.621C6.776 8.621 7.041 8.676 7.294 8.786C7.528 8.887 7.734 9.027 7.914 9.207L12.478 13.771C12.105 13.091 11.799 12.377 11.562 11.63C11.187 10.449 11 9.239 11 8C11 6.761 11.187 5.551 11.562 4.37C11.826 3.539 12.174 2.749 12.607 2L3.393 2C3.826 2.749 4.174 3.539 4.438 4.37C4.813 5.551 5 6.761 5 8C5 8.461 4.974 8.918 4.922 9.371L5.086 9.207ZM8.293 3.293C8.488 3.098 8.724 3 9 3C9.276 3 9.512 3.098 9.707 3.293C9.902 3.488 10 3.724 10 4C10 4.276 9.902 4.512 9.707 4.707C9.512 4.902 9.276 5 9 5C8.724 5 8.488 4.902 8.293 4.707C8.098 4.512 8 4.276 8 4C8 3.724 8.098 3.488 8.293 3.293ZM7.207 9.914C7.012 9.719 6.776 9.621 6.5 9.621C6.224 9.621 5.988 9.719 5.793 9.914L4.588 11.119C4.542 11.29 4.492 11.46 4.438 11.63C4.174 12.461 3.826 13.251 3.393 14L11.293 14L7.207 9.914Z"),
        fill = SolidColor(Color.Black),
    ).build()
}

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

### Android XML

```xml
<!-- res/drawable/ic_panorama_vertical.xml · Gentleface "panorama-vertical" (line-round), MIT. https://gentleface.com/icons/panorama-vertical -->
<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="M1.987 14.5C1.987 14.397 2.016 14.303 2.074 14.217C2.687 13.323 3.157 12.36 3.485 11.327C3.828 10.245 4 9.136 4 8C4 6.864 3.828 5.755 3.485 4.673C3.157 3.64 2.687 2.677 2.074 1.783C1.995 1.666 1.967 1.541 1.992 1.408C2.017 1.274 2.088 1.167 2.204 1.088C2.289 1.029 2.384 1 2.487 1L13.513 1C13.654 1 13.773 1.048 13.869 1.144C13.965 1.241 14.013 1.359 14.013 1.5C14.013 1.603 13.984 1.697 13.926 1.783C13.313 2.677 12.843 3.64 12.515 4.673C12.172 5.755 12 6.864 12 8C12 9.136 12.172 10.245 12.515 11.327C12.843 12.36 13.313 13.323 13.926 14.217C14.005 14.334 14.033 14.459 14.008 14.592C13.983 14.726 13.912 14.833 13.796 14.912C13.711 14.971 13.616 15 13.513 15L2.487 15C2.346 15 2.227 14.952 2.131 14.856C2.035 14.759 1.987 14.641 1.987 14.5ZM5.086 9.207C5.266 9.027 5.472 8.887 5.706 8.786C5.959 8.676 6.224 8.621 6.5 8.621C6.776 8.621 7.041 8.676 7.294 8.786C7.528 8.887 7.734 9.027 7.914 9.207L12.478 13.771C12.105 13.091 11.799 12.377 11.562 11.63C11.187 10.449 11 9.239 11 8C11 6.761 11.187 5.551 11.562 4.37C11.826 3.539 12.174 2.749 12.607 2L3.393 2C3.826 2.749 4.174 3.539 4.438 4.37C4.813 5.551 5 6.761 5 8C5 8.461 4.974 8.918 4.922 9.371L5.086 9.207ZM8.293 3.293C8.488 3.098 8.724 3 9 3C9.276 3 9.512 3.098 9.707 3.293C9.902 3.488 10 3.724 10 4C10 4.276 9.902 4.512 9.707 4.707C9.512 4.902 9.276 5 9 5C8.724 5 8.488 4.902 8.293 4.707C8.098 4.512 8 4.276 8 4C8 3.724 8.098 3.488 8.293 3.293ZM7.207 9.914C7.012 9.719 6.776 9.621 6.5 9.621C6.224 9.621 5.988 9.719 5.793 9.914L4.588 11.119C4.542 11.29 4.492 11.46 4.438 11.63C4.174 12.461 3.826 13.251 3.393 14L11.293 14L7.207 9.914Z"/>
</vector>
```

### Flutter

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

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

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

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

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(1.987, 14.5)
      ..cubicTo(1.987, 14.397, 2.016, 14.303, 2.074, 14.217)
      ..cubicTo(2.687, 13.323, 3.157, 12.36, 3.485, 11.327)
      ..cubicTo(3.828, 10.245, 4, 9.136, 4, 8)
      ..cubicTo(4, 6.864, 3.828, 5.755, 3.485, 4.673)
      ..cubicTo(3.157, 3.64, 2.687, 2.677, 2.074, 1.783)
      ..cubicTo(1.995, 1.666, 1.967, 1.541, 1.992, 1.408)
      ..cubicTo(2.017, 1.274, 2.088, 1.167, 2.204, 1.088)
      ..cubicTo(2.289, 1.029, 2.384, 1, 2.487, 1)
      ..lineTo(13.513, 1)
      ..cubicTo(13.654, 1, 13.773, 1.048, 13.869, 1.144)
      ..cubicTo(13.965, 1.241, 14.013, 1.359, 14.013, 1.5)
      ..cubicTo(14.013, 1.603, 13.984, 1.697, 13.926, 1.783)
      ..cubicTo(13.313, 2.677, 12.843, 3.64, 12.515, 4.673)
      ..cubicTo(12.172, 5.755, 12, 6.864, 12, 8)
      ..cubicTo(12, 9.136, 12.172, 10.245, 12.515, 11.327)
      ..cubicTo(12.843, 12.36, 13.313, 13.323, 13.926, 14.217)
      ..cubicTo(14.005, 14.334, 14.033, 14.459, 14.008, 14.592)
      ..cubicTo(13.983, 14.726, 13.912, 14.833, 13.796, 14.912)
      ..cubicTo(13.711, 14.971, 13.616, 15, 13.513, 15)
      ..lineTo(2.487, 15)
      ..cubicTo(2.346, 15, 2.227, 14.952, 2.131, 14.856)
      ..cubicTo(2.035, 14.759, 1.987, 14.641, 1.987, 14.5)
      ..close()
      ..moveTo(5.086, 9.207)
      ..cubicTo(5.266, 9.027, 5.472, 8.887, 5.706, 8.786)
      ..cubicTo(5.959, 8.676, 6.224, 8.621, 6.5, 8.621)
      ..cubicTo(6.776, 8.621, 7.041, 8.676, 7.294, 8.786)
      ..cubicTo(7.528, 8.887, 7.734, 9.027, 7.914, 9.207)
      ..lineTo(12.478, 13.771)
      ..cubicTo(12.105, 13.091, 11.799, 12.377, 11.562, 11.63)
      ..cubicTo(11.187, 10.449, 11, 9.239, 11, 8)
      ..cubicTo(11, 6.761, 11.187, 5.551, 11.562, 4.37)
      ..cubicTo(11.826, 3.539, 12.174, 2.749, 12.607, 2)
      ..lineTo(3.393, 2)
      ..cubicTo(3.826, 2.749, 4.174, 3.539, 4.438, 4.37)
      ..cubicTo(4.813, 5.551, 5, 6.761, 5, 8)
      ..cubicTo(5, 8.461, 4.974, 8.918, 4.922, 9.371)
      ..lineTo(5.086, 9.207)
      ..close()
      ..moveTo(8.293, 3.293)
      ..cubicTo(8.488, 3.098, 8.724, 3, 9, 3)
      ..cubicTo(9.276, 3, 9.512, 3.098, 9.707, 3.293)
      ..cubicTo(9.902, 3.488, 10, 3.724, 10, 4)
      ..cubicTo(10, 4.276, 9.902, 4.512, 9.707, 4.707)
      ..cubicTo(9.512, 4.902, 9.276, 5, 9, 5)
      ..cubicTo(8.724, 5, 8.488, 4.902, 8.293, 4.707)
      ..cubicTo(8.098, 4.512, 8, 4.276, 8, 4)
      ..cubicTo(8, 3.724, 8.098, 3.488, 8.293, 3.293)
      ..close()
      ..moveTo(7.207, 9.914)
      ..cubicTo(7.012, 9.719, 6.776, 9.621, 6.5, 9.621)
      ..cubicTo(6.224, 9.621, 5.988, 9.719, 5.793, 9.914)
      ..lineTo(4.588, 11.119)
      ..cubicTo(4.542, 11.29, 4.492, 11.46, 4.438, 11.63)
      ..cubicTo(4.174, 12.461, 3.826, 13.251, 3.393, 14)
      ..lineTo(11.293, 14)
      ..lineTo(7.207, 9.914)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

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