panorama icon

panorama-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.

Name
panorama-thin
Set
Phosphor
Style
Thin
Viewbox
256×256
License
MIT

5 other variants in Phosphor

The same icon in other sets

Use the panorama icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M239.31 54.49a11.88 11.88 0 0 0-10.39-2.08l-3.47.93C206.47 58.47 171.14 68 128 68s-78.47-9.53-97.45-14.66l-3.47-.93A12 12 0 0 0 12 64v128a11.95 11.95 0 0 0 15.09 11.59l3.18-.85C49.27 197.58 84.64 188 128 188s78.73 9.58 97.73 14.73l3.18.85A12 12 0 0 0 244 192V64a11.92 11.92 0 0 0-4.69-9.51M21.57 60.83A4 4 0 0 1 24 60a4.2 4.2 0 0 1 1 .14l3.44.93C47.8 66.29 83.8 76 128 76s80.2-9.71 99.54-14.93l3.45-.93A4 4 0 0 1 236 64v128.37l-64.85-64.85a12 12 0 0 0-17 0l-22.83 22.83l-46.83-46.84a12 12 0 0 0-17 0L20 151V64a4 4 0 0 1 1.57-3.17M28.17 195l-3.15.85A4 4 0 0 1 20 192v-29.66l53.17-53.17a4 4 0 0 1 5.66 0l71.67 71.67c-7.24-.53-14.76-.84-22.5-.84c-44.43 0-81.84 10.13-99.83 15M163 182l-26-26l22.83-22.83a4 4 0 0 1 5.66 0l61.64 61.64C214 191.25 191.11 185.14 163 182m33-74a8 8 0 1 1 8 8a8 8 0 0 1-8-8"/></svg>

React

import type { SVGProps } from "react";

export function PhPanoramaThin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M239.31 54.49a11.88 11.88 0 0 0-10.39-2.08l-3.47.93C206.47 58.47 171.14 68 128 68s-78.47-9.53-97.45-14.66l-3.47-.93A12 12 0 0 0 12 64v128a11.95 11.95 0 0 0 15.09 11.59l3.18-.85C49.27 197.58 84.64 188 128 188s78.73 9.58 97.73 14.73l3.18.85A12 12 0 0 0 244 192V64a11.92 11.92 0 0 0-4.69-9.51M21.57 60.83A4 4 0 0 1 24 60a4.2 4.2 0 0 1 1 .14l3.44.93C47.8 66.29 83.8 76 128 76s80.2-9.71 99.54-14.93l3.45-.93A4 4 0 0 1 236 64v128.37l-64.85-64.85a12 12 0 0 0-17 0l-22.83 22.83l-46.83-46.84a12 12 0 0 0-17 0L20 151V64a4 4 0 0 1 1.57-3.17M28.17 195l-3.15.85A4 4 0 0 1 20 192v-29.66l53.17-53.17a4 4 0 0 1 5.66 0l71.67 71.67c-7.24-.53-14.76-.84-22.5-.84c-44.43 0-81.84 10.13-99.83 15M163 182l-26-26l22.83-22.83a4 4 0 0 1 5.66 0l61.64 61.64C214 191.25 191.11 185.14 163 182m33-74a8 8 0 1 1 8 8a8 8 0 0 1-8-8"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M239.31 54.49a11.88 11.88 0 0 0-10.39-2.08l-3.47.93C206.47 58.47 171.14 68 128 68s-78.47-9.53-97.45-14.66l-3.47-.93A12 12 0 0 0 12 64v128a11.95 11.95 0 0 0 15.09 11.59l3.18-.85C49.27 197.58 84.64 188 128 188s78.73 9.58 97.73 14.73l3.18.85A12 12 0 0 0 244 192V64a11.92 11.92 0 0 0-4.69-9.51M21.57 60.83A4 4 0 0 1 24 60a4.2 4.2 0 0 1 1 .14l3.44.93C47.8 66.29 83.8 76 128 76s80.2-9.71 99.54-14.93l3.45-.93A4 4 0 0 1 236 64v128.37l-64.85-64.85a12 12 0 0 0-17 0l-22.83 22.83l-46.83-46.84a12 12 0 0 0-17 0L20 151V64a4 4 0 0 1 1.57-3.17M28.17 195l-3.15.85A4 4 0 0 1 20 192v-29.66l53.17-53.17a4 4 0 0 1 5.66 0l71.67 71.67c-7.24-.53-14.76-.84-22.5-.84c-44.43 0-81.84 10.13-99.83 15M163 182l-26-26l22.83-22.83a4 4 0 0 1 5.66 0l61.64 61.64C214 191.25 191.11 185.14 163 182m33-74a8 8 0 1 1 8 8a8 8 0 0 1-8-8"/></svg>
</template>

