arrow right arrow left icon

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

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

The same icon in other sets

Related icons in Framework7 Icons

Use the arrow right arrow left icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M50.148 16.363c0-1.218-.867-2.11-2.085-2.11H17.664l-5.508.259l4.454-3.797l6.75-6.61c.374-.351.562-.82.562-1.43c0-1.194-.82-2.062-2.062-2.062c-.516 0-1.126.258-1.524.657L6.555 14.793c-.469.445-.703.984-.703 1.57c0 .563.234 1.102.703 1.547l13.781 13.547a2.27 2.27 0 0 0 1.524.633c1.242 0 2.062-.844 2.062-2.063c0-.609-.188-1.054-.562-1.43l-6.75-6.585l-4.454-3.797l5.508.234h30.399c1.218 0 2.085-.867 2.085-2.086m0 23.274a2.04 2.04 0 0 0-.703-1.57l-13.78-13.524c-.4-.398-1.009-.656-1.5-.656c-1.267 0-2.087.867-2.087 2.086c0 .586.211 1.054.586 1.43l6.75 6.585l4.43 3.797l-5.485-.234H7.938c-1.196 0-2.086.867-2.086 2.086s.89 2.086 2.086 2.086H38.36l5.484-.235l-4.43 3.797l-6.75 6.586a1.94 1.94 0 0 0-.586 1.43c0 1.218.82 2.086 2.086 2.086c.492 0 1.102-.258 1.5-.657l13.781-13.523a2.04 2.04 0 0 0 .703-1.57"/></svg>

React

import type { SVGProps } from "react";

export function F7ArrowRightArrowLeft(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="M50.148 16.363c0-1.218-.867-2.11-2.085-2.11H17.664l-5.508.259l4.454-3.797l6.75-6.61c.374-.351.562-.82.562-1.43c0-1.194-.82-2.062-2.062-2.062c-.516 0-1.126.258-1.524.657L6.555 14.793c-.469.445-.703.984-.703 1.57c0 .563.234 1.102.703 1.547l13.781 13.547a2.27 2.27 0 0 0 1.524.633c1.242 0 2.062-.844 2.062-2.063c0-.609-.188-1.054-.562-1.43l-6.75-6.585l-4.454-3.797l5.508.234h30.399c1.218 0 2.085-.867 2.085-2.086m0 23.274a2.04 2.04 0 0 0-.703-1.57l-13.78-13.524c-.4-.398-1.009-.656-1.5-.656c-1.267 0-2.087.867-2.087 2.086c0 .586.211 1.054.586 1.43l6.75 6.585l4.43 3.797l-5.485-.234H7.938c-1.196 0-2.086.867-2.086 2.086s.89 2.086 2.086 2.086H38.36l5.484-.235l-4.43 3.797l-6.75 6.586a1.94 1.94 0 0 0-.586 1.43c0 1.218.82 2.086 2.086 2.086c.492 0 1.102-.258 1.5-.657l13.781-13.523a2.04 2.04 0 0 0 .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="M50.148 16.363c0-1.218-.867-2.11-2.085-2.11H17.664l-5.508.259l4.454-3.797l6.75-6.61c.374-.351.562-.82.562-1.43c0-1.194-.82-2.062-2.062-2.062c-.516 0-1.126.258-1.524.657L6.555 14.793c-.469.445-.703.984-.703 1.57c0 .563.234 1.102.703 1.547l13.781 13.547a2.27 2.27 0 0 0 1.524.633c1.242 0 2.062-.844 2.062-2.063c0-.609-.188-1.054-.562-1.43l-6.75-6.585l-4.454-3.797l5.508.234h30.399c1.218 0 2.085-.867 2.085-2.086m0 23.274a2.04 2.04 0 0 0-.703-1.57l-13.78-13.524c-.4-.398-1.009-.656-1.5-.656c-1.267 0-2.087.867-2.087 2.086c0 .586.211 1.054.586 1.43l6.75 6.585l4.43 3.797l-5.485-.234H7.938c-1.196 0-2.086.867-2.086 2.086s.89 2.086 2.086 2.086H38.36l5.484-.235l-4.43 3.797l-6.75 6.586a1.94 1.94 0 0 0-.586 1.43c0 1.218.82 2.086 2.086 2.086c.492 0 1.102-.258 1.5-.657l13.781-13.523a2.04 2.04 0 0 0 .703-1.57"/></svg>
</template>

CSS

.icon-arrow-right-arrow-left {
  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%22M50.148%2016.363c0-1.218-.867-2.11-2.085-2.11H17.664l-5.508.259l4.454-3.797l6.75-6.61c.374-.351.562-.82.562-1.43c0-1.194-.82-2.062-2.062-2.062c-.516%200-1.126.258-1.524.657L6.555%2014.793c-.469.445-.703.984-.703%201.57c0%20.563.234%201.102.703%201.547l13.781%2013.547a2.27%202.27%200%200%200%201.524.633c1.242%200%202.062-.844%202.062-2.063c0-.609-.188-1.054-.562-1.43l-6.75-6.585l-4.454-3.797l5.508.234h30.399c1.218%200%202.085-.867%202.085-2.086m0%2023.274a2.04%202.04%200%200%200-.703-1.57l-13.78-13.524c-.4-.398-1.009-.656-1.5-.656c-1.267%200-2.087.867-2.087%202.086c0%20.586.211%201.054.586%201.43l6.75%206.585l4.43%203.797l-5.485-.234H7.938c-1.196%200-2.086.867-2.086%202.086s.89%202.086%202.086%202.086H38.36l5.484-.235l-4.43%203.797l-6.75%206.586a1.94%201.94%200%200%200-.586%201.43c0%201.218.82%202.086%202.086%202.086c.492%200%201.102-.258%201.5-.657l13.781-13.523a2.04%202.04%200%200%200%20.703-1.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%22M50.148%2016.363c0-1.218-.867-2.11-2.085-2.11H17.664l-5.508.259l4.454-3.797l6.75-6.61c.374-.351.562-.82.562-1.43c0-1.194-.82-2.062-2.062-2.062c-.516%200-1.126.258-1.524.657L6.555%2014.793c-.469.445-.703.984-.703%201.57c0%20.563.234%201.102.703%201.547l13.781%2013.547a2.27%202.27%200%200%200%201.524.633c1.242%200%202.062-.844%202.062-2.063c0-.609-.188-1.054-.562-1.43l-6.75-6.585l-4.454-3.797l5.508.234h30.399c1.218%200%202.085-.867%202.085-2.086m0%2023.274a2.04%202.04%200%200%200-.703-1.57l-13.78-13.524c-.4-.398-1.009-.656-1.5-.656c-1.267%200-2.087.867-2.087%202.086c0%20.586.211%201.054.586%201.43l6.75%206.585l4.43%203.797l-5.485-.234H7.938c-1.196%200-2.086.867-2.086%202.086s.89%202.086%202.086%202.086H38.36l5.484-.235l-4.43%203.797l-6.75%206.586a1.94%201.94%200%200%200-.586%201.43c0%201.218.82%202.086%202.086%202.086c.492%200%201.102-.258%201.5-.657l13.781-13.523a2.04%202.04%200%200%200%20.703-1.57%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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