bin icon

bin-fill from Keyline Icons by Keyline Icons · Fill · MIT Free for personal and commercial use.

Name: bin-fill
Set: Keyline Icons
Style: Fill
Viewbox: 24×24
License: MIT

7 other variants in Keyline Icons

bin bin-duotone bin-sharp bin-sharp-duotone bin-sharp-fill bin-sharp-two-tone bin-two-tone

The same icon in other sets

Use the bin icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20 6C20.5523 6 21 6.4477 21 7C21 7.5523 20.5523 8 20 8L19 8L19 19C19 21.2091 17.2091 23 15 23L9 23C6.7909 23 5 21.2091 5 19L5 8L4 8C3.4477 8 3 7.5523 3 7C3 6.4477 3.4477 6 4 6L20 6ZM14 1C14.5523 1 15 1.4477 15 2C15 2.5523 14.5523 3 14 3L10 3C9.4477 3 9 2.5523 9 2C9 1.4477 9.4477 1 10 1L14 1Z"/></svg>

React

import type { SVGProps } from "react";

export function KeylineIconsBinFill(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="M20 6C20.5523 6 21 6.4477 21 7C21 7.5523 20.5523 8 20 8L19 8L19 19C19 21.2091 17.2091 23 15 23L9 23C6.7909 23 5 21.2091 5 19L5 8L4 8C3.4477 8 3 7.5523 3 7C3 6.4477 3.4477 6 4 6L20 6ZM14 1C14.5523 1 15 1.4477 15 2C15 2.5523 14.5523 3 14 3L10 3C9.4477 3 9 2.5523 9 2C9 1.4477 9.4477 1 10 1L14 1Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M20 6C20.5523 6 21 6.4477 21 7C21 7.5523 20.5523 8 20 8L19 8L19 19C19 21.2091 17.2091 23 15 23L9 23C6.7909 23 5 21.2091 5 19L5 8L4 8C3.4477 8 3 7.5523 3 7C3 6.4477 3.4477 6 4 6L20 6ZM14 1C14.5523 1 15 1.4477 15 2C15 2.5523 14.5523 3 14 3L10 3C9.4477 3 9 2.5523 9 2C9 1.4477 9.4477 1 10 1L14 1Z"/></svg>
</template>

CSS

.icon-bin-fill {
  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%22M20%206C20.5523%206%2021%206.4477%2021%207C21%207.5523%2020.5523%208%2020%208L19%208L19%2019C19%2021.2091%2017.2091%2023%2015%2023L9%2023C6.7909%2023%205%2021.2091%205%2019L5%208L4%208C3.4477%208%203%207.5523%203%207C3%206.4477%203.4477%206%204%206L20%206ZM14%201C14.5523%201%2015%201.4477%2015%202C15%202.5523%2014.5523%203%2014%203L10%203C9.4477%203%209%202.5523%209%202C9%201.4477%209.4477%201%2010%201L14%201Z%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%22M20%206C20.5523%206%2021%206.4477%2021%207C21%207.5523%2020.5523%208%2020%208L19%208L19%2019C19%2021.2091%2017.2091%2023%2015%2023L9%2023C6.7909%2023%205%2021.2091%205%2019L5%208L4%208C3.4477%208%203%207.5523%203%207C3%206.4477%203.4477%206%204%206L20%206ZM14%201C14.5523%201%2015%201.4477%2015%202C15%202.5523%2014.5523%203%2014%203L10%203C9.4477%203%209%202.5523%209%202C9%201.4477%209.4477%201%2010%201L14%201Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/keyline-icons/bin-fill.svg?color=%231a73e8&size=48