Gentleface › Photo & image › panorama-vertical

panorama-vertical icon

Panorama vertical: vertical panorama. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Animated panorama-vertical-tilt · line-round

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.

Download SVG

Native SVG animation, with no CSS or script. It loops by itself. Inline it to take the text color: in an <img> it draws black. To play it once on hover or click, run 0.3 s to 3.05 s. Examples and helper.

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="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

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

Svelte

Svelte: see /icons/panorama-vertical.md

HTML img

HTML img: see /icons/panorama-vertical.md

CSS

CSS: see /icons/panorama-vertical.md

Data URL

Data URL: see /icons/panorama-vertical.md

Sprite

Sprite: see /icons/panorama-vertical.md

SwiftUI

SwiftUI: see /icons/panorama-vertical.md

Compose

Compose: see /icons/panorama-vertical.md

Android XML

Android XML: see /icons/panorama-vertical.md

Flutter

Flutter: see /icons/panorama-vertical.md

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. 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 { PanoramaVerticalIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

vertical panorama

Tags

panorama, vertical panorama, tall, portrait, wide angle, photo, camera mode, image

Category

Photo & image

Component name

PanoramaVerticalIcon

History

2026-11-06 20 px drawn, 24 px drawn, added, released in 0.4.0

Since

version 0.4.0

Family 1

panorama

More photo & image icons

aperture background-remove background-remove-stripes background-replace blur blur-off bolt-auto camera camera-alert camera-arrow-up camera-gear camera-link camera-off camera-pencil camera-plus camera-rotate · all photo & image icons

For agents

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

panorama-vertical icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp