panel top open icon

panel-top-open-fill from Keyline Icons by Keyline Icons · Fill · MIT Free for personal and commercial use.

Name
panel-top-open-fill
Set
Keyline Icons
Style
Fill
Viewbox
24×24
License
MIT

7 other variants in Keyline Icons

panel-top-openpanel-top-open-duotonepanel-top-open-sharppanel-top-open-sharp-duotonepanel-top-open-sharp-fillpanel-top-open-sharp-two-tonepanel-top-open-two-tone

The same icon in other sets

panel-top-openHuge Iconspanel-top-openLucidepanel-top-openMyna UI Iconspanel-top-open-boldSolar

Related icons in Keyline Icons

panel-bottompanel-bottom-closepanel-bottom-close-dashedpanel-bottom-dashedpanel-bottom-openpanel-bottom-open-dashedpanel-leftpanel-left-closepanel-left-close-dashedpanel-left-dashedpanel-left-openpanel-left-open-dashedpanel-rightpanel-right-closepanel-right-close-dashedpanel-right-dashedpanel-right-openpanel-right-open-dashedpanel-toppanel-top-closepanel-top-close-dashedpanel-top-dashedpanel-top-open-dashed

Use the panel top open icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18 2C20.209 2 22 3.791 22 6L22 18C22 20.209 20.209 22 18 22L6 22C3.791 22 2 20.209 2 18L2 6C2 3.791 3.791 2 6 2L18 2ZM4 8L4 10L20 10L20 8L4 8ZM9.7071 12.2929C9.3166 11.9024 8.6834 11.9024 8.2929 12.2929C7.9024 12.6834 7.9024 13.3166 8.2929 13.7071L11.2929 16.7071C11.6834 17.0976 12.3166 17.0976 12.7071 16.7071L15.7071 13.7071C16.0976 13.3166 16.0976 12.6834 15.7071 12.2929C15.3166 11.9024 14.6834 11.9024 14.2929 12.2929L12 14.5858L9.7071 12.2929Z"/></svg>

React

import type { SVGProps } from "react";

export function KeylineIconsPanelTopOpenFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18 2C20.209 2 22 3.791 22 6L22 18C22 20.209 20.209 22 18 22L6 22C3.791 22 2 20.209 2 18L2 6C2 3.791 3.791 2 6 2L18 2ZM4 8L4 10L20 10L20 8L4 8ZM9.7071 12.2929C9.3166 11.9024 8.6834 11.9024 8.2929 12.2929C7.9024 12.6834 7.9024 13.3166 8.2929 13.7071L11.2929 16.7071C11.6834 17.0976 12.3166 17.0976 12.7071 16.7071L15.7071 13.7071C16.0976 13.3166 16.0976 12.6834 15.7071 12.2929C15.3166 11.9024 14.6834 11.9024 14.2929 12.2929L12 14.5858L9.7071 12.2929Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18 2C20.209 2 22 3.791 22 6L22 18C22 20.209 20.209 22 18 22L6 22C3.791 22 2 20.209 2 18L2 6C2 3.791 3.791 2 6 2L18 2ZM4 8L4 10L20 10L20 8L4 8ZM9.7071 12.2929C9.3166 11.9024 8.6834 11.9024 8.2929 12.2929C7.9024 12.6834 7.9024 13.3166 8.2929 13.7071L11.2929 16.7071C11.6834 17.0976 12.3166 17.0976 12.7071 16.7071L15.7071 13.7071C16.0976 13.3166 16.0976 12.6834 15.7071 12.2929C15.3166 11.9024 14.6834 11.9024 14.2929 12.2929L12 14.5858L9.7071 12.2929Z"/></svg>
</template>

CSS

.icon-panel-top-open-fill {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M18%202C20.209%202%2022%203.791%2022%206L22%2018C22%2020.209%2020.209%2022%2018%2022L6%2022C3.791%2022%202%2020.209%202%2018L2%206C2%203.791%203.791%202%206%202L18%202ZM4%208L4%2010L20%2010L20%208L4%208ZM9.7071%2012.2929C9.3166%2011.9024%208.6834%2011.9024%208.2929%2012.2929C7.9024%2012.6834%207.9024%2013.3166%208.2929%2013.7071L11.2929%2016.7071C11.6834%2017.0976%2012.3166%2017.0976%2012.7071%2016.7071L15.7071%2013.7071C16.0976%2013.3166%2016.0976%2012.6834%2015.7071%2012.2929C15.3166%2011.9024%2014.6834%2011.9024%2014.2929%2012.2929L12%2014.5858L9.7071%2012.2929Z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M18%202C20.209%202%2022%203.791%2022%206L22%2018C22%2020.209%2020.209%2022%2018%2022L6%2022C3.791%2022%202%2020.209%202%2018L2%206C2%203.791%203.791%202%206%202L18%202ZM4%208L4%2010L20%2010L20%208L4%208ZM9.7071%2012.2929C9.3166%2011.9024%208.6834%2011.9024%208.2929%2012.2929C7.9024%2012.6834%207.9024%2013.3166%208.2929%2013.7071L11.2929%2016.7071C11.6834%2017.0976%2012.3166%2017.0976%2012.7071%2016.7071L15.7071%2013.7071C16.0976%2013.3166%2016.0976%2012.6834%2015.7071%2012.2929C15.3166%2011.9024%2014.6834%2011.9024%2014.2929%2012.2929L12%2014.5858L9.7071%2012.2929Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/keyline-icons/panel-top-open-fill.svg?color=%231a73e8&size=48