CSS

.icon-panorama-thin {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M239.31%2054.49a11.88%2011.88%200%200%200-10.39-2.08l-3.47.93C206.47%2058.47%20171.14%2068%20128%2068s-78.47-9.53-97.45-14.66l-3.47-.93A12%2012%200%200%200%2012%2064v128a11.95%2011.95%200%200%200%2015.09%2011.59l3.18-.85C49.27%20197.58%2084.64%20188%20128%20188s78.73%209.58%2097.73%2014.73l3.18.85A12%2012%200%200%200%20244%20192V64a11.92%2011.92%200%200%200-4.69-9.51M21.57%2060.83A4%204%200%200%201%2024%2060a4.2%204.2%200%200%201%201%20.14l3.44.93C47.8%2066.29%2083.8%2076%20128%2076s80.2-9.71%2099.54-14.93l3.45-.93A4%204%200%200%201%20236%2064v128.37l-64.85-64.85a12%2012%200%200%200-17%200l-22.83%2022.83l-46.83-46.84a12%2012%200%200%200-17%200L20%20151V64a4%204%200%200%201%201.57-3.17M28.17%20195l-3.15.85A4%204%200%200%201%2020%20192v-29.66l53.17-53.17a4%204%200%200%201%205.66%200l71.67%2071.67c-7.24-.53-14.76-.84-22.5-.84c-44.43%200-81.84%2010.13-99.83%2015M163%20182l-26-26l22.83-22.83a4%204%200%200%201%205.66%200l61.64%2061.64C214%20191.25%20191.11%20185.14%20163%20182m33-74a8%208%200%201%201%208%208a8%208%200%200%201-8-8%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M239.31%2054.49a11.88%2011.88%200%200%200-10.39-2.08l-3.47.93C206.47%2058.47%20171.14%2068%20128%2068s-78.47-9.53-97.45-14.66l-3.47-.93A12%2012%200%200%200%2012%2064v128a11.95%2011.95%200%200%200%2015.09%2011.59l3.18-.85C49.27%20197.58%2084.64%20188%20128%20188s78.73%209.58%2097.73%2014.73l3.18.85A12%2012%200%200%200%20244%20192V64a11.92%2011.92%200%200%200-4.69-9.51M21.57%2060.83A4%204%200%200%201%2024%2060a4.2%204.2%200%200%201%201%20.14l3.44.93C47.8%2066.29%2083.8%2076%20128%2076s80.2-9.71%2099.54-14.93l3.45-.93A4%204%200%200%201%20236%2064v128.37l-64.85-64.85a12%2012%200%200%200-17%200l-22.83%2022.83l-46.83-46.84a12%2012%200%200%200-17%200L20%20151V64a4%204%200%200%201%201.57-3.17M28.17%20195l-3.15.85A4%204%200%200%201%2020%20192v-29.66l53.17-53.17a4%204%200%200%201%205.66%200l71.67%2071.67c-7.24-.53-14.76-.84-22.5-.84c-44.43%200-81.84%2010.13-99.83%2015M163%20182l-26-26l22.83-22.83a4%204%200%200%201%205.66%200l61.64%2061.64C214%20191.25%20191.11%20185.14%20163%20182m33-74a8%208%200%201%201%208%208a8%208%200%200%201-8-8%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/panorama-thin.svg?color=%231a73e8&size=48