panorama icon

panorama from Font Awesome 6 Solid by Dave Gandy · Regular · CC-BY-4.0 Attribution required.

Name: panorama
Set: Font Awesome 6 Solid
Style: Regular
Viewbox: 640×512
License: CC BY 4.0

The same icon in other sets

panoramaFont Awesome Solid panoramaMaterial Symbols panoramaMaterial Symbols Light panoramaMaterial Design Icons panoramaPhosphor panorama-boldSolar

Use the panorama icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 512"><path fill="currentColor" d="M45.6 32C20.4 32 0 52.4 0 77.6v356.8C0 459.6 20.4 480 45.6 480q7.65 0 14.7-2.4C74.6 472.8 177.6 440 320 440s245.4 32.8 259.6 37.6c4.7 1.6 9.7 2.4 14.7 2.4c25.2 0 45.6-20.4 45.6-45.6V77.7C640 52.4 619.6 32 594.4 32c-5 0-10 .8-14.7 2.4C565.4 39.2 462.4 72 320 72S74.6 39.2 60.4 34.4c-4.8-1.6-9.7-2.4-14.8-2.4M96 160a32 32 0 1 1 64 0a32 32 0 1 1-64 0m272 0c7.9 0 15.4 3.9 19.8 10.5L512.3 353c5.4 8 5.6 18.4.4 26.5s-14.7 12.3-24.2 10.7C442.7 382.4 385.2 376 320 376c-65.6 0-123.4 6.5-169.3 14.4c-9.8 1.7-19.7-2.9-24.7-11.5s-4.3-19.4 1.9-27.2l69.4-86.7c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l26.4 33.1l87-127.6c4.5-6.6 11.9-10.5 19.8-10.5z"/></svg>

React

import type { SVGProps } from "react";

export function Fa6SolidPanorama(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 512"><path fill="currentColor" d="M45.6 32C20.4 32 0 52.4 0 77.6v356.8C0 459.6 20.4 480 45.6 480q7.65 0 14.7-2.4C74.6 472.8 177.6 440 320 440s245.4 32.8 259.6 37.6c4.7 1.6 9.7 2.4 14.7 2.4c25.2 0 45.6-20.4 45.6-45.6V77.7C640 52.4 619.6 32 594.4 32c-5 0-10 .8-14.7 2.4C565.4 39.2 462.4 72 320 72S74.6 39.2 60.4 34.4c-4.8-1.6-9.7-2.4-14.8-2.4M96 160a32 32 0 1 1 64 0a32 32 0 1 1-64 0m272 0c7.9 0 15.4 3.9 19.8 10.5L512.3 353c5.4 8 5.6 18.4.4 26.5s-14.7 12.3-24.2 10.7C442.7 382.4 385.2 376 320 376c-65.6 0-123.4 6.5-169.3 14.4c-9.8 1.7-19.7-2.9-24.7-11.5s-4.3-19.4 1.9-27.2l69.4-86.7c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l26.4 33.1l87-127.6c4.5-6.6 11.9-10.5 19.8-10.5z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 512"><path fill="currentColor" d="M45.6 32C20.4 32 0 52.4 0 77.6v356.8C0 459.6 20.4 480 45.6 480q7.65 0 14.7-2.4C74.6 472.8 177.6 440 320 440s245.4 32.8 259.6 37.6c4.7 1.6 9.7 2.4 14.7 2.4c25.2 0 45.6-20.4 45.6-45.6V77.7C640 52.4 619.6 32 594.4 32c-5 0-10 .8-14.7 2.4C565.4 39.2 462.4 72 320 72S74.6 39.2 60.4 34.4c-4.8-1.6-9.7-2.4-14.8-2.4M96 160a32 32 0 1 1 64 0a32 32 0 1 1-64 0m272 0c7.9 0 15.4 3.9 19.8 10.5L512.3 353c5.4 8 5.6 18.4.4 26.5s-14.7 12.3-24.2 10.7C442.7 382.4 385.2 376 320 376c-65.6 0-123.4 6.5-169.3 14.4c-9.8 1.7-19.7-2.9-24.7-11.5s-4.3-19.4 1.9-27.2l69.4-86.7c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l26.4 33.1l87-127.6c4.5-6.6 11.9-10.5 19.8-10.5z"/></svg>
</template>

CSS

.icon-panorama {
  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%20640%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M45.6%2032C20.4%2032%200%2052.4%200%2077.6v356.8C0%20459.6%2020.4%20480%2045.6%20480q7.65%200%2014.7-2.4C74.6%20472.8%20177.6%20440%20320%20440s245.4%2032.8%20259.6%2037.6c4.7%201.6%209.7%202.4%2014.7%202.4c25.2%200%2045.6-20.4%2045.6-45.6V77.7C640%2052.4%20619.6%2032%20594.4%2032c-5%200-10%20.8-14.7%202.4C565.4%2039.2%20462.4%2072%20320%2072S74.6%2039.2%2060.4%2034.4c-4.8-1.6-9.7-2.4-14.8-2.4M96%20160a32%2032%200%201%201%2064%200a32%2032%200%201%201-64%200m272%200c7.9%200%2015.4%203.9%2019.8%2010.5L512.3%20353c5.4%208%205.6%2018.4.4%2026.5s-14.7%2012.3-24.2%2010.7C442.7%20382.4%20385.2%20376%20320%20376c-65.6%200-123.4%206.5-169.3%2014.4c-9.8%201.7-19.7-2.9-24.7-11.5s-4.3-19.4%201.9-27.2l69.4-86.7c4.6-5.7%2011.4-9%2018.7-9s14.2%203.3%2018.7%209l26.4%2033.1l87-127.6c4.5-6.6%2011.9-10.5%2019.8-10.5z%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%20640%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M45.6%2032C20.4%2032%200%2052.4%200%2077.6v356.8C0%20459.6%2020.4%20480%2045.6%20480q7.65%200%2014.7-2.4C74.6%20472.8%20177.6%20440%20320%20440s245.4%2032.8%20259.6%2037.6c4.7%201.6%209.7%202.4%2014.7%202.4c25.2%200%2045.6-20.4%2045.6-45.6V77.7C640%2052.4%20619.6%2032%20594.4%2032c-5%200-10%20.8-14.7%202.4C565.4%2039.2%20462.4%2072%20320%2072S74.6%2039.2%2060.4%2034.4c-4.8-1.6-9.7-2.4-14.8-2.4M96%20160a32%2032%200%201%201%2064%200a32%2032%200%201%201-64%200m272%200c7.9%200%2015.4%203.9%2019.8%2010.5L512.3%20353c5.4%208%205.6%2018.4.4%2026.5s-14.7%2012.3-24.2%2010.7C442.7%20382.4%20385.2%20376%20320%20376c-65.6%200-123.4%206.5-169.3%2014.4c-9.8%201.7-19.7-2.9-24.7-11.5s-4.3-19.4%201.9-27.2l69.4-86.7c4.6-5.7%2011.4-9%2018.7-9s14.2%203.3%2018.7%209l26.4%2033.1l87-127.6c4.5-6.6%2011.9-10.5%2019.8-10.5z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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