extend icon
extend from IconPark by ByteDance · Color · Edit · Apache-2.0 Free for personal and commercial use.
- Name
- extend
- Set
- IconPark
- Style
- Color
- Category
- Edit
- Viewbox
- 48×48
- License
- Apache 2.0
The same icon in other sets
More edit icons from IconPark
Use the extend icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><rect width="36" height="36" x="6" y="6" fill="#2F88FF" stroke="#000" stroke-width="4" rx="3"/><path fill="#fff" d="M35 12H30.4142C29.5233 12 29.0771 13.0771 29.7071 13.7071L34.2929 18.2929C34.9229 18.9229 36 18.4767 36 17.5858V13C36 12.4477 35.5523 12 35 12Z"/><path fill="#fff" d="M12 13V17.5858C12 18.4767 13.0771 18.9229 13.7071 18.2929L18.2929 13.7071C18.9229 13.0771 18.4767 12 17.5858 12H13C12.4477 12 12 12.4477 12 13Z"/><path fill="#fff" d="M13 36H17.5858C18.4767 36 18.9229 34.9229 18.2929 34.2929L13.7071 29.7071C13.0771 29.0771 12 29.5233 12 30.4142V35C12 35.5523 12.4477 36 13 36Z"/><path fill="#fff" d="M36 35V30.4142C36 29.5233 34.9229 29.0771 34.2929 29.7071L29.7071 34.2929C29.0771 34.9229 29.5233 36 30.4142 36H35C35.5523 36 36 35.5523 36 35Z"/></g></svg>
React
import type { SVGProps } from "react";
export function IconParkExtend(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><rect width="36" height="36" x="6" y="6" fill="#2F88FF" stroke="#000" strokeWidth="4" rx="3"/><path fill="#fff" d="M35 12H30.4142C29.5233 12 29.0771 13.0771 29.7071 13.7071L34.2929 18.2929C34.9229 18.9229 36 18.4767 36 17.5858V13C36 12.4477 35.5523 12 35 12Z"/><path fill="#fff" d="M12 13V17.5858C12 18.4767 13.0771 18.9229 13.7071 18.2929L18.2929 13.7071C18.9229 13.0771 18.4767 12 17.5858 12H13C12.4477 12 12 12.4477 12 13Z"/><path fill="#fff" d="M13 36H17.5858C18.4767 36 18.9229 34.9229 18.2929 34.2929L13.7071 29.7071C13.0771 29.0771 12 29.5233 12 30.4142V35C12 35.5523 12.4477 36 13 36Z"/><path fill="#fff" d="M36 35V30.4142C36 29.5233 34.9229 29.0771 34.2929 29.7071L29.7071 34.2929C29.0771 34.9229 29.5233 36 30.4142 36H35C35.5523 36 36 35.5523 36 35Z"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><rect width="36" height="36" x="6" y="6" fill="#2F88FF" stroke="#000" stroke-width="4" rx="3"/><path fill="#fff" d="M35 12H30.4142C29.5233 12 29.0771 13.0771 29.7071 13.7071L34.2929 18.2929C34.9229 18.9229 36 18.4767 36 17.5858V13C36 12.4477 35.5523 12 35 12Z"/><path fill="#fff" d="M12 13V17.5858C12 18.4767 13.0771 18.9229 13.7071 18.2929L18.2929 13.7071C18.9229 13.0771 18.4767 12 17.5858 12H13C12.4477 12 12 12.4477 12 13Z"/><path fill="#fff" d="M13 36H17.5858C18.4767 36 18.9229 34.9229 18.2929 34.2929L13.7071 29.7071C13.0771 29.0771 12 29.5233 12 30.4142V35C12 35.5523 12.4477 36 13 36Z"/><path fill="#fff" d="M36 35V30.4142C36 29.5233 34.9229 29.0771 34.2929 29.7071L29.7071 34.2929C29.0771 34.9229 29.5233 36 30.4142 36H35C35.5523 36 36 35.5523 36 35Z"/></g></svg> </template>
CSS
.icon-extend {
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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Crect%20width%3D%2236%22%20height%3D%2236%22%20x%3D%226%22%20y%3D%226%22%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-width%3D%224%22%20rx%3D%223%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M35%2012H30.4142C29.5233%2012%2029.0771%2013.0771%2029.7071%2013.7071L34.2929%2018.2929C34.9229%2018.9229%2036%2018.4767%2036%2017.5858V13C36%2012.4477%2035.5523%2012%2035%2012Z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12%2013V17.5858C12%2018.4767%2013.0771%2018.9229%2013.7071%2018.2929L18.2929%2013.7071C18.9229%2013.0771%2018.4767%2012%2017.5858%2012H13C12.4477%2012%2012%2012.4477%2012%2013Z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M13%2036H17.5858C18.4767%2036%2018.9229%2034.9229%2018.2929%2034.2929L13.7071%2029.7071C13.0771%2029.0771%2012%2029.5233%2012%2030.4142V35C12%2035.5523%2012.4477%2036%2013%2036Z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M36%2035V30.4142C36%2029.5233%2034.9229%2029.0771%2034.2929%2029.7071L29.7071%2034.2929C29.0771%2034.9229%2029.5233%2036%2030.4142%2036H35C35.5523%2036%2036%2035.5523%2036%2035Z%22%2F%3E%3C%2Fg%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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Crect%20width%3D%2236%22%20height%3D%2236%22%20x%3D%226%22%20y%3D%226%22%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-width%3D%224%22%20rx%3D%223%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M35%2012H30.4142C29.5233%2012%2029.0771%2013.0771%2029.7071%2013.7071L34.2929%2018.2929C34.9229%2018.9229%2036%2018.4767%2036%2017.5858V13C36%2012.4477%2035.5523%2012%2035%2012Z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12%2013V17.5858C12%2018.4767%2013.0771%2018.9229%2013.7071%2018.2929L18.2929%2013.7071C18.9229%2013.0771%2018.4767%2012%2017.5858%2012H13C12.4477%2012%2012%2012.4477%2012%2013Z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M13%2036H17.5858C18.4767%2036%2018.9229%2034.9229%2018.2929%2034.2929L13.7071%2029.7071C13.0771%2029.0771%2012%2029.5233%2012%2030.4142V35C12%2035.5523%2012.4477%2036%2013%2036Z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M36%2035V30.4142C36%2029.5233%2034.9229%2029.0771%2034.2929%2029.7071L29.7071%2034.2929C29.0771%2034.9229%2029.5233%2036%2030.4142%2036H35C35.5523%2036%2036%2035.5523%2036%2035Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park/extend.svg?color=%231a73e8&size=48
