square arrow up on square icon
square-arrow-up-on-square from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- square-arrow-up-on-square
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
1 other variant in Framework7 Icons
Related icons in Framework7 Icons
square-arrow-downsquare-arrow-down-on-squaresquare-arrow-leftsquare-arrow-rightsquare-arrow-upsquare-favoritessquare-favorites-altsquare-fill-line-vertical-squaresquare-fill-on-circle-fillsquare-fill-on-square-fillsquare-grid-2x2square-grid-3x2square-grid-4x3-fillsquare-lefthalf-fillsquare-line-vertical-squaresquare-listsquare-on-circlesquare-on-squaresquare-pencilsquare-righthalf-fillsquare-split-1x2square-split-2x1square-split-2x2square-stack
Use the square arrow up on square icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M22.31 30.258c.883 0 1.622-.739 1.622-1.601V7.575l-.123-3.06l1.396 1.458l3.1 3.305c.287.329.718.493 1.108.493c.862 0 1.498-.616 1.498-1.437c0-.451-.164-.78-.472-1.088L23.501.554C23.09.144 22.72 0 22.31 0c-.432 0-.78.143-1.192.554L14.18 7.246c-.308.308-.493.636-.493 1.088c0 .821.616 1.437 1.478 1.437a1.5 1.5 0 0 0 1.13-.493l3.12-3.305l1.396-1.478l-.144 3.08v21.082c0 .862.76 1.601 1.642 1.601M10.527 46.331h5.44v3.305c0 4.23 2.155 6.364 6.425 6.364h21.945c4.29 0 6.425-2.114 6.425-6.364V28.041c0-4.229-2.135-6.364-6.425-6.364h-3.819v-1.95c0-4.229-2.135-6.363-6.445-6.363h-5.707v3.305h5.666c2.011 0 3.181 1.087 3.181 3.222v19.913c0 2.134-1.17 3.222-3.181 3.222H10.589c-2.053 0-3.203-1.088-3.203-3.223V19.892c0-2.134 1.15-3.222 3.203-3.222h5.665v-3.306h-5.727c-4.27 0-6.446 2.115-6.446 6.364v20.24c0 4.25 2.176 6.364 6.446 6.364m11.927 6.364c-2.032 0-3.182-1.088-3.182-3.223v-3.14h14.8c4.311 0 6.446-2.136 6.446-6.364V24.982h3.757c2.053 0 3.182 1.109 3.182 3.244v21.246c0 2.135-1.13 3.223-3.182 3.223Z"/></svg>
React
import type { SVGProps } from "react";
export function F7SquareArrowUpOnSquare(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="M22.31 30.258c.883 0 1.622-.739 1.622-1.601V7.575l-.123-3.06l1.396 1.458l3.1 3.305c.287.329.718.493 1.108.493c.862 0 1.498-.616 1.498-1.437c0-.451-.164-.78-.472-1.088L23.501.554C23.09.144 22.72 0 22.31 0c-.432 0-.78.143-1.192.554L14.18 7.246c-.308.308-.493.636-.493 1.088c0 .821.616 1.437 1.478 1.437a1.5 1.5 0 0 0 1.13-.493l3.12-3.305l1.396-1.478l-.144 3.08v21.082c0 .862.76 1.601 1.642 1.601M10.527 46.331h5.44v3.305c0 4.23 2.155 6.364 6.425 6.364h21.945c4.29 0 6.425-2.114 6.425-6.364V28.041c0-4.229-2.135-6.364-6.425-6.364h-3.819v-1.95c0-4.229-2.135-6.363-6.445-6.363h-5.707v3.305h5.666c2.011 0 3.181 1.087 3.181 3.222v19.913c0 2.134-1.17 3.222-3.181 3.222H10.589c-2.053 0-3.203-1.088-3.203-3.223V19.892c0-2.134 1.15-3.222 3.203-3.222h5.665v-3.306h-5.727c-4.27 0-6.446 2.115-6.446 6.364v20.24c0 4.25 2.176 6.364 6.446 6.364m11.927 6.364c-2.032 0-3.182-1.088-3.182-3.223v-3.14h14.8c4.311 0 6.446-2.136 6.446-6.364V24.982h3.757c2.053 0 3.182 1.109 3.182 3.244v21.246c0 2.135-1.13 3.223-3.182 3.223Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M22.31 30.258c.883 0 1.622-.739 1.622-1.601V7.575l-.123-3.06l1.396 1.458l3.1 3.305c.287.329.718.493 1.108.493c.862 0 1.498-.616 1.498-1.437c0-.451-.164-.78-.472-1.088L23.501.554C23.09.144 22.72 0 22.31 0c-.432 0-.78.143-1.192.554L14.18 7.246c-.308.308-.493.636-.493 1.088c0 .821.616 1.437 1.478 1.437a1.5 1.5 0 0 0 1.13-.493l3.12-3.305l1.396-1.478l-.144 3.08v21.082c0 .862.76 1.601 1.642 1.601M10.527 46.331h5.44v3.305c0 4.23 2.155 6.364 6.425 6.364h21.945c4.29 0 6.425-2.114 6.425-6.364V28.041c0-4.229-2.135-6.364-6.425-6.364h-3.819v-1.95c0-4.229-2.135-6.363-6.445-6.363h-5.707v3.305h5.666c2.011 0 3.181 1.087 3.181 3.222v19.913c0 2.134-1.17 3.222-3.181 3.222H10.589c-2.053 0-3.203-1.088-3.203-3.223V19.892c0-2.134 1.15-3.222 3.203-3.222h5.665v-3.306h-5.727c-4.27 0-6.446 2.115-6.446 6.364v20.24c0 4.25 2.176 6.364 6.446 6.364m11.927 6.364c-2.032 0-3.182-1.088-3.182-3.223v-3.14h14.8c4.311 0 6.446-2.136 6.446-6.364V24.982h3.757c2.053 0 3.182 1.109 3.182 3.244v21.246c0 2.135-1.13 3.223-3.182 3.223Z"/></svg> </template>
CSS
.icon-square-arrow-up-on-square {
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%22M22.31%2030.258c.883%200%201.622-.739%201.622-1.601V7.575l-.123-3.06l1.396%201.458l3.1%203.305c.287.329.718.493%201.108.493c.862%200%201.498-.616%201.498-1.437c0-.451-.164-.78-.472-1.088L23.501.554C23.09.144%2022.72%200%2022.31%200c-.432%200-.78.143-1.192.554L14.18%207.246c-.308.308-.493.636-.493%201.088c0%20.821.616%201.437%201.478%201.437a1.5%201.5%200%200%200%201.13-.493l3.12-3.305l1.396-1.478l-.144%203.08v21.082c0%20.862.76%201.601%201.642%201.601M10.527%2046.331h5.44v3.305c0%204.23%202.155%206.364%206.425%206.364h21.945c4.29%200%206.425-2.114%206.425-6.364V28.041c0-4.229-2.135-6.364-6.425-6.364h-3.819v-1.95c0-4.229-2.135-6.363-6.445-6.363h-5.707v3.305h5.666c2.011%200%203.181%201.087%203.181%203.222v19.913c0%202.134-1.17%203.222-3.181%203.222H10.589c-2.053%200-3.203-1.088-3.203-3.223V19.892c0-2.134%201.15-3.222%203.203-3.222h5.665v-3.306h-5.727c-4.27%200-6.446%202.115-6.446%206.364v20.24c0%204.25%202.176%206.364%206.446%206.364m11.927%206.364c-2.032%200-3.182-1.088-3.182-3.223v-3.14h14.8c4.311%200%206.446-2.136%206.446-6.364V24.982h3.757c2.053%200%203.182%201.109%203.182%203.244v21.246c0%202.135-1.13%203.223-3.182%203.223Z%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%22M22.31%2030.258c.883%200%201.622-.739%201.622-1.601V7.575l-.123-3.06l1.396%201.458l3.1%203.305c.287.329.718.493%201.108.493c.862%200%201.498-.616%201.498-1.437c0-.451-.164-.78-.472-1.088L23.501.554C23.09.144%2022.72%200%2022.31%200c-.432%200-.78.143-1.192.554L14.18%207.246c-.308.308-.493.636-.493%201.088c0%20.821.616%201.437%201.478%201.437a1.5%201.5%200%200%200%201.13-.493l3.12-3.305l1.396-1.478l-.144%203.08v21.082c0%20.862.76%201.601%201.642%201.601M10.527%2046.331h5.44v3.305c0%204.23%202.155%206.364%206.425%206.364h21.945c4.29%200%206.425-2.114%206.425-6.364V28.041c0-4.229-2.135-6.364-6.425-6.364h-3.819v-1.95c0-4.229-2.135-6.363-6.445-6.363h-5.707v3.305h5.666c2.011%200%203.181%201.087%203.181%203.222v19.913c0%202.134-1.17%203.222-3.181%203.222H10.589c-2.053%200-3.203-1.088-3.203-3.223V19.892c0-2.134%201.15-3.222%203.203-3.222h5.665v-3.306h-5.727c-4.27%200-6.446%202.115-6.446%206.364v20.24c0%204.25%202.176%206.364%206.446%206.364m11.927%206.364c-2.032%200-3.182-1.088-3.182-3.223v-3.14h14.8c4.311%200%206.446-2.136%206.446-6.364V24.982h3.757c2.053%200%203.182%201.109%203.182%203.244v21.246c0%202.135-1.13%203.223-3.182%203.223Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/square-arrow-up-on-square.svg?color=%231a73e8&size=48
