panorama icon

panorama-bold from Phosphor by Phosphor Icons · Bold · MIT Free for personal and commercial use.

Name
panorama-bold
Set
Phosphor
Style
Bold
Viewbox
256×256
License
MIT

5 other variants in Phosphor

panoramapanorama-duotonepanorama-fillpanorama-lightpanorama-thin

The same icon in other sets

panoramaFont Awesome 6 SolidpanoramaFont Awesome SolidpanoramaMaterial SymbolspanoramaMaterial Symbols LightpanoramaMaterial Design Iconspanorama-boldSolar

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="M244.18 48.15a19.82 19.82 0 0 0-17.32-3.46l-3.49.94C204.74 50.65 170.08 60 128 60s-76.74-9.35-95.37-14.37l-3.49-.94A20 20 0 0 0 4 64v128a20 20 0 0 0 19.94 20a20.4 20.4 0 0 0 5.23-.69l3.19-.87C51 205.39 85.7 196 128 196s77 9.4 95.64 14.45l3.19.87A20 20 0 0 0 252 192V64a19.85 19.85 0 0 0-7.82-15.85M128 84c44 0 81.14-9.69 100-14.77v107.85l-51.23-51.22a20 20 0 0 0-28.28 0L131.31 143l-41.17-41.14a20 20 0 0 0-28.28 0L28 135.71V69.23C46.86 74.31 84 84 128 84m20.28 76l14.35-14.35l33.46 33.46c-10.09-2-21.52-3.93-33.94-5.25ZM28 186.76v-17.11l48-48L126.35 172c-43.23.24-79.61 9.7-98.35 14.76M184 108a16 16 0 1 1 16 16a16 16 0 0 1-16-16"/></svg>

React

import type { SVGProps } from "react";

export function PhPanoramaBold(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="M244.18 48.15a19.82 19.82 0 0 0-17.32-3.46l-3.49.94C204.74 50.65 170.08 60 128 60s-76.74-9.35-95.37-14.37l-3.49-.94A20 20 0 0 0 4 64v128a20 20 0 0 0 19.94 20a20.4 20.4 0 0 0 5.23-.69l3.19-.87C51 205.39 85.7 196 128 196s77 9.4 95.64 14.45l3.19.87A20 20 0 0 0 252 192V64a19.85 19.85 0 0 0-7.82-15.85M128 84c44 0 81.14-9.69 100-14.77v107.85l-51.23-51.22a20 20 0 0 0-28.28 0L131.31 143l-41.17-41.14a20 20 0 0 0-28.28 0L28 135.71V69.23C46.86 74.31 84 84 128 84m20.28 76l14.35-14.35l33.46 33.46c-10.09-2-21.52-3.93-33.94-5.25ZM28 186.76v-17.11l48-48L126.35 172c-43.23.24-79.61 9.7-98.35 14.76M184 108a16 16 0 1 1 16 16a16 16 0 0 1-16-16"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M244.18 48.15a19.82 19.82 0 0 0-17.32-3.46l-3.49.94C204.74 50.65 170.08 60 128 60s-76.74-9.35-95.37-14.37l-3.49-.94A20 20 0 0 0 4 64v128a20 20 0 0 0 19.94 20a20.4 20.4 0 0 0 5.23-.69l3.19-.87C51 205.39 85.7 196 128 196s77 9.4 95.64 14.45l3.19.87A20 20 0 0 0 252 192V64a19.85 19.85 0 0 0-7.82-15.85M128 84c44 0 81.14-9.69 100-14.77v107.85l-51.23-51.22a20 20 0 0 0-28.28 0L131.31 143l-41.17-41.14a20 20 0 0 0-28.28 0L28 135.71V69.23C46.86 74.31 84 84 128 84m20.28 76l14.35-14.35l33.46 33.46c-10.09-2-21.52-3.93-33.94-5.25ZM28 186.76v-17.11l48-48L126.35 172c-43.23.24-79.61 9.7-98.35 14.76M184 108a16 16 0 1 1 16 16a16 16 0 0 1-16-16"/></svg>
</template>

CSS

.icon-panorama-bold {
  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%22M244.18%2048.15a19.82%2019.82%200%200%200-17.32-3.46l-3.49.94C204.74%2050.65%20170.08%2060%20128%2060s-76.74-9.35-95.37-14.37l-3.49-.94A20%2020%200%200%200%204%2064v128a20%2020%200%200%200%2019.94%2020a20.4%2020.4%200%200%200%205.23-.69l3.19-.87C51%20205.39%2085.7%20196%20128%20196s77%209.4%2095.64%2014.45l3.19.87A20%2020%200%200%200%20252%20192V64a19.85%2019.85%200%200%200-7.82-15.85M128%2084c44%200%2081.14-9.69%20100-14.77v107.85l-51.23-51.22a20%2020%200%200%200-28.28%200L131.31%20143l-41.17-41.14a20%2020%200%200%200-28.28%200L28%20135.71V69.23C46.86%2074.31%2084%2084%20128%2084m20.28%2076l14.35-14.35l33.46%2033.46c-10.09-2-21.52-3.93-33.94-5.25ZM28%20186.76v-17.11l48-48L126.35%20172c-43.23.24-79.61%209.7-98.35%2014.76M184%20108a16%2016%200%201%201%2016%2016a16%2016%200%200%201-16-16%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%22M244.18%2048.15a19.82%2019.82%200%200%200-17.32-3.46l-3.49.94C204.74%2050.65%20170.08%2060%20128%2060s-76.74-9.35-95.37-14.37l-3.49-.94A20%2020%200%200%200%204%2064v128a20%2020%200%200%200%2019.94%2020a20.4%2020.4%200%200%200%205.23-.69l3.19-.87C51%20205.39%2085.7%20196%20128%20196s77%209.4%2095.64%2014.45l3.19.87A20%2020%200%200%200%20252%20192V64a19.85%2019.85%200%200%200-7.82-15.85M128%2084c44%200%2081.14-9.69%20100-14.77v107.85l-51.23-51.22a20%2020%200%200%200-28.28%200L131.31%20143l-41.17-41.14a20%2020%200%200%200-28.28%200L28%20135.71V69.23C46.86%2074.31%2084%2084%20128%2084m20.28%2076l14.35-14.35l33.46%2033.46c-10.09-2-21.52-3.93-33.94-5.25ZM28%20186.76v-17.11l48-48L126.35%20172c-43.23.24-79.61%209.7-98.35%2014.76M184%20108a16%2016%200%201%201%2016%2016a16%2016%200%200%201-16-16%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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