trash can icon

trash-can from Font Awesome 6 Regular by Dave Gandy · Regular · CC-BY-4.0 Attribution required.

Name
trash-can
Set
Font Awesome 6 Regular
Style
Regular
Viewbox
448×512
License
CC BY 4.0

The same icon in other sets

trash-canAkar Iconstrash-canCarbontrash-canFont Awesome 6 Solidtrash-canFont Awesome Regulartrash-canFont Awesome Solidtrash-canMaterial Design Icons

Use the trash can icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="m170.5 51.6l-19 28.4h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6h-93.7c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6l36.7 55H424c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8v304c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128h-8c-13.3 0-24-10.7-24-24s10.7-24 24-24h69.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128v304c0 17.7 14.3 32 32 32h224c17.7 0 32-14.3 32-32V128zm80 64v208c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16m80 0v208c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16m80 0v208c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16"/></svg>

React

import type { SVGProps } from "react";

export function Fa6RegularTrashCan(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="m170.5 51.6l-19 28.4h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6h-93.7c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6l36.7 55H424c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8v304c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128h-8c-13.3 0-24-10.7-24-24s10.7-24 24-24h69.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128v304c0 17.7 14.3 32 32 32h224c17.7 0 32-14.3 32-32V128zm80 64v208c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16m80 0v208c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16m80 0v208c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="m170.5 51.6l-19 28.4h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6h-93.7c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6l36.7 55H424c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8v304c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128h-8c-13.3 0-24-10.7-24-24s10.7-24 24-24h69.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128v304c0 17.7 14.3 32 32 32h224c17.7 0 32-14.3 32-32V128zm80 64v208c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16m80 0v208c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16m80 0v208c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16"/></svg>
</template>

CSS

.icon-trash-can {
  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%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m170.5%2051.6l-19%2028.4h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6h-93.7c-2.7%200-5.2%201.3-6.7%203.6zm147-26.6l36.7%2055H424c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024h-8v304c0%2044.2-35.8%2080-80%2080H112c-44.2%200-80-35.8-80-80V128h-8c-13.3%200-24-10.7-24-24s10.7-24%2024-24h69.8l36.7-55.1C140.9%209.4%20158.4%200%20177.1%200h93.7c18.7%200%2036.2%209.4%2046.6%2024.9zM80%20128v304c0%2017.7%2014.3%2032%2032%2032h224c17.7%200%2032-14.3%2032-32V128zm80%2064v208c0%208.8-7.2%2016-16%2016s-16-7.2-16-16V192c0-8.8%207.2-16%2016-16s16%207.2%2016%2016m80%200v208c0%208.8-7.2%2016-16%2016s-16-7.2-16-16V192c0-8.8%207.2-16%2016-16s16%207.2%2016%2016m80%200v208c0%208.8-7.2%2016-16%2016s-16-7.2-16-16V192c0-8.8%207.2-16%2016-16s16%207.2%2016%2016%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%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m170.5%2051.6l-19%2028.4h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6h-93.7c-2.7%200-5.2%201.3-6.7%203.6zm147-26.6l36.7%2055H424c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024h-8v304c0%2044.2-35.8%2080-80%2080H112c-44.2%200-80-35.8-80-80V128h-8c-13.3%200-24-10.7-24-24s10.7-24%2024-24h69.8l36.7-55.1C140.9%209.4%20158.4%200%20177.1%200h93.7c18.7%200%2036.2%209.4%2046.6%2024.9zM80%20128v304c0%2017.7%2014.3%2032%2032%2032h224c17.7%200%2032-14.3%2032-32V128zm80%2064v208c0%208.8-7.2%2016-16%2016s-16-7.2-16-16V192c0-8.8%207.2-16%2016-16s16%207.2%2016%2016m80%200v208c0%208.8-7.2%2016-16%2016s-16-7.2-16-16V192c0-8.8%207.2-16%2016-16s16%207.2%2016%2016m80%200v208c0%208.8-7.2%2016-16%2016s-16-7.2-16-16V192c0-8.8%207.2-16%2016-16s16%207.2%2016%2016%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa6-regular/trash-can.svg?color=%231a73e8&size=48