arrow left right icon

arrow-left-right from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.

Name
arrow-left-right
Set
Framework7 Icons
Style
Outline
Viewbox
56×56
License
MIT

The same icon in other sets

arrow-left-rightBootstrap Iconsarrow-left-rightHuge Iconsarrow-left-rightLucidearrow-left-rightMaterial Design Iconsarrow-left-rightMyna UI Iconsarrow-left-right-fillRemix Iconarrow-left-rightTabler Icons

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 left right icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M4.914 28c0 .586.234 1.125.703 1.57l13.664 13.407c.399.398 1.008.632 1.5.632c1.242 0 2.086-.843 2.086-2.062c0-.61-.21-1.055-.586-1.43l-6.61-6.469l-4.382-3.773l5.437.234h22.57l5.438-.234l-4.382 3.773l-6.633 6.47c-.375.374-.563.82-.563 1.429c0 1.219.82 2.062 2.063 2.062c.515 0 1.125-.234 1.523-.632L50.406 29.57c.469-.445.68-.984.68-1.57c0-.562-.211-1.102-.68-1.57L36.742 13.047c-.398-.399-1.008-.656-1.523-.656c-1.243 0-2.063.867-2.063 2.086c0 .585.188 1.054.563 1.43l6.633 6.445l4.382 3.796l-5.437-.234h-22.57l-5.438.234l4.383-3.796l6.633-6.446a2.02 2.02 0 0 0 .562-1.43c0-1.218-.844-2.085-2.086-2.085c-.492 0-1.101.257-1.5.656L5.617 26.43c-.469.468-.703 1.008-.703 1.57"/></svg>

React

import type { SVGProps } from "react";

export function F7ArrowLeftRight(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="M4.914 28c0 .586.234 1.125.703 1.57l13.664 13.407c.399.398 1.008.632 1.5.632c1.242 0 2.086-.843 2.086-2.062c0-.61-.21-1.055-.586-1.43l-6.61-6.469l-4.382-3.773l5.437.234h22.57l5.438-.234l-4.382 3.773l-6.633 6.47c-.375.374-.563.82-.563 1.429c0 1.219.82 2.062 2.063 2.062c.515 0 1.125-.234 1.523-.632L50.406 29.57c.469-.445.68-.984.68-1.57c0-.562-.211-1.102-.68-1.57L36.742 13.047c-.398-.399-1.008-.656-1.523-.656c-1.243 0-2.063.867-2.063 2.086c0 .585.188 1.054.563 1.43l6.633 6.445l4.382 3.796l-5.437-.234h-22.57l-5.438.234l4.383-3.796l6.633-6.446a2.02 2.02 0 0 0 .562-1.43c0-1.218-.844-2.085-2.086-2.085c-.492 0-1.101.257-1.5.656L5.617 26.43c-.469.468-.703 1.008-.703 1.57"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M4.914 28c0 .586.234 1.125.703 1.57l13.664 13.407c.399.398 1.008.632 1.5.632c1.242 0 2.086-.843 2.086-2.062c0-.61-.21-1.055-.586-1.43l-6.61-6.469l-4.382-3.773l5.437.234h22.57l5.438-.234l-4.382 3.773l-6.633 6.47c-.375.374-.563.82-.563 1.429c0 1.219.82 2.062 2.063 2.062c.515 0 1.125-.234 1.523-.632L50.406 29.57c.469-.445.68-.984.68-1.57c0-.562-.211-1.102-.68-1.57L36.742 13.047c-.398-.399-1.008-.656-1.523-.656c-1.243 0-2.063.867-2.063 2.086c0 .585.188 1.054.563 1.43l6.633 6.445l4.382 3.796l-5.437-.234h-22.57l-5.438.234l4.383-3.796l6.633-6.446a2.02 2.02 0 0 0 .562-1.43c0-1.218-.844-2.085-2.086-2.085c-.492 0-1.101.257-1.5.656L5.617 26.43c-.469.468-.703 1.008-.703 1.57"/></svg>
</template>

CSS

.icon-arrow-left-right {
  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%22M4.914%2028c0%20.586.234%201.125.703%201.57l13.664%2013.407c.399.398%201.008.632%201.5.632c1.242%200%202.086-.843%202.086-2.062c0-.61-.21-1.055-.586-1.43l-6.61-6.469l-4.382-3.773l5.437.234h22.57l5.438-.234l-4.382%203.773l-6.633%206.47c-.375.374-.563.82-.563%201.429c0%201.219.82%202.062%202.063%202.062c.515%200%201.125-.234%201.523-.632L50.406%2029.57c.469-.445.68-.984.68-1.57c0-.562-.211-1.102-.68-1.57L36.742%2013.047c-.398-.399-1.008-.656-1.523-.656c-1.243%200-2.063.867-2.063%202.086c0%20.585.188%201.054.563%201.43l6.633%206.445l4.382%203.796l-5.437-.234h-22.57l-5.438.234l4.383-3.796l6.633-6.446a2.02%202.02%200%200%200%20.562-1.43c0-1.218-.844-2.085-2.086-2.085c-.492%200-1.101.257-1.5.656L5.617%2026.43c-.469.468-.703%201.008-.703%201.57%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%22M4.914%2028c0%20.586.234%201.125.703%201.57l13.664%2013.407c.399.398%201.008.632%201.5.632c1.242%200%202.086-.843%202.086-2.062c0-.61-.21-1.055-.586-1.43l-6.61-6.469l-4.382-3.773l5.437.234h22.57l5.438-.234l-4.382%203.773l-6.633%206.47c-.375.374-.563.82-.563%201.429c0%201.219.82%202.062%202.063%202.062c.515%200%201.125-.234%201.523-.632L50.406%2029.57c.469-.445.68-.984.68-1.57c0-.562-.211-1.102-.68-1.57L36.742%2013.047c-.398-.399-1.008-.656-1.523-.656c-1.243%200-2.063.867-2.063%202.086c0%20.585.188%201.054.563%201.43l6.633%206.445l4.382%203.796l-5.437-.234h-22.57l-5.438.234l4.383-3.796l6.633-6.446a2.02%202.02%200%200%200%20.562-1.43c0-1.218-.844-2.085-2.086-2.085c-.492%200-1.101.257-1.5.656L5.617%2026.43c-.469.468-.703%201.008-.703%201.57%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/arrow-left-right.svg?color=%231a73e8&size=48