panel left close icon
panel-left-close-fill from Keyline Icons by Keyline Icons · Fill · MIT Free for personal and commercial use.
- Name
- panel-left-close-fill
- Set
- Keyline Icons
- Style
- Fill
- Viewbox
- 24×24
- License
- MIT
7 other variants in Keyline Icons
The same icon in other sets
Related icons in Keyline Icons
panel-bottompanel-bottom-closepanel-bottom-close-dashedpanel-bottom-dashedpanel-bottom-openpanel-bottom-open-dashedpanel-leftpanel-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-openpanel-top-open-dashed
Use the panel left 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.2092 2 22 3.7909 22 6L22 18C22 20.2092 20.2092 22 18 22L6 22C3.7909 22 2 20.2092 2 18L2 6C2 3.7909 3.7909 2 6 2L18 2ZM8 4L8 20L10 20L10 4L8 4ZM16.7071 9.7071C17.0976 9.3166 17.0976 8.6834 16.7071 8.2929C16.3166 7.9024 15.6834 7.9024 15.2929 8.2929L12.2929 11.2929C11.9024 11.6834 11.9024 12.3166 12.2929 12.7071L15.2929 15.7071C15.6834 16.0976 16.3166 16.0976 16.7071 15.7071C17.0976 15.3166 17.0976 14.6834 16.7071 14.2929L14.4142 12L16.7071 9.7071Z"/></svg>
React
import type { SVGProps } from "react";
export function KeylineIconsPanelLeftCloseFill(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.2092 2 22 3.7909 22 6L22 18C22 20.2092 20.2092 22 18 22L6 22C3.7909 22 2 20.2092 2 18L2 6C2 3.7909 3.7909 2 6 2L18 2ZM8 4L8 20L10 20L10 4L8 4ZM16.7071 9.7071C17.0976 9.3166 17.0976 8.6834 16.7071 8.2929C16.3166 7.9024 15.6834 7.9024 15.2929 8.2929L12.2929 11.2929C11.9024 11.6834 11.9024 12.3166 12.2929 12.7071L15.2929 15.7071C15.6834 16.0976 16.3166 16.0976 16.7071 15.7071C17.0976 15.3166 17.0976 14.6834 16.7071 14.2929L14.4142 12L16.7071 9.7071Z"/></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.2092 2 22 3.7909 22 6L22 18C22 20.2092 20.2092 22 18 22L6 22C3.7909 22 2 20.2092 2 18L2 6C2 3.7909 3.7909 2 6 2L18 2ZM8 4L8 20L10 20L10 4L8 4ZM16.7071 9.7071C17.0976 9.3166 17.0976 8.6834 16.7071 8.2929C16.3166 7.9024 15.6834 7.9024 15.2929 8.2929L12.2929 11.2929C11.9024 11.6834 11.9024 12.3166 12.2929 12.7071L15.2929 15.7071C15.6834 16.0976 16.3166 16.0976 16.7071 15.7071C17.0976 15.3166 17.0976 14.6834 16.7071 14.2929L14.4142 12L16.7071 9.7071Z"/></svg> </template>
CSS
.icon-panel-left-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.2092%202%2022%203.7909%2022%206L22%2018C22%2020.2092%2020.2092%2022%2018%2022L6%2022C3.7909%2022%202%2020.2092%202%2018L2%206C2%203.7909%203.7909%202%206%202L18%202ZM8%204L8%2020L10%2020L10%204L8%204ZM16.7071%209.7071C17.0976%209.3166%2017.0976%208.6834%2016.7071%208.2929C16.3166%207.9024%2015.6834%207.9024%2015.2929%208.2929L12.2929%2011.2929C11.9024%2011.6834%2011.9024%2012.3166%2012.2929%2012.7071L15.2929%2015.7071C15.6834%2016.0976%2016.3166%2016.0976%2016.7071%2015.7071C17.0976%2015.3166%2017.0976%2014.6834%2016.7071%2014.2929L14.4142%2012L16.7071%209.7071Z%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.2092%202%2022%203.7909%2022%206L22%2018C22%2020.2092%2020.2092%2022%2018%2022L6%2022C3.7909%2022%202%2020.2092%202%2018L2%206C2%203.7909%203.7909%202%206%202L18%202ZM8%204L8%2020L10%2020L10%204L8%204ZM16.7071%209.7071C17.0976%209.3166%2017.0976%208.6834%2016.7071%208.2929C16.3166%207.9024%2015.6834%207.9024%2015.2929%208.2929L12.2929%2011.2929C11.9024%2011.6834%2011.9024%2012.3166%2012.2929%2012.7071L15.2929%2015.7071C15.6834%2016.0976%2016.3166%2016.0976%2016.7071%2015.7071C17.0976%2015.3166%2017.0976%2014.6834%2016.7071%2014.2929L14.4142%2012L16.7071%209.7071Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/keyline-icons/panel-left-close-fill.svg?color=%231a73e8&size=48