skip back icon

skip-back-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.

Name: skip-back-thin
Set: Phosphor
Style: Thin
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

skip-back skip-back-bold skip-back-duotone skip-back-fill skip-back-light

The same icon in other sets

skip-backCarbon skip-back-fillEva Icons skip-backFeather Icons skip-backHuge Icons skip-backLucide skip-backMyna UI Icons skip-back-fillRemix Icon skip-backTabler Icons

Related icons in Phosphor

skip-back-circle skip-forward skip-forward-circle

Use the skip back icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M197.87 37.52a12 12 0 0 0-12.18.32L60 116.44V40a4 4 0 0 0-8 0v176a4 4 0 0 0 8 0v-76.44l125.69 78.6a12 12 0 0 0 12.18.32a11.69 11.69 0 0 0 6.13-10.36V47.88a11.69 11.69 0 0 0-6.13-10.36M196 208.12a3.8 3.8 0 0 1-2 3.37a4 4 0 0 1-4.06-.11L61.82 131.26a3.83 3.83 0 0 1 0-6.52l128.12-80.12a4 4 0 0 1 2.11-.62a4 4 0 0 1 1.95.51a3.8 3.8 0 0 1 2 3.37Z"/></svg>

React

import type { SVGProps } from "react";

export function PhSkipBackThin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M197.87 37.52a12 12 0 0 0-12.18.32L60 116.44V40a4 4 0 0 0-8 0v176a4 4 0 0 0 8 0v-76.44l125.69 78.6a12 12 0 0 0 12.18.32a11.69 11.69 0 0 0 6.13-10.36V47.88a11.69 11.69 0 0 0-6.13-10.36M196 208.12a3.8 3.8 0 0 1-2 3.37a4 4 0 0 1-4.06-.11L61.82 131.26a3.83 3.83 0 0 1 0-6.52l128.12-80.12a4 4 0 0 1 2.11-.62a4 4 0 0 1 1.95.51a3.8 3.8 0 0 1 2 3.37Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M197.87 37.52a12 12 0 0 0-12.18.32L60 116.44V40a4 4 0 0 0-8 0v176a4 4 0 0 0 8 0v-76.44l125.69 78.6a12 12 0 0 0 12.18.32a11.69 11.69 0 0 0 6.13-10.36V47.88a11.69 11.69 0 0 0-6.13-10.36M196 208.12a3.8 3.8 0 0 1-2 3.37a4 4 0 0 1-4.06-.11L61.82 131.26a3.83 3.83 0 0 1 0-6.52l128.12-80.12a4 4 0 0 1 2.11-.62a4 4 0 0 1 1.95.51a3.8 3.8 0 0 1 2 3.37Z"/></svg>
</template>

CSS

.icon-skip-back-thin {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M197.87%2037.52a12%2012%200%200%200-12.18.32L60%20116.44V40a4%204%200%200%200-8%200v176a4%204%200%200%200%208%200v-76.44l125.69%2078.6a12%2012%200%200%200%2012.18.32a11.69%2011.69%200%200%200%206.13-10.36V47.88a11.69%2011.69%200%200%200-6.13-10.36M196%20208.12a3.8%203.8%200%200%201-2%203.37a4%204%200%200%201-4.06-.11L61.82%20131.26a3.83%203.83%200%200%201%200-6.52l128.12-80.12a4%204%200%200%201%202.11-.62a4%204%200%200%201%201.95.51a3.8%203.8%200%200%201%202%203.37Z%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M197.87%2037.52a12%2012%200%200%200-12.18.32L60%20116.44V40a4%204%200%200%200-8%200v176a4%204%200%200%200%208%200v-76.44l125.69%2078.6a12%2012%200%200%200%2012.18.32a11.69%2011.69%200%200%200%206.13-10.36V47.88a11.69%2011.69%200%200%200-6.13-10.36M196%20208.12a3.8%203.8%200%200%201-2%203.37a4%204%200%200%201-4.06-.11L61.82%20131.26a3.83%203.83%200%200%201%200-6.52l128.12-80.12a4%204%200%200%201%202.11-.62a4%204%200%200%201%201.95.51a3.8%203.8%200%200%201%202%203.37Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/skip-back-thin.svg?color=%231a73e8&size=48