rectangle arrow up right arrow down left icon
rectangle-arrow-up-right-arrow-down-left from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- rectangle-arrow-up-right-arrow-down-left
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
Related icons in Framework7 Icons
rectangle-3-offgridrectangle-arrow-up-right-arrow-down-left-slashrectangle-badge-checkmarkrectangle-badge-xmarkrectangle-compress-verticalrectangle-dockrectangle-expand-verticalrectangle-fill-badge-checkmarkrectangle-fill-badge-xmarkrectangle-fill-on-rectangle-angled-fillrectangle-fill-on-rectangle-fillrectangle-grid-1x2rectangle-grid-2x2rectangle-grid-3x2rectangle-on-rectanglerectangle-on-rectangle-angledrectangle-papercliprectangle-split-3x1rectangle-split-3x3rectangle-stackrectangle-stack-badge-minusrectangle-stack-badge-person-croprectangle-stack-badge-plusrectangle-stack-fill-badge-minus
Use the rectangle arrow up right arrow down left icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M12.121 26.266h3.54V9.18c-.024-1.899 1.077-3.047 3.163-3.047h18.328c2.086 0 3.211 1.148 3.211 3.047v1.828h3.516v-2.32c0-3.516-2.438-5.977-6.258-5.977H18.355c-3.82 0-6.257 2.46-6.257 5.977Zm22.5-12.375c-.937 0-1.453.75-1.453 1.5s.516 1.523 1.523 1.523h3.657l2.812-.164l-2.695 2.531l-3.68 3.633c-.351.375-.492.773-.492 1.148c0 .938.844 1.782 1.781 1.782c.375 0 .774-.14 1.125-.492l3.633-3.657L43.34 19l-.14 2.766v3.75c0 1.03.773 1.547 1.546 1.547c.727 0 1.477-.493 1.477-1.477v-9.75c0-1.266-.703-1.945-1.922-1.945ZM11.723 42.109h9.656c.984 0 1.476-.773 1.476-1.523c0-.773-.492-1.523-1.546-1.523h-3.657l-2.789.164l2.696-2.532l3.656-3.633c.375-.351.515-.75.515-1.148c0-.937-.867-1.758-1.804-1.758c-.375 0-.75.117-1.102.469l-3.656 3.68l-2.508 2.672l.164-2.766v-3.75c0-1.031-.773-1.547-1.547-1.547c-.75 0-1.5.492-1.5 1.477v9.75c0 1.265.704 1.968 1.946 1.968m6.656 11.18h19.266c3.82 0 6.257-2.484 6.257-6V29.711h-3.515v17.086c0 1.922-1.125 3.07-3.211 3.07H18.848c-2.086 0-3.188-1.148-3.188-3.07v-1.828h-3.539v2.32c0 3.516 2.438 6 6.258 6"/></svg>
React
import type { SVGProps } from "react";
export function F7RectangleArrowUpRightArrowDownLeft(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M12.121 26.266h3.54V9.18c-.024-1.899 1.077-3.047 3.163-3.047h18.328c2.086 0 3.211 1.148 3.211 3.047v1.828h3.516v-2.32c0-3.516-2.438-5.977-6.258-5.977H18.355c-3.82 0-6.257 2.46-6.257 5.977Zm22.5-12.375c-.937 0-1.453.75-1.453 1.5s.516 1.523 1.523 1.523h3.657l2.812-.164l-2.695 2.531l-3.68 3.633c-.351.375-.492.773-.492 1.148c0 .938.844 1.782 1.781 1.782c.375 0 .774-.14 1.125-.492l3.633-3.657L43.34 19l-.14 2.766v3.75c0 1.03.773 1.547 1.546 1.547c.727 0 1.477-.493 1.477-1.477v-9.75c0-1.266-.703-1.945-1.922-1.945ZM11.723 42.109h9.656c.984 0 1.476-.773 1.476-1.523c0-.773-.492-1.523-1.546-1.523h-3.657l-2.789.164l2.696-2.532l3.656-3.633c.375-.351.515-.75.515-1.148c0-.937-.867-1.758-1.804-1.758c-.375 0-.75.117-1.102.469l-3.656 3.68l-2.508 2.672l.164-2.766v-3.75c0-1.031-.773-1.547-1.547-1.547c-.75 0-1.5.492-1.5 1.477v9.75c0 1.265.704 1.968 1.946 1.968m6.656 11.18h19.266c3.82 0 6.257-2.484 6.257-6V29.711h-3.515v17.086c0 1.922-1.125 3.07-3.211 3.07H18.848c-2.086 0-3.188-1.148-3.188-3.07v-1.828h-3.539v2.32c0 3.516 2.438 6 6.258 6"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M12.121 26.266h3.54V9.18c-.024-1.899 1.077-3.047 3.163-3.047h18.328c2.086 0 3.211 1.148 3.211 3.047v1.828h3.516v-2.32c0-3.516-2.438-5.977-6.258-5.977H18.355c-3.82 0-6.257 2.46-6.257 5.977Zm22.5-12.375c-.937 0-1.453.75-1.453 1.5s.516 1.523 1.523 1.523h3.657l2.812-.164l-2.695 2.531l-3.68 3.633c-.351.375-.492.773-.492 1.148c0 .938.844 1.782 1.781 1.782c.375 0 .774-.14 1.125-.492l3.633-3.657L43.34 19l-.14 2.766v3.75c0 1.03.773 1.547 1.546 1.547c.727 0 1.477-.493 1.477-1.477v-9.75c0-1.266-.703-1.945-1.922-1.945ZM11.723 42.109h9.656c.984 0 1.476-.773 1.476-1.523c0-.773-.492-1.523-1.546-1.523h-3.657l-2.789.164l2.696-2.532l3.656-3.633c.375-.351.515-.75.515-1.148c0-.937-.867-1.758-1.804-1.758c-.375 0-.75.117-1.102.469l-3.656 3.68l-2.508 2.672l.164-2.766v-3.75c0-1.031-.773-1.547-1.547-1.547c-.75 0-1.5.492-1.5 1.477v9.75c0 1.265.704 1.968 1.946 1.968m6.656 11.18h19.266c3.82 0 6.257-2.484 6.257-6V29.711h-3.515v17.086c0 1.922-1.125 3.07-3.211 3.07H18.848c-2.086 0-3.188-1.148-3.188-3.07v-1.828h-3.539v2.32c0 3.516 2.438 6 6.258 6"/></svg> </template>
CSS
.icon-rectangle-arrow-up-right-arrow-down-left {
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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.121%2026.266h3.54V9.18c-.024-1.899%201.077-3.047%203.163-3.047h18.328c2.086%200%203.211%201.148%203.211%203.047v1.828h3.516v-2.32c0-3.516-2.438-5.977-6.258-5.977H18.355c-3.82%200-6.257%202.46-6.257%205.977Zm22.5-12.375c-.937%200-1.453.75-1.453%201.5s.516%201.523%201.523%201.523h3.657l2.812-.164l-2.695%202.531l-3.68%203.633c-.351.375-.492.773-.492%201.148c0%20.938.844%201.782%201.781%201.782c.375%200%20.774-.14%201.125-.492l3.633-3.657L43.34%2019l-.14%202.766v3.75c0%201.03.773%201.547%201.546%201.547c.727%200%201.477-.493%201.477-1.477v-9.75c0-1.266-.703-1.945-1.922-1.945ZM11.723%2042.109h9.656c.984%200%201.476-.773%201.476-1.523c0-.773-.492-1.523-1.546-1.523h-3.657l-2.789.164l2.696-2.532l3.656-3.633c.375-.351.515-.75.515-1.148c0-.937-.867-1.758-1.804-1.758c-.375%200-.75.117-1.102.469l-3.656%203.68l-2.508%202.672l.164-2.766v-3.75c0-1.031-.773-1.547-1.547-1.547c-.75%200-1.5.492-1.5%201.477v9.75c0%201.265.704%201.968%201.946%201.968m6.656%2011.18h19.266c3.82%200%206.257-2.484%206.257-6V29.711h-3.515v17.086c0%201.922-1.125%203.07-3.211%203.07H18.848c-2.086%200-3.188-1.148-3.188-3.07v-1.828h-3.539v2.32c0%203.516%202.438%206%206.258%206%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.121%2026.266h3.54V9.18c-.024-1.899%201.077-3.047%203.163-3.047h18.328c2.086%200%203.211%201.148%203.211%203.047v1.828h3.516v-2.32c0-3.516-2.438-5.977-6.258-5.977H18.355c-3.82%200-6.257%202.46-6.257%205.977Zm22.5-12.375c-.937%200-1.453.75-1.453%201.5s.516%201.523%201.523%201.523h3.657l2.812-.164l-2.695%202.531l-3.68%203.633c-.351.375-.492.773-.492%201.148c0%20.938.844%201.782%201.781%201.782c.375%200%20.774-.14%201.125-.492l3.633-3.657L43.34%2019l-.14%202.766v3.75c0%201.03.773%201.547%201.546%201.547c.727%200%201.477-.493%201.477-1.477v-9.75c0-1.266-.703-1.945-1.922-1.945ZM11.723%2042.109h9.656c.984%200%201.476-.773%201.476-1.523c0-.773-.492-1.523-1.546-1.523h-3.657l-2.789.164l2.696-2.532l3.656-3.633c.375-.351.515-.75.515-1.148c0-.937-.867-1.758-1.804-1.758c-.375%200-.75.117-1.102.469l-3.656%203.68l-2.508%202.672l.164-2.766v-3.75c0-1.031-.773-1.547-1.547-1.547c-.75%200-1.5.492-1.5%201.477v9.75c0%201.265.704%201.968%201.946%201.968m6.656%2011.18h19.266c3.82%200%206.257-2.484%206.257-6V29.711h-3.515v17.086c0%201.922-1.125%203.07-3.211%203.07H18.848c-2.086%200-3.188-1.148-3.188-3.07v-1.828h-3.539v2.32c0%203.516%202.438%206%206.258%206%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/rectangle-arrow-up-right-arrow-down-left.svg?color=%231a73e8&size=48
