square arrow down on square icon
square-arrow-down-on-square from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- square-arrow-down-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-leftsquare-arrow-rightsquare-arrow-upsquare-arrow-up-on-squaresquare-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 down 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.353 32.193c.429 0 .815-.15 1.244-.58l7.25-6.991c.32-.322.492-.665.492-1.137c0-.88-.665-1.501-1.565-1.501c-.408 0-.858.171-1.158.515l-3.24 3.453l-1.458 1.522l.13-3.195V1.652C24.047.75 23.274 0 22.352 0c-.923 0-1.716.75-1.716 1.652v22.627l.15 3.195l-1.458-1.522l-3.26-3.453a1.58 1.58 0 0 0-1.18-.515c-.9 0-1.544.622-1.544 1.501c0 .472.193.815.515 1.137l7.249 6.992c.429.429.793.579 1.244.579m-12.31 14.091h6.048v3.067c0 4.44 2.23 6.649 6.713 6.649h22.563c4.461 0 6.713-2.23 6.713-6.649V27.003c0-4.419-2.252-6.65-6.713-6.65h-3.99v-2.852c0-4.418-2.23-6.648-6.734-6.648h-6.177v3.453H34.6c2.102 0 3.325 1.158 3.325 3.388v21.77c0 2.23-1.223 3.367-3.325 3.367H10.106c-2.145 0-3.346-1.137-3.346-3.367v-21.77c0-2.23 1.201-3.388 3.346-3.388h6.134v-3.453h-6.198c-4.461 0-6.735 2.23-6.735 6.648v22.134c0 4.44 2.274 6.65 6.735 6.65m12.826 6.263c-2.145 0-3.325-1.158-3.325-3.367v-2.896h15.1c4.503 0 6.734-2.23 6.734-6.649V23.807h3.925c2.123 0 3.324 1.137 3.324 3.367V49.18c0 2.209-1.2 3.367-3.324 3.367Z"/></svg>
React
import type { SVGProps } from "react";
export function F7SquareArrowDownOnSquare(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.353 32.193c.429 0 .815-.15 1.244-.58l7.25-6.991c.32-.322.492-.665.492-1.137c0-.88-.665-1.501-1.565-1.501c-.408 0-.858.171-1.158.515l-3.24 3.453l-1.458 1.522l.13-3.195V1.652C24.047.75 23.274 0 22.352 0c-.923 0-1.716.75-1.716 1.652v22.627l.15 3.195l-1.458-1.522l-3.26-3.453a1.58 1.58 0 0 0-1.18-.515c-.9 0-1.544.622-1.544 1.501c0 .472.193.815.515 1.137l7.249 6.992c.429.429.793.579 1.244.579m-12.31 14.091h6.048v3.067c0 4.44 2.23 6.649 6.713 6.649h22.563c4.461 0 6.713-2.23 6.713-6.649V27.003c0-4.419-2.252-6.65-6.713-6.65h-3.99v-2.852c0-4.418-2.23-6.648-6.734-6.648h-6.177v3.453H34.6c2.102 0 3.325 1.158 3.325 3.388v21.77c0 2.23-1.223 3.367-3.325 3.367H10.106c-2.145 0-3.346-1.137-3.346-3.367v-21.77c0-2.23 1.201-3.388 3.346-3.388h6.134v-3.453h-6.198c-4.461 0-6.735 2.23-6.735 6.648v22.134c0 4.44 2.274 6.65 6.735 6.65m12.826 6.263c-2.145 0-3.325-1.158-3.325-3.367v-2.896h15.1c4.503 0 6.734-2.23 6.734-6.649V23.807h3.925c2.123 0 3.324 1.137 3.324 3.367V49.18c0 2.209-1.2 3.367-3.324 3.367Z"/></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.353 32.193c.429 0 .815-.15 1.244-.58l7.25-6.991c.32-.322.492-.665.492-1.137c0-.88-.665-1.501-1.565-1.501c-.408 0-.858.171-1.158.515l-3.24 3.453l-1.458 1.522l.13-3.195V1.652C24.047.75 23.274 0 22.352 0c-.923 0-1.716.75-1.716 1.652v22.627l.15 3.195l-1.458-1.522l-3.26-3.453a1.58 1.58 0 0 0-1.18-.515c-.9 0-1.544.622-1.544 1.501c0 .472.193.815.515 1.137l7.249 6.992c.429.429.793.579 1.244.579m-12.31 14.091h6.048v3.067c0 4.44 2.23 6.649 6.713 6.649h22.563c4.461 0 6.713-2.23 6.713-6.649V27.003c0-4.419-2.252-6.65-6.713-6.65h-3.99v-2.852c0-4.418-2.23-6.648-6.734-6.648h-6.177v3.453H34.6c2.102 0 3.325 1.158 3.325 3.388v21.77c0 2.23-1.223 3.367-3.325 3.367H10.106c-2.145 0-3.346-1.137-3.346-3.367v-21.77c0-2.23 1.201-3.388 3.346-3.388h6.134v-3.453h-6.198c-4.461 0-6.735 2.23-6.735 6.648v22.134c0 4.44 2.274 6.65 6.735 6.65m12.826 6.263c-2.145 0-3.325-1.158-3.325-3.367v-2.896h15.1c4.503 0 6.734-2.23 6.734-6.649V23.807h3.925c2.123 0 3.324 1.137 3.324 3.367V49.18c0 2.209-1.2 3.367-3.324 3.367Z"/></svg> </template>
CSS
.icon-square-arrow-down-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.353%2032.193c.429%200%20.815-.15%201.244-.58l7.25-6.991c.32-.322.492-.665.492-1.137c0-.88-.665-1.501-1.565-1.501c-.408%200-.858.171-1.158.515l-3.24%203.453l-1.458%201.522l.13-3.195V1.652C24.047.75%2023.274%200%2022.352%200c-.923%200-1.716.75-1.716%201.652v22.627l.15%203.195l-1.458-1.522l-3.26-3.453a1.58%201.58%200%200%200-1.18-.515c-.9%200-1.544.622-1.544%201.501c0%20.472.193.815.515%201.137l7.249%206.992c.429.429.793.579%201.244.579m-12.31%2014.091h6.048v3.067c0%204.44%202.23%206.649%206.713%206.649h22.563c4.461%200%206.713-2.23%206.713-6.649V27.003c0-4.419-2.252-6.65-6.713-6.65h-3.99v-2.852c0-4.418-2.23-6.648-6.734-6.648h-6.177v3.453H34.6c2.102%200%203.325%201.158%203.325%203.388v21.77c0%202.23-1.223%203.367-3.325%203.367H10.106c-2.145%200-3.346-1.137-3.346-3.367v-21.77c0-2.23%201.201-3.388%203.346-3.388h6.134v-3.453h-6.198c-4.461%200-6.735%202.23-6.735%206.648v22.134c0%204.44%202.274%206.65%206.735%206.65m12.826%206.263c-2.145%200-3.325-1.158-3.325-3.367v-2.896h15.1c4.503%200%206.734-2.23%206.734-6.649V23.807h3.925c2.123%200%203.324%201.137%203.324%203.367V49.18c0%202.209-1.2%203.367-3.324%203.367Z%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.353%2032.193c.429%200%20.815-.15%201.244-.58l7.25-6.991c.32-.322.492-.665.492-1.137c0-.88-.665-1.501-1.565-1.501c-.408%200-.858.171-1.158.515l-3.24%203.453l-1.458%201.522l.13-3.195V1.652C24.047.75%2023.274%200%2022.352%200c-.923%200-1.716.75-1.716%201.652v22.627l.15%203.195l-1.458-1.522l-3.26-3.453a1.58%201.58%200%200%200-1.18-.515c-.9%200-1.544.622-1.544%201.501c0%20.472.193.815.515%201.137l7.249%206.992c.429.429.793.579%201.244.579m-12.31%2014.091h6.048v3.067c0%204.44%202.23%206.649%206.713%206.649h22.563c4.461%200%206.713-2.23%206.713-6.649V27.003c0-4.419-2.252-6.65-6.713-6.65h-3.99v-2.852c0-4.418-2.23-6.648-6.734-6.648h-6.177v3.453H34.6c2.102%200%203.325%201.158%203.325%203.388v21.77c0%202.23-1.223%203.367-3.325%203.367H10.106c-2.145%200-3.346-1.137-3.346-3.367v-21.77c0-2.23%201.201-3.388%203.346-3.388h6.134v-3.453h-6.198c-4.461%200-6.735%202.23-6.735%206.648v22.134c0%204.44%202.274%206.65%206.735%206.65m12.826%206.263c-2.145%200-3.325-1.158-3.325-3.367v-2.896h15.1c4.503%200%206.734-2.23%206.734-6.649V23.807h3.925c2.123%200%203.324%201.137%203.324%203.367V49.18c0%202.209-1.2%203.367-3.324%203.367Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/square-arrow-down-on-square.svg?color=%231a73e8&size=48
