chevron left slash chevron right icon
chevron-left-slash-chevron-right from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- chevron-left-slash-chevron-right
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
Related icons in Framework7 Icons
chevron-compact-downchevron-compact-leftchevron-compact-rightchevron-compact-upchevron-downchevron-down-circlechevron-down-squarechevron-leftchevron-left-2chevron-left-circlechevron-left-squarechevron-rightchevron-right-2chevron-right-circlechevron-right-squarechevron-upchevron-up-chevron-downchevron-up-circlechevron-up-square
Use the chevron left slash chevron right icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M21.766 52.13c.955.267 1.89-.268 2.196-1.3L35.36 11.768c.287-1.031-.19-1.986-1.145-2.272c-.955-.268-1.89.267-2.196 1.298l-11.38 39.064c-.286 1.031.172 1.986 1.127 2.272m18.979-6.931l14.358-12.965c.897-.802.878-2.062 0-2.845L40.745 16.425c-.783-.744-1.871-.725-2.54.02c-.668.744-.553 1.813.21 2.52l13.098 11.837L38.415 42.66c-.764.706-.878 1.776-.21 2.52c.669.745 1.757.745 2.54.02m-25.509.019c.802.725 1.871.706 2.54-.039c.668-.744.572-1.794-.191-2.5L4.487 30.82l13.098-11.856c.763-.707.859-1.757.19-2.52c-.668-.745-1.737-.745-2.539-.02L.878 29.39c-.878.802-.778 2.062 0 2.845Z"/></svg>
React
import type { SVGProps } from "react";
export function F7ChevronLeftSlashChevronRight(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="M21.766 52.13c.955.267 1.89-.268 2.196-1.3L35.36 11.768c.287-1.031-.19-1.986-1.145-2.272c-.955-.268-1.89.267-2.196 1.298l-11.38 39.064c-.286 1.031.172 1.986 1.127 2.272m18.979-6.931l14.358-12.965c.897-.802.878-2.062 0-2.845L40.745 16.425c-.783-.744-1.871-.725-2.54.02c-.668.744-.553 1.813.21 2.52l13.098 11.837L38.415 42.66c-.764.706-.878 1.776-.21 2.52c.669.745 1.757.745 2.54.02m-25.509.019c.802.725 1.871.706 2.54-.039c.668-.744.572-1.794-.191-2.5L4.487 30.82l13.098-11.856c.763-.707.859-1.757.19-2.52c-.668-.745-1.737-.745-2.539-.02L.878 29.39c-.878.802-.778 2.062 0 2.845Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M21.766 52.13c.955.267 1.89-.268 2.196-1.3L35.36 11.768c.287-1.031-.19-1.986-1.145-2.272c-.955-.268-1.89.267-2.196 1.298l-11.38 39.064c-.286 1.031.172 1.986 1.127 2.272m18.979-6.931l14.358-12.965c.897-.802.878-2.062 0-2.845L40.745 16.425c-.783-.744-1.871-.725-2.54.02c-.668.744-.553 1.813.21 2.52l13.098 11.837L38.415 42.66c-.764.706-.878 1.776-.21 2.52c.669.745 1.757.745 2.54.02m-25.509.019c.802.725 1.871.706 2.54-.039c.668-.744.572-1.794-.191-2.5L4.487 30.82l13.098-11.856c.763-.707.859-1.757.19-2.52c-.668-.745-1.737-.745-2.539-.02L.878 29.39c-.878.802-.778 2.062 0 2.845Z"/></svg> </template>
CSS
.icon-chevron-left-slash-chevron-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%22M21.766%2052.13c.955.267%201.89-.268%202.196-1.3L35.36%2011.768c.287-1.031-.19-1.986-1.145-2.272c-.955-.268-1.89.267-2.196%201.298l-11.38%2039.064c-.286%201.031.172%201.986%201.127%202.272m18.979-6.931l14.358-12.965c.897-.802.878-2.062%200-2.845L40.745%2016.425c-.783-.744-1.871-.725-2.54.02c-.668.744-.553%201.813.21%202.52l13.098%2011.837L38.415%2042.66c-.764.706-.878%201.776-.21%202.52c.669.745%201.757.745%202.54.02m-25.509.019c.802.725%201.871.706%202.54-.039c.668-.744.572-1.794-.191-2.5L4.487%2030.82l13.098-11.856c.763-.707.859-1.757.19-2.52c-.668-.745-1.737-.745-2.539-.02L.878%2029.39c-.878.802-.778%202.062%200%202.845Z%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%22M21.766%2052.13c.955.267%201.89-.268%202.196-1.3L35.36%2011.768c.287-1.031-.19-1.986-1.145-2.272c-.955-.268-1.89.267-2.196%201.298l-11.38%2039.064c-.286%201.031.172%201.986%201.127%202.272m18.979-6.931l14.358-12.965c.897-.802.878-2.062%200-2.845L40.745%2016.425c-.783-.744-1.871-.725-2.54.02c-.668.744-.553%201.813.21%202.52l13.098%2011.837L38.415%2042.66c-.764.706-.878%201.776-.21%202.52c.669.745%201.757.745%202.54.02m-25.509.019c.802.725%201.871.706%202.54-.039c.668-.744.572-1.794-.191-2.5L4.487%2030.82l13.098-11.856c.763-.707.859-1.757.19-2.52c-.668-.745-1.737-.745-2.539-.02L.878%2029.39c-.878.802-.778%202.062%200%202.845Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/chevron-left-slash-chevron-right.svg?color=%231a73e8&size=48
