inbox arrow down icon

inbox-arrow-down-20-solid from HeroIcons by Refactoring UI Inc · Solid 20x20 · MIT Free for personal and commercial use.

Name
inbox-arrow-down-20-solid
Set
HeroIcons
Style
Solid 20x20
Viewbox
20×20
License
MIT

3 other variants in HeroIcons

inbox-arrow-downinbox-arrow-down-16-solidinbox-arrow-down-solid

The same icon in other sets

inbox-arrow-downMaterial Design Icons

Related icons in HeroIcons

inbox-stack

Use the inbox arrow down icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="currentColor"><path d="M10 2a.75.75 0 0 1 .75.75v5.59l1.95-2.1a.75.75 0 1 1 1.1 1.02l-3.25 3.5a.75.75 0 0 1-1.1 0L6.2 7.26a.75.75 0 1 1 1.1-1.02l1.95 2.1V2.75A.75.75 0 0 1 10 2"/><path d="M5.273 4.5a1.25 1.25 0 0 0-1.205.918l-1.523 5.52L2.53 11H6a1 1 0 0 1 .894.553l.448.894a1 1 0 0 0 .894.553h3.438a1 1 0 0 0 .86-.49l.606-1.02A1 1 0 0 1 14 11h3.47l-.015-.062l-1.523-5.52a1.25 1.25 0 0 0-1.205-.918h-.977a.75.75 0 0 1 0-1.5h.977a2.75 2.75 0 0 1 2.651 2.019l1.523 5.52q.099.36.099.732V15a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3.73q0-.371.099-.73l1.523-5.521A2.75 2.75 0 0 1 5.273 3h.977a.75.75 0 0 1 0 1.5z"/></g></svg>

React

import type { SVGProps } from "react";

export function HeroiconsInboxArrowDown20Solid(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="currentColor"><path d="M10 2a.75.75 0 0 1 .75.75v5.59l1.95-2.1a.75.75 0 1 1 1.1 1.02l-3.25 3.5a.75.75 0 0 1-1.1 0L6.2 7.26a.75.75 0 1 1 1.1-1.02l1.95 2.1V2.75A.75.75 0 0 1 10 2"/><path d="M5.273 4.5a1.25 1.25 0 0 0-1.205.918l-1.523 5.52L2.53 11H6a1 1 0 0 1 .894.553l.448.894a1 1 0 0 0 .894.553h3.438a1 1 0 0 0 .86-.49l.606-1.02A1 1 0 0 1 14 11h3.47l-.015-.062l-1.523-5.52a1.25 1.25 0 0 0-1.205-.918h-.977a.75.75 0 0 1 0-1.5h.977a2.75 2.75 0 0 1 2.651 2.019l1.523 5.52q.099.36.099.732V15a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3.73q0-.371.099-.73l1.523-5.521A2.75 2.75 0 0 1 5.273 3h.977a.75.75 0 0 1 0 1.5z"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="currentColor"><path d="M10 2a.75.75 0 0 1 .75.75v5.59l1.95-2.1a.75.75 0 1 1 1.1 1.02l-3.25 3.5a.75.75 0 0 1-1.1 0L6.2 7.26a.75.75 0 1 1 1.1-1.02l1.95 2.1V2.75A.75.75 0 0 1 10 2"/><path d="M5.273 4.5a1.25 1.25 0 0 0-1.205.918l-1.523 5.52L2.53 11H6a1 1 0 0 1 .894.553l.448.894a1 1 0 0 0 .894.553h3.438a1 1 0 0 0 .86-.49l.606-1.02A1 1 0 0 1 14 11h3.47l-.015-.062l-1.523-5.52a1.25 1.25 0 0 0-1.205-.918h-.977a.75.75 0 0 1 0-1.5h.977a2.75 2.75 0 0 1 2.651 2.019l1.523 5.52q.099.36.099.732V15a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3.73q0-.371.099-.73l1.523-5.521A2.75 2.75 0 0 1 5.273 3h.977a.75.75 0 0 1 0 1.5z"/></g></svg>
</template>

CSS

.icon-inbox-arrow-down-20-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%2020%2020%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M10%202a.75.75%200%200%201%20.75.75v5.59l1.95-2.1a.75.75%200%201%201%201.1%201.02l-3.25%203.5a.75.75%200%200%201-1.1%200L6.2%207.26a.75.75%200%201%201%201.1-1.02l1.95%202.1V2.75A.75.75%200%200%201%2010%202%22%2F%3E%3Cpath%20d%3D%22M5.273%204.5a1.25%201.25%200%200%200-1.205.918l-1.523%205.52L2.53%2011H6a1%201%200%200%201%20.894.553l.448.894a1%201%200%200%200%20.894.553h3.438a1%201%200%200%200%20.86-.49l.606-1.02A1%201%200%200%201%2014%2011h3.47l-.015-.062l-1.523-5.52a1.25%201.25%200%200%200-1.205-.918h-.977a.75.75%200%200%201%200-1.5h.977a2.75%202.75%200%200%201%202.651%202.019l1.523%205.52q.099.36.099.732V15a2%202%200%200%201-2%202H3a2%202%200%200%201-2-2v-3.73q0-.371.099-.73l1.523-5.521A2.75%202.75%200%200%201%205.273%203h.977a.75.75%200%200%201%200%201.5z%22%2F%3E%3C%2Fg%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%2020%2020%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M10%202a.75.75%200%200%201%20.75.75v5.59l1.95-2.1a.75.75%200%201%201%201.1%201.02l-3.25%203.5a.75.75%200%200%201-1.1%200L6.2%207.26a.75.75%200%201%201%201.1-1.02l1.95%202.1V2.75A.75.75%200%200%201%2010%202%22%2F%3E%3Cpath%20d%3D%22M5.273%204.5a1.25%201.25%200%200%200-1.205.918l-1.523%205.52L2.53%2011H6a1%201%200%200%201%20.894.553l.448.894a1%201%200%200%200%20.894.553h3.438a1%201%200%200%200%20.86-.49l.606-1.02A1%201%200%200%201%2014%2011h3.47l-.015-.062l-1.523-5.52a1.25%201.25%200%200%200-1.205-.918h-.977a.75.75%200%200%201%200-1.5h.977a2.75%202.75%200%200%201%202.651%202.019l1.523%205.52q.099.36.099.732V15a2%202%200%200%201-2%202H3a2%202%200%200%201-2-2v-3.73q0-.371.099-.73l1.523-5.521A2.75%202.75%200%200%201%205.273%203h.977a.75.75%200%200%201%200%201.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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