backward icon

backward-solid from HeroIcons by Refactoring UI Inc · Solid 24x24 · MIT Free for personal and commercial use.

Name: backward-solid
Set: HeroIcons
Style: Solid 24x24
Viewbox: 24×24
License: MIT

3 other variants in HeroIcons

backward backward-16-solid backward-20-solid

The same icon in other sets

backward-filledAnt Design Icons backwardFramework7 Icons backwardFont Awesome 6 Solid backwardFont Awesome Solid backwardJam Icons backwardLine Awesome backwardPrime Icons backwardTDesign Icons backwardUnicons

Use the backward icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M9.195 18.44c1.25.714 2.805-.189 2.805-1.629v-2.34l6.945 3.968c1.25.715 2.805-.188 2.805-1.628V8.69c0-1.44-1.555-2.343-2.805-1.628L12 11.029v-2.34c0-1.44-1.555-2.343-2.805-1.628l-7.108 4.061c-1.26.72-1.26 2.536 0 3.256z"/></svg>

React

import type { SVGProps } from "react";

export function HeroiconsBackwardSolid(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M9.195 18.44c1.25.714 2.805-.189 2.805-1.629v-2.34l6.945 3.968c1.25.715 2.805-.188 2.805-1.628V8.69c0-1.44-1.555-2.343-2.805-1.628L12 11.029v-2.34c0-1.44-1.555-2.343-2.805-1.628l-7.108 4.061c-1.26.72-1.26 2.536 0 3.256z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M9.195 18.44c1.25.714 2.805-.189 2.805-1.629v-2.34l6.945 3.968c1.25.715 2.805-.188 2.805-1.628V8.69c0-1.44-1.555-2.343-2.805-1.628L12 11.029v-2.34c0-1.44-1.555-2.343-2.805-1.628l-7.108 4.061c-1.26.72-1.26 2.536 0 3.256z"/></svg>
</template>

CSS

.icon-backward-solid {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9.195%2018.44c1.25.714%202.805-.189%202.805-1.629v-2.34l6.945%203.968c1.25.715%202.805-.188%202.805-1.628V8.69c0-1.44-1.555-2.343-2.805-1.628L12%2011.029v-2.34c0-1.44-1.555-2.343-2.805-1.628l-7.108%204.061c-1.26.72-1.26%202.536%200%203.256z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9.195%2018.44c1.25.714%202.805-.189%202.805-1.629v-2.34l6.945%203.968c1.25.715%202.805-.188%202.805-1.628V8.69c0-1.44-1.555-2.343-2.805-1.628L12%2011.029v-2.34c0-1.44-1.555-2.343-2.805-1.628l-7.108%204.061c-1.26.72-1.26%202.536%200%203.256z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/heroicons/backward-solid.svg?color=%231a73e8&size=48