square arrow up on square icon
square-arrow-up-on-square-fill from Framework7 Icons by Vladimir Kharlampidi · Fill · MIT Free for personal and commercial use.
- Name
- square-arrow-up-on-square-fill
- Set
- Framework7 Icons
- Style
- Fill
- 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 15.58c.883 0 1.622-.718 1.622-1.58V7.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.08V14c0 .862.76 1.58 1.642 1.58M10.527 46.332h23.546c4.31 0 6.445-2.135 6.445-6.363V20.343c0-4.229-2.135-6.364-6.445-6.364h-9.669v14.678c0 1.129-.965 2.073-2.094 2.073c-1.15 0-2.094-.944-2.094-2.073V13.979h-9.689c-4.27 0-6.446 2.115-6.446 6.364v19.625c0 4.249 2.176 6.363 6.446 6.363M22.392 56h21.945c4.29 0 6.425-2.114 6.425-6.364V28.041c0-4.229-2.135-6.364-6.425-6.364H43.31v18.599c0 5.83-3.059 8.868-8.93 8.868H15.968v.492c0 4.23 2.155 6.364 6.425 6.364"/></svg>
React
import type { SVGProps } from "react";
export function F7SquareArrowUpOnSquareFill(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 15.58c.883 0 1.622-.718 1.622-1.58V7.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.08V14c0 .862.76 1.58 1.642 1.58M10.527 46.332h23.546c4.31 0 6.445-2.135 6.445-6.363V20.343c0-4.229-2.135-6.364-6.445-6.364h-9.669v14.678c0 1.129-.965 2.073-2.094 2.073c-1.15 0-2.094-.944-2.094-2.073V13.979h-9.689c-4.27 0-6.446 2.115-6.446 6.364v19.625c0 4.249 2.176 6.363 6.446 6.363M22.392 56h21.945c4.29 0 6.425-2.114 6.425-6.364V28.041c0-4.229-2.135-6.364-6.425-6.364H43.31v18.599c0 5.83-3.059 8.868-8.93 8.868H15.968v.492c0 4.23 2.155 6.364 6.425 6.364"/></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 15.58c.883 0 1.622-.718 1.622-1.58V7.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.08V14c0 .862.76 1.58 1.642 1.58M10.527 46.332h23.546c4.31 0 6.445-2.135 6.445-6.363V20.343c0-4.229-2.135-6.364-6.445-6.364h-9.669v14.678c0 1.129-.965 2.073-2.094 2.073c-1.15 0-2.094-.944-2.094-2.073V13.979h-9.689c-4.27 0-6.446 2.115-6.446 6.364v19.625c0 4.249 2.176 6.363 6.446 6.363M22.392 56h21.945c4.29 0 6.425-2.114 6.425-6.364V28.041c0-4.229-2.135-6.364-6.425-6.364H43.31v18.599c0 5.83-3.059 8.868-8.93 8.868H15.968v.492c0 4.23 2.155 6.364 6.425 6.364"/></svg> </template>
CSS
.icon-square-arrow-up-on-square-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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M22.31%2015.58c.883%200%201.622-.718%201.622-1.58V7.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.08V14c0%20.862.76%201.58%201.642%201.58M10.527%2046.332h23.546c4.31%200%206.445-2.135%206.445-6.363V20.343c0-4.229-2.135-6.364-6.445-6.364h-9.669v14.678c0%201.129-.965%202.073-2.094%202.073c-1.15%200-2.094-.944-2.094-2.073V13.979h-9.689c-4.27%200-6.446%202.115-6.446%206.364v19.625c0%204.249%202.176%206.363%206.446%206.363M22.392%2056h21.945c4.29%200%206.425-2.114%206.425-6.364V28.041c0-4.229-2.135-6.364-6.425-6.364H43.31v18.599c0%205.83-3.059%208.868-8.93%208.868H15.968v.492c0%204.23%202.155%206.364%206.425%206.364%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%2015.58c.883%200%201.622-.718%201.622-1.58V7.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.08V14c0%20.862.76%201.58%201.642%201.58M10.527%2046.332h23.546c4.31%200%206.445-2.135%206.445-6.363V20.343c0-4.229-2.135-6.364-6.445-6.364h-9.669v14.678c0%201.129-.965%202.073-2.094%202.073c-1.15%200-2.094-.944-2.094-2.073V13.979h-9.689c-4.27%200-6.446%202.115-6.446%206.364v19.625c0%204.249%202.176%206.363%206.446%206.363M22.392%2056h21.945c4.29%200%206.425-2.114%206.425-6.364V28.041c0-4.229-2.135-6.364-6.425-6.364H43.31v18.599c0%205.83-3.059%208.868-8.93%208.868H15.968v.492c0%204.23%202.155%206.364%206.425%206.364%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-fill.svg?color=%231a73e8&size=48
