bucket icon

bucket-fill from Bootstrap Icons by The Bootstrap Authors · Fill · MIT Free for personal and commercial use.

Name: bucket-fill
Set: Bootstrap Icons
Style: Fill
Viewbox: 16×16
License: MIT

1 other variant in Bootstrap Icons

The same icon in other sets

bucketFont Awesome 6 Solid bucketFont Awesome Solid bucketFluent Emoji bucketFluent Emoji Flat bucketFluent Emoji High Contrast bucketHuge Icons bucketLucide Lab bucketMaterial Design Icons bucketNoto Emoji bucketOpenMoji bucketTabler Icons bucketTwitter Emoji

Use the bucket icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M2.522 5H2a.5.5 0 0 0-.494.574l1.372 9.149A1.5 1.5 0 0 0 4.36 16h7.278a1.5 1.5 0 0 0 1.483-1.277l1.373-9.149A.5.5 0 0 0 14 5h-.522A5.5 5.5 0 0 0 2.522 5m1.005 0a4.5 4.5 0 0 1 8.945 0z"/></svg>

React

import type { SVGProps } from "react";

export function BiBucketFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M2.522 5H2a.5.5 0 0 0-.494.574l1.372 9.149A1.5 1.5 0 0 0 4.36 16h7.278a1.5 1.5 0 0 0 1.483-1.277l1.373-9.149A.5.5 0 0 0 14 5h-.522A5.5 5.5 0 0 0 2.522 5m1.005 0a4.5 4.5 0 0 1 8.945 0z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M2.522 5H2a.5.5 0 0 0-.494.574l1.372 9.149A1.5 1.5 0 0 0 4.36 16h7.278a1.5 1.5 0 0 0 1.483-1.277l1.373-9.149A.5.5 0 0 0 14 5h-.522A5.5 5.5 0 0 0 2.522 5m1.005 0a4.5 4.5 0 0 1 8.945 0z"/></svg>
</template>

CSS

.icon-bucket-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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M2.522%205H2a.5.5%200%200%200-.494.574l1.372%209.149A1.5%201.5%200%200%200%204.36%2016h7.278a1.5%201.5%200%200%200%201.483-1.277l1.373-9.149A.5.5%200%200%200%2014%205h-.522A5.5%205.5%200%200%200%202.522%205m1.005%200a4.5%204.5%200%200%201%208.945%200z%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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M2.522%205H2a.5.5%200%200%200-.494.574l1.372%209.149A1.5%201.5%200%200%200%204.36%2016h7.278a1.5%201.5%200%200%200%201.483-1.277l1.373-9.149A.5.5%200%200%200%2014%205h-.522A5.5%205.5%200%200%200%202.522%205m1.005%200a4.5%204.5%200%200%201%208.945%200z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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