arrow up down icon
arrow-up-down from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- arrow-up-down
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
The same icon in other sets
Related icons in Framework7 Icons
arrow-2-circlepatharrow-2-circlepath-circlearrow-2-squarepatharrow-3-trianglepatharrow-brancharrow-clockwisearrow-clockwise-circlearrow-counterclockwisearrow-counterclockwise-circlearrow-downarrow-down-circlearrow-down-docarrow-down-leftarrow-down-left-circlearrow-down-left-squarearrow-down-rightarrow-down-right-arrow-up-leftarrow-down-right-circlearrow-down-right-squarearrow-down-squarearrow-down-to-linearrow-down-to-line-altarrow-leftarrow-left-circle
Use the arrow up down icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28 51.074c.586 0 1.125-.21 1.57-.68l13.407-13.663a2.27 2.27 0 0 0 .632-1.524c0-1.242-.843-2.062-2.062-2.062a1.98 1.98 0 0 0-1.43.562l-6.469 6.633l-3.773 4.383l.234-5.438v-22.57l-.234-5.438l3.773 4.383l6.47 6.633c.374.352.82.563 1.429.563c1.219 0 2.062-.82 2.062-2.063c0-.516-.234-1.125-.632-1.523L29.57 5.606a2.1 2.1 0 0 0-1.57-.68c-.562 0-1.102.21-1.57.68L13.047 19.27c-.399.398-.656 1.007-.656 1.523c0 1.242.867 2.063 2.062 2.063c.61 0 1.078-.212 1.453-.563l6.446-6.633l3.796-4.383l-.234 5.438v22.57l.234 5.438l-3.796-4.383l-6.446-6.633a2.04 2.04 0 0 0-1.453-.562c-1.195 0-2.062.82-2.062 2.062c0 .516.257 1.125.656 1.523L26.43 50.396c.468.468 1.008.68 1.57.68"/></svg>
React
import type { SVGProps } from "react";
export function F7ArrowUpDown(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="M28 51.074c.586 0 1.125-.21 1.57-.68l13.407-13.663a2.27 2.27 0 0 0 .632-1.524c0-1.242-.843-2.062-2.062-2.062a1.98 1.98 0 0 0-1.43.562l-6.469 6.633l-3.773 4.383l.234-5.438v-22.57l-.234-5.438l3.773 4.383l6.47 6.633c.374.352.82.563 1.429.563c1.219 0 2.062-.82 2.062-2.063c0-.516-.234-1.125-.632-1.523L29.57 5.606a2.1 2.1 0 0 0-1.57-.68c-.562 0-1.102.21-1.57.68L13.047 19.27c-.399.398-.656 1.007-.656 1.523c0 1.242.867 2.063 2.062 2.063c.61 0 1.078-.212 1.453-.563l6.446-6.633l3.796-4.383l-.234 5.438v22.57l.234 5.438l-3.796-4.383l-6.446-6.633a2.04 2.04 0 0 0-1.453-.562c-1.195 0-2.062.82-2.062 2.062c0 .516.257 1.125.656 1.523L26.43 50.396c.468.468 1.008.68 1.57.68"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M28 51.074c.586 0 1.125-.21 1.57-.68l13.407-13.663a2.27 2.27 0 0 0 .632-1.524c0-1.242-.843-2.062-2.062-2.062a1.98 1.98 0 0 0-1.43.562l-6.469 6.633l-3.773 4.383l.234-5.438v-22.57l-.234-5.438l3.773 4.383l6.47 6.633c.374.352.82.563 1.429.563c1.219 0 2.062-.82 2.062-2.063c0-.516-.234-1.125-.632-1.523L29.57 5.606a2.1 2.1 0 0 0-1.57-.68c-.562 0-1.102.21-1.57.68L13.047 19.27c-.399.398-.656 1.007-.656 1.523c0 1.242.867 2.063 2.062 2.063c.61 0 1.078-.212 1.453-.563l6.446-6.633l3.796-4.383l-.234 5.438v22.57l.234 5.438l-3.796-4.383l-6.446-6.633a2.04 2.04 0 0 0-1.453-.562c-1.195 0-2.062.82-2.062 2.062c0 .516.257 1.125.656 1.523L26.43 50.396c.468.468 1.008.68 1.57.68"/></svg> </template>
CSS
.icon-arrow-up-down {
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%22M28%2051.074c.586%200%201.125-.21%201.57-.68l13.407-13.663a2.27%202.27%200%200%200%20.632-1.524c0-1.242-.843-2.062-2.062-2.062a1.98%201.98%200%200%200-1.43.562l-6.469%206.633l-3.773%204.383l.234-5.438v-22.57l-.234-5.438l3.773%204.383l6.47%206.633c.374.352.82.563%201.429.563c1.219%200%202.062-.82%202.062-2.063c0-.516-.234-1.125-.632-1.523L29.57%205.606a2.1%202.1%200%200%200-1.57-.68c-.562%200-1.102.21-1.57.68L13.047%2019.27c-.399.398-.656%201.007-.656%201.523c0%201.242.867%202.063%202.062%202.063c.61%200%201.078-.212%201.453-.563l6.446-6.633l3.796-4.383l-.234%205.438v22.57l.234%205.438l-3.796-4.383l-6.446-6.633a2.04%202.04%200%200%200-1.453-.562c-1.195%200-2.062.82-2.062%202.062c0%20.516.257%201.125.656%201.523L26.43%2050.396c.468.468%201.008.68%201.57.68%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%22M28%2051.074c.586%200%201.125-.21%201.57-.68l13.407-13.663a2.27%202.27%200%200%200%20.632-1.524c0-1.242-.843-2.062-2.062-2.062a1.98%201.98%200%200%200-1.43.562l-6.469%206.633l-3.773%204.383l.234-5.438v-22.57l-.234-5.438l3.773%204.383l6.47%206.633c.374.352.82.563%201.429.563c1.219%200%202.062-.82%202.062-2.063c0-.516-.234-1.125-.632-1.523L29.57%205.606a2.1%202.1%200%200%200-1.57-.68c-.562%200-1.102.21-1.57.68L13.047%2019.27c-.399.398-.656%201.007-.656%201.523c0%201.242.867%202.063%202.062%202.063c.61%200%201.078-.212%201.453-.563l6.446-6.633l3.796-4.383l-.234%205.438v22.57l.234%205.438l-3.796-4.383l-6.446-6.633a2.04%202.04%200%200%200-1.453-.562c-1.195%200-2.062.82-2.062%202.062c0%20.516.257%201.125.656%201.523L26.43%2050.396c.468.468%201.008.68%201.57.68%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/arrow-up-down.svg?color=%231a73e8&size=48
