panel right close icon

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

Name
panel-right-close-fill
Set
Keyline Icons
Style
Fill
Viewbox
24×24
License
MIT

7 other variants in Keyline Icons

panel-right-closepanel-right-close-duotonepanel-right-close-sharppanel-right-close-sharp-duotonepanel-right-close-sharp-fillpanel-right-close-sharp-two-tonepanel-right-close-two-tone

The same icon in other sets

panel-right-closeHuge Iconspanel-right-closeLucidepanel-right-closeMyna UI Icons

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-close-dashedpanel-right-dashedpanel-right-openpanel-right-open-dashedpanel-toppanel-top-closepanel-top-close-dashedpanel-top-dashedpanel-top-openpanel-top-open-dashed

Use the panel right close 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 2ZM14 4L14 20L16 20L16 4L14 4ZM8.7071 8.2929C8.3166 7.9024 7.6834 7.9024 7.2929 8.2929C6.9024 8.6834 6.9024 9.3166 7.2929 9.7071L9.5858 12L7.2929 14.2929C6.9024 14.6834 6.9024 15.3166 7.2929 15.7071C7.6834 16.0976 8.3166 16.0976 8.7071 15.7071L11.7071 12.7071C12.0976 12.3166 12.0976 11.6834 11.7071 11.2929L8.7071 8.2929Z"/></svg>

React

import type { SVGProps } from "react";

export function KeylineIconsPanelRightCloseFill(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 2ZM14 4L14 20L16 20L16 4L14 4ZM8.7071 8.2929C8.3166 7.9024 7.6834 7.9024 7.2929 8.2929C6.9024 8.6834 6.9024 9.3166 7.2929 9.7071L9.5858 12L7.2929 14.2929C6.9024 14.6834 6.9024 15.3166 7.2929 15.7071C7.6834 16.0976 8.3166 16.0976 8.7071 15.7071L11.7071 12.7071C12.0976 12.3166 12.0976 11.6834 11.7071 11.2929L8.7071 8.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 2ZM14 4L14 20L16 20L16 4L14 4ZM8.7071 8.2929C8.3166 7.9024 7.6834 7.9024 7.2929 8.2929C6.9024 8.6834 6.9024 9.3166 7.2929 9.7071L9.5858 12L7.2929 14.2929C6.9024 14.6834 6.9024 15.3166 7.2929 15.7071C7.6834 16.0976 8.3166 16.0976 8.7071 15.7071L11.7071 12.7071C12.0976 12.3166 12.0976 11.6834 11.7071 11.2929L8.7071 8.2929Z"/></svg>
</template>

CSS

.icon-panel-right-close-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%202ZM14%204L14%2020L16%2020L16%204L14%204ZM8.7071%208.2929C8.3166%207.9024%207.6834%207.9024%207.2929%208.2929C6.9024%208.6834%206.9024%209.3166%207.2929%209.7071L9.5858%2012L7.2929%2014.2929C6.9024%2014.6834%206.9024%2015.3166%207.2929%2015.7071C7.6834%2016.0976%208.3166%2016.0976%208.7071%2015.7071L11.7071%2012.7071C12.0976%2012.3166%2012.0976%2011.6834%2011.7071%2011.2929L8.7071%208.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%202ZM14%204L14%2020L16%2020L16%204L14%204ZM8.7071%208.2929C8.3166%207.9024%207.6834%207.9024%207.2929%208.2929C6.9024%208.6834%206.9024%209.3166%207.2929%209.7071L9.5858%2012L7.2929%2014.2929C6.9024%2014.6834%206.9024%2015.3166%207.2929%2015.7071C7.6834%2016.0976%208.3166%2016.0976%208.7071%2015.7071L11.7071%2012.7071C12.0976%2012.3166%2012.0976%2011.6834%2011.7071%2011.2929L8.7071%208.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-right-close-fill.svg?color=%231a73e8&size=